:root {
    --desktop-bg: #f5f7fc;
    --desktop-surface: #ffffff;
    --desktop-surface-soft: #f8fafc;
    --desktop-surface-muted: #eef2ff;
    --desktop-border: rgba(148, 163, 184, 0.18);
    --desktop-border-strong: rgba(111, 90, 252, 0.28);
    --desktop-text: #1f2937;
    --desktop-text-soft: #64748b;
    --desktop-text-muted: #6b7280;
    --desktop-heading: #1f2a44;
    --desktop-primary: #6f5afc;
    --desktop-primary-soft: rgba(111, 90, 252, 0.12);
    --desktop-success: #16a34a;
    --desktop-success-rgb: 22, 163, 74;
    --desktop-success-text: #0e8f5d;
    --desktop-warning: #f59e0b;
    --desktop-danger: #ef4444;
    --desktop-danger-rgb: 239, 68, 68;
    --desktop-danger-text: #b91c1c;
    --desktop-info: #0ea5e9;
    --desktop-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    --desktop-shadow-soft: 0 6px 18px rgba(15, 23, 42, 0.06);
    --desktop-radius-xl: 24px;
    --desktop-radius-lg: 20px;
    --desktop-radius-md: 16px;
    --desktop-radius-sm: 12px;
    --desktop-radius-control: 14px;
    --desktop-sidebar-width: 270px;
    --desktop-sidebar-collapsed: 80px;
    --desktop-topbar-height: 76px;
    --desktop-transition: all 0.22s ease;

    /* Alinha os utilitarios do Bootstrap (text-*, bg-*, badge) a paleta do design system */
    --bs-primary: #6f5afc;
    --bs-primary-rgb: 111, 90, 252;
    --bs-success-rgb: 22, 163, 74;
    --bs-danger-rgb: 239, 68, 68;
    --bs-secondary-rgb: 100, 116, 139;
    --bs-secondary-color: #6b7280;
}

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

/*
 * Utilitarios de texto do Bootstrap com contraste acessivel sobre fundo claro.
 * Os preenchimentos (.bg-*, .badge, .text-bg-*) usam a paleta base via --bs-*-rgb
 * no :root; aqui garantimos que o TEXTO danger/success fique legivel (>= WCAG AA).
 */
.text-danger {
    color: var(--desktop-danger-text) !important;
}

.text-success {
    color: var(--desktop-success-text) !important;
}

html {
    font-size: 87.5%;
}

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

body {
    margin: 0;
    font-family: "Plus Jakarta Sans", Inter, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--desktop-text);
    background:
        radial-gradient(circle at top left, rgba(111, 90, 252, 0.06), transparent 26%),
        radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.05), transparent 30%),
        var(--desktop-bg);
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

.desktop-body {
    min-height: 100vh;
}

.desktop-body-embedded {
    background: var(--desktop-bg);
}

.desktop-body.is-page-transitioning {
    overflow: hidden;
}

.desktop-shell {
    min-height: 100vh;
}

.desktop-embedded-shell {
    min-height: 100vh;
    padding: 1.25rem;
}

.desktop-page-loader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(245, 247, 252, 0.72);
    backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

.desktop-page-loader.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.desktop-page-loader-card {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    min-width: min(90vw, 360px);
    padding: 1rem 1.15rem;
    border-radius: var(--desktop-radius-lg);
    background: var(--desktop-surface);
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
}

.desktop-page-loader-spinner {
    width: 2.1rem;
    height: 2.1rem;
    flex-shrink: 0;
    color: var(--desktop-primary);
}

.desktop-page-loader-copy {
    display: grid;
    gap: 0.12rem;
}

.desktop-page-loader-copy strong {
    color: var(--desktop-heading);
    font-size: 0.98rem;
    font-weight: 800;
}

.desktop-page-loader-copy span {
    color: var(--desktop-text-soft);
    font-size: 0.86rem;
    line-height: 1.35;
}

.desktop-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    width: var(--desktop-sidebar-width);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.8rem 0.72rem 0.72rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.96)),
        var(--desktop-surface);
    border-right: 1px solid var(--desktop-border);
    box-shadow: var(--desktop-shadow-soft);
    overflow: hidden;
    overscroll-behavior: contain;
    transition: var(--desktop-transition);
}

.desktop-sidebar.is-collapsed {
    width: var(--desktop-sidebar-collapsed);
}

.desktop-sidebar.is-hidden {
    transform: translateX(-100%);
    box-shadow: none;
}

.desktop-sidebar.is-hidden.is-open {
    transform: translateX(0);
    box-shadow: var(--desktop-shadow-soft);
}

.desktop-main.is-full {
    margin-left: 0;
}

.desktop-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 1035;
    display: none;
    background: rgba(15, 23, 42, 0.42);
}

.desktop-sidebar-overlay.is-open {
    display: block;
}

.desktop-sidebar.is-collapsed .desktop-brand-copy,
.desktop-sidebar.is-collapsed .desktop-nav-section-label,
.desktop-sidebar.is-collapsed .desktop-nav-link span {
    display: none;
}

/* Em collapsed, esconder submenus POR PADRÃO (regra mais específica) */
.desktop-sidebar.is-collapsed .desktop-nav-group:not(.is-open) .desktop-nav-sublist {
    display: none !important;
}

/* Submenus abertos em collapsed: dropdown absoluto elegante */
.desktop-sidebar.is-collapsed .desktop-nav-group.is-open .desktop-nav-sublist {
    position: fixed !important;
    left: 0;
    top: 0;
    width: 220px;
    max-width: min(260px, calc(100vw - 1rem));
    max-height: calc(100vh - 1rem);
    display: grid !important;
    flex-direction: unset;
    gap: 0.26rem;
    padding: 0.5rem 0 !important;
    margin: 0 !important;
    background: var(--desktop-surface);
    border: 1px solid var(--desktop-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    z-index: 10001;
    overflow-y: auto;
}

/* Manter separadores de seção visualmente em collapsed */
.desktop-sidebar.is-collapsed .desktop-nav-section + .desktop-nav-section {
    padding-top: 0.5rem;
    border-top: 1px solid var(--desktop-border-soft);
}

.desktop-sidebar.is-collapsed .desktop-brand {
    justify-content: center;
}

.desktop-sidebar.is-collapsed .desktop-nav-link {
    justify-content: center;
    margin-inline: 0.3rem;
    padding: 0.5rem 0.6rem;
    min-width: 44px;
    min-height: 44px;
    position: relative;
}

.desktop-sidebar.is-collapsed .desktop-nav-link:hover {
    border-left-color: transparent;
    box-shadow: inset 0 0 0 1.5px rgba(111, 90, 252, 0.2);
    background: rgba(111, 90, 252, 0.06);
}

.desktop-sidebar.is-collapsed .desktop-nav-link.is-active {
    border-left-color: transparent;
    box-shadow: inset 0 0 0 2px rgba(111, 90, 252, 0.3),
                0 0 8px rgba(111, 90, 252, 0.15);
    background: rgba(111, 90, 252, 0.08);
    color: var(--desktop-primary);
}

/* Grupos em collapsed precisam de position relative para posicionar submenus */
.desktop-sidebar.is-collapsed .desktop-nav-group {
    position: relative;
    z-index: 10000;
}

.desktop-sidebar.is-collapsed .desktop-nav-group-head {
    position: relative;
    justify-content: center;
}

.desktop-sidebar.is-collapsed .desktop-nav-group-chevron {
    display: inline-flex;
    position: absolute;
    right: 0.35rem;
    top: 50%;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(111, 90, 252, 0.12);
    background: rgba(111, 90, 252, 0.08);
    color: var(--desktop-primary);
    opacity: 0.95;
    pointer-events: none;
    transform: translateY(-50%) rotate(-90deg);
}

.desktop-sidebar.is-collapsed .desktop-nav-group.is-open .desktop-nav-group-chevron {
    background: rgba(111, 90, 252, 0.16);
    border-color: rgba(111, 90, 252, 0.18);
}

.desktop-sidebar.is-collapsed .desktop-nav-group-head:hover .desktop-nav-group-chevron,
.desktop-sidebar.is-collapsed .desktop-nav-group-head:focus-visible .desktop-nav-group-chevron {
    background: rgba(111, 90, 252, 0.18);
    border-color: rgba(111, 90, 252, 0.24);
    opacity: 1;
}

/* Tooltip em modo collapsed — aparece ao hover */
.desktop-sidebar.is-collapsed .desktop-nav-link:hover::after,
.desktop-sidebar.is-collapsed .desktop-nav-sublink:hover::after {
    content: attr(data-label);
    position: absolute;
    left: 100%;
    top: 50%;
    margin-left: 0.8rem;
    transform: translateY(-50%);
    background: var(--desktop-heading);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    z-index: 10000;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
    animation: tooltip-fadeIn 0.15s ease;
}

/* Sublinks também precisam de position relative */
.desktop-sidebar.is-collapsed .desktop-nav-sublink {
    position: relative;
    margin-inline: 0.5rem;
    padding: 0.55rem 0.8rem;
    width: calc(100% - 1rem);
    justify-content: flex-start;
    font-size: 0.9rem;
}

@keyframes tooltip-fadeIn {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

.desktop-sidebar.is-collapsed .desktop-nav-group-head:hover::after,
.desktop-sidebar.is-collapsed .desktop-nav-group-head:focus-visible::after {
    content: attr(data-label);
    position: absolute;
    left: 100%;
    top: 50%;
    margin-left: 0.8rem;
    transform: translateY(-50%);
    background: var(--desktop-heading);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    z-index: 10000;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
    animation: tooltip-fadeIn 0.15s ease;
}

.desktop-sidebar.is-collapsed .desktop-nav-group-head .desktop-nav-link:hover::after,
.desktop-sidebar.is-collapsed .desktop-nav-group-head .desktop-nav-link:focus-visible::after {
    content: none;
}

.desktop-sidebar-header,
.desktop-topbar-search,
.desktop-profile-chip,
.surface-card,
.surface-table,
.desktop-form-card,
.summary-card,
.stats-card,
.empty-state-shell,
.modal-shell,
.desktop-login-copy-card,
.desktop-login-panel,
.dashboard-chart-card {
    background: var(--desktop-surface);
    border: 1px solid var(--desktop-border);
    box-shadow: var(--desktop-shadow-soft);
}

.desktop-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.88rem 0.85rem;
    border-radius: var(--desktop-radius-lg);
}

.desktop-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.desktop-brand-mark,
.desktop-avatar,
.desktop-profile-avatar {
    width: 42px;
    height: 42px;
    border-radius: var(--desktop-radius-control);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(111, 90, 252, 0.15), rgba(14, 165, 233, 0.12));
    border: 1px solid rgba(111, 90, 252, 0.08);
    color: var(--desktop-primary);
}

.desktop-profile-avatar.has-photo {
    padding: 0;
    overflow: hidden;
    background: var(--desktop-surface);
}

.desktop-profile-avatar.has-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.desktop-brand-mark.has-logo {
    background: var(--desktop-surface);
    padding: 4px;
}

.desktop-brand-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.desktop-brand-copy {
    min-width: 0;
}

.desktop-brand-copy strong {
    display: block;
    font-size: 0.96rem;
    line-height: 1.1;
}

.desktop-brand-copy small,
.desktop-profile-copy small {
    color: var(--desktop-text-soft);
}

.sidebar-toggle,
.mobile-sidebar-toggle,
.desktop-icon-button {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #f3f4f6;
    color: #64748b;
    transition: var(--desktop-transition);
}

.sidebar-toggle:hover,
.mobile-sidebar-toggle:hover,
.desktop-icon-button:hover {
    background: #e9ecf7;
    color: var(--desktop-primary);
}

.desktop-sidebar.is-collapsed .sidebar-toggle {
    width: 0;
    min-width: 0;
    height: 0;
    margin: 0;
    border-width: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateX(0.35rem);
    pointer-events: none;
}

.desktop-sidebar.is-collapsed:hover .sidebar-toggle,
.desktop-sidebar.is-collapsed:focus-within .sidebar-toggle,
.desktop-sidebar.is-collapsed .sidebar-toggle:focus-visible {
    width: 38px;
    min-width: 38px;
    height: 38px;
    margin: 0;
    border-width: 1px;
    padding: 0;
    overflow: visible;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.desktop-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.1rem 0.1rem 0.2rem;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
}

.desktop-nav::-webkit-scrollbar {
    width: 10px;
}

.desktop-nav::-webkit-scrollbar-track {
    background: transparent;
}

.desktop-nav::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background-color: rgba(148, 163, 184, 0.38);
    background-clip: content-box;
}

.desktop-nav::-webkit-scrollbar-thumb:hover {
    background-color: rgba(148, 163, 184, 0.56);
}

.desktop-nav-section + .desktop-nav-section {
    margin-top: 0.85rem;
}

.desktop-nav-section-label {
    display: inline-flex;
    margin: 0 0 0.44rem 0.45rem;
    color: var(--desktop-text-muted);
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

.desktop-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.26rem;
}

.desktop-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.72rem 0.82rem;
    border-radius: 15px;
    color: var(--desktop-text-soft);
    font-weight: 600;
    border: 1px solid transparent;
    transition: var(--desktop-transition);
}

.desktop-nav-link i {
    font-size: 1rem;
    width: 18px;
    text-align: center;
}

.desktop-nav-link:hover {
    color: var(--desktop-primary);
    background: linear-gradient(90deg, rgba(111, 90, 252, 0.09), rgba(111, 90, 252, 0.04));
    border-color: rgba(111, 90, 252, 0.12);
}

.desktop-nav-link.is-active {
    color: var(--desktop-primary);
    background: linear-gradient(90deg, rgba(111, 90, 252, 0.14), rgba(111, 90, 252, 0.05));
    border-color: rgba(111, 90, 252, 0.18);
    border-left: 4px solid var(--desktop-primary);
    padding-left: calc(0.82rem - 4px);
    box-shadow: 0 8px 20px rgba(111, 90, 252, 0.08);
}

.desktop-nav-group {
    display: grid;
    gap: 0.26rem;
}

.desktop-nav-group:not(.is-open) .desktop-nav-sublist {
    display: none;
}

.desktop-nav-group-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.06rem;
    border: 0;
    border-radius: 18px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: var(--desktop-transition);
}

.desktop-nav-group-head .desktop-nav-link {
    flex: 1 1 auto;
}

.desktop-nav-group-head:hover .desktop-nav-link,
.desktop-nav-group-head:focus-visible .desktop-nav-link {
    color: var(--desktop-primary);
    background: linear-gradient(90deg, rgba(111, 90, 252, 0.09), rgba(111, 90, 252, 0.04));
    border-color: rgba(111, 90, 252, 0.12);
}

.desktop-nav-group-head:hover .desktop-nav-group-chevron,
.desktop-nav-group-head:focus-visible .desktop-nav-group-chevron {
    color: var(--desktop-primary);
    background: rgba(111, 90, 252, 0.08);
}

.desktop-nav-group-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    color: var(--desktop-text-muted);
    transition: var(--desktop-transition);
}

.desktop-nav-group.is-open .desktop-nav-group-chevron {
    transform: rotate(180deg);
    color: var(--desktop-primary);
    background: rgba(111, 90, 252, 0.1);
}

.desktop-nav-sublist {
    list-style: none;
    margin: 0;
    padding: 0 0 0 0.92rem;
    display: grid;
    gap: 0.28rem;
}

.desktop-nav-subitem {
    margin: 0;
}

.desktop-nav-sublink {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.62rem 0.82rem;
    border-radius: var(--desktop-radius-control);
    color: var(--desktop-text-soft);
    font-size: 0.95rem;
    font-weight: 600;
    border: 1px solid transparent;
    transition: var(--desktop-transition);
}

.desktop-nav-sublink i {
    width: 16px;
    text-align: center;
    font-size: 0.95rem;
}

.desktop-nav-sublink:hover {
    color: var(--desktop-primary);
    background: rgba(111, 90, 252, 0.08);
    border-color: rgba(111, 90, 252, 0.12);
}

.desktop-nav-sublink.is-active {
    color: var(--desktop-primary);
    background: rgba(111, 90, 252, 0.14);
    border-color: rgba(111, 90, 252, 0.18);
}

.desktop-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--desktop-primary);
    background: var(--desktop-primary-soft);
}

.desktop-chip-success {
    color: var(--desktop-success-text);
    background: rgba(var(--desktop-success-rgb), 0.14);
}

.desktop-chip-warning {
    color: #b45309;
    background: rgba(245, 158, 11, 0.16);
}

.desktop-chip-danger {
    color: var(--desktop-danger-text);
    background: rgba(var(--desktop-danger-rgb), 0.14);
}

/* Central documental da OS (orders/documents-center) ------------------- */

.doc-action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    padding: 0.85rem 1rem;
    border: 1px solid var(--desktop-border);
    border-radius: var(--desktop-radius-lg);
    background: var(--desktop-surface-soft);
}

.doc-action-bar #docActionFormat {
    max-width: 160px;
}

.doc-selection-count {
    font-weight: 700;
    color: var(--desktop-text-soft);
    margin-right: auto;
}

.doc-type-card.is-generating {
    opacity: 0.6;
    pointer-events: none;
}

.doc-version-thumbnail {
    position: relative;
    display: inline-flex;
    width: 64px;
    height: 78px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--desktop-border);
    border-radius: 0.65rem;
    color: var(--desktop-primary);
    background: var(--desktop-surface-soft);
    text-decoration: none;
}

.doc-version-thumbnail:hover {
    border-color: var(--desktop-primary);
    box-shadow: 0 5px 14px rgba(var(--bs-primary-rgb), 0.14);
}

.doc-version-thumbnail.is-unavailable {
    color: var(--desktop-text-muted);
    cursor: default;
    pointer-events: none;
}

.doc-version-thumbnail > i {
    font-size: 1.45rem;
}

.doc-version-thumbnail > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

.desktop-main {
    min-height: 100vh;
    margin-left: var(--desktop-sidebar-width);
    display: flex;
    flex-direction: column;
    background: var(--desktop-bg);
    transition: var(--desktop-transition);
}

.desktop-main.is-expanded {
    margin-left: var(--desktop-sidebar-collapsed);
}

.desktop-main.is-full.is-expanded {
    margin-left: 0;
}

.desktop-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: var(--desktop-topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--desktop-border);
}

.desktop-topbar-left {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.desktop-topbar-copy {
    min-width: 0;
}

.desktop-eyebrow {
    margin: 0 0 0.2rem;
    color: var(--desktop-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.desktop-page-title {
    margin: 0;
    font-size: 1.14rem;
    font-weight: 800;
    color: var(--desktop-heading);
}

.desktop-page-subtitle {
    margin: 0.1rem 0 0;
    color: var(--desktop-text-soft);
    font-size: 0.88rem;
}

.desktop-topbar-search {
    flex: 1;
    max-width: 560px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.42rem 0.7rem 0.42rem 0.65rem;
    border-radius: var(--desktop-radius-md);
    background: var(--desktop-surface);
    overflow: visible;
}

.surface-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.surface-list {
    display: grid;
    gap: 0.9rem;
}

.surface-list-item {
    display: grid;
    gap: 0.35rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--desktop-border);
    border-radius: var(--desktop-radius-md);
    background: var(--desktop-surface-soft);
}

.equipment-create-form {
    display: grid;
    gap: 1.25rem;
}

.equipment-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.2rem;
}

.equipment-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.82rem 1rem;
    border: 1px solid var(--desktop-border);
    border-radius: 999px;
    background: var(--desktop-surface);
    color: var(--desktop-text-soft);
    font-weight: 700;
    transition: var(--desktop-transition);
}

.equipment-tab-flag {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: var(--desktop-warning);
    box-shadow: 0 0 0 2px var(--desktop-surface);
}

.equipment-tab-flag[hidden] {
    display: none;
}

.equipment-tab.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--desktop-primary), #8b5cf6);
    border-color: transparent;
}

.equipment-tab[data-equipment-tab="cor"] {
    border-color: var(--equipment-tab-color-accent, var(--desktop-border));
}

.equipment-tab[data-equipment-tab="cor"].is-active {
    color: var(--equipment-tab-color-text, #fff);
    background: var(--equipment-tab-color-accent, linear-gradient(135deg, var(--desktop-primary), #8b5cf6));
    border-color: transparent;
}

.equipment-tab-panel {
    display: none;
    margin-top: 1.5rem;
}

.equipment-tab-panel.is-active {
    display: block;
}

.equipment-create-grid {
    row-gap: 1.15rem;
}

.equipment-create-main-grid {
    align-items: start;
}

.field-span-2 {
    grid-column: span 2;
}

.field-span-4 {
    grid-column: 1 / -1;
}

.equipment-inline-field {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    align-items: stretch;
}

.equipment-inline-field .form-control,
.equipment-inline-field .form-select,
.equipment-inline-field .select2-container {
    flex: 1 1 0%;
    min-width: 0;
    width: 0 !important;
}

.equipment-inline-action {
    flex-shrink: 0;
    white-space: nowrap;
    width: 2.65rem;
    height: 2.65rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.equipment-search-results {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    right: 0;
    z-index: 25;
    display: grid;
    gap: 0.35rem;
    padding: 0.55rem;
    border: 1px solid var(--desktop-border);
    border-radius: var(--desktop-radius-md);
    background: var(--desktop-surface);
    box-shadow: var(--desktop-shadow);
}

.equipment-search-item,
.equipment-suggestion-item {
    width: 100%;
    display: grid;
    gap: 0.2rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid transparent;
    border-radius: var(--desktop-radius-control);
    background: var(--desktop-surface-soft);
    text-align: left;
    transition: var(--desktop-transition);
}

.equipment-search-item:hover,
.equipment-suggestion-item:hover {
    border-color: var(--desktop-border-strong);
    background: #f6f4ff;
}

.equipment-search-item span,
.equipment-suggestion-item span,
.equipment-search-empty {
    color: var(--desktop-text-soft);
    font-size: 0.88rem;
}

.equipment-password-mode {
    display: inline-flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.equipment-password-row {
    display: grid;
    gap: 0.7rem;
}

.equipment-password-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

.equipment-password-copy {
    color: var(--desktop-text-soft);
    font-size: 0.9rem;
    line-height: 1.5;
}

.equipment-password-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.75rem;
    margin-bottom: 0.9rem;
}

.equipment-password-toggle {
    padding: 0.72rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--desktop-border);
    background: var(--desktop-surface-soft);
    color: var(--desktop-text-soft);
    font-weight: 700;
}

.equipment-password-toggle.is-active {
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    border-color: transparent;
}

.equipment-password-panel {
    display: none;
}

.equipment-password-panel.is-active {
    display: block;
}

.equipment-password-text-input {
    max-width: 420px;
}

.equipment-password-dots {
    display: grid;
    grid-template-columns: repeat(3, minmax(56px, 72px));
    gap: 0.8rem;
    justify-content: start;
}

.equipment-password-dot {
    width: 72px;
    height: 72px;
    border-radius: var(--desktop-radius-lg);
    border: 1px solid rgba(100, 116, 139, 0.28);
    background: linear-gradient(135deg, #f8fafc, #eef2ff);
    position: relative;
}

.equipment-password-dot::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    transform: translate(-50%, -50%);
    background: rgba(100, 116, 139, 0.35);
}

.equipment-password-dot.is-selected {
    border-color: var(--desktop-primary);
    background: linear-gradient(135deg, rgba(111, 90, 252, 0.18), rgba(59, 130, 246, 0.14));
}

.equipment-password-dot.is-selected::after {
    background: var(--desktop-primary);
}

.equipment-password-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.85rem;
    color: var(--desktop-text-soft);
}

.equipment-collector-card,
.equipment-technical-panel {
    display: grid;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--desktop-border);
    border-radius: var(--desktop-radius-lg);
    background: linear-gradient(180deg, rgba(111, 90, 252, 0.04), rgba(255, 255, 255, 0.96));
    min-width: 0;
}

.equipment-technical-panel.is-hidden {
    display: none;
}

.equipment-collector-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.equipment-collector-code {
    padding: 0.72rem 0.95rem;
    border-radius: var(--desktop-radius-control);
    border: 1px dashed var(--desktop-border-strong);
    background: #fff;
    font-weight: 800;
    min-width: 180px;
}

.equipment-collector-group {
    display: grid;
    gap: 0.6rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--desktop-border);
    min-width: 0;
}

.equipment-collector-group:first-of-type {
    padding-top: 0;
    border-top: none;
}

.equipment-collector-group-title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--desktop-text-soft);
}

.equipment-collector-command {
    display: grid;
    gap: 0.4rem;
    padding: 0.85rem 0.95rem;
    border-radius: var(--desktop-radius-control);
    border: 1px solid var(--desktop-border);
    background: rgba(15, 23, 42, 0.03);
    min-width: 0;
}

.equipment-collector-command-label {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--desktop-text-soft);
}

.equipment-collector-command-row {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    min-width: 0;
}

.equipment-collector-command-row code {
    /* min-width: 0 é o que permite o item flex encolher e o overflow-x
       abaixo realmente rolar dentro da própria caixa, em vez de estourar
       a largura do card (comportamento padrão de flex item é não encolher
       além do conteúdo). */
    flex: 1 1 0%;
    min-width: 0;
    padding: 0.55rem 0.7rem;
    border-radius: var(--desktop-radius-control);
    background: #0f172a;
    color: #e2e8f0;
    overflow-x: auto;
    white-space: pre;
    font-size: 0.82rem;
}

.equipment-collector-command-manual {
    margin-top: 0.15rem;
}

.equipment-collector-command-manual summary {
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--desktop-text-soft);
}

.equipment-collector-command-manual[open] summary {
    margin-bottom: 0.5rem;
}

.equipment-collector-status {
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.72rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: var(--desktop-text-soft);
    font-size: 0.82rem;
    font-weight: 700;
}

.equipment-collector-status[data-status="ready"] {
    color: #065f46;
    background: rgba(16, 185, 129, 0.16);
}

.equipment-collector-status[data-status="snapshot"] {
    color: #065f46;
    background: rgba(16, 185, 129, 0.16);
}

.equipment-collector-status[data-status="warning"] {
    color: #b45309;
    background: rgba(245, 158, 11, 0.18);
}

.equipment-collector-status[data-status="running"] {
    color: #1d4ed8;
    background: rgba(59, 130, 246, 0.16);
}

.equipment-collector-status[data-status="error"] {
    color: var(--desktop-danger-text);
    background: rgba(239, 68, 68, 0.16);
}

.equipment-collector-status[data-status="expired"] {
    color: #b45309;
    background: rgba(245, 158, 11, 0.18);
}

.equipment-collector-status[data-status="consumed"] {
    color: #1d4ed8;
    background: rgba(59, 130, 246, 0.16);
}

.equipment-chip-preset {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.equipment-chip-button {
    padding: 0.48rem 0.72rem;
    border-radius: 999px;
    border: 1px solid var(--desktop-border);
    background: var(--desktop-surface-soft);
    color: var(--desktop-text-soft);
    font-size: 0.82rem;
    font-weight: 700;
}

.equipment-color-grid {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.equipment-color-preview-card {
    display: grid;
    gap: 0.45rem;
    padding: 1rem;
    border: 1px solid var(--desktop-border);
    border-radius: var(--desktop-radius-lg);
    background: var(--desktop-surface-soft);
}

.equipment-color-preview {
    width: 100%;
    min-height: 190px;
    border-radius: var(--desktop-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.equipment-color-input {
    width: 100%;
    max-width: 100%;
    height: 52px;
}

.equipment-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.equipment-color-swatch {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.58rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--desktop-border);
    background: #fff;
    font-weight: 700;
}

.equipment-color-swatch span {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.12);
}

.equipment-photo-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.equipment-photo-required-note {
    margin-top: 0.9rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(111, 90, 252, 0.16);
    border-radius: var(--desktop-radius-md);
    background: rgba(111, 90, 252, 0.05);
    color: var(--desktop-text-soft);
    font-size: 0.9rem;
    line-height: 1.5;
}

.equipment-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.equipment-photo-empty {
    grid-column: 1 / -1;
    display: grid;
    gap: 0.35rem;
    justify-items: center;
    text-align: center;
    padding: 2rem 1rem;
    border: 1px dashed var(--desktop-border-strong);
    border-radius: var(--desktop-radius-lg);
    color: var(--desktop-text-soft);
    background: rgba(111, 90, 252, 0.03);
}

.equipment-photo-empty i {
    font-size: 1.6rem;
    color: var(--desktop-primary);
}

.equipment-photo-card {
    display: grid;
    gap: 0.7rem;
    padding: 0.8rem;
    max-width: 320px;
    border: 1px solid var(--desktop-border);
    border-radius: var(--desktop-radius-lg);
    background: #fff;
}

.equipment-photo-card.is-primary {
    border-color: rgba(111, 90, 252, 0.4);
    box-shadow: 0 0 0 3px rgba(111, 90, 252, 0.08);
}

.equipment-photo-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    border-radius: 16px;
    background: #fff;
}

.equipment-photo-card-body {
    display: grid;
    gap: 0.2rem;
}

.equipment-photo-card-body span {
    color: var(--desktop-text-soft);
    font-size: 0.84rem;
}

.equipment-photo-card-actions {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.equipment-camera-video,
.equipment-crop-image {
    width: 100%;
    max-height: 68vh;
    border-radius: var(--desktop-radius-md);
    background: #111827;
    object-fit: contain;
}

.equipment-crop-image {
    display: block;
    height: 68vh;
}

.equipment-suggestion-panel {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--desktop-border);
    border-radius: var(--desktop-radius-md);
    background: var(--desktop-surface-soft);
}

.equipment-suggestion-results {
    display: grid;
    gap: 0.5rem;
}

.quick-client-avulso-suggestions {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.25rem;
    display: grid;
    gap: 0.15rem;
    padding: 0.35rem;
    border: 1px solid var(--desktop-border);
    border-radius: var(--desktop-radius-md);
    background: var(--desktop-surface, #fff);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 14rem;
    overflow-y: auto;
}

.quick-client-avulso-suggestion {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.6rem;
    border: 0;
    border-radius: var(--desktop-radius-sm, 6px);
    background: transparent;
    font-size: 0.85rem;
    line-height: 1.3;
    color: inherit;
    cursor: pointer;
}

.quick-client-avulso-suggestion:hover,
.quick-client-avulso-suggestion:focus {
    background: var(--desktop-surface-soft);
    outline: none;
}

@media (max-width: 992px) {
    .equipment-color-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .field-span-2 {
        grid-column: span 1;
    }

    .field-span-4 {
        grid-column: span 1;
    }

    .equipment-password-toolbar,
    .equipment-password-actions,
    .equipment-password-meta,
    .equipment-collector-actions,
    .equipment-photo-toolbar,
    .surface-card-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .equipment-inline-field {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }

    .equipment-inline-field .form-control,
    .equipment-inline-field .form-select,
    .equipment-inline-field .select2-container {
        width: 100% !important;
        min-width: 0;
        flex: 1 1 auto;
    }

    .equipment-password-text-input {
        max-width: 100%;
    }

    .equipment-password-dots {
        grid-template-columns: repeat(3, minmax(52px, 1fr));
    }

    .equipment-password-dot {
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto;
    }
}

@media (max-width: 430px) {
    .equipment-tabs {
        gap: 0.55rem;
    }

    .equipment-tab {
        width: 100%;
        justify-content: center;
    }

    .equipment-search-results {
        position: static;
        margin-top: 0.5rem;
    }
}

@media (max-width: 390px) {
    .equipment-collector-code {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 360px) {
    .equipment-password-dots {
        gap: 0.55rem;
    }

    .equipment-photo-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 320px) {
    .equipment-tab,
    .equipment-password-toggle {
        font-size: 0.82rem;
        padding-inline: 0.8rem;
    }
}

.desktop-search-scope {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 36px;
    padding: 0 0.8rem;
    border-radius: var(--desktop-radius-sm);
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    color: #374151;
    font-size: 0.82rem;
    font-weight: 700;
}

.desktop-search-scope.dropdown-toggle::after,
.desktop-profile-chip.dropdown-toggle::after {
    display: none;
}

.desktop-search-icon {
    color: var(--desktop-text-muted);
    font-size: 0.95rem;
}

.desktop-search-input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--desktop-text);
    font-size: 0.92rem;
}

.desktop-search-input::placeholder {
    color: var(--desktop-text-muted);
}

.desktop-search-submit {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: rgba(111, 90, 252, 0.08);
    color: var(--desktop-primary);
    font-size: 1.5rem;
    line-height: 1;
}

.desktop-search-submit:hover {
    background: rgba(111, 90, 252, 0.14);
}

.desktop-search-results {
    position: absolute;
    top: calc(100% + 0.65rem);
    left: 0;
    right: 0;
    z-index: 1090;
    display: grid;
    gap: 0.8rem;
    padding: 0.85rem;
    border-radius: 20px;
    border: 1px solid var(--desktop-border);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(14px);
    max-height: 480px;
    overflow: auto;
}

.desktop-search-loading,
.desktop-search-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 1rem;
    color: var(--desktop-text-soft);
    text-align: center;
}

.desktop-search-group {
    display: grid;
    gap: 0.6rem;
}

.desktop-search-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0 0.2rem;
    color: var(--desktop-heading);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.desktop-search-group-head span {
    color: var(--desktop-text-muted);
}

.desktop-search-group-items {
    display: grid;
    gap: 0.5rem;
}

.desktop-search-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.8rem;
    border-radius: 15px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: #f8fafc;
    transition: var(--desktop-transition);
}

.desktop-search-item:hover {
    border-color: rgba(111, 90, 252, 0.22);
    background: rgba(111, 90, 252, 0.06);
    transform: translateY(-1px);
}

.desktop-search-item-icon,
.desktop-search-item-media {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 12px;
    color: var(--desktop-primary);
    background: rgba(111, 90, 252, 0.1);
}

.desktop-search-item.has-equipment-details {
    align-items: flex-start;
}

.desktop-search-item.has-equipment-details .desktop-search-item-media {
    width: 64px;
    height: 64px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: var(--desktop-surface);
}

.desktop-search-item-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.desktop-search-item-media.is-empty,
.desktop-result-card.has-equipment-details .desktop-result-card-media:not(.has-image) {
    flex-direction: column;
    gap: 0.1rem;
    color: var(--desktop-text-muted);
}

.desktop-search-item-media.is-empty small,
.desktop-result-card-media:not(.has-image) small {
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1;
}

.desktop-search-item-copy {
    display: grid;
    gap: 0.14rem;
    min-width: 0;
    flex: 1;
}

.desktop-search-item-copy strong,
.desktop-search-item-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.desktop-search-item-copy strong {
    color: var(--desktop-heading);
    font-size: 0.92rem;
    font-weight: 800;
}

.desktop-search-item-copy small {
    color: var(--desktop-text-soft);
    font-size: 0.8rem;
}

.desktop-search-item.has-equipment-details .desktop-search-item-copy strong {
    white-space: normal;
}

.desktop-search-equipment-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.18rem 0.65rem;
    margin: 0.15rem 0;
    color: var(--desktop-text-soft);
    font-size: 0.7rem;
}

.desktop-search-equipment-facts span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.desktop-search-equipment-facts b {
    color: var(--desktop-text-muted);
    font-weight: 800;
}

.desktop-search-item-meta {
    color: var(--desktop-text-muted) !important;
    font-size: 0.72rem !important;
}

.desktop-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.desktop-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 1.15rem;
    border-radius: var(--desktop-radius-control);
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 10px 20px rgba(111, 90, 252, 0.18);
}

.desktop-action-button i {
    line-height: 1;
}

.desktop-quick-create-dropdown .dropdown-toggle::after {
    display: none;
}

.desktop-quick-create-menu {
    min-width: 14rem;
}

.desktop-profile-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    border-radius: 999px;
    background: var(--desktop-surface);
    border: 1px solid var(--desktop-border);
    cursor: pointer;
    text-align: left;
    appearance: none;
}

.desktop-profile-copy strong,
.desktop-profile-copy small {
    display: block;
    line-height: 1.1;
}

.desktop-profile-chevron {
    color: var(--desktop-text-muted);
    font-size: 0.8rem;
}

.desktop-notification-dropdown,
.desktop-profile-dropdown {
    position: relative;
}

.desktop-notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--desktop-danger);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 0 2px #fff;
}

.desktop-correspondence-dropdown .desktop-icon-button {
    color: var(--desktop-primary);
}

.desktop-correspondence-dropdown .desktop-notification-badge {
    background: #4f46e5;
}

/* ─── Atalhos de teclado do "+ Novo" ─────────────────────────────────────── */

.desktop-quick-create-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.desktop-shortcut-key {
    flex-shrink: 0;
    padding: 0.1rem 0.4rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: rgba(148, 163, 184, 0.1);
    color: var(--desktop-text-soft);
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.4;
}

/* ─── Favoritos da navbar ─────────────────────────────────────────────────── */

.desktop-favorites-dropdown .desktop-icon-button {
    color: var(--desktop-primary);
}

.desktop-favorites-dropdown .desktop-notification-badge {
    background: var(--desktop-primary);
}

.desktop-favorites-menu {
    width: min(100vw - 2rem, 340px);
}

.desktop-favorites-list {
    display: grid;
    gap: 0.3rem;
    max-height: 360px;
    overflow: auto;
    padding-right: 0.15rem;
}

.desktop-favorites-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.7rem;
    border-radius: 14px;
    border: 1px solid transparent;
    color: var(--desktop-heading);
    text-decoration: none;
    transition: var(--desktop-transition);
}

.desktop-favorites-link:hover,
.desktop-favorites-link:focus-visible {
    background: rgba(111, 90, 252, 0.06);
    border-color: rgba(111, 90, 252, 0.22);
    color: var(--desktop-primary);
}

.desktop-favorites-link > .bi {
    flex-shrink: 0;
    font-size: 1rem;
    color: var(--desktop-primary);
}

.desktop-favorites-link-copy {
    display: grid;
    gap: 0.05rem;
    min-width: 0;
}

.desktop-favorites-link-copy strong {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
}

.desktop-favorites-link-copy small {
    color: var(--desktop-text-soft);
    font-size: 0.72rem;
}

/* A estrela mora ao lado do TÍTULO da página, não na topbar: ela fixa a página
   em que o operador está, e ficar colada no nome dessa página é o que torna a
   ação óbvia. Some sozinha onde não há o que favoritar. */
.desktop-favorite-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    margin-left: 0.4rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--desktop-text-soft);
    font-size: 0.95rem;
    vertical-align: middle;
    transition: var(--desktop-transition);
}

.desktop-favorite-star:hover,
.desktop-favorite-star:focus-visible {
    background: rgba(111, 90, 252, 0.08);
    color: var(--desktop-primary);
}

.desktop-favorite-star.is-active,
.desktop-favorite-star.is-active:hover,
.desktop-favorite-star.is-active:focus-visible {
    color: #f59e0b;
}

.desktop-favorite-star.is-busy,
.desktop-favorite-action.is-busy {
    opacity: 0.55;
    pointer-events: none;
}

.document-signature-pending-anchor {
    scroll-margin-top: 110px;
}

.desktop-notification-menu,
.desktop-profile-menu,
.desktop-search-scope-menu {
    padding: 0.8rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 20px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);
}

.desktop-search-scope-menu {
    min-width: 220px;
}

.desktop-search-scope-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
}

.desktop-search-scope-item input[type="checkbox"] {
    flex-shrink: 0;
    margin: 0;
}

.desktop-search-scope-item.is-all {
    padding-bottom: 0.65rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.desktop-search-scope-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.35rem 1rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid #e5e7eb;
    border-radius: var(--desktop-radius-sm);
    background: #f8fafc;
}

.desktop-search-scope-checklist .desktop-search-scope-item.is-all {
    grid-column: 1 / -1;
}

.desktop-notification-menu {
    width: min(100vw - 2rem, 420px);
}

/* Enquanto portado para o final do <body> (ver initDropdowns em desktop.js), o menu
   sai do stacking context do .desktop-topbar (z-index:1030) e precisa de um z-index
   próprio maior que o da sidebar (1040) e do overlay (1035) para não renderizar por
   baixo desses elementos fixos/sticky. */
.dropdown-menu.is-dropdown-portaled {
    z-index: 1071;
}

.desktop-profile-menu {
    width: 320px;
}

.desktop-dropdown-head,
.desktop-profile-menu-head {
    display: grid;
    gap: 0.2rem;
    padding-bottom: 0.8rem;
    margin-bottom: 0.8rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.desktop-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.desktop-dropdown-head strong,
.desktop-profile-menu-head strong {
    color: var(--desktop-heading);
    font-size: 0.95rem;
    font-weight: 800;
}

.desktop-dropdown-head small,
.desktop-profile-menu-head small,
.desktop-profile-menu-head span {
    color: var(--desktop-text-soft);
    font-size: 0.82rem;
}

.desktop-profile-menu-head span {
    font-weight: 700;
}

.desktop-notification-list {
    display: grid;
    gap: 0.55rem;
    max-height: 360px;
    overflow: auto;
    padding-right: 0.15rem;
}

.desktop-notification-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: #f8fafc;
    transition: var(--desktop-transition);
}

.desktop-notification-item:hover {
    border-color: rgba(111, 90, 252, 0.22);
    background: rgba(111, 90, 252, 0.06);
}

.desktop-notification-item.is-unread {
    border-color: rgba(111, 90, 252, 0.22);
    background: rgba(111, 90, 252, 0.08);
}

.desktop-notification-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    color: var(--desktop-primary);
    background: rgba(111, 90, 252, 0.1);
}

.desktop-notification-copy {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.desktop-notification-copy strong,
.desktop-notification-copy small,
.desktop-notification-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.desktop-notification-copy strong {
    color: var(--desktop-heading);
    font-size: 0.9rem;
    font-weight: 800;
}

.desktop-notification-copy small {
    color: var(--desktop-text-soft);
    font-size: 0.8rem;
    line-height: 1.35;
}

.desktop-notification-copy span {
    color: var(--desktop-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.desktop-notification-empty {
    padding: 1rem;
    color: var(--desktop-text-soft);
    text-align: center;
}

.desktop-notification-footer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.8rem;
    width: 100%;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    color: var(--desktop-primary);
    font-weight: 800;
}

.desktop-notification-page-list {
    display: grid;
    gap: 0.75rem;
}

.desktop-notification-page-item {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0.95rem 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    transition: var(--desktop-transition);
}

.desktop-notification-page-item:hover {
    background: rgba(111, 90, 252, 0.04);
}

.desktop-notification-page-item.is-unread {
    background: rgba(111, 90, 252, 0.06);
}

.desktop-notification-page-copy {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
    flex: 1;
}

.desktop-notification-page-copy strong {
    color: var(--desktop-heading);
    font-size: 0.95rem;
    font-weight: 800;
}

.desktop-notification-page-copy p {
    margin: 0;
    color: var(--desktop-text-soft);
    font-size: 0.88rem;
}

.desktop-notification-page-copy small {
    color: var(--desktop-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.desktop-profile-summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem;
    border-radius: 20px;
    background: var(--desktop-surface-soft);
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.desktop-profile-summary-avatar {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--desktop-radius-lg);
    background: linear-gradient(135deg, rgba(111, 90, 252, 0.14), rgba(14, 165, 233, 0.1));
    color: var(--desktop-primary);
    font-size: 1.75rem;
    font-weight: 800;
}

.desktop-permissions-stack {
    display: grid;
    gap: 0.75rem;
}

.desktop-permission-card {
    padding: 0.95rem;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: var(--desktop-surface-soft);
}

.desktop-permission-card strong {
    display: block;
    margin-bottom: 0.55rem;
    color: var(--desktop-heading);
    font-size: 0.9rem;
    font-weight: 800;
}

.desktop-permission-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.desktop-result-stack {
    display: grid;
    gap: 0.7rem;
}

.desktop-result-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: var(--desktop-surface-soft);
    transition: var(--desktop-transition);
}

.desktop-result-card:hover {
    border-color: rgba(111, 90, 252, 0.22);
    background: rgba(111, 90, 252, 0.06);
}

.desktop-result-card-icon,
.desktop-result-card-media {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--desktop-radius-control);
    background: rgba(111, 90, 252, 0.1);
    color: var(--desktop-primary);
}

.desktop-result-card.has-equipment-details {
    align-items: flex-start;
}

.desktop-result-card.has-equipment-details .desktop-result-card-media {
    width: 84px;
    height: 84px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: var(--desktop-surface);
}

.desktop-result-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.desktop-result-card-copy {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
    flex: 1;
}

.desktop-result-card-copy strong,
.desktop-result-card-copy span,
.desktop-result-card-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
}

.desktop-result-card-copy strong {
    color: var(--desktop-heading);
    font-size: 0.92rem;
    font-weight: 800;
}

.desktop-result-card-copy span {
    color: var(--desktop-text-soft);
    font-size: 0.82rem;
}

.desktop-result-card-copy small {
    color: var(--desktop-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.desktop-result-equipment-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.24rem 0.8rem;
    margin: 0.12rem 0;
}

.desktop-result-equipment-facts span {
    color: var(--desktop-text-soft);
    font-size: 0.75rem;
    white-space: normal;
}

.desktop-result-equipment-facts b {
    color: var(--desktop-text-muted);
    font-weight: 800;
}

@media (max-width: 576px) {
    .desktop-search-equipment-facts,
    .desktop-result-equipment-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .desktop-search-item.has-equipment-details .desktop-search-item-media,
    .desktop-result-card.has-equipment-details .desktop-result-card-media {
        width: 60px;
        height: 60px;
    }
}

.desktop-result-card-arrow {
    color: var(--desktop-text-muted);
    font-size: 1.2rem;
}

.desktop-form-stack label {
    display: inline-block;
    margin-bottom: 0.38rem;
    color: var(--desktop-text-soft);
    font-size: 0.86rem;
    font-weight: 700;
}

.desktop-form-stack {
    display: grid;
    gap: 1rem;
}

.desktop-client-form {
    margin-top: 0.25rem;
}

.desktop-form-intro {
    padding: 1rem 1.05rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: var(--desktop-radius-md);
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.04);
}

.desktop-form-intro-copy {
    max-width: 100%;
}

.desktop-form-section {
    display: grid;
    gap: 0.9rem;
}

.desktop-form-section-title {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--desktop-text-soft);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.desktop-form-section-title i {
    color: var(--desktop-primary);
    font-size: 0.95rem;
}

.desktop-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.15rem;
}

.desktop-grid-span-2,
.col-span-2 {
    grid-column: 1 / -1;
}

.desktop-content {
    flex: 1 0 auto;
    padding: 1.25rem;
}

.desktop-system-footer {
    flex-shrink: 0;
    padding: 0 1.25rem 1rem;
}

.desktop-system-footer-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.78rem 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.desktop-system-footer-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.8rem;
    text-align: center;
    color: var(--desktop-text-soft);
    font-size: 0.78rem;
    font-weight: 500;
}

.desktop-system-footer-credit,
.desktop-system-footer-copyright {
    white-space: nowrap;
}

.desktop-page-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.25rem 0;
}

.desktop-page-hero h2 {
    margin: 0;
    color: var(--desktop-heading);
    font-size: clamp(1.75rem, 2vw, 2.25rem);
    line-height: 1.05;
    font-weight: 800;
}

.desktop-page-hero p {
    margin: 0.35rem 0 0;
    color: var(--desktop-text-soft);
    font-size: 0.95rem;
}

.desktop-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.desktop-grid {
    display: grid;
    gap: 1rem;
}

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

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

.desktop-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.desktop-grid-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stats-card,
.surface-card,
.surface-table,
.desktop-form-card,
.summary-card,
.empty-state-shell,
.modal-shell,
.desktop-login-copy-card,
.desktop-login-panel,
.dashboard-chart-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--desktop-radius-lg);
}

.stats-card {
    min-height: 165px;
    padding: 1.15rem 1.15rem 1rem;
}

.stats-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--card-accent, var(--desktop-primary));
}

.stats-card::after {
    content: '';
    position: absolute;
    inset: auto 1rem 1rem auto;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(111, 90, 252, 0.08), transparent 70%);
}

.stats-card-label {
    display: block;
    color: var(--desktop-text-soft);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.stats-card-value {
    margin: 0.8rem 0 0.35rem;
    font-size: 2rem;
    font-weight: 800;
    color: var(--desktop-heading);
}

.stats-card-meta {
    max-width: 80%;
    color: var(--desktop-text-soft);
    font-size: 0.88rem;
    line-height: 1.45;
}

.stats-card-icon {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--desktop-radius-md);
    color: rgba(111, 90, 252, 0.18);
    font-size: 1.55rem;
}

.surface-card,
.desktop-form-card,
.surface-table,
.summary-card,
.dashboard-chart-card {
    padding: 1.15rem;
}

.surface-card-header,
.surface-table-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.surface-title {
    margin: 0;
    color: var(--desktop-heading);
    font-size: 1.08rem;
    font-weight: 800;
}

.surface-subtitle {
    margin: 0.25rem 0 0;
    color: var(--desktop-text-soft);
    font-size: 0.9rem;
}

/* Bloco de busca da listagem de OS: cresce para dar espaco ao campo, com o
   botao "Filtrar" logo ao lado (input-group). */
.os-search-block {
    flex: 1 1 420px;
    max-width: 560px;
}

.os-search-block .input-group .btn {
    white-space: nowrap;
}

.os-filter-summary-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: calc(0.86rem * 1.2 + 0.38rem);
}

.os-filter-summary-actions .desktop-chip,
.os-filter-summary-actions .btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
}

.os-filter-summary-actions .desktop-chip {
    padding-right: 0.9rem;
    padding-left: 0.9rem;
}

.os-filter-summary-actions .btn {
    padding-right: 1rem;
    padding-left: 1rem;
}

.os-filter-summary-actions .os-filter-toggle.is-active,
.desktop-filter-advanced-toggle .btn.is-active {
    color: var(--desktop-primary);
    background: linear-gradient(135deg, rgba(111, 90, 252, 0.14), rgba(56, 104, 176, 0.1));
    border-color: rgba(111, 90, 252, 0.34);
    box-shadow: 0 0.55rem 1.2rem rgba(56, 104, 176, 0.1);
    cursor: default;
}

.os-filter-summary-actions .os-filter-toggle.is-active:hover,
.desktop-filter-advanced-toggle .btn.is-active:hover {
    color: var(--desktop-primary);
    background: linear-gradient(135deg, rgba(111, 90, 252, 0.18), rgba(56, 104, 176, 0.13));
    border-color: rgba(111, 90, 252, 0.42);
}

.os-filter-active-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    margin-left: 0.15rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    color: #fff;
    background: var(--desktop-primary);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
}

@media (max-width: 768px) {
    .os-filter-summary-actions {
        padding-top: 0;
    }
}

.desktop-config-tabs-shell {
    padding: 1rem 1rem 1.05rem;
}

.desktop-config-tabs {
    margin-bottom: 0;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.desktop-config-tabs .nav-link {
    border-radius: 999px;
    border: 1px solid transparent;
    color: var(--desktop-text-soft);
    font-weight: 700;
    transition: var(--desktop-transition);
}

.desktop-config-tabs .nav-link.active {
    border-color: rgba(111, 90, 252, 0.16);
    box-shadow: 0 10px 24px rgba(111, 90, 252, 0.08);
}

.desktop-config-tabs .nav-link:disabled {
    opacity: 0.48;
}

.config-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1rem 0 0;
}

.config-subtab {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1rem;
    border: 1px solid var(--desktop-border);
    border-radius: 999px;
    background: var(--desktop-surface);
    color: var(--desktop-text-soft);
    font-weight: 700;
    font-size: 0.88rem;
    transition: var(--desktop-transition);
}

.config-subtab.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--desktop-primary), #8b5cf6);
    border-color: transparent;
}

.config-subpanel {
    display: none;
    margin-top: 1.25rem;
}

.config-subpanel.is-active {
    display: block;
}

.desktop-config-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0;
}

.desktop-config-grid {
    align-items: start;
}

.desktop-config-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.desktop-config-section {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    padding-top: 0.25rem;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.desktop-config-summary-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.desktop-config-summary-item {
    padding: 0.85rem 0.95rem;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.98));
}

.desktop-config-summary-label {
    display: block;
    color: var(--desktop-text-soft);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.desktop-config-summary-item strong {
    display: block;
    margin-top: 0.28rem;
    color: var(--desktop-text);
    font-size: 0.98rem;
    font-weight: 800;
}

.desktop-config-summary-item small {
    display: block;
    margin-top: 0.3rem;
    color: var(--desktop-text-soft);
    font-size: 0.82rem;
    line-height: 1.45;
}

.desktop-config-preview {
    position: sticky;
    top: 1rem;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.desktop-config-preview-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.desktop-config-preview-box {
    min-height: 240px;
    border-radius: 20px;
    border: 1px dashed rgba(111, 90, 252, 0.2);
    background:
        radial-gradient(circle at top right, rgba(111, 90, 252, 0.08), transparent 40%),
        linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(255, 255, 255, 0.98));
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.desktop-config-preview-image {
    width: 100%;
    max-height: 260px;
    object-fit: contain;
    border-radius: 16px;
    background: #fff;
}

.desktop-config-preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 190px;
    text-align: center;
    color: var(--desktop-text-soft);
}

.desktop-config-preview-placeholder i {
    font-size: 2.15rem;
    color: var(--desktop-primary);
}

.desktop-config-preview-placeholder strong {
    color: var(--desktop-text);
    font-size: 1rem;
}

.desktop-config-preview-placeholder span {
    max-width: 26ch;
    font-size: 0.88rem;
    line-height: 1.5;
}

.desktop-config-preview-list {
    display: grid;
    gap: 0.65rem;
}

.desktop-config-preview-list div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.72rem 0.85rem;
    border-radius: var(--desktop-radius-control);
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: #fff;
}

.desktop-config-preview-list span {
    color: var(--desktop-text-soft);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.desktop-config-preview-list strong {
    color: var(--desktop-text);
    font-size: 0.95rem;
    word-break: break-word;
}

.desktop-config-preview-status {
    padding: 0.85rem 0.95rem;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(111, 90, 252, 0.05);
    color: var(--desktop-heading);
    font-size: 0.92rem;
    line-height: 1.5;
}

.desktop-config-preview-status[data-tone="success"] {
    border-color: rgba(22, 163, 74, 0.22);
    background: rgba(22, 163, 74, 0.08);
}

.desktop-config-preview-status[data-tone="warning"] {
    border-color: rgba(245, 158, 11, 0.24);
    background: rgba(245, 158, 11, 0.09);
}

.desktop-config-preview-status[data-tone="danger"] {
    border-color: rgba(239, 68, 68, 0.24);
    background: rgba(239, 68, 68, 0.08);
}

.desktop-config-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.25rem;
}

.desktop-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

.desktop-filter-grid .field-actions {
    display: flex;
    align-items: end;
    gap: 0.7rem;
}

.desktop-filter-advanced-toggle {
    display: flex;
    align-items: flex-end;
    grid-column: 1 / -1;
}

.desktop-filter-advanced-panel {
    grid-column: 1 / -1;
    margin-top: 0.75rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.desktop-order-quickfilters {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px dashed rgba(148, 163, 184, 0.18);
}

.desktop-order-quickfilters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.65rem;
}

.desktop-order-quickfilters-label {
    font-weight: 600;
    font-size: 0.85rem;
}

.desktop-order-quickfilters-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.desktop-order-quickset-btn.is-active {
    color: var(--desktop-primary);
    background: linear-gradient(135deg, rgba(111, 90, 252, 0.14), rgba(56, 104, 176, 0.1));
    border-color: rgba(111, 90, 252, 0.34);
}

.desktop-order-multiselect-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.desktop-order-status-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 14rem;
    overflow-y: auto;
    padding: 0.65rem 0.85rem;
    border: 1px solid #e5e7eb;
    border-radius: var(--desktop-radius-sm);
    background: #f8fafc;
}

.desktop-order-status-group {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.desktop-order-status-group + .desktop-order-status-group {
    margin-top: 0.3rem;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.desktop-order-status-group-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
}

.desktop-order-macro-checklist {
    max-height: 14rem;
    overflow-y: auto;
}

#osTableContainer.is-os-table-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.os-select-column {
    width: 2.5rem;
}

.batch-closure-order-list {
    max-height: 18rem;
    overflow-y: auto;
}

.batch-closure-order-list .list-group-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.batch-closure-order-list .list-group-item-empty {
    color: var(--bs-secondary-color, #64748b);
    text-align: center;
}

.os-photo-cell {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.os-dates-cell,
.os-status-cell,
.os-value-cell {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.os-badge-novo {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--desktop-primary), #8b5cf6);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left: 0.4rem;
    animation: os-badge-pulse 1.8s ease-in-out 2;
}

@keyframes os-badge-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}

.desktop-form-card label,
.modal-shell label {
    display: inline-block;
    margin-bottom: 0.38rem;
    color: var(--desktop-text-soft);
    font-size: 0.86rem;
    font-weight: 700;
}

.form-control,
.form-select {
    min-height: 46px;
    border-radius: var(--desktop-radius-control);
    border: 1px solid #dbe2ee;
    background: #ffffff;
    color: var(--desktop-text);
    box-shadow: none;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(111, 90, 252, 0.35);
    box-shadow: 0 0 0 0.2rem rgba(111, 90, 252, 0.12);
}

.select2-container {
    width: 100% !important;
    max-width: 100%;
}

.select2-container--bootstrap-5 .select2-selection,
.select2-container--default .select2-selection {
    min-height: 46px;
    border-radius: var(--desktop-radius-control);
    border: 1px solid #dbe2ee;
    background: #ffffff;
    box-shadow: none;
}

.select2-container--bootstrap-5 .select2-selection--single,
.select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 44px;
    padding-left: 0.85rem;
    padding-right: 2rem;
    color: var(--desktop-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--desktop-text-muted);
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow,
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px;
    right: 0.35rem;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow b,
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--desktop-text-muted) transparent transparent transparent;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear,
.select2-container--default .select2-selection--single .select2-selection__clear {
    margin-right: 0.4rem;
    color: var(--desktop-text-soft);
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem 0.3rem;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: var(--desktop-primary-soft);
    color: var(--desktop-primary);
    padding: 0.22rem 0.55rem;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection,
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection {
    border-color: rgba(111, 90, 252, 0.35);
    box-shadow: 0 0 0 0.2rem rgba(111, 90, 252, 0.12);
}

.select2-dropdown {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: var(--desktop-radius-control);
    box-shadow: var(--desktop-shadow-soft);
    overflow: hidden;
}

.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field,
.select2-container--default .select2-search--dropdown .select2-search__field {
    border-radius: 12px;
    border: 1px solid #dbe2ee;
    padding: 0.55rem 0.75rem;
}

.select2-results__option {
    padding: 0.65rem 0.85rem;
}

.order-create-equipment-result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.order-create-equipment-result-thumb {
    flex-shrink: 0;
}

.order-create-equipment-result-content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.order-create-equipment-result-title {
    display: block;
    color: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.35;
    word-break: break-word;
}

.order-create-equipment-result-meta {
    color: var(--desktop-text-soft);
    font-size: 0.8rem;
    line-height: 1.35;
    word-break: break-word;
}

.order-create-equipment-frame {
    display: block;
    width: 100%;
    min-height: 78vh;
    border: 0;
    background: #fff;
}

.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected] .order-create-equipment-result-meta,
.select2-container--default .select2-results__option--highlighted[aria-selected] .order-create-equipment-result-meta {
    color: rgba(255, 255, 255, 0.84);
}

.select2-container--bootstrap-5 .select2-results__option[aria-selected="true"] .order-create-equipment-result-meta,
.select2-container--default .select2-results__option[aria-selected="true"] .order-create-equipment-result-meta {
    color: var(--desktop-text-soft);
}

.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--desktop-primary);
    color: #fff;
}

.select2-container--bootstrap-5 .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[aria-selected="true"] {
    background: rgba(111, 90, 252, 0.08);
    color: var(--desktop-primary);
}

.form-control::placeholder {
    color: var(--desktop-text-muted);
}

.form-check-input {
    border-color: #cbd5e1;
}

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

.form-control.is-loading {
    background-image: linear-gradient(90deg, transparent, rgba(111, 90, 252, 0.18), transparent);
    background-size: 200% 100%;
    animation: desktop-field-loading 1.1s linear infinite;
}

@keyframes desktop-field-loading {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

.btn {
    border-radius: var(--desktop-radius-control);
    font-weight: 700;
}

.btn-primary {
    background: linear-gradient(135deg, #6f5afc, #8c6dff);
    border-color: transparent;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #624df7, #7b5dfd);
}

.btn-outline-light {
    background: #fff;
    border-color: #d8deea;
    color: #334155;
}

.btn-outline-light:hover {
    border-color: rgba(111, 90, 252, 0.3);
    color: var(--desktop-primary);
    background: rgba(111, 90, 252, 0.05);
}

.btn-soft {
    background: rgba(111, 90, 252, 0.08);
    color: var(--desktop-primary);
    border: 1px solid rgba(111, 90, 252, 0.12);
}

.table {
    margin-bottom: 0;
    color: var(--desktop-text);
    --bs-table-bg: transparent;
    --bs-table-color: var(--desktop-text);
    --bs-table-border-color: rgba(148, 163, 184, 0.16);
}

.table > :not(caption) > * > * {
    padding: 0.95rem 0.9rem;
    color: inherit;
    background: transparent;
    vertical-align: middle;
}

.table thead th {
    color: var(--desktop-text-soft);
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.table tbody tr:hover > * {
    background: rgba(111, 90, 252, 0.04);
}

.table-stack td[data-label]::before {
    display: none;
}

.budget-items-table {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0 0.9rem;
}

.budget-items-table thead {
    display: none;
}

.budget-item-card-cell {
    padding: 1rem 1.05rem !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 252, 0.96));
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 22px;
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.06);
}

.budget-items-table tbody tr:hover > .budget-item-card-cell {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(241, 245, 249, 0.98));
    border-color: rgba(111, 90, 252, 0.24);
}

.budget-item-layout {
    display: grid;
    gap: 0.8rem;
}

.budget-item-line {
    display: grid;
    gap: 0.8rem 0.9rem;
}

.budget-item-line-primary {
    grid-template-columns: 96px minmax(280px, 1.45fr) minmax(240px, 1fr);
    align-items: start;
}

.budget-item-line-financial {
    grid-template-columns: 72px 124px 176px 176px 120px max-content;
    align-items: start;
}

.budget-item-line-notes {
    grid-template-columns: minmax(0, 1fr);
}

.budget-item-field {
    display: grid;
    gap: 0.38rem;
    min-width: 0;
}

.budget-item-field-label {
    color: var(--desktop-text-soft);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.1;
    text-transform: uppercase;
}

.budget-item-field .select2-container {
    width: 100% !important;
}

.budget-adjustment-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
}

.budget-adjustment-group > .budget-adjustment-input {
    flex: 1 1 auto;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.budget-adjustment-group .form-control {
    min-height: 2.65rem;
}

.budget-adjustment-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 0 0 88px;
    width: 88px;
    min-width: 88px;
    max-width: 88px;
    margin-left: -1px;
}

.budget-adjustment-toggle-btn {
    min-height: 2.65rem;
    padding: 0 0.45rem;
    border: 1px solid rgba(56, 104, 176, 0.2);
    background: #fff;
    color: var(--desktop-text-soft);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.budget-adjustment-toggle-btn:first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.budget-adjustment-toggle-btn:last-child {
    border-left: 0;
    border-top-right-radius: 0.9rem;
    border-bottom-right-radius: 0.9rem;
}

.budget-adjustment-toggle-btn:hover {
    background: rgba(56, 104, 176, 0.06);
    color: var(--desktop-primary);
}

.budget-adjustment-toggle-btn:focus-visible {
    position: relative;
    z-index: 2;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(111, 90, 252, 0.16);
}

.budget-adjustment-toggle-btn.is-active {
    background: rgba(111, 90, 252, 0.1);
    border-color: rgba(111, 90, 252, 0.28);
    color: var(--desktop-primary);
}

.budget-adjustment-toggle-btn.is-active + .budget-adjustment-toggle-btn {
    border-left-color: rgba(111, 90, 252, 0.28);
}

.budget-adjustment-preview {
    display: grid;
    gap: 0.25rem;
    margin-top: 0.45rem;
}

.budget-adjustment-preview[hidden] {
    display: none !important;
}

.budget-adjustment-preview-label {
    color: var(--desktop-text-soft);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.1;
    text-transform: uppercase;
}

.budget-adjustment-preview-input.form-control[readonly] {
    min-height: 2.4rem;
    background: rgba(56, 104, 176, 0.05);
    border-color: rgba(56, 104, 176, 0.16);
    color: var(--desktop-text);
    font-weight: 700;
}

.budget-summary-card {
    margin-top: 1.25rem;
    padding: 1.2rem 1.2rem 1.3rem;
    border: 1px solid rgba(56, 104, 176, 0.14);
    border-radius: 1.35rem;
    background:
        radial-gradient(circle at top right, rgba(111, 90, 252, 0.1), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.96));
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.08);
}

.budget-summary-card-header {
    padding-bottom: 0.95rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(56, 104, 176, 0.12);
}

.budget-summary-card-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.65rem;
}

.budget-summary-result-pill {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.42rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(111, 90, 252, 0.18);
    background: rgba(111, 90, 252, 0.12);
    color: var(--desktop-primary);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.budget-summary-grid {
    align-items: start;
}

.budget-summary-grid > div > label {
    color: var(--desktop-heading);
    font-weight: 800;
}

.budget-summary-total-field .form-control[readonly] {
    min-height: 3rem;
    background: linear-gradient(135deg, rgba(111, 90, 252, 0.14), rgba(56, 104, 176, 0.12));
    border-color: rgba(111, 90, 252, 0.24);
    color: var(--desktop-heading);
    font-size: 1.08rem;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.budget-item-field-total .form-control {
    background: rgba(111, 90, 252, 0.06);
    border-color: rgba(111, 90, 252, 0.18);
    color: var(--desktop-primary);
    font-weight: 800;
}

.budget-review-modal .modal-header,
.budget-review-modal .modal-body,
.budget-review-modal .modal-footer {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.budget-review-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
    align-items: start;
}

.budget-review-grid-bottom {
    margin-bottom: 0;
}

.budget-review-col {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.budget-review-card {
    display: grid;
    gap: 0.95rem;
    padding: 1rem 1.05rem;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(248, 250, 252, 0.9);
    align-content: start;
}

.budget-review-card-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.budget-review-card-head h5 {
    margin: 0;
    font-size: 1rem;
    color: var(--desktop-heading);
}

.budget-review-list,
.budget-review-totals,
.budget-review-notes,
.budget-review-items {
    display: grid;
    gap: 0.75rem;
}

.budget-review-list-item,
.budget-review-note-block {
    display: grid;
    gap: 0.28rem;
    padding: 0.8rem 0.9rem;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: #fff;
}

.budget-review-list-item span,
.budget-review-note-block span,
.budget-review-item-head span,
.budget-review-item-meta span {
    color: var(--desktop-text-soft);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.budget-review-list-item strong,
.budget-review-note-block strong {
    color: var(--desktop-heading);
    font-size: 0.96rem;
    overflow-wrap: anywhere;
}

.budget-review-item {
    display: grid;
    gap: 0.7rem;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: #fff;
}

.budget-review-item-head,
.budget-review-item-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
}

.budget-review-item-head strong:last-child {
    font-size: 1.02rem;
}

.budget-review-item-meta {
    padding-top: 0.3rem;
    border-top: 1px dashed rgba(148, 163, 184, 0.24);
}

.budget-review-item-notes {
    margin: 0;
    color: var(--desktop-text-soft);
    line-height: 1.5;
}

.budget-review-pendencies {
    display: grid;
    gap: 0.9rem;
    padding: 1rem 1.05rem;
    border-radius: 20px;
    border: 1px solid rgba(239, 68, 68, 0.18);
    background: rgba(239, 68, 68, 0.08);
    color: #991b1b;
    margin-bottom: 1rem;
}

.budget-review-pendencies-head {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.budget-review-pendencies-head i {
    font-size: 1.1rem;
    margin-top: 0.1rem;
}

.budget-review-pendencies ul {
    margin: 0;
    padding-left: 1.1rem;
}

.budget-review-pendencies li + li {
    margin-top: 0.35rem;
}

.budget-review-empty {
    padding: 1rem;
    border-radius: 16px;
    border: 1px dashed rgba(148, 163, 184, 0.24);
    color: var(--desktop-text-soft);
    background: rgba(255, 255, 255, 0.84);
}

.budget-review-footer-copy {
    margin-right: auto;
    max-width: 420px;
    color: var(--desktop-text-soft);
    font-size: 0.88rem;
    line-height: 1.5;
}

.budget-item-field-notes textarea {
    min-height: 4.8rem;
    resize: vertical;
}

.budget-item-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
}

.budget-item-field-actions {
    justify-self: end;
}

.budget-item-quick-action,
.budget-item-remove-action {
    min-height: 2.65rem;
    padding-inline: 0.95rem;
    font-weight: 800;
}

.budget-item-remove-action {
    white-space: nowrap;
}

@media (max-width: 1480px) {
    .budget-item-line-primary {
        grid-template-columns: 96px minmax(260px, 1.35fr) minmax(220px, 1fr);
        align-items: start;
    }

    .budget-item-line-financial {
        grid-template-columns: 72px 120px 168px 168px 116px max-content;
        align-items: start;
    }
}

@media (max-width: 1180px) {
    .budget-item-line-primary {
        grid-template-columns: 104px minmax(0, 1fr);
    }

    .budget-item-field-description {
        grid-column: 1 / -1;
    }

    .budget-item-line-financial {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .budget-item-field-actions {
        grid-column: 1 / -1;
        justify-self: stretch;
    }

    .budget-item-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 992px) {
    .budget-item-card-cell {
        padding: 0.95rem !important;
    }

    .budget-summary-card {
        padding: 1rem;
    }

    .budget-summary-card-header {
        gap: 0.85rem;
    }

    .budget-summary-card-meta {
        justify-content: flex-start;
    }

    .budget-review-grid {
        grid-template-columns: 1fr;
    }

    .budget-item-line-primary,
    .budget-item-line-financial {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .budget-item-field-type,
    .budget-item-field-reference,
    .budget-item-field-description,
    .budget-item-field-actions {
        grid-column: 1 / -1;
        justify-self: stretch;
    }
}

@media (max-width: 768px) {
    .budget-items-table {
        border-spacing: 0 0.75rem;
    }

    .budget-item-line-primary,
    .budget-item-line-financial {
        grid-template-columns: 1fr;
    }

    .budget-item-field-type,
    .budget-item-field-reference,
    .budget-item-field-description,
    .budget-item-field-actions {
        grid-column: auto;
        justify-self: stretch;
    }

    .budget-item-actions {
        justify-content: stretch;
    }

    .budget-item-quick-action,
    .budget-item-remove-action {
        width: 100%;
        justify-content: center;
    }
}

.client-list-name {
    line-height: 1.15;
}

.client-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.client-count-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.client-count-chip-primary {
    background: rgba(111, 90, 252, 0.12);
    color: var(--desktop-primary);
}

.client-count-chip-muted {
    background: #edf2f7;
    color: #5b6475;
}

.client-row-id {
    color: var(--desktop-text-soft);
    font-size: 0.86rem;
    font-weight: 800;
}

.client-contact-link {
    color: var(--desktop-primary);
    font-weight: 700;
    text-decoration: none;
}

.client-contact-link:hover {
    text-decoration: underline;
}

.equipment-list-name {
    line-height: 1.15;
}

.equipment-list-photo-link,
.equipment-list-photo-placeholder {
    width: 60px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--desktop-radius-md);
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: #f8fafc;
}

.equipment-list-photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #fff;
}

.equipment-list-photo-placeholder {
    color: var(--desktop-text-muted);
    font-size: 1.2rem;
}

.equipment-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.equipment-count-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.equipment-count-chip-primary {
    background: rgba(var(--desktop-success-rgb), 0.12);
    color: var(--desktop-success-text);
}

.equipment-count-chip-muted {
    background: #edf2f7;
    color: #5b6475;
}

.equipment-row-id {
    color: var(--desktop-text-soft);
    font-size: 0.86rem;
    font-weight: 800;
}

.os-actions-dropdown,
.list-actions-dropdown {
    display: inline-flex;
    justify-content: flex-end;
}

.os-actions-toggle,
.list-actions-toggle {
    min-width: 120px;
    justify-content: space-between;
    gap: 0.5rem;
}

.os-actions-toggle.dropdown-toggle::after,
.list-actions-toggle.dropdown-toggle::after {
    display: none;
}

.os-actions-menu,
.list-actions-menu {
    min-width: 16rem;
    max-height: min(32rem, calc(100vh - 6rem));
    padding: 0.55rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 16px;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.14);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.os-actions-menu .dropdown-item,
.list-actions-menu .dropdown-item {
    border-radius: 12px;
    padding: 0.62rem 0.8rem;
    font-size: 0.92rem;
    font-weight: 600;
}

.os-actions-menu .dropdown-item:hover,
.list-actions-menu .dropdown-item:hover {
    background: rgba(var(--desktop-success-rgb), 0.08);
    color: var(--desktop-success-text);
}

.status-pill {
    --status-color: var(--desktop-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    padding: 0.34rem 0.68rem;
    border-radius: 999px;
    border: 1px solid rgba(111, 90, 252, 0.18);
    background: rgba(111, 90, 252, 0.08);
    color: var(--status-color);
    font-size: 0.77rem;
    font-weight: 800;
    white-space: nowrap;
}

.status-pill-sm {
    padding: 0.26rem 0.56rem;
    font-size: 0.72rem;
}

.summary-card {
    min-height: 152px;
}

.summary-card-eyebrow {
    color: var(--desktop-text-soft);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.summary-card-value {
    margin-top: 0.55rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--desktop-heading);
}

.summary-card-meta {
    margin-top: 0.35rem;
    color: var(--desktop-text-soft);
    font-size: 0.9rem;
}

.summary-card.is-highlight {
    border-color: rgba(111, 90, 252, 0.32);
    background: linear-gradient(160deg, rgba(111, 90, 252, 0.12), var(--desktop-surface) 65%);
}

.summary-card.is-highlight .summary-card-eyebrow {
    color: var(--desktop-primary);
}

.summary-card.is-highlight .summary-card-value {
    font-size: 1.35rem;
    color: var(--desktop-primary);
}

.order-create-layout {
    grid-template-columns: minmax(460px, 580px) minmax(0, 1fr);
    align-items: start;
}

.order-create-preview {
    position: sticky;
    top: 1rem;
    align-self: start;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 1rem;
}

.order-create-photo-card,
.order-create-summary-card,
.order-create-workbench {
    border-radius: var(--desktop-radius-lg);
}

.order-create-summary-card {
    flex: 1 1 260px;
}

.order-create-photo-card {
    flex: 1 1 220px;
    padding: 1rem;
}

.order-create-photo-frame {
    aspect-ratio: 4 / 3;
    border-radius: var(--desktop-radius-lg);
    border: 1px dashed rgba(111, 90, 252, 0.2);
    background:
        radial-gradient(circle at top right, rgba(111, 90, 252, 0.08), transparent 40%),
        linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(255, 255, 255, 0.98));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 1rem;
}

.order-create-photo-frame.has-photo {
    padding: 0;
    border-style: solid;
    border-color: var(--desktop-border);
    background: #fff;
}

.order-create-photo-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 16px;
    background: #fff;
}

.order-create-photo-frame.has-photo .order-create-photo-image {
    border-radius: 0;
}

.order-create-photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 180px;
    text-align: center;
    color: var(--desktop-text-soft);
}

.order-create-photo-placeholder i {
    font-size: 2.25rem;
    color: var(--desktop-primary);
}

.order-create-photo-placeholder strong {
    color: var(--desktop-text);
    font-size: 1rem;
}

.order-create-photo-placeholder span {
    max-width: 28ch;
    font-size: 0.88rem;
    line-height: 1.45;
}

.order-create-summary-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.order-create-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.order-create-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.42rem 0.1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.order-create-summary-row:last-child {
    border-bottom: none;
}

.order-create-summary-row-label {
    color: var(--desktop-text-soft);
    font-size: 0.74rem;
    font-weight: 700;
    flex-shrink: 0;
}

.order-create-summary-row-value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    min-width: 0;
}

.order-create-summary-row-text {
    color: var(--desktop-text);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.order-create-summary-row-value-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
    gap: 0.1rem;
}

.order-create-summary-row-subtext {
    color: var(--desktop-text-soft);
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.order-create-summary-row-edit,
.order-create-summary-row-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 0;
    color: var(--desktop-primary);
    background: rgba(111, 90, 252, 0.1);
    font-size: 0.7rem;
    flex-shrink: 0;
    cursor: pointer;
}

.order-create-summary-row-edit:hover,
.order-create-summary-row-info:hover {
    background: rgba(111, 90, 252, 0.18);
}

.order-create-summary-row-icon {
    flex-shrink: 0;
    font-size: 0.95rem;
}

.order-create-summary-row-icon.is-complete {
    color: #16a34a;
}

.order-create-summary-row-icon.is-pending {
    color: var(--desktop-danger-text);
}

.order-create-workbench {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.order-create-tabs {
    margin-bottom: 0;
}

.order-create-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.order-create-field-span-2 {
    grid-column: 1 / -1;
}

.order-create-field,
.order-create-panel-note {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.order-create-panel-note {
    padding: 1rem;
    border-radius: var(--desktop-radius-md);
    border: 1px dashed rgba(111, 90, 252, 0.18);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.98));
}

.order-create-panel-note strong {
    color: var(--desktop-heading);
    font-size: 0.94rem;
    font-weight: 800;
}

.order-create-panel-note p {
    margin: 0;
    color: var(--desktop-text-soft);
    font-size: 0.88rem;
    line-height: 1.5;
}

.order-create-hint {
    color: var(--desktop-text-soft);
    font-size: 0.84rem;
    line-height: 1.45;
}

.order-entry-checklist {
    display: grid;
    gap: 0.9rem;
}

.order-entry-checklist-content {
    display: grid;
    gap: 0.9rem;
}

.order-entry-checklist-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.order-entry-checklist-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.order-entry-checklist-items {
    display: grid;
    gap: 0.65rem;
}

.order-entry-checklist-item {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    gap: 0.75rem;
    align-items: center;
    padding: 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: var(--desktop-radius-md);
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.order-entry-checklist-item-body {
    min-width: 0;
    display: grid;
    gap: 0.22rem;
}

.order-entry-checklist-item-body strong {
    color: var(--desktop-heading);
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.35;
}

.order-entry-checklist-item-body small {
    color: var(--desktop-text-soft);
    font-size: 0.78rem;
}

.order-entry-checklist-item-controls {
    display: grid;
    grid-template-columns: minmax(130px, 0.45fr) minmax(0, 1fr);
    gap: 0.55rem;
}

.order-create-photo-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.order-create-photo-preview-item {
    position: relative;
    display: flex;
    gap: 0.75rem;
    padding: 0.8rem;
    border-radius: var(--desktop-radius-md);
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.order-create-photo-preview-thumb {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(241, 245, 249, 0.92), rgba(255, 255, 255, 1));
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.order-create-photo-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #fff;
}

.order-create-photo-preview-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.order-create-photo-preview-meta strong {
    color: var(--desktop-heading);
    font-size: 0.92rem;
    font-weight: 800;
    word-break: break-word;
}

.order-create-photo-preview-meta small {
    color: var(--desktop-text-soft);
    font-size: 0.8rem;
    line-height: 1.35;
    word-break: break-word;
}

.order-create-photo-preview-remove {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(239, 68, 68, 0.18);
    background: rgba(239, 68, 68, 0.08);
    color: var(--desktop-danger-text);
}

.order-create-photo-preview-remove:hover {
    background: rgba(239, 68, 68, 0.16);
}

.order-create-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 0.2rem;
}

.order-create-footer {
    grid-column: 1 / -1;
    width: 100%;
    padding-top: 1rem;
    border-top: 1px solid var(--desktop-border);
}

.order-create-actions-option {
    flex: 1 1 640px;
    min-width: 0;
    margin-right: auto;
}

.order-create-footer-buttons {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex: 0 0 auto;
}

.order-create-send-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.85rem;
    min-height: 56px;
    padding: 0.85rem 1rem;
    border: 1px solid var(--desktop-border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.order-create-send-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.order-create-send-toggle-text strong {
    color: var(--desktop-text);
    font-size: 0.95rem;
}

.order-create-send-toggle-text small {
    color: var(--desktop-text-soft);
    line-height: 1.45;
}

.order-create-required-mark {
    color: var(--desktop-danger-text);
    font-weight: 700;
    margin-left: 0.1rem;
}

.order-create-yes-no {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.order-create-yes-no-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--desktop-border);
    background: transparent;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--desktop-text-soft);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.order-create-yes-no-option input[type="radio"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.order-create-yes-no-option:has(input:checked) {
    background: var(--desktop-primary);
    border-color: var(--desktop-primary);
    color: #fff;
}

.order-create-yes-no-option:has(input:focus-visible) {
    outline: 2px solid var(--desktop-primary);
    outline-offset: 2px;
}

.cashflow-view-toggle {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.cashflow-view-toggle .btn.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--desktop-primary), #8b5cf6);
    border-color: transparent;
    box-shadow: 0 16px 32px rgba(111, 90, 252, 0.18);
}

.cashflow-calendar-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cashflow-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.cashflow-calendar-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--desktop-border);
    background: rgba(255, 255, 255, 0.9);
    color: var(--desktop-text-soft);
    font-size: 0.82rem;
    font-weight: 700;
}

.cashflow-calendar-legend-item.is-positive {
    color: var(--desktop-success-text);
}

.cashflow-calendar-legend-item.is-negative {
    color: var(--desktop-danger-text);
}

.cashflow-calendar-legend-item.is-neutral {
    color: #64748b;
}

.cashflow-calendar-scroll {
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.cashflow-calendar-weekdays,
.cashflow-calendar-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.6rem;
    min-width: 820px;
}

.cashflow-calendar-weekdays {
    margin-bottom: 0.55rem;
}

.cashflow-calendar-weekday {
    padding: 0.1rem 0.5rem;
    color: var(--desktop-text-soft);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

.cashflow-calendar-day {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-height: 148px;
    padding: 0.95rem 0.95rem 0.85rem;
    border: 1px solid var(--desktop-border);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
    box-shadow: var(--desktop-shadow-soft);
    transition: var(--desktop-transition);
}

.cashflow-calendar-day::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: var(--cashflow-accent, rgba(148, 163, 184, 0.45));
}

.cashflow-calendar-day.is-current-month {
    --cashflow-accent: rgba(111, 90, 252, 0.55);
}

.cashflow-calendar-day.is-positive {
    --cashflow-accent: rgba(var(--desktop-success-rgb), 0.85);
}

.cashflow-calendar-day.is-negative {
    --cashflow-accent: rgba(239, 68, 68, 0.85);
}

.cashflow-calendar-day.is-neutral {
    --cashflow-accent: rgba(148, 163, 184, 0.65);
}

.cashflow-calendar-day.is-today {
    border-color: rgba(111, 90, 252, 0.65);
    box-shadow: 0 0 0 1px rgba(111, 90, 252, 0.18), var(--desktop-shadow-soft);
}

.cashflow-calendar-day.is-outside-month {
    opacity: 0.45;
    background: linear-gradient(180deg, rgba(244, 246, 250, 0.9), rgba(236, 240, 248, 0.9));
}

.cashflow-calendar-day-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.cashflow-calendar-day-number {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--desktop-heading);
}

.cashflow-calendar-day-balance {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: rgba(111, 90, 252, 0.1);
    color: #5840ff;
    font-size: 0.76rem;
    font-weight: 800;
}

.cashflow-calendar-day-badge {
    min-width: 70px;
    min-height: 1.5rem;
}

.cashflow-calendar-day-metrics {
    display: grid;
    gap: 0.45rem;
}

.cashflow-calendar-day-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    min-height: 42px;
    padding: 0.55rem 0.75rem;
    border-radius: var(--desktop-radius-control);
    border: 1px dashed rgba(148, 163, 184, 0.38);
    background: rgba(148, 163, 184, 0.08);
    color: var(--desktop-text-soft);
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
}

.cashflow-calendar-day-empty i {
    color: var(--desktop-text-muted);
    font-size: 0.92rem;
}

.cashflow-calendar-metric {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--desktop-radius-control);
    background: rgba(248, 250, 252, 0.94);
    color: var(--desktop-text-soft);
    font-size: 0.78rem;
}

.cashflow-calendar-metric strong {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--desktop-heading);
}

.cashflow-calendar-metric.is-positive {
    background: rgba(var(--desktop-success-rgb), 0.08);
    color: var(--desktop-success-text);
}

.cashflow-calendar-metric.is-negative {
    background: rgba(239, 68, 68, 0.08);
    color: var(--desktop-danger-text);
}

.cashflow-calendar-day-note {
    margin-top: auto;
    color: var(--desktop-text-soft);
    font-size: 0.76rem;
    line-height: 1.4;
}

.cashflow-list-amount {
    font-weight: 700;
    line-height: 1.25;
}

.cashflow-list-amount.is-positive {
    color: var(--desktop-success);
}

.cashflow-list-amount.is-negative {
    color: var(--desktop-danger);
}

.cashflow-list-amount.is-summary {
    color: #2563eb;
}

.cashflow-list-amount.is-projected {
    color: var(--desktop-info);
}

.detail-list {
    display: grid;
    gap: 0.9rem;
}

.equipment-detail-side {
    display: grid;
    gap: 1rem;
}

.equipment-detail-photo-card {
    align-self: start;
}

.equipment-detail-photo-link {
    display: block;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: #f8fafc;
}

.equipment-detail-photo-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    display: block;
    background: #fff;
}

.equipment-detail-photo-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.9rem;
    flex-wrap: wrap;
}

.equipment-detail-photo-meta small {
    color: var(--desktop-text-soft);
}

.equipment-detail-photo-placeholder {
    display: grid;
    gap: 0.4rem;
    justify-items: center;
    text-align: center;
    padding: 1.4rem 1rem;
    border: 1px dashed rgba(111, 90, 252, 0.24);
    border-radius: 20px;
    background: rgba(111, 90, 252, 0.03);
    color: var(--desktop-text-soft);
}

.equipment-detail-photo-placeholder i {
    color: var(--desktop-primary);
    font-size: 1.7rem;
}

.detail-item > strong {
    display: inline-block;
    margin-bottom: 0.25rem;
    margin-right: 0.4rem;
    color: var(--desktop-text-soft);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.detail-item > strong::after {
    content: ':';
}

.detail-item span,
.detail-item p {
    margin: 0;
    color: var(--desktop-text);
}

.timeline {
    display: grid;
    gap: 0.85rem;
}

.timeline-item {
    padding: 1rem 1rem 1rem 1.15rem;
    border-left: 4px solid rgba(111, 90, 252, 0.25);
    border-radius: 0 16px 16px 0;
    background: var(--desktop-surface-soft);
}

.timeline-item small {
    color: var(--desktop-text-muted);
}

.timeline-item[data-event-category] {
    border-left-color: var(--event-color, #6f5afc);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--event-color, #6f5afc) 10%, rgba(255, 255, 255, 0.9));
}

.event-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.event-chip {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 38px;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--desktop-border);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(243, 247, 255, 0.96) 100%);
    color: var(--desktop-text-soft);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.event-chip:hover {
    transform: translateY(-1px);
    border-color: var(--event-color, var(--desktop-primary));
    color: var(--desktop-text);
}

.event-chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--event-color, var(--desktop-primary)) 22%, transparent), 0 14px 28px rgba(15, 23, 42, 0.08);
}

.event-chip.is-active {
    border-color: var(--event-color, var(--desktop-primary));
    color: var(--event-color, var(--desktop-primary));
    background: color-mix(in srgb, var(--event-color, var(--desktop-primary)) 10%, white);
    box-shadow: 0 14px 28px color-mix(in srgb, var(--event-color, #6f5afc) 14%, rgba(15, 23, 42, 0.06));
}

.event-chip.is-empty {
    opacity: 0.58;
}

.event-chip-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--event-color, var(--desktop-primary));
    flex: 0 0 auto;
    box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--event-color, var(--desktop-primary)) 18%, transparent);
}

.event-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    padding: 0.14rem 0.38rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.15);
    color: inherit;
    font-size: 0.72rem;
    font-weight: 800;
}

.event-chip.is-active .event-chip-count {
    background: color-mix(in srgb, var(--event-color, var(--desktop-primary)) 16%, white);
}

.event-category-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--event-color, var(--desktop-primary));
    background: color-mix(in srgb, var(--event-color, var(--desktop-primary)) 12%, white);
}

.event-category-pill i {
    font-size: 0.78rem;
}

.event-data {
    margin-left: auto;
}

.event-data summary {
    list-style: none;
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--desktop-text-soft);
}

.event-data summary::-webkit-details-marker {
    display: none;
}

.event-data[open] summary {
    margin-bottom: 0.55rem;
    color: var(--desktop-text);
}

.event-data dl {
    margin: 0;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.18rem 0.85rem;
    font-size: 0.76rem;
}

.event-data dt {
    color: var(--desktop-text-muted);
    font-weight: 700;
    text-transform: capitalize;
}

.event-data dd {
    margin: 0;
    word-break: break-word;
    color: var(--desktop-text);
}

.audit-page {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
}

.audit-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
}

.audit-integrity-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, #16a34a 24%, var(--desktop-border));
    border-radius: 16px;
    background: color-mix(in srgb, #16a34a 8%, var(--desktop-surface));
    color: var(--desktop-text-soft);
    white-space: nowrap;
}

.audit-integrity-badge i {
    color: #16a34a;
    font-size: 1.35rem;
}

.audit-integrity-badge strong {
    color: var(--desktop-text);
}

.audit-snapshot-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.audit-snapshot-card {
    display: grid;
    align-content: start;
    gap: 0.45rem;
    min-width: 0;
    padding: 1rem 1.1rem;
}

.audit-snapshot-card strong,
.audit-snapshot-card small {
    overflow-wrap: anywhere;
}

.audit-snapshot-card small {
    color: var(--desktop-text-muted);
}

.audit-snapshot-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--desktop-text-soft);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.audit-snapshot-label i {
    color: var(--desktop-primary);
    font-size: 0.9rem;
}

.audit-filter-card,
.audit-results-card {
    min-width: 0;
}

.audit-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.9rem;
    align-items: end;
}

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

.audit-filter-submit {
    min-width: 140px;
}

.audit-category-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.audit-category-nav .event-chip {
    text-decoration: none;
}

.audit-event-list {
    display: grid;
    gap: 0.9rem;
}

.audit-event {
    position: relative;
    min-width: 0;
    padding: 1rem 1.1rem 1rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--event-color, #94a3b8) 16%, var(--desktop-border));
    border-left: 4px solid var(--event-color, #94a3b8);
    border-radius: 0 16px 16px 0;
    background: color-mix(in srgb, var(--event-color, #94a3b8) 4%, var(--desktop-surface-soft));
}

.audit-event-heading,
.audit-event-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.85rem;
}

.audit-event-heading time {
    color: var(--desktop-text-muted);
    font-size: 0.78rem;
    white-space: nowrap;
}

.audit-event-heading code {
    padding: 0.22rem 0.48rem;
    border-radius: 7px;
    background: rgba(148, 163, 184, 0.12);
    color: var(--desktop-text-soft);
    font-size: 0.72rem;
    overflow-wrap: anywhere;
}

.audit-event-sequence,
.audit-order-id {
    color: var(--desktop-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.72rem;
}

.audit-event h3 {
    margin: 0.75rem 0 0;
    color: var(--desktop-text);
    font-size: 1rem;
    font-weight: 800;
}

.audit-event > p {
    margin: 0.35rem 0 0;
    color: var(--desktop-text-soft);
    line-height: 1.55;
}

.audit-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1.1rem;
    margin-top: 0.8rem;
    color: var(--desktop-text-muted);
    font-size: 0.78rem;
}

.audit-event-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.audit-event-meta strong {
    color: var(--desktop-text-soft);
}

.audit-event-footer {
    align-items: flex-start;
    margin-top: 0.85rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.audit-provenance {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--desktop-text-muted);
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

.audit-provenance i {
    color: #16a34a;
}

.audit-event-data {
    max-width: min(100%, 760px);
    margin-left: auto;
}

.audit-event-data summary {
    list-style: none;
    color: var(--desktop-primary);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 800;
    text-align: right;
}

.audit-event-data summary::-webkit-details-marker {
    display: none;
}

.audit-event-data[open] {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
}

.audit-event-data[open] summary {
    margin-bottom: 0.7rem;
}

.audit-event-data dl {
    display: grid;
    grid-template-columns: minmax(130px, 0.35fr) minmax(0, 1fr);
    gap: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--desktop-border);
    border-radius: 12px;
    background: var(--desktop-surface);
}

.audit-event-data dt,
.audit-event-data dd {
    min-width: 0;
    margin: 0;
    padding: 0.5rem 0.65rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    font-size: 0.76rem;
    overflow-wrap: anywhere;
}

.audit-event-data dt {
    color: var(--desktop-text-muted);
    font-weight: 800;
    text-transform: capitalize;
}

.audit-event-data dd {
    color: var(--desktop-text);
}

.audit-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.audit-page-link,
.audit-page-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 38px;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--desktop-border);
    border-radius: 10px;
    background: var(--desktop-surface);
    color: var(--desktop-text-soft);
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
}

.audit-page-number {
    min-width: 38px;
}

.audit-page-link:hover,
.audit-page-number:hover,
.audit-page-number.is-active {
    border-color: var(--desktop-primary);
    color: var(--desktop-primary);
    background: color-mix(in srgb, var(--desktop-primary) 8%, var(--desktop-surface));
}

.audit-page-link.is-disabled {
    opacity: 0.48;
    pointer-events: none;
}

.audit-page-ellipsis {
    color: var(--desktop-text-muted);
}

@media (max-width: 1200px) {
    .audit-snapshot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .event-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.2rem;
        scrollbar-width: none;
    }

    .event-filters::-webkit-scrollbar {
        display: none;
    }

    .event-chip {
        flex: 0 0 auto;
    }

    .audit-page-header,
    .audit-event-heading,
    .audit-event-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .audit-integrity-badge {
        width: 100%;
        white-space: normal;
    }

    .audit-snapshot-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .audit-filter-search {
        grid-column: span 1;
    }

    .audit-category-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.25rem;
        scrollbar-width: none;
    }

    .audit-category-nav::-webkit-scrollbar {
        display: none;
    }

    .audit-event-heading time {
        white-space: normal;
    }

    .audit-event-data {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }

    .audit-event-data summary {
        text-align: left;
    }

    .audit-event-data dl {
        grid-template-columns: minmax(0, 1fr);
    }

    .audit-event-data dt {
        padding-bottom: 0.18rem;
        border-bottom: 0;
    }

    .audit-event-data dd {
        padding-top: 0.18rem;
    }
}
.workflow-diagram {
    display: grid;
    gap: 1rem;
}

.workflow-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.9fr);
    gap: 1rem;
}

.workflow-overview-label {
    margin: 0 0 0.55rem;
    color: var(--desktop-text-soft);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.workflow-trail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.workflow-trail-step,
.workflow-legend-item,
.workflow-stat-card,
.workflow-node-state {
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.workflow-trail-step {
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.7rem;
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: 0.8rem;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.workflow-trail-arrow {
    color: var(--desktop-primary);
    font-size: 0.88rem;
}

.workflow-trail-empty {
    color: var(--desktop-text-soft);
    font-style: italic;
}

.workflow-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.workflow-stat-card {
    display: grid;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
    border-radius: var(--desktop-radius-md);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.workflow-stat-card span {
    color: var(--desktop-text-soft);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.workflow-stat-card strong {
    color: var(--desktop-heading);
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.1;
}

.workflow-stat-card small {
    color: var(--desktop-text-soft);
}

.workflow-lanes {
    display: grid;
    gap: 1rem;
}

.workflow-lane {
    position: relative;
    overflow: hidden;
    padding: 1rem;
    border-radius: 24px;
    border: 1px solid var(--desktop-border);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)),
        linear-gradient(90deg, var(--workflow-lane-soft-accent), transparent 42%);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.05);
}

.workflow-lane::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    border-radius: 24px 0 0 24px;
    background: linear-gradient(180deg, var(--workflow-lane-accent), transparent);
}

.workflow-lane-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.workflow-lane-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.workflow-lane-track {
    display: flex;
    align-items: stretch;
    gap: 0.85rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
    scroll-snap-type: x proximity;
}

.workflow-lane-track::-webkit-scrollbar {
    height: 10px;
}

.workflow-lane-track::-webkit-scrollbar-track {
    background: transparent;
}

.workflow-lane-track::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.34);
    border-radius: 999px;
}

.workflow-node {
    position: relative;
    flex: 0 0 clamp(280px, 33vw, 360px);
    overflow: hidden;
    scroll-snap-align: start;
    border-radius: var(--desktop-radius-lg);
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.08);
}

.workflow-node::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, var(--workflow-node-accent), rgba(255, 255, 255, 0));
}

.workflow-node-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.8rem;
    align-items: start;
    padding: 1rem 1rem 0.85rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    background: linear-gradient(180deg, var(--workflow-lane-soft-accent), transparent);
}

.workflow-node-order {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--workflow-node-accent);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.workflow-node-copy {
    min-width: 0;
    display: grid;
    gap: 0.3rem;
}

.workflow-node-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.workflow-node-title {
    margin: 0;
    color: var(--desktop-heading);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
}

.workflow-node-code {
    margin: 0;
    color: var(--desktop-text-soft);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.workflow-node-body {
    display: grid;
    gap: 0.8rem;
    padding: 0.95rem 1rem 1rem;
}

.workflow-node-flags,
.workflow-node-metrics {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.workflow-node-state {
    display: inline-flex;
    align-items: center;
    padding: 0.33rem 0.6rem;
    border-radius: 999px;
    background: rgba(111, 90, 252, 0.08);
    color: #4f46e5;
    font-size: 0.78rem;
    font-weight: 800;
}

.workflow-node-destinations {
    display: grid;
    gap: 0.55rem;
}

.workflow-node-destinations strong {
    color: var(--desktop-text-soft);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.workflow-node-destination-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.workflow-node-destination {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.3rem 0.35rem;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(248, 250, 252, 0.95);
}

.workflow-node-destination small {
    color: var(--desktop-text-soft);
    font-size: 0.72rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.workflow-node-empty,
.workflow-lane-empty {
    color: var(--desktop-text-soft);
    font-style: italic;
}

.workflow-lane-empty {
    padding: 1rem 1.1rem;
    border-radius: var(--desktop-radius-md);
    border: 1px dashed rgba(148, 163, 184, 0.24);
    background: rgba(248, 250, 252, 0.8);
}

.workflow-connector {
    flex: 0 0 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: var(--workflow-lane-accent);
}

.workflow-connector-line {
    flex: 1;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--workflow-lane-accent), transparent);
}

.workflow-connector i {
    font-size: 1rem;
}

.workflow-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.workflow-legend-item {
    --workflow-legend-color: var(--desktop-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.34rem 0.7rem;
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: 0.8rem;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.workflow-legend-item::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--workflow-legend-color);
}

.workflow-legend-item.is-final {
    --workflow-legend-color: #4da4ff;
}

.workflow-legend-item.is-pause {
    --workflow-legend-color: #ffb84d;
}

.workflow-legend-item.is-transition {
    --workflow-legend-color: #6f5afc;
}

@media (max-width: 991.98px) {
    .workflow-overview-grid {
        grid-template-columns: 1fr;
    }

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

    .workflow-lane-header {
        flex-direction: column;
    }

    .workflow-lane-stats {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .workflow-stats-grid {
        grid-template-columns: 1fr;
    }

    .workflow-node {
        flex-basis: min(88vw, 330px);
    }

    .workflow-node-head {
        grid-template-columns: 1fr;
    }

    .workflow-node-order {
        width: 40px;
        height: 40px;
    }

    .workflow-connector {
        flex-basis: 52px;
    }
}

.attachment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.attachment-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.95rem;
    border-radius: 16px;
    border: 1px solid var(--desktop-border);
    background: var(--desktop-surface-soft);
}

.attachment-preview {
    min-height: 118px;
    border-radius: var(--desktop-radius-control);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--desktop-primary);
    font-size: 1.85rem;
}

.attachment-card strong,
.attachment-card small {
    overflow-wrap: anywhere;
}

.desktop-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.desktop-pagination-copy {
    color: var(--desktop-text-soft);
    font-size: 0.9rem;
}

.page-link {
    border-radius: 12px !important;
    border-color: #d8deea;
    color: #334155;
}

.page-item.active .page-link {
    background: var(--desktop-primary);
    border-color: var(--desktop-primary);
}

.empty-state-shell {
    padding: 2rem 1.5rem;
    text-align: center;
}

.empty-state-shell i {
    font-size: 2.1rem;
    color: var(--desktop-primary);
}

.empty-state-shell h3 {
    margin: 0.9rem 0 0.4rem;
    font-size: 1.05rem;
    color: var(--desktop-heading);
}

.empty-state-shell p {
    margin: 0;
    color: var(--desktop-text-soft);
}

.alert-shell {
    border-radius: 16px;
    padding: 0.95rem 1rem;
    border: 1px solid transparent;
}

.alert-shell-danger {
    background: rgba(239, 68, 68, 0.08);
    color: var(--desktop-danger-text);
    border-color: rgba(239, 68, 68, 0.16);
}

.desktop-login-body {
    --login-blue: #3868B0;
    --login-blue-strong: #254F8D;
    --login-blue-soft: rgba(56, 104, 176, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    background:
        radial-gradient(circle at 12% 18%, rgba(56, 104, 176, 0.18), transparent 30%),
        radial-gradient(circle at 82% 12%, rgba(56, 104, 176, 0.10), transparent 28%),
        linear-gradient(135deg, #edf5ff 0%, #f8fbff 48%, #eef5ff 100%);
}

/* O <main> so existe para dar um ponto de referencia de acessibilidade
   (landmark-one-main); nao deve participar do layout flex do body. */
.desktop-login-body > main {
    display: contents;
}

.desktop-login-wrapper {
    width: min(100%, 520px);
    min-height: 100vh;
    min-height: 100svh;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 450px);
    justify-content: center;
    align-content: center;
    align-items: center;
    padding: clamp(1rem, 3vw, 3rem);
}

.desktop-login-copy {
    display: none;
    align-items: stretch;
    justify-content: center;
}

.desktop-login-copy-card {
    width: 100%;
    max-width: 680px;
    padding: clamp(1.6rem, 3vw, 2.5rem);
    border-radius: var(--desktop-radius-xl);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.78)),
        radial-gradient(circle at top right, rgba(56, 104, 176, 0.16), transparent 34%),
        radial-gradient(circle at bottom left, rgba(56, 104, 176, 0.10), transparent 30%);
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 28px 70px rgba(38, 72, 122, 0.12);
    backdrop-filter: blur(18px);
}

.desktop-login-copy-card h1 {
    margin: 0 0 1rem;
    color: var(--desktop-heading);
    font-size: clamp(2rem, 3.4vw, 3.35rem);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -0.045em;
}

.desktop-login-copy-card p,
.desktop-login-copy-card li {
    color: var(--desktop-text-soft);
    font-size: 1rem;
    line-height: 1.55;
}

.desktop-login-copy-card ul {
    margin: 1.2rem 0 0;
    padding-left: 1.2rem;
    display: grid;
    gap: 0.55rem;
}

.desktop-login-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.desktop-login-feature-grid > div {
    display: grid;
    gap: 0.45rem;
    padding: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.desktop-login-feature-grid i {
    width: 2.35rem;
    height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--login-blue-strong), var(--login-blue));
    box-shadow: 0 12px 24px rgba(56, 104, 176, 0.22);
}

.desktop-login-feature-grid strong {
    color: var(--desktop-heading);
    font-size: 0.92rem;
    font-weight: 900;
}

.desktop-login-feature-grid span {
    color: var(--desktop-text-soft);
    font-size: 0.8rem;
    line-height: 1.45;
}

.desktop-login-panel-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.desktop-login-panel {
    width: 100%;
    max-width: 450px;
    padding: clamp(1.5rem, 3vw, 2.15rem);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.92)),
        radial-gradient(circle at top right, rgba(56, 104, 176, 0.1), transparent 30%);
    box-shadow: 0 26px 72px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(18px);
}

.desktop-login-panel .btn-primary {
    background: linear-gradient(135deg, var(--login-blue-strong), var(--login-blue));
    border-color: transparent;
    box-shadow: 0 16px 32px rgba(56, 104, 176, 0.24);
}

.desktop-login-panel .btn-primary:hover {
    background: linear-gradient(135deg, #1f4278, #315f9e);
}

.desktop-login-panel h2 {
    margin: 0 0 0.35rem;
    color: var(--desktop-heading);
    font-size: 1.65rem;
    font-weight: 800;
}

.desktop-login-panel p {
    margin-bottom: 1.4rem;
    color: var(--desktop-text-soft);
}

.desktop-login-brand {
    display: grid;
    justify-items: center;
    gap: 0.7rem;
    padding: 0 0 1.35rem;
    margin-bottom: 1.35rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    text-align: center;
}

.desktop-login-logo {
    width: 92px;
    height: 92px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 0;
    background: transparent;
    color: var(--login-blue);
    overflow: hidden;
}

.desktop-login-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0;
}

.desktop-login-logo i {
    font-size: 1.55rem;
}

.desktop-login-brand span {
    display: block;
    color: var(--login-blue-strong);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.desktop-login-brand strong {
    display: block;
    color: var(--desktop-heading);
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.2;
}

.desktop-login-title {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1.45rem;
}

.desktop-login-title h2,
.desktop-login-title p {
    margin-bottom: 0;
}

.desktop-login-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(56, 104, 176, 0.14), rgba(56, 104, 176, 0.1));
    color: var(--login-blue);
    font-size: 1.35rem;
}

.desktop-login-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.35rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    color: var(--desktop-text-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.input-shell {
    position: relative;
}

.input-shell .form-control {
    padding-right: 2.9rem;
}

.password-toggle {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--desktop-text-muted);
}

.desktop-kpis-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.desktop-kpis-inline .desktop-chip {
    background: var(--login-blue-soft);
}

.desktop-login-copy-card .desktop-chip {
    background: var(--login-blue-soft);
    color: var(--login-blue-strong);
}

.modal-content {
    background: var(--desktop-surface);
    border: 1px solid var(--desktop-border);
    color: var(--desktop-text);
}

.modal-content.modal-shell {
    background: var(--desktop-surface);
    border: 1px solid var(--desktop-border);
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.16);
}

.modal-shell {
    padding: 1.35rem;
    border-radius: var(--desktop-radius-lg);
}

.modal-header,
.modal-footer {
    border-color: rgba(148, 163, 184, 0.14);
}

.modal-title {
    color: var(--desktop-heading);
    font-weight: 800;
}

.btn-close {
    filter: none;
}

.modal.fade .modal-dialog {
    transform: translateY(-16px) scale(0.97);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
}

.modal.show .modal-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* `.modal-dialog-scrollable` depende de `.modal-body` ser filho direto (flex
   item) de `.modal-content` (flex: 1 1 auto + overflow-y:auto). Quando um
   `<form>` embrulha header/body/footer direto dentro de modal-content (para
   o submit funcionar), o form (display:block) quebra essa cadeia — modal-body
   vira neto, não filho, do flex container, e o `flex`/`overflow-y` dele
   deixam de ter efeito: ele renderiza na altura natural do conteúdo e só é
   cortado por fora pelo overflow:hidden do modal-content, sem scrollbar
   funcional. Corrige tornando o form também um flex container em coluna. */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.modal-backdrop.fade {
    opacity: 0;
    transition: opacity 0.28s ease;
}

.modal-backdrop.show {
    opacity: 0.55;
}

.desktop-chart-placeholder {
    height: 330px;
    border-radius: 20px;
    border: 1px solid var(--desktop-border);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92)),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 28px,
            rgba(148, 163, 184, 0.08) 28px,
            rgba(148, 163, 184, 0.08) 29px
        );
    position: relative;
    overflow: hidden;
}

.desktop-chart-placeholder::before,
.desktop-chart-placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    pointer-events: none;
}

.desktop-chart-placeholder::before {
    background-image: linear-gradient(135deg, rgba(111, 90, 252, 0.18), transparent 55%);
    opacity: 0.7;
}

.desktop-chart-placeholder::after {
    inset: auto 24px 24px 24px;
    height: 46%;
    border-radius: var(--desktop-radius-md);
    background:
        radial-gradient(circle at 16% 56%, rgba(111, 90, 252, 0.18), transparent 12%),
        radial-gradient(circle at 42% 28%, rgba(16, 185, 129, 0.16), transparent 14%),
        radial-gradient(circle at 68% 66%, rgba(245, 158, 11, 0.16), transparent 14%),
        radial-gradient(circle at 90% 24%, rgba(59, 130, 246, 0.16), transparent 12%);
}

.desktop-chart-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

.desktop-chart-legend {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.34rem 0.66rem;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid var(--desktop-border);
    color: #334155;
    font-size: 0.82rem;
    font-weight: 700;
}

.desktop-chart-legend::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--legend-color, var(--desktop-primary));
}

.desktop-report-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.desktop-report-grid > :first-child {
    grid-column: 1 / -1;
}

.desktop-version-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    background: #eef2f7;
    color: var(--desktop-text-muted);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

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

.dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.dashboard-kpi-card {
    position: relative;
    overflow: hidden;
    min-height: 182px;
    padding: 1.15rem;
    border-radius: var(--desktop-radius-lg);
    background: var(--desktop-surface);
    border: 1px solid var(--desktop-border);
    box-shadow: var(--desktop-shadow-soft);
}

.dashboard-kpi-card::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: var(--dashboard-accent, var(--desktop-primary));
}

.dashboard-kpi-card::after {
    content: '';
    position: absolute;
    right: 0.95rem;
    bottom: 0.95rem;
    width: 88px;
    height: 88px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(111, 90, 252, 0.08), transparent 70%);
    pointer-events: none;
}

.dashboard-kpi-label {
    display: inline-flex;
    color: var(--desktop-text-soft);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-kpi-value {
    margin-top: 0.8rem;
    color: var(--desktop-heading);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.dashboard-kpi-value-text {
    font-size: 1.42rem;
    line-height: 1.18;
}

.dashboard-kpi-copy {
    max-width: 78%;
    margin: 0.55rem 0 0;
    color: var(--desktop-text-soft);
    font-size: 0.9rem;
    line-height: 1.45;
}

.dashboard-kpi-icon {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    color: rgba(111, 90, 252, 0.16);
    font-size: 1.65rem;
}

.dashboard-kpi-action {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.7rem;
    color: var(--desktop-primary);
    font-size: 0.86rem;
    font-weight: 800;
}

.dashboard-summary-card {
    display: grid;
}

.dashboard-kpi-summary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.dashboard-summary-list {
    display: grid;
    gap: 0.55rem;
    margin-top: 1rem;
}

.dashboard-summary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.68rem 0.8rem;
    border-radius: var(--desktop-radius-control);
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: #f8fafc;
}

.dashboard-summary-item span {
    color: var(--desktop-text-soft);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.dashboard-summary-item strong {
    color: var(--desktop-heading);
    font-size: 1rem;
    font-weight: 800;
}

.dashboard-panel {
    padding: 1.15rem;
    border-radius: var(--desktop-radius-lg);
    background: var(--desktop-surface);
    border: 1px solid var(--desktop-border);
    box-shadow: var(--desktop-shadow-soft);
}

.dashboard-panel-lg {
    padding-bottom: 1.25rem;
}

.dashboard-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.dashboard-panel-head h2 {
    margin: 0;
    color: var(--desktop-heading);
    font-size: 1.08rem;
    font-weight: 800;
}

.dashboard-panel-head p {
    margin: 0.25rem 0 0;
    color: var(--desktop-text-soft);
    font-size: 0.9rem;
}

.dashboard-panel-head-end {
    align-items: center;
}

.dashboard-filter-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.dashboard-filter-inline label {
    margin: 0;
    color: var(--desktop-text-soft);
    font-size: 0.82rem;
    font-weight: 800;
}

.dashboard-filter-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.dashboard-filter-stack .dashboard-filter-inline {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.28rem;
}

.dashboard-chart-wrap {
    position: relative;
    min-height: 300px;
    padding: 1rem;
    border-radius: 20px;
    border: 1px solid var(--desktop-border);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 28px,
            rgba(148, 163, 184, 0.06) 28px,
            rgba(148, 163, 184, 0.06) 29px
        );
}

.dashboard-chart-wrap-lg {
    min-height: 360px;
}

.dashboard-chart-wrap-donut,
.dashboard-chart-wrap-bars,
.dashboard-chart-wrap-context {
    min-height: 290px;
}

.dashboard-chart-wrap-stacked {
    /* Precisa de altura explícita, não só min-height: o Chart.js usa
       responsive:true + maintainAspectRatio:false, e sem uma altura definida
       no container o ResizeObserver do Chart.js não tem uma referência
       estável pra travar o canvas — o gráfico cresce sem limite em vez de
       ocupar só os 270px do card (como o donut já fazia certo). */
    height: 270px;
    min-height: 0;
    padding: 0.75rem 1rem 0.65rem;
}

.dashboard-chart-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

.dashboard-chart-legend-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

/* Item da legenda customizada dos gráficos.
   dashboard.js sempre emitiu <span class="dashboard-chart-legend"
   style="--legend-color: …">, mas a classe nunca teve estilo — as legendas de
   todos os gráficos do painel saíam como texto solto, sem indicar qual cor era
   qual série. O ponto colorido vem da variável que o JS já manda. */
.dashboard-chart-legend {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.3rem 0.62rem;
    border-radius: var(--desktop-radius-control);
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: #f8fafc;
    color: var(--desktop-text-soft);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.dashboard-chart-legend::before {
    content: '';
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--legend-color, #6f5afc);
}

/* O marcador imita a forma da série no gráfico: quadrado para barra, traço
   para linha, traço interrompido para a tracejada. Cinco pontos redondos iguais
   não diziam qual rótulo correspondia a qual desenho. */
.dashboard-chart-legend-bar::before {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 2px;
}

.dashboard-chart-legend-line::before {
    width: 1.05rem;
    height: 0.16rem;
    border-radius: 2px;
}

.dashboard-chart-legend-dashed::before {
    width: 1.05rem;
    height: 0.16rem;
    border-radius: 0;
    background: repeating-linear-gradient(
        90deg,
        var(--legend-color, #6f5afc) 0 0.3rem,
        transparent 0.3rem 0.48rem
    );
}

/* A série de lucro carrega duas cores (verde no mês positivo, vermelho no
   negativo). Num círculo de 0.6rem as metades se misturam num borrão escuro —
   a pílula dá largura para as duas se lerem como duas. */
.dashboard-chart-legend-diverging::before {
    width: 1.15rem;
    /* Mais alto que as demais linhas de propósito: num traço de 0.16rem as duas
       metades do gradiente se fundem e o marcador vira um borrão escuro, sem
       comunicar que a série troca de cor. */
    height: 0.34rem;
    border-radius: 2px;
}

/* Legenda clicável do gráfico financeiro: alterna a série. Só o gráfico
   financeiro usa este modificador; as demais legendas do painel continuam
   sendo spans não interativos. */
.dashboard-chart-legend-toggle {
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.dashboard-chart-legend-toggle:hover {
    border-color: rgba(148, 163, 184, 0.45);
}

.dashboard-chart-legend-toggle:focus-visible {
    outline: 2px solid #6f5afc;
    outline-offset: 1px;
}

/* Série escondida: o texto riscado diz "está fora do gráfico agora", e o ponto
   cinza tira a cor da leitura para não competir com as séries visíveis. */
.dashboard-chart-legend-toggle.is-off {
    opacity: 0.55;
    text-decoration: line-through;
}

.dashboard-chart-legend-toggle.is-off::before {
    background: #cbd5e1;
}

/* Altura EXPLÍCITA, não só min-height — mesma armadilha documentada em
   .dashboard-chart-wrap-stacked: com responsive:true + maintainAspectRatio:false
   e canvas em height:100%, um container de altura automática não dá referência
   estável ao ResizeObserver do Chart.js e o canvas cresce a partir da largura.
   Aqui o efeito era pior que nos outros gráficos porque este painel é de
   largura cheia: o card passava de 750px e comia a tela inteira. */
/* Altura EXPLÍCITA, nunca só min-height. É a armadilha documentada em
   .dashboard-chart-wrap-stacked: com maintainAspectRatio:false e canvas em
   height:100%, um container de altura automática faz o Chart.js dimensionar
   pela largura, e este card já chegou a 760px por causa disso.

   330px porque o combo carrega cinco séries numa escala só — abaixo disso as
   barras de despesa e a linha de lucro disputam os mesmos pixels. */
[data-dashboard-financial-panel] .dashboard-chart-wrap-financial {
    height: 330px;
    min-height: 0;
}

/* Os dois alternadores (granularidade e regime) lado a lado no cabeçalho. */
.dashboard-financial-switches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Alternador Competência/Caixa do gráfico financeiro. Segmentado em vez de
   select porque são só dois estados e a troca é instantânea (os dois regimes
   já vêm no payload) — um select esconderia a opção não escolhida. */
.dashboard-regime-switch {
    display: inline-flex;
    padding: 0.2rem;
    gap: 0.2rem;
    border: 1px solid var(--desktop-border, #e2e8f0);
    border-radius: 999px;
    background: var(--desktop-surface-muted, #f8fafc);
}

.dashboard-regime-option {
    border: 0;
    background: transparent;
    color: var(--desktop-text-muted, #64748b);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dashboard-regime-option:hover {
    color: var(--desktop-text, #0f172a);
}

.dashboard-regime-option.is-active {
    background: #fff;
    color: var(--desktop-text, #0f172a);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.dashboard-regime-option:focus-visible {
    outline: 2px solid #6f5afc;
    outline-offset: 1px;
}

.dashboard-status-legend {
    display: grid;
    gap: 0.55rem;
    margin-top: 1rem;
}

.dashboard-status-chart-layout {
    display: grid;
    grid-template-columns: minmax(250px, 0.82fr) minmax(360px, 1.18fr);
    gap: 1rem;
    align-items: center;
}

.dashboard-status-chart-layout .dashboard-chart-wrap-donut {
    min-height: 260px;
    padding: 0.8rem;
}

.dashboard-status-chart-layout .dashboard-status-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    align-self: center;
    align-content: start;
    max-height: none;
    margin-top: 0;
    padding-right: 0;
    overflow: visible;
}

.dashboard-status-legend-item {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.5rem;
    padding: 0.48rem 0.58rem;
    border-radius: var(--desktop-radius-control);
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: #f8fafc;
}

.dashboard-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--dashboard-dot-color, var(--desktop-primary));
    box-shadow: 0 0 0 4px rgba(111, 90, 252, 0.08);
    flex-shrink: 0;
}

.dashboard-status-legend-item strong {
    display: block;
    color: var(--desktop-heading);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.15;
}

.dashboard-status-legend-item small {
    color: var(--desktop-text-soft);
    font-size: 0.72rem;
    line-height: 1.1;
}

.dashboard-equipment-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.7rem;
}

.dashboard-equipment-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.38rem 0.62rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: #f8fafc;
    color: var(--desktop-heading);
    font-size: 0.78rem;
    font-weight: 800;
}

.dashboard-equipment-legend-item span {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 999px;
    background: var(--legend-color, var(--desktop-primary));
    box-shadow: 0 0 0 4px rgba(111, 90, 252, 0.08);
    flex-shrink: 0;
}

.dashboard-context-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.dashboard-context-metric {
    padding: 0.8rem 0.85rem;
    border-radius: var(--desktop-radius-control);
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: #f8fafc;
}

.dashboard-context-metric span {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--desktop-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-context-metric strong {
    color: var(--desktop-heading);
    font-size: 0.98rem;
    font-weight: 800;
}

.dashboard-secondary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.dashboard-secondary-grid [data-dashboard-status-panel] {
    grid-column: span 2;
}

.dashboard-secondary-grid [data-dashboard-context-panel] {
    grid-column: span 1;
}

.dashboard-orders-table {
    margin-top: 0.25rem;
}

.dashboard-order-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.dashboard-age-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    background: rgba(111, 90, 252, 0.1);
    color: var(--desktop-primary);
    font-size: 0.78rem;
    font-weight: 800;
}

.dashboard-low-stock-list {
    display: grid;
    gap: 0.75rem;
}

.dashboard-low-stock-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0.95rem;
    border-radius: var(--desktop-radius-control);
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: #f8fafc;
}

.dashboard-low-stock-item strong {
    display: block;
    color: var(--desktop-heading);
    font-size: 0.92rem;
    font-weight: 800;
}

.dashboard-low-stock-item span {
    color: var(--desktop-text-soft);
    font-size: 0.82rem;
}

.dashboard-help-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.dashboard-help-item {
    display: grid;
    gap: 0.38rem;
    padding: 1rem 1.05rem;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: var(--desktop-surface-soft);
}

.dashboard-help-item strong {
    color: var(--desktop-heading);
    font-size: 0.92rem;
    font-weight: 800;
}

.dashboard-help-item p {
    margin: 0;
    color: var(--desktop-text-soft);
    font-size: 0.9rem;
    line-height: 1.5;
}

.dashboard-preview-body {
    padding: 1.15rem;
    background:
        radial-gradient(circle at top left, rgba(111, 90, 252, 0.08), transparent 26%),
        radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.06), transparent 30%),
        var(--desktop-bg);
}

.dashboard-preview-shell {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}

.dashboard-preview-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: var(--desktop-radius-lg);
    background: var(--desktop-surface);
    border: 1px solid var(--desktop-border);
    box-shadow: var(--desktop-shadow-soft);
}

.dashboard-preview-hero h1 {
    margin: 0.2rem 0 0;
    color: var(--desktop-heading);
    font-size: 1.8rem;
    font-weight: 800;
}

.dashboard-preview-hero p {
    margin: 0.35rem 0 0;
    color: var(--desktop-text-soft);
}

.dashboard-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.dashboard-preview-card {
    padding: 1rem;
    border-radius: var(--desktop-radius-md);
    background: var(--desktop-surface);
    border: 1px solid var(--desktop-border);
    box-shadow: var(--desktop-shadow-soft);
}

.dashboard-preview-text {
    margin: 0.5rem 0 0;
    color: var(--desktop-text);
    line-height: 1.55;
}

.dashboard-preview-dates {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.6rem;
    color: var(--desktop-text);
}

.dashboard-os-modal-shell {
    padding: 0;
    overflow: hidden;
}

.dashboard-os-modal-loading {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    background: rgba(255, 255, 255, 0.92);
    color: var(--desktop-text-soft);
}

.dashboard-os-modal-frame {
    width: 100%;
    height: min(78vh, 760px);
    border: 0;
    display: block;
    background: #fff;
}

@media (max-width: 1280px) {
    .desktop-grid-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .desktop-grid-three,
    .desktop-grid-four,
    .attachment-grid,
    .desktop-report-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-kpi-grid,
    .dashboard-secondary-grid,
    .dashboard-help-grid,
    .dashboard-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-secondary-grid [data-dashboard-status-panel],
    .dashboard-secondary-grid [data-dashboard-context-panel] {
        grid-column: span 2;
    }
}

@media (max-width: 992px) {
    .desktop-sidebar {
        width: min(84vw, 320px);
        transform: translateX(-100%);
    }

    .desktop-sidebar.is-open {
        transform: translateX(0);
    }

    .desktop-main,
    .desktop-main.is-expanded {
        margin-left: 0;
    }

    .desktop-topbar {
        flex-wrap: wrap;
        padding: 0.8rem 1rem;
    }

    .desktop-sidebar-header {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .desktop-topbar-search {
        order: 3;
        flex: 1 1 100%;
        max-width: none;
    }

    .desktop-notification-menu,
    .desktop-profile-menu {
        width: min(100vw - 2rem, 420px);
    }

    .desktop-login-wrapper,
    .desktop-grid-two,
    .desktop-grid-three,
    .desktop-grid-four,
    .desktop-report-grid,
    .desktop-filter-grid,
    .desktop-order-multiselect-grid {
        grid-template-columns: 1fr;
    }

    .desktop-config-grid {
        grid-template-columns: 1fr;
    }

    .order-create-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .order-create-preview,
    .order-create-workbench {
        min-width: 0;
    }

    .order-create-preview {
        position: static;
        flex-direction: column;
    }

    .order-create-summary-card,
    .order-create-photo-card {
        /* O flex-basis em px vira altura na coluna e, com overflow:hidden, corta o conteudo. */
        flex: 1 1 auto;
    }

    .order-create-panel-grid {
        grid-template-columns: 1fr;
    }

    .order-create-field-span-2 {
        grid-column: auto;
    }

    .order-entry-checklist-header {
        display: grid;
    }

    .order-entry-checklist-header,
    .order-entry-checklist-item,
    .order-entry-checklist-item-controls {
        grid-template-columns: 1fr;
    }

    .order-create-photo-preview-grid {
        grid-template-columns: 1fr;
    }

    .desktop-config-preview {
        position: static;
    }

    .desktop-config-hero {
        flex-direction: column;
    }

    .desktop-login-copy {
        padding: 1rem 1rem 0.25rem;
    }

    .desktop-login-wrapper {
        gap: 1rem;
        padding: 1rem;
        align-content: center;
    }

    .desktop-login-copy {
        display: none;
    }

    .desktop-login-feature-grid {
        grid-template-columns: 1fr;
    }

    .desktop-login-panel-wrap {
        padding: 0;
    }

    .desktop-page-hero {
        flex-direction: column;
    }

    .desktop-form-intro {
        padding: 0.9rem 0.95rem;
    }

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

    .dashboard-secondary-grid,
    .dashboard-help-grid,
    .dashboard-preview-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-secondary-grid [data-dashboard-status-panel],
    .dashboard-secondary-grid [data-dashboard-context-panel] {
        grid-column: auto;
    }

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

    .dashboard-status-chart-layout .dashboard-status-legend {
        max-height: none;
        overflow-y: visible;
    }

    .dashboard-preview-hero {
        flex-direction: column;
    }

    .desktop-system-footer {
        padding: 0 1rem 1rem;
    }

    .desktop-system-footer-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 0.9rem 0.95rem;
    }

    .desktop-system-footer-meta {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
    }
}

@media (max-width: 768px) {
    .desktop-content {
        padding: 1rem;
    }

    .dashboard-status-chart-layout .dashboard-status-legend {
        grid-template-columns: 1fr;
    }

    .desktop-grid-stats {
        grid-template-columns: 1fr;
    }

    .order-create-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.25rem;
    }

    .order-create-tabs .equipment-tab {
        flex: 0 0 auto;
        width: auto;
        white-space: nowrap;
    }

    .order-create-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .order-create-actions-option {
        flex-basis: auto;
        margin-right: 0;
    }

    .order-create-send-toggle {
        width: 100%;
    }

    .order-create-footer-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .order-create-actions .btn {
        width: 100%;
    }

    .desktop-pagination {
        flex-direction: column;
        align-items: stretch;
    }

    .table-stack thead {
        display: none;
    }

    .table-stack tbody,
    .table-stack tr,
    .table-stack td {
        display: block;
        width: 100%;
    }

    .table-stack tr {
        margin-bottom: 1rem;
        border-radius: 16px;
        border: 1px solid var(--desktop-border);
        background: var(--desktop-surface-soft);
        overflow: hidden;
    }

    .table-stack td {
        padding: 0.82rem 0.95rem !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    }

    .table-stack td:last-child {
        border-bottom: 0;
    }

    .table-stack td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.28rem;
        color: var(--desktop-text-muted);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .os-actions-dropdown,
    .list-actions-dropdown {
        width: 100%;
        justify-content: flex-start;
    }

    .os-actions-toggle,
    .list-actions-toggle {
        width: 100%;
        min-width: 0;
    }

    .os-actions-menu,
    .list-actions-menu {
        width: min(calc(100vw - 2rem), 20rem);
    }

    .os-actions-dropdown .dropdown-menu,
    .list-actions-dropdown .dropdown-menu {
        position: static;
        float: none;
        width: 100%;
        margin-top: 0.5rem;
        transform: none !important;
    }

    .desktop-profile-summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .desktop-notification-menu {
        width: calc(100vw - 2rem);
    }

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

    .dashboard-panel,
    .dashboard-preview-card,
    .dashboard-preview-hero {
        padding: 0.95rem;
    }

    .dashboard-chart-wrap {
        min-height: 260px;
        padding: 0.75rem;
        border-radius: 16px;
    }

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

    /* Em tela estreita o gráfico financeiro encolhe junto. */
    [data-dashboard-financial-panel] .dashboard-chart-wrap-financial {
        height: 280px;
    }

    [data-dashboard-monthly-panel],
    .dashboard-equipment-stacked-panel,
    .dashboard-secondary-grid [data-dashboard-context-panel] {
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    [data-dashboard-monthly-panel] .dashboard-chart-wrap-lg {
        width: max(100%, 520px);
        min-width: 520px;
        min-height: 260px;
    }

    .dashboard-equipment-stacked-panel .dashboard-chart-wrap-stacked {
        width: max(100%, 520px);
        min-width: 520px;
        height: 255px;
        min-height: 0;
    }

    .dashboard-secondary-grid [data-dashboard-context-panel] .dashboard-chart-wrap-context {
        width: max(100%, 390px);
        min-width: 390px;
        min-height: 230px;
    }

    .dashboard-status-chart-layout .dashboard-chart-wrap-donut {
        width: min(100%, 300px);
        max-width: 300px;
        height: 260px;
        min-height: 0;
        margin-inline: auto;
    }

    .dashboard-context-metrics {
        grid-template-columns: 1fr;
    }

    .dashboard-order-actions {
        justify-content: flex-start;
    }

    .dashboard-panel-head-end {
        align-items: flex-start;
    }

    .desktop-config-tabs-shell {
        padding: 0.95rem 0.9rem 0.9rem;
    }

    .desktop-config-hero {
        flex-direction: column;
    }

    .desktop-config-summary-row {
        grid-template-columns: 1fr;
    }

    .desktop-config-preview {
        position: static;
    }

    .desktop-config-preview-box {
        min-height: 200px;
    }

    .desktop-config-footer {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 430px) {
    .desktop-content,
    .desktop-topbar {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .desktop-sidebar {
        width: min(82vw, 300px);
        padding: 0.82rem 0.72rem 0.72rem;
        gap: 0.7rem;
    }

    .desktop-sidebar-header {
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }

    .desktop-system-footer {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .desktop-system-footer-inner {
        padding: 0.85rem 0.9rem;
    }

    .desktop-page-title {
        font-size: 1.02rem;
    }

    .desktop-action-button {
        padding-inline: 0.9rem;
    }

    .dashboard-kpi-value {
        font-size: 1.75rem;
    }

    .dashboard-chart-wrap,
    .dashboard-chart-wrap-lg,
    .dashboard-chart-wrap-donut,
    .dashboard-chart-wrap-bars,
    .dashboard-chart-wrap-context {
        min-height: 240px;
    }

    [data-dashboard-monthly-panel] .dashboard-chart-wrap-lg {
        width: max(100%, 480px);
        min-width: 480px;
        min-height: 245px;
    }

    .dashboard-equipment-stacked-panel .dashboard-chart-wrap-stacked {
        width: max(100%, 480px);
        min-width: 480px;
        height: 245px;
        min-height: 0;
    }

    .dashboard-secondary-grid [data-dashboard-context-panel] .dashboard-chart-wrap-context {
        width: max(100%, 360px);
        min-width: 360px;
        min-height: 220px;
    }

    .dashboard-status-chart-layout .dashboard-chart-wrap-donut {
        width: min(100%, 270px);
        max-width: 270px;
        height: 240px;
        min-height: 0;
    }

    .desktop-config-tabs .nav-link {
        width: 100%;
        justify-content: flex-start;
    }

    .desktop-config-preview-box {
        min-height: 180px;
    }

    .desktop-config-preview-placeholder {
        min-height: 150px;
    }
}

@media (max-width: 390px) {
    .desktop-sidebar {
        width: min(84vw, 288px);
        padding: 0.8rem 0.68rem 0.68rem;
    }

    .dashboard-preview-hero h1 {
        font-size: 1.55rem;
    }

    .desktop-config-tabs-shell {
        padding-inline: 0.8rem;
    }
}

@media (max-width: 360px) {
    .desktop-sidebar {
        width: min(88vw, 276px);
    }

    .desktop-login-copy-card,
    .desktop-login-panel {
        padding: 1.35rem;
    }

    .dashboard-panel,
    .dashboard-preview-card,
    .dashboard-preview-hero {
        padding: 0.85rem;
    }

    .desktop-config-summary-item,
    .desktop-config-preview-list div,
    .desktop-config-preview-status {
        padding-inline: 0.78rem;
    }
}

@media (max-width: 320px) {
    .desktop-sidebar {
        width: min(92vw, 252px);
    }

    .desktop-version-pill {
        font-size: 0.62rem;
    }

    .btn,
    .form-control,
    .form-select {
        font-size: 0.92rem;
    }

    .dashboard-kpi-value {
        font-size: 1.55rem;
    }

    .desktop-config-preview-box {
        min-height: 160px;
        padding: 0.8rem;
    }
}

/* ==========================================================================
   Detalhe da OS (orders.show) — layout de duas colunas + cards
   ========================================================================== */

/* Linha de metadados do cabeçalho: duração, previsão, prazo (SLA) e técnico —
   resumo de relance sem precisar abrir nenhuma aba. */
.os-header-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--desktop-text-soft);
}

.os-header-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.os-header-meta-item i {
    color: var(--desktop-primary);
    opacity: 0.75;
}

.os-detail-layout {
    display: grid;
    gap: 1.25rem;
}

.os-detail-top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.os-detail-top-grid > .surface-card {
    height: 100%;
}

.os-photo-card {
    display: grid;
    gap: 0.85rem;
}

.os-photo-frame {
    border-radius: var(--desktop-radius-md);
    background: var(--desktop-surface-soft);
    border: 1px solid var(--desktop-border);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.os-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

.os-photo-empty {
    display: grid;
    gap: 0.4rem;
    justify-items: center;
    color: var(--desktop-text-muted);
    font-weight: 600;
    font-size: 0.85rem;
}

.os-photo-empty i {
    font-size: 1.8rem;
    color: var(--desktop-primary);
    opacity: 0.5;
}

.os-photo-serial {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--desktop-radius-md);
    background: var(--desktop-surface-soft);
    border: 1px solid var(--desktop-border);
    color: var(--desktop-text-soft);
    font-weight: 600;
    font-size: 0.85rem;
}

/* Progresso do fluxo (etapas) */
.os-progress {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.15rem;
}

.os-progress-step {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 0.7rem;
    align-items: start;
    position: relative;
    padding-bottom: 0.9rem;
}

.os-progress-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 18px;
    bottom: 0;
    width: 2px;
    background: var(--desktop-border);
}

.os-progress-dot {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 3px solid var(--desktop-border);
    background: #fff;
    margin-top: 2px;
    z-index: 1;
}

.os-progress-step strong {
    display: block;
    font-size: 0.9rem;
    color: var(--desktop-text-soft);
}

.os-progress-step small {
    color: var(--desktop-text-muted);
    font-size: 0.75rem;
}

.os-progress-step.is-concluido .os-progress-dot {
    border-color: var(--desktop-primary);
    background: var(--desktop-primary);
}

.os-progress-step.is-atual .os-progress-dot {
    border-color: var(--desktop-primary);
    background: #fff;
    box-shadow: 0 0 0 4px var(--desktop-primary-soft);
}

.os-progress-step.is-atual strong {
    color: var(--desktop-primary);
    font-weight: 800;
}

.os-detail-main {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
}

.os-detail-main > .surface-card {
    margin: 0 !important;
}

/* Blocos internos dos cards operacionais da OS. */
.os-panel-block + .os-panel-block {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--desktop-border);
}

.os-panel-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--desktop-text-soft);
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.os-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--desktop-primary-soft);
    color: var(--desktop-primary);
    font-size: 0.75rem;
    font-weight: 700;
}

.os-next-step {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px dashed var(--desktop-border-strong);
    background: var(--desktop-primary-soft);
    color: var(--desktop-primary);
    font-weight: 700;
    font-size: 0.85rem;
}

/* Tabela label→valor — cards Cliente/Equipamento, Defeito e Solução,
   Resumo financeiro/Datas do detalhe da OS (substitui a antiga .detail-list,
   que empilhava tudo em coluna única sem alinhamento). Linha só aparece se
   o blade decidir renderizá-la — vazio é omitido no PHP, não escondido aqui. */
.os-info-card-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--desktop-heading);
    margin: 0 0 0.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Sub-card — caixa aninhada dentro de um card (ex.: Orçamento e Datas e
   garantia lado a lado dentro de "Valores e Orçamento"), mais leve que
   .surface-card (sem sombra, fundo levemente diferenciado do card externo)
   para não competir visualmente com o card que a contém. */
.os-subcard {
    background: var(--desktop-surface-soft);
    border: 1px solid var(--desktop-border);
    border-radius: var(--desktop-radius-md);
    padding: 1rem 1.15rem;
    height: 100%;
}

.os-info-table {
    width: 100%;
    border-collapse: collapse;
}

.os-info-table tr {
    border-bottom: 1px solid var(--desktop-border);
}

.os-info-table tr:last-child {
    border-bottom: none;
}

.os-info-table th,
.os-info-table td {
    padding: 0.55rem 0.5rem;
    text-align: left;
    vertical-align: top;
}

.os-info-table th {
    width: 42%;
    max-width: 190px;
    color: var(--desktop-text-soft);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: normal;
}

.os-info-table td {
    color: var(--desktop-text);
    font-size: 0.92rem;
    word-break: break-word;
}

.os-info-table-empty {
    color: var(--desktop-text-soft);
    font-size: 0.88rem;
    margin: 0;
}

/* Grade de miniaturas de fotos */
.os-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
}

.os-photo-thumb {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--desktop-radius-md);
    overflow: hidden;
    border: 1px solid var(--desktop-border);
    background: var(--desktop-surface-soft);
    transition: var(--desktop-transition);
}

.os-photo-thumb:hover {
    border-color: var(--desktop-border-strong);
    transform: translateY(-2px);
}

.os-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

[data-photo-viewer-trigger] {
    cursor: zoom-in;
}

.photo-viewer-modal-dialog {
    max-width: min(96vw, 1180px);
}

.photo-viewer-modal-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
}

.photo-viewer-nav {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.photo-viewer-stage {
    min-height: min(74vh, 760px);
    border-radius: 24px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 1rem;
}

.photo-viewer-image {
    max-width: 100%;
    max-height: min(70vh, 720px);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
}

.photo-viewer-counter {
    color: var(--desktop-text-muted);
    font-size: 0.85rem;
    margin: 0;
}

@media (max-width: 991.98px) {
    .photo-viewer-modal-body {
        grid-template-columns: 1fr 1fr;
    }

    .photo-viewer-stage {
        grid-column: 1 / -1;
        min-height: min(58vh, 520px);
        padding: 0.75rem;
    }

    .photo-viewer-nav {
        justify-self: center;
    }

    .photo-viewer-nav[data-photo-viewer-direction="prev"] {
        grid-column: 1;
    }

    .photo-viewer-nav[data-photo-viewer-direction="next"] {
        grid-column: 2;
    }
}

.os-hint {
    display: block;
    margin-top: 0.4rem;
    color: var(--desktop-text-muted);
    font-size: 0.78rem;
}

/* Progresso como accordion (details/summary) */
.os-progress-card {
    padding: 1.25rem;
}

.os-progress-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    list-style: none;
}

.os-progress-summary::-webkit-details-marker {
    display: none;
}

.os-progress-chevron {
    color: var(--desktop-text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.os-progress-card[open] .os-progress-chevron {
    transform: rotate(180deg);
}

.os-progress-more {
    list-style: none;
    color: var(--desktop-text-muted);
    font-size: 0.78rem;
    padding: 0 0 0.6rem 1.6rem;
}

/* ==========================================================================
   Mobile / app-like (orders.show)
   ========================================================================== */
@media (min-width: 993px) and (max-width: 1099.98px) {
    .os-detail-top-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    .os-detail-layout {
        gap: 1rem;
    }

    .os-detail-top-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .os-detail-main {
        gap: 1rem;
    }

    /* Cabeçalho: ações em grade 2 colunas, alinhadas como num app. */
    .os-detail-header {
        margin-bottom: 0.75rem;
    }

    .os-header-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 0.5rem;
    }

    .os-header-actions .btn {
        justify-content: center;
        width: 100%;
    }

    /* Abas: faixa rolável horizontal (swipe), sem competir com a navbar do app. */
    .os-tabs-card {
        padding: 0;
        overflow: visible;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .os-tabs-card .equipment-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0.5rem;
        margin: 0;
        padding: 0.15rem;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .os-tabs-card .equipment-tabs::-webkit-scrollbar {
        display: none;
    }

    .os-tabs-card .equipment-tab {
        flex: 0 0 auto;
        width: auto;
        scroll-snap-align: start;
        padding: 0.6rem 0.9rem;
        font-size: 0.85rem;
    }

    .os-tabs-card .equipment-tab-panel {
        margin-top: 0;
        padding: 1.1rem;
        border: 1px solid var(--desktop-border);
        border-radius: var(--desktop-radius-md);
        background: var(--desktop-surface);
    }

    /* Progresso recolhido: some a subtitle interna, foco no resumo. */
    .os-progress-card:not([open]) .os-progress-summary .surface-title {
        margin-bottom: 0.15rem;
    }

    .os-photo-frame {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 480px) {
    .os-tabs-card .equipment-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        flex-wrap: wrap;
        overflow-x: visible;
        gap: 0.5rem;
    }

    .os-tabs-card .equipment-tab {
        width: 100%;
        flex: none;
        justify-content: center;
        font-size: 0.8rem;
        padding: 0.55rem 0.8rem;
    }
}

/* Compact budget review modal */
.budget-review-modal .modal-header,
.budget-review-modal .modal-body,
.budget-review-modal .modal-footer {
    padding-left: 1.35rem;
    padding-right: 1.35rem;
}

.budget-review-modal .modal-body {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.budget-review-pendencies {
    gap: 0.7rem;
    padding: 0.85rem 0.95rem;
    margin-bottom: 0.85rem;
}

.budget-review-pendencies-head {
    gap: 0.65rem;
}

.budget-review-pendencies-head strong {
    display: block;
    line-height: 1.35;
}

.budget-review-pendencies-head p {
    font-size: 0.88rem;
    line-height: 1.45;
}

.budget-review-grid {
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}

.budget-review-grid-bottom {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: start;
}

.budget-review-card {
    gap: 0.75rem;
    padding: 0.9rem 0.95rem;
}

.budget-review-card-head {
    align-items: flex-start;
    gap: 0.5rem 0.65rem;
}

.budget-review-card-head h5 {
    font-size: 0.96rem;
}

.budget-review-list,
.budget-review-totals,
.budget-review-notes,
.budget-review-items {
    gap: 0.6rem;
}

.budget-review-list-item,
.budget-review-note-block {
    padding: 0.72rem 0.82rem;
    border-radius: 14px;
}

.budget-review-list-item strong,
.budget-review-note-block strong {
    font-size: 0.94rem;
    line-height: 1.45;
}

.budget-review-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.budget-review-totals .budget-review-list-item {
    min-height: 4.1rem;
}

.budget-review-item {
    gap: 0.6rem;
    padding: 0.8rem 0.9rem;
    border-radius: 16px;
}

.budget-review-item-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.3rem 0.7rem;
}

.budget-review-item-head > div {
    min-width: 0;
}

.budget-review-item-head strong:last-child {
    text-align: right;
    font-size: 0.98rem;
}

.budget-review-item-head span {
    display: block;
    margin-top: 0.18rem;
}

.budget-review-item-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem 0.6rem;
    padding-top: 0.4rem;
}

.budget-review-item-meta span {
    min-width: 0;
    line-height: 1.35;
}

.budget-review-item-notes {
    font-size: 0.92rem;
}

.budget-review-empty {
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
}

.budget-review-footer-copy {
    max-width: 360px;
    font-size: 0.84rem;
    line-height: 1.42;
}

.budget-review-modal .modal-footer {
    gap: 0.6rem;
}

@media (max-width: 1280px) {
    .budget-review-grid-bottom {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    .budget-review-grid {
        grid-template-columns: 1fr;
    }

    .budget-review-totals {
        grid-template-columns: 1fr;
    }

    .budget-review-item-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .budget-review-modal .modal-header,
    .budget-review-modal .modal-body,
    .budget-review-modal .modal-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 768px) {
    .budget-review-item-head {
        grid-template-columns: 1fr;
    }

    .budget-review-item-head strong:last-child {
        text-align: left;
    }

    .budget-review-item-meta {
        grid-template-columns: 1fr;
    }

    .budget-review-footer-copy {
        max-width: none;
    }
}

/* ===== Matriz operacional de transições (agrupada por super-grupo + macrofase) ===== */
.matrix-scroll {
    max-height: 72vh;
    overflow: auto;
}

.matrix-transitions {
    border-collapse: separate;
    border-spacing: 0;
    min-width: max-content;
}

/* Cabeçalho fixo no topo: 3 faixas empilhadas com offsets fixos. */
.matrix-transitions thead th {
    position: sticky;
    z-index: 2;
    background: var(--desktop-surface);
    box-shadow: inset 0 -1px 0 var(--desktop-border);
}

.matrix-transitions thead .matrix-supergroup {
    top: 0;
    height: 36px;
    padding: 0.35rem 0.5rem;
    background-color: var(--desktop-surface);
    background-image: linear-gradient(var(--matrix-soft-accent, rgba(111, 90, 252, 0.12)), var(--matrix-soft-accent, rgba(111, 90, 252, 0.12)));
    border-bottom: 2px solid var(--matrix-accent, #6f5afc);
    color: #1f2937;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.matrix-transitions thead .matrix-macro {
    top: 36px;
    height: 30px;
    padding: 0.3rem 0.5rem;
    background-color: var(--desktop-surface);
    background-image: linear-gradient(var(--matrix-soft-accent, rgba(111, 90, 252, 0.12)), var(--matrix-soft-accent, rgba(111, 90, 252, 0.12)));
    border-bottom: 2px solid var(--matrix-accent, #6f5afc);
    color: #374151;
    font-weight: 600;
    font-size: 0.68rem;
    white-space: nowrap;
}

.matrix-transitions thead .matrix-status-col {
    top: 66px;
    min-width: 84px;
    max-width: 96px;
    background: var(--desktop-surface-soft);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--desktop-text-soft, #475569);
    line-height: 1.15;
    vertical-align: bottom;
}

/* Canto e coluna de origem fixos à esquerda. */
.matrix-transitions .matrix-corner {
    left: 0;
    top: 0;
    z-index: 5;
    min-width: 200px;
    background: var(--desktop-surface);
    vertical-align: bottom;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--desktop-text-soft, #475569);
}

.matrix-transitions tbody .matrix-row-head {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 200px;
    background: var(--desktop-surface);
    box-shadow: inset -1px 0 0 var(--desktop-border);
}

/* Faixas separadoras de linha (super-grupo e macrofase). */
.matrix-transitions .matrix-band td {
    background-color: var(--desktop-surface);
    background-image: linear-gradient(var(--matrix-soft-accent, rgba(111, 90, 252, 0.12)), var(--matrix-soft-accent, rgba(111, 90, 252, 0.12)));
    border-left: 4px solid var(--matrix-accent, #6f5afc);
    color: #1f2937;
}

.matrix-transitions .matrix-band-super td {
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.matrix-transitions .matrix-band-macro td {
    font-weight: 600;
    font-size: 0.7rem;
    padding-left: 1.5rem;
    color: #374151;
}

/* A faixa separadora também fica presa à esquerda ao rolar na horizontal. */
.matrix-transitions .matrix-band td {
    position: sticky;
    left: 0;
    z-index: 1;
}

.matrix-transitions .matrix-diagonal {
    color: var(--desktop-text-muted, #94a3b8);
    background: var(--desktop-surface-soft);
}

.matrix-transitions tbody td {
    border-top: 1px solid var(--desktop-border);
}

/* ==========================================================================
   Agenda
   Reaproveita os tokens do tema (--desktop-*) e o mesmo vocabulário visual da
   grade do Fluxo de Caixa, com o dia mostrando compromissos em vez de valores.
   ========================================================================== */

.agenda-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.9rem;
}

.agenda-summary-card {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--desktop-border);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
    box-shadow: var(--desktop-shadow-soft);
    text-decoration: none;
    color: inherit;
    transition: var(--desktop-transition);
}

a.agenda-summary-card:hover {
    transform: translateY(-2px);
    border-color: var(--desktop-primary);
}

.agenda-summary-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--desktop-text-soft);
}

.agenda-summary-value {
    font-size: 1.9rem;
    line-height: 1.1;
    font-weight: 800;
    color: var(--desktop-text);
}

.agenda-summary-hint {
    font-size: 0.78rem;
    color: var(--desktop-text-soft);
}

.agenda-summary-card.is-late .agenda-summary-value {
    color: var(--desktop-danger-text);
}

.agenda-summary-card.is-today .agenda-summary-value {
    color: var(--desktop-primary);
}

.agenda-summary-google.is-connected {
    border-color: rgba(34, 197, 94, 0.45);
}

/* --- Filtros ------------------------------------------------------------ */

.agenda-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1rem;
}

.agenda-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--desktop-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--desktop-text-soft);
    font-size: 0.79rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--desktop-transition);
}

.agenda-filter:hover {
    border-color: var(--desktop-primary);
    color: var(--desktop-primary);
}

.agenda-filter.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--desktop-primary), #8b5cf6);
    border-color: transparent;
}

.agenda-filters-divider {
    width: 1px;
    height: 22px;
    margin: 0 0.3rem;
    background: var(--desktop-border);
}

/* --- Grade mensal ------------------------------------------------------- */

.agenda-calendar-scroll {
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.agenda-calendar-weekdays,
.agenda-calendar-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.5rem;
    min-width: 900px;
}

.agenda-calendar-weekdays {
    margin-bottom: 0.5rem;
}

.agenda-calendar-weekday {
    padding: 0.1rem 0.5rem;
    color: var(--desktop-text-soft);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

.agenda-calendar-week {
    margin-bottom: 0.5rem;
}

.agenda-calendar-day {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    /* Seis semanas x altura da célula define se o mês inteiro cabe na tela sem
       rolar. 118px comporta três compromissos antes de a célula rolar. */
    min-height: 118px;
    padding: 0.6rem 0.55rem;
    border: 1px solid var(--desktop-border);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
    box-shadow: var(--desktop-shadow-soft);
}

.agenda-calendar-day.is-outside-month {
    opacity: 0.5;
}

.agenda-calendar-day.is-weekend {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.94));
}

.agenda-calendar-day.is-today {
    border-color: var(--desktop-primary);
    box-shadow: 0 0 0 2px rgba(111, 90, 252, 0.16);
}

.agenda-calendar-day.has-late {
    border-color: rgba(239, 68, 68, 0.5);
}

.agenda-calendar-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.agenda-calendar-day-number {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--desktop-text);
}

.agenda-calendar-day.is-today .agenda-calendar-day-number {
    color: var(--desktop-primary);
}

.agenda-calendar-day-count {
    min-width: 20px;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.22);
    color: var(--desktop-text-soft);
    font-size: 0.68rem;
    font-weight: 800;
    text-align: center;
}

.agenda-calendar-day-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    /* Dia cheio rola dentro da própria célula: sem isto, um dia com dez
       vencimentos esticaria a semana inteira. */
    max-height: 132px;
    overflow-y: auto;
}

/* --- Compromisso no calendário ------------------------------------------ */

.agenda-event {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    width: 100%;
    padding: 0.28rem 0.45rem;
    border: 0;
    border-left: 3px solid var(--agenda-accent, #94a3b8);
    border-radius: 7px;
    background: var(--agenda-bg, rgba(148, 163, 184, 0.12));
    color: var(--desktop-text);
    font-size: 0.74rem;
    text-align: left;
    cursor: pointer;
    transition: var(--desktop-transition);
}

.agenda-event:hover {
    filter: brightness(0.96);
    transform: translateX(1px);
}

.agenda-event-time {
    flex-shrink: 0;
    font-weight: 800;
    font-size: 0.68rem;
    color: var(--agenda-accent, #64748b);
}

.agenda-event-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agenda-event.is-done {
    opacity: 0.55;
}

.agenda-event.is-done .agenda-event-title {
    text-decoration: line-through;
}

.agenda-event.is-late {
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.35);
}

.agenda-event.is-high .agenda-event-title {
    font-weight: 700;
}

/* Cores por tipo — o mesmo par accent/fundo serve ao calendário, à lista e
   ao chip de filtro, para o usuário reconhecer a categoria sem ler. */
.agenda-tipo-manual { --agenda-accent: #6f5afc; --agenda-bg: rgba(111, 90, 252, 0.10); }
.agenda-tipo-conta_pagar { --agenda-accent: #ef4444; --agenda-bg: rgba(239, 68, 68, 0.10); }
.agenda-tipo-conta_receber { --agenda-accent: #16a34a; --agenda-bg: rgba(22, 163, 74, 0.10); }
.agenda-tipo-retorno_pos_servico { --agenda-accent: #0ea5e9; --agenda-bg: rgba(14, 165, 233, 0.10); }
.agenda-tipo-prazo_os { --agenda-accent: #f59e0b; --agenda-bg: rgba(245, 158, 11, 0.12); }
.agenda-tipo-cobranca_os { --agenda-accent: #a855f7; --agenda-bg: rgba(168, 85, 247, 0.10); }

.agenda-filter.agenda-tipo-manual:not(.is-active),
.agenda-filter[class*='agenda-tipo-']:not(.is-active) i {
    color: var(--agenda-accent);
}

/* --- Lista -------------------------------------------------------------- */

.agenda-list-group {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 1rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--desktop-border);
}

.agenda-list-group:last-child {
    border-bottom: 0;
}

.agenda-list-date {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.agenda-list-date strong {
    font-size: 1.1rem;
    color: var(--desktop-text);
}

.agenda-list-date span {
    font-size: 0.76rem;
    color: var(--desktop-text-soft);
}

.agenda-list-group.is-today .agenda-list-date strong {
    color: var(--desktop-primary);
}

.agenda-list-items {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.agenda-list-item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--desktop-border);
    border-left: 3px solid var(--agenda-accent, #94a3b8);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
}

.agenda-list-item.is-late {
    border-color: rgba(239, 68, 68, 0.4);
    border-left-color: #ef4444;
}

.agenda-list-item.is-done {
    opacity: 0.6;
}

.agenda-list-item.is-done .agenda-list-title {
    text-decoration: line-through;
}

.agenda-list-time {
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--agenda-accent, #64748b);
}

.agenda-list-main {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    min-width: 0;
}

.agenda-list-title {
    font-weight: 700;
    color: var(--desktop-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agenda-list-desc {
    font-size: 0.78rem;
    color: var(--desktop-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .agenda-list-group {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .agenda-list-date {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }

    .agenda-list-item {
        grid-template-columns: 1fr auto;
    }

    .agenda-list-time {
        grid-column: 1 / -1;
    }
}

/* Card de agenda no dashboard — só aparece quando há algo a resolver. */
.dashboard-agenda-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Urgência (is-late/is-today/is-upcoming) é quem manda na cor forte da
   linha — borda e fundo. O tipo (--agenda-accent, vindo de .agenda-tipo-*)
   fica reduzido ao pontinho em .dashboard-agenda-type-dot: antes o tipo
   pintava a linha inteira, e um boleto vencendo em 3 semanas ficava tão
   vermelho quanto um item realmente atrasado. */
/* Sem pílula por padrão: a maioria dos itens é rotina (is-upcoming) e uma
   linha lisa lê como continuação do card acima, não como outro grupo de
   chips. O fundo/borda coloridos ficam reservados pra is-late/is-today
   abaixo, onde o destaque tem motivo. */
.dashboard-agenda-item {
    display: grid;
    grid-template-columns: 76px 10px minmax(0, 1fr);
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.2rem;
    border-left: 3px solid transparent;
    border-radius: 8px;
}

.dashboard-agenda-type-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--agenda-accent, #94a3b8);
}

.dashboard-agenda-item.is-late,
.dashboard-agenda-item.is-today {
    /* Só quem tem fundo colorido precisa do respiro lateral que a linha
       lisa (is-upcoming) dispensa. */
    padding-inline: 0.6rem;
}

.dashboard-agenda-item.is-late {
    border-left-color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

.dashboard-agenda-when {
    display: flex;
    flex-direction: column;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--desktop-text-soft);
    line-height: 1.15;
}

.dashboard-agenda-when small {
    font-size: 0.68rem;
    font-weight: 600;
    opacity: 0.8;
}

.dashboard-agenda-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--desktop-text);
}

/* ==========================================================================
   Agenda — visões Dia, Semana e Ano
   ========================================================================== */

/* Seletor de visão (Dia / Semana / Mês / Ano / Lista) */
.agenda-view-toggle {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--desktop-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
}

.agenda-view-toggle .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 0;
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--desktop-text-soft);
}

.agenda-view-toggle .btn.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--desktop-primary), #8b5cf6);
    box-shadow: 0 10px 22px rgba(111, 90, 252, 0.18);
}

/* Em telas estreitas só o ícone permanece — cinco rótulos não cabem. */
@media (max-width: 991.98px) {
    .agenda-view-toggle .btn span {
        display: none;
    }
}

/* --- Grade horária (Dia e Semana) --------------------------------------- */

.agenda-timegrid {
    /* Altura de uma hora. Toda a posição de evento é percentual, então mudar
       este valor reescala a grade inteira sem tocar em PHP. */
    --agenda-hour-height: 46px;
    --agenda-gutter-width: 62px;
    /* Altura do cabeçalho de dias. A faixa de dia inteiro gruda exatamente
       abaixo dela — as duas precisam do mesmo número, por isso ele mora aqui
       e não solto em cada regra. */
    --agenda-head-height: 58px;
    margin-top: 1rem;
}

.agenda-timegrid-scroll {
    /* Rola nos dois eixos dentro da própria caixa: 24 horas x 46px passam de
       1100px, e sem isto a página inteira viraria uma barra de rolagem só para
       chegar na tarde. O JS posiciona a rolagem inicial num horário útil. */
    overflow: auto;
    max-height: min(66vh, 620px);
    border: 1px solid var(--desktop-border);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
}

.agenda-timegrid-head,
.agenda-timegrid-allday,
.agenda-timegrid-body {
    display: grid;
    grid-template-columns: var(--agenda-gutter-width) repeat(var(--agenda-columns), minmax(0, 1fr));
    min-width: 680px;
}

.agenda-timegrid.is-single-day .agenda-timegrid-head,
.agenda-timegrid.is-single-day .agenda-timegrid-allday,
.agenda-timegrid.is-single-day .agenda-timegrid-body {
    min-width: 0;
}

.agenda-timegrid-head {
    position: sticky;
    top: 0;
    /* Acima da faixa de dia inteiro, que por sua vez fica acima da coluna de
       horas — os três se sobrepõem no canto superior esquerdo durante a
       rolagem, e sem ordem explícita o rótulo de hora vaza por cima. */
    z-index: 5;
    min-height: var(--agenda-head-height);
    border-bottom: 1px solid var(--desktop-border);
    background: var(--desktop-surface, #fff);
}

.agenda-timegrid-gutter {
    position: sticky;
    left: 0;
    z-index: 1;
    background: inherit;
}

.agenda-timegrid-dayhead {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.6rem 0.35rem;
    border-left: 1px solid var(--desktop-border);
}

.agenda-timegrid-weekday {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--desktop-text-soft);
}

.agenda-timegrid-daynum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--desktop-text);
}

.agenda-timegrid-dayhead.is-today .agenda-timegrid-daynum {
    color: #fff;
    background: var(--desktop-primary);
}

.agenda-timegrid-dayhead.is-weekend .agenda-timegrid-weekday {
    color: var(--desktop-text-muted);
}

/* Faixa de dia inteiro */
.agenda-timegrid-allday {
    /* Gruda logo abaixo do cabeçalho: o vencimento do dia precisa continuar
       visível enquanto se rola até a tarde. */
    position: sticky;
    top: var(--agenda-head-height);
    z-index: 4;
    border-bottom: 1px solid var(--desktop-border);
    background: #f6f7fb;
}

.agenda-timegrid-allday-label {
    display: block;
    padding: 0.5rem 0.5rem 0;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: right;
    color: var(--desktop-text-soft);
}

.agenda-timegrid-allday-cell {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    /* Um dia com muitos vencimentos rola aqui dentro em vez de empurrar a
       grade de horas para fora da tela. */
    max-height: 104px;
    overflow-y: auto;
    padding: 0.4rem 0.35rem;
    border-left: 1px solid var(--desktop-border);
}

.agenda-timegrid-allday-cell.is-today {
    background: rgba(111, 90, 252, 0.05);
}

/* Corpo com as 24 horas */
.agenda-timegrid-body {
    position: relative;
}

.agenda-timegrid-hours {
    display: flex;
    flex-direction: column;
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fbfcfe;
}

.agenda-timegrid-hour {
    position: relative;
    height: var(--agenda-hour-height);
}

.agenda-timegrid-hour span {
    position: absolute;
    top: -0.55em;
    right: 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--desktop-text-soft);
    white-space: nowrap;
}

.agenda-timegrid-col {
    position: relative;
    border-left: 1px solid var(--desktop-border);
}

.agenda-timegrid-col.is-weekend {
    background: rgba(148, 163, 184, 0.05);
}

.agenda-timegrid-col.is-today {
    background: rgba(111, 90, 252, 0.04);
}

.agenda-timegrid-slot {
    height: var(--agenda-hour-height);
    border-top: 1px solid var(--desktop-border);
}

.agenda-timegrid-slot:first-child {
    border-top: 0;
}

/* Linha do "agora" — só na coluna de hoje */
.agenda-timegrid-now {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #ef4444;
    z-index: 2;
    pointer-events: none;
}

.agenda-timegrid-now-dot {
    position: absolute;
    left: -4px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #ef4444;
}

/* Bloco de evento posicionado por hora */
.agenda-timegrid-event-slot {
    position: absolute;
    padding-right: 2px;
    z-index: 1;
}

.agenda-event.is-block {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    width: 100%;
    height: 100%;
    padding: 0.25rem 0.4rem;
    overflow: hidden;
    border-left-width: 3px;
    border-radius: 6px;
    line-height: 1.2;
}

.agenda-event.is-block.is-compact {
    flex-direction: row;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.4rem;
}

.agenda-event.is-block.is-compact .agenda-event-title {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.agenda-event.is-block .agenda-event-title {
    white-space: normal;
    /* Duas linhas no máximo: um bloco de 30 min não comporta mais que isso
       sem estourar a própria altura. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Visão de ano ------------------------------------------------------- */

.agenda-year {
    display: grid;
    /* Quatro colunas em tela larga: 12 meses fecham em 3 linhas cheias. Com
       auto-fit o layout caía em 5+5+2, deixando a última linha órfã. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.1rem;
    margin-top: 1rem;
}

@media (max-width: 1399.98px) {
    .agenda-year { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .agenda-year { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .agenda-year { grid-template-columns: minmax(0, 1fr); }
}

.agenda-year-month {
    padding: 0.85rem;
    border: 1px solid var(--desktop-border);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
}

.agenda-year-month-title {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--desktop-text);
    text-decoration: none;
}

.agenda-year-month-title:hover {
    color: var(--desktop-primary);
}

.agenda-year-weekdays,
.agenda-year-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.agenda-year-weekdays span {
    font-size: 0.6rem;
    font-weight: 800;
    text-align: center;
    color: var(--desktop-text-muted);
}

.agenda-year-day {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: 5px;
    font-size: 0.66rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--desktop-text-soft);
    background: rgba(148, 163, 184, 0.10);
}

.agenda-year-day.is-outside {
    background: none;
}

/* Densidade: escala relativa ao pico do próprio ano. */
.agenda-year-day.level-1 { background: rgba(111, 90, 252, 0.20); color: var(--desktop-text); }
.agenda-year-day.level-2 { background: rgba(111, 90, 252, 0.38); color: var(--desktop-text); }
.agenda-year-day.level-3 { background: rgba(111, 90, 252, 0.60); color: #fff; }
.agenda-year-day.level-4 { background: rgba(111, 90, 252, 0.85); color: #fff; }

.agenda-year-day.has-late {
    box-shadow: inset 0 0 0 1.5px #ef4444;
}

.agenda-year-day.is-today {
    outline: 2px solid var(--desktop-primary);
    outline-offset: 1px;
}

a.agenda-year-day:hover {
    filter: brightness(0.92);
}

.agenda-year-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    margin-top: 0.9rem;
    font-size: 0.7rem;
    color: var(--desktop-text-soft);
}

.agenda-year-legend .agenda-year-day {
    width: 13px;
    height: 13px;
    aspect-ratio: auto;
}

/* Conta Google vinculada — identifica de qual conta partem os lembretes. */
.agenda-google-account {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--desktop-success-text);
}

.agenda-summary-google .agenda-google-account {
    font-size: 0.76rem;
    max-width: 100%;
}

/* ==========================================================================
   Dashboard — refinamento etapa 2
   Bloco no fim do arquivo de propósito: sobrescreve as regras originais do
   painel (legendas, grid secundário) sem reescrevê-las no meio do arquivo, e
   carrega as próprias media queries depois das antigas.
   ========================================================================== */

/* --- Saudação ----------------------------------------------------------- */

.dashboard-page-hero .desktop-page-hero-copy h2 {
    text-transform: none;
}

.dashboard-page-hero .desktop-page-hero-copy p {
    margin-top: 0.3rem;
}

/* --- O que merece sua atenção hoje -------------------------------------- */

.dashboard-attention {
    padding: 1.15rem 1.3rem 1.25rem;
    border: 1px solid var(--desktop-border);
    border-radius: 20px;
    background: var(--desktop-surface);
    box-shadow: var(--desktop-shadow-soft);
}

.dashboard-attention-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.dashboard-attention-title {
    margin: 0.35rem 0 0;
    color: var(--desktop-heading);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
}

.dashboard-attention-all {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    color: var(--desktop-primary);
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

.dashboard-attention-all:hover {
    text-decoration: underline;
}

.dashboard-attention-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.7rem;
}

/* Chip: compacto de propósito. Quatro cards grandes empurrariam os
   indicadores para fora da primeira tela — o oposto do objetivo. */
.dashboard-attention-chip {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--desktop-border);
    border-left: 3px solid var(--tone-color, #94a3b8);
    border-radius: 12px;
    background: var(--tone-bg, rgba(148, 163, 184, 0.08));
    color: inherit;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.dashboard-attention-chip:hover {
    transform: translateY(-1px);
    box-shadow: var(--desktop-shadow-soft);
    color: inherit;
    text-decoration: none;
}

.dashboard-attention-chip.tone-danger { --tone-color: #ef4444; --tone-bg: rgba(239, 68, 68, 0.08); }
.dashboard-attention-chip.tone-warning { --tone-color: #f59e0b; --tone-bg: rgba(245, 158, 11, 0.09); }
.dashboard-attention-chip.tone-attention { --tone-color: #eab308; --tone-bg: rgba(234, 179, 8, 0.10); }
.dashboard-attention-chip.tone-info { --tone-color: #3b82f6; --tone-bg: rgba(59, 130, 246, 0.08); }
.dashboard-attention-chip.tone-success { --tone-color: #22c55e; --tone-bg: rgba(34, 197, 94, 0.08); }

.dashboard-attention-value {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--desktop-heading);
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.dashboard-attention-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--tone-color, #94a3b8);
    flex-shrink: 0;
}

.dashboard-attention-label {
    color: var(--desktop-text-soft);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
}

.dashboard-attention-action {
    margin-top: 0.3rem;
    color: var(--tone-color, var(--desktop-primary));
    font-size: 0.76rem;
    font-weight: 800;
}

/* Estado positivo: ocupa a faixa inteira e fecha o assunto. */
.dashboard-attention-clear {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 12px;
    background: rgba(34, 197, 94, 0.07);
}

.dashboard-attention-clear i {
    color: #16a34a;
    font-size: 1.4rem;
}

.dashboard-attention-clear strong {
    display: block;
    color: var(--desktop-heading);
    font-size: 0.92rem;
    font-weight: 800;
}

.dashboard-attention-clear span {
    color: var(--desktop-text-soft);
    font-size: 0.8rem;
}

.dashboard-attention-agenda {
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    /* Linha bem discreta: só o suficiente pra separar o texto, sem repetir
       o peso da borda externa do card e parecer o fim de outra seção. */
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.dashboard-attention-agenda-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.dashboard-attention-agenda-link {
    color: var(--desktop-primary);
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
}

.dashboard-attention-agenda-link:hover {
    text-decoration: underline;
}

/* Tons discretos da agenda: vermelho só para o que já venceu, âmbar para
   hoje, neutro para o resto — ver .dashboard-agenda-item acima. */
.dashboard-agenda-item.is-today {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
}

.dashboard-agenda-item.is-upcoming {
    border-left-color: transparent;
}

/* --- Skeletons ---------------------------------------------------------- */

.dashboard-skeleton {
    display: block;
    border-radius: 6px;
    background: linear-gradient(
        90deg,
        rgba(148, 163, 184, 0.16) 25%,
        rgba(148, 163, 184, 0.28) 37%,
        rgba(148, 163, 184, 0.16) 63%
    );
    background-size: 400% 100%;
    animation: dashboard-skeleton-shimmer 1.4s ease infinite;
}

.dashboard-skeleton-value { width: 58%; height: 1.6rem; }
.dashboard-skeleton-line { width: 80%; height: 0.72rem; margin-top: 0.35rem; }
.dashboard-skeleton-link { width: 42%; height: 0.66rem; margin-top: 0.45rem; }
.dashboard-skeleton-inline { display: inline-block; width: 3.2rem; height: 0.85rem; vertical-align: middle; }
.dashboard-skeleton-row { width: 100%; height: 1.15rem; }

.dashboard-attention-chip.is-skeleton {
    border-left-color: var(--desktop-border);
    background: var(--desktop-surface-soft);
    pointer-events: none;
}

@keyframes dashboard-skeleton-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-skeleton {
        animation: none;
    }
}

/* --- Indicadores -------------------------------------------------------- */

.dashboard-kpi-trend {
    margin: 0.15rem 0 0;
    font-size: 0.76rem;
    font-weight: 800;
}

.dashboard-kpi-trend.is-up { color: #16a34a; }
.dashboard-kpi-trend.is-down { color: #ef4444; }

/* --- Gráficos grandes lado a lado --------------------------------------- */

.dashboard-charts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 1440px) {
    .dashboard-charts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- OS por status ------------------------------------------------------ */

.dashboard-panel-total {
    color: var(--desktop-text-soft);
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.dashboard-status-legend-item {
    background: var(--desktop-surface-soft);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.12s ease, background 0.12s ease;
}

a.dashboard-status-legend-item:hover {
    border-color: var(--desktop-primary);
    background: var(--desktop-surface);
    color: inherit;
    text-decoration: none;
}

.dashboard-status-legend-item > div {
    min-width: 0;
}

/* Detalhe: os status reais que compõem a macrofase. O agrupamento é visual —
   nenhum status deixa de ser exibido. */
.dashboard-status-detail {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 0.12rem;
    opacity: 0.75;
    font-size: 0.68rem;
}

/* --- Legenda de equipamentos -------------------------------------------- */

.dashboard-equipment-legend {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.3rem;
    scrollbar-width: thin;
}

.dashboard-equipment-legend-item {
    background: var(--desktop-surface-soft);
    white-space: nowrap;
    flex-shrink: 0;
}

/* --- Resumo financeiro -------------------------------------------------- */

.dashboard-context-headline {
    margin-bottom: 0.9rem;
}

.dashboard-context-headline-value {
    display: block;
    margin-top: 0.2rem;
    color: var(--desktop-heading);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.dashboard-context-headline-value.is-negative {
    color: #ef4444;
}

.dashboard-context-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-context-metric {
    background: var(--desktop-surface-soft);
}

/* --- Últimas OS --------------------------------------------------------- */

.dashboard-panel-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.dashboard-orders-table tbody tr {
    transition: background 0.12s ease;
}

.dashboard-orders-table tbody tr:hover {
    background: var(--desktop-surface-soft);
}

.dashboard-order-number {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

/* Marcador só aparece quando há algo real a sinalizar — pintar todas as
   linhas equivale a não pintar nenhuma. */
.dashboard-order-priority {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex-shrink: 0;
    background: #94a3b8;
}

.dashboard-order-priority.tone-danger { background: #ef4444; }
.dashboard-order-priority.tone-warning { background: #f59e0b; }
.dashboard-order-priority.tone-success { background: #22c55e; }

/* --- Estoque baixo ------------------------------------------------------ */

.dashboard-low-stock-item.is-critical {
    border-left: 3px solid #ef4444;
}

/* --- Espaçamento e respiro ---------------------------------------------- */

/* Escopado em .dashboard-page: .dashboard-panel e .dashboard-panel-head também
   vestem as telas de ajuda, que não fazem parte deste refinamento. */
.dashboard-page .dashboard-panel {
    padding: 1.35rem;
}

.dashboard-page .dashboard-panel-head {
    margin-bottom: 1.15rem;
}

.dashboard-page .dashboard-panel-head p {
    margin-top: 0.25rem;
}

.dashboard-kpi-grid,
.dashboard-secondary-grid {
    gap: 1.25rem;
}

/* --- Responsivo --------------------------------------------------------- */

@media (max-width: 1280px) {
    .dashboard-secondary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-secondary-grid [data-dashboard-status-panel],
    .dashboard-secondary-grid [data-dashboard-context-panel] {
        grid-column: span 1;
    }
}

@media (max-width: 1024px) {
    .dashboard-status-chart-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-status-chart-layout .dashboard-status-legend,
    .dashboard-status-legend {
        max-height: none;
        overflow-y: visible;
    }
}

@media (max-width: 768px) {
    .dashboard-attention {
        padding: 1rem;
    }

    .dashboard-attention-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-kpi-grid,
    .dashboard-secondary-grid,
    .dashboard-charts-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .dashboard-context-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-page .dashboard-panel {
        padding: 1.1rem;
    }
}

@media (max-width: 430px) {
    .dashboard-attention-value {
        font-size: 1.3rem;
    }

    .dashboard-context-metrics {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-context-headline-value {
        font-size: 1.5rem;
    }
}

/* ============================================================
   Ajuda de campo — o "?" ao lado do rotulo
   ------------------------------------------------------------
   O balao explica PARA QUE serve o campo e COMO preencher bem.
   E um <button>, nao um <i>, porque assim recebe foco por Tab e
   responde a toque no celular — onde nao existe "repousar o mouse".
   ============================================================ */
.campo-label-ajuda {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.campo-ajuda {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .82rem;
    line-height: 1;
    cursor: help;
    opacity: .65;
    transition: opacity .15s ease, color .15s ease, background-color .15s ease;
}

.campo-ajuda:hover,
.campo-ajuda:focus-visible {
    opacity: 1;
    color: var(--bs-primary, #0d6efd);
    background-color: rgba(13, 110, 253, .1);
}

.campo-ajuda:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 1px;
}

/* O texto de ajuda e uma frase inteira, nao um rotulo curto: o padrao
   de 200px do Bootstrap quebraria em 6 linhas estreitas. */
.campo-ajuda-tip {
    --bs-tooltip-max-width: 22rem;
    --bs-tooltip-opacity: 1;
    --bs-tooltip-padding-x: .75rem;
    --bs-tooltip-padding-y: .55rem;
    --bs-tooltip-font-size: .8125rem;
}

.campo-ajuda-tip .tooltip-inner {
    text-align: left;
    line-height: 1.45;
}

.campo-ajuda-tip .tooltip-inner strong {
    font-weight: 600;
}

.campo-ajuda-tip .tooltip-inner .tip-exemplo {
    display: block;
    margin-top: .4rem;
    padding-top: .4rem;
    border-top: 1px solid rgba(255, 255, 255, .22);
    font-variant-numeric: tabular-nums;
    opacity: .9;
}

@media (prefers-reduced-motion: reduce) {
    .campo-ajuda {
        transition: none;
    }
}