/* ============================================================
   Monfer Design System — CSS
   Generated with Claude Design + manual refinements
   ============================================================ */

:root {
    /* ── Brand ── */
    --brand-gold: #FFD600;
    --brand-gold-dark: #E6C200;
    --brand-gold-soft: #FFF7CC;
    --brand-black: #1a1a1a;
    --brand-navy: #1a365d;
    --brand-navy-light: #2c5f9f;
    --brand-navy-deep: #0f1f37;

    /* ── Semantic colors ── */
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #dbeafe;
    --primary-glow: rgba(37,99,235,0.25);
    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;
    --info: #0ea5e9;
    --success-bg: rgba(22,163,74,0.10);
    --warning-bg: rgba(217,119,6,0.10);
    --danger-bg: rgba(220,38,38,0.10);
    --info-bg: rgba(37,99,235,0.10);

    /* ── Surfaces ── */
    --bg: #f1f5f9;
    --bg-card: #ffffff;
    --bg-primary: #ffffff; /* alias p/ fundo solido opaco (era indefinido -> dropdowns transparentes) */
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-glass: rgba(255,255,255,0.85);

    /* ── Text ── */
    --text: #1e293b;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-base: 14px;

    /* ── Borders ── */
    --border: #e2e8f0;
    --border-hover: #cbd5e1;

    /* ── Shadows ── */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
    --shadow-window: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);

    /* ── Radius ── */
    --radius-xs: 3px;
    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --radius-round: 999px;

    /* ── Typography ── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'DM Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;
    --fs-2xs: 10px;
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-md: 13px;
    --fs-base: 14px;
    --fs-lg: 16px;
    --fs-xl: 20px;
    --fs-2xl: 24px;
    --fs-3xl: 32px;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --tracking-tight: -0.02em;
    --tracking-body: -0.01em;
    --eyebrow-size: 11px;
    --eyebrow-tracking: 0.5px;

    /* ── Spacing ── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    /* ── Layout ── */
    --sidebar-w: 220px;
    --chat-w: 340px;
    --taskbar-h: 40px;
    --taskbar-w: 48px;
    --box-header-bg: #f0f1f3;
    --box-border: #cbd5e1;

    /* ── Transitions ── */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Store (Loja B2B) ── */
    --store-bg: #ffffff;
    --store-bg-gray: #f5f5f5;
    --store-text: #333333;
    --store-text-secondary: #666666;
    --store-text-muted: #999999;
    --store-border: #eeeeee;
    --store-border-mid: #dddddd;
    --store-border-dark: #cccccc;
    --store-accent: #FFD600;
    --store-accent-dark: #E6C200;
    --store-link: #2563eb;
    --store-header-h: 80px;
    --store-sidebar-w: 260px;
    --store-max-w: 1280px;
}

[data-theme="dark"] {
    --primary: #3b82f6;
    --primary-dark: #2563eb;
    --primary-light: rgba(59,130,246,0.12);
    --primary-glow: rgba(59,130,246,0.20);
    --success-bg: rgba(22,163,74,0.16);
    --warning-bg: rgba(217,119,6,0.16);
    --danger-bg: rgba(220,38,38,0.16);
    --info-bg: rgba(59,130,246,0.16);
    --bg: #0c1222;
    --bg-card: #162032;
    --bg-primary: #162032; /* alias p/ fundo solido opaco (era indefinido -> dropdowns transparentes) */
    --bg-secondary: #1a2740;
    --bg-tertiary: #0c1222;
    --bg-glass: rgba(22,32,50,0.92);
    --text: #e8edf5;
    --text-primary: #e8edf5;
    --text-secondary: #8b9dc3;
    --text-muted: #5f7499;
    --border: #243352;
    --border-hover: #334d7a;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.15);
    --shadow: 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.12);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.25), 0 2px 4px -2px rgba(0,0,0,0.15);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.3), 0 4px 6px -4px rgba(0,0,0,0.15);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.35), 0 8px 10px -6px rgba(0,0,0,0.2);
    --shadow-window: 0 8px 32px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.15);
    --bg-alt: #142030;
    --box-header-bg: #142030;
    --box-border: #2a3f5f;
    --xml-imp-troca-bg: #3e2723;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    font-size: var(--fs-base);
    line-height: 1.5;
    letter-spacing: var(--tracking-body);
}

/* Global scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Global focus ring */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius);
}

/* ============================================================
   LOGIN
   ============================================================ */

#loginScreen {
    width: 100%;
    flex: 1;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    font-family: 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at top left, #2c5f9f 0%, #1a365d 40%, #0f1f37 100%);
}

.login-bg-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.2;
    background-image:
        radial-gradient(circle at 25% 30%, rgba(255,255,255,0.25) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.15) 0%, transparent 45%);
}

.login-container {
    position: relative;
    width: 100%;
    max-width: 28rem; /* 448px, same as Tailwind max-w-md */
}

.login-card {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    outline: 1px solid rgba(0,0,0,0.05);
    overflow: hidden;
}

.login-card-header {
    padding: 2.5rem 2rem 1.25rem;
    text-align: center;
}

.login-card-header img {
    display: block;
    margin: 0 auto;
    height: 3rem;
    width: auto;
}

.login-subtitle {
    margin-top: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #64748b;
}

.login-card-body {
    padding: 0 2rem 2rem;
}

#loginError {
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    color: #b91c1c;
    font-weight: 500;
}

#loginError:empty {
    display: none;
}

.login-field {
    margin-bottom: 1rem;
}

.login-field:last-of-type {
    margin-bottom: 1.5rem;
}

.login-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
    margin-bottom: 0.375rem;
}

.login-field input {
    display: block;
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    color: #1e293b;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    outline: none;
}

.login-field input::placeholder {
    color: #94a3b8;
}

.login-field input:focus {
    border-color: #2c5f9f;
    background: #fff;
    box-shadow: 0 0 0 4px #d9e6f4;
}

.login-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    background: linear-gradient(to bottom right, #1a365d, #0f1f37);
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(15,31,55,0.2);
    transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}

.login-btn:hover {
    background: linear-gradient(to bottom right, #1f4a82, #142a4a);
    box-shadow: 0 10px 15px -3px rgba(15,31,55,0.25);
}

.login-btn:focus {
    outline: none;
    box-shadow: 0 0 0 4px #b5cde8;
}

.login-btn:active {
    transform: translateY(1px);
}

.login-btn svg {
    width: 1rem;
    height: 1rem;
}

.login-footer {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.6);
}

/* Legacy compat (unused, kept for reference) */
.login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    flex: 1;
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
}

.login-error {
    background: #fef2f2;
    color: var(--danger);
    padding: 10px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 16px;
    display: none;
}

[data-theme="dark"] .login-error { background: #450a0a; }

/* ============================================================
   TOP NAVIGATION BAR
   ============================================================ */

.topnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    z-index: 200;
    padding: 0 12px;
    box-shadow: var(--shadow-xs);
    gap: 8px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

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

.topnav-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text);
    flex-shrink: 0;
}

.monfer-logo {
    width: 28px;
    height: 28px;
    background: #FFD600;
    color: #1a1a1a;
    font-weight: 900;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    letter-spacing: -1px;
    flex-shrink: 0;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-name {
    font-weight: 800;
    font-size: 15px;
    color: var(--text);
    letter-spacing: 0.5px;
}

.brand-sub {
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    font-weight: 600;
}

.topnav-hamburger {
    display: none;
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 18px;
    cursor: pointer;
    color: var(--text);
}

@media (max-width: 1024px) {
    .topnav-hamburger { display: block; }
}

/* Navigation menu */
.topnav-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.topnav-menu::-webkit-scrollbar { display: none; }

.topnav-link {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s;
    white-space: nowrap;
    position: relative;
}

.topnav-link:hover {
    background: var(--primary-light);
    color: var(--primary);
}

.topnav-link.active,
.topnav-link.group-active {
    color: var(--primary);
    background: var(--primary-light);
    font-weight: 600;
}

.topnav-link .nav-icon { font-size: 15px; }
.dd-arrow { font-size: 10px; opacity: 0.6; margin-left: 2px; }

/* Dropdown menus */
.topnav-dropdown {
    position: relative;
}

.topnav-dd-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 200px;
    z-index: 300;
    padding: 4px;
    animation: fadeInDown 0.15s ease;
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.topnav-dropdown.open .topnav-dd-content {
    display: block;
}

.topnav-dd-content a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    border-radius: 6px;
    transition: all 0.12s;
    white-space: nowrap;
}

.topnav-dd-content a:hover {
    background: var(--primary-light);
    color: var(--primary);
}

.topnav-dd-content a.active {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
}

/* Right section: search + icons + user */
.topnav-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    margin-left: 0;
}

.topnav-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
}

.topnav-search .global-search-icon {
    position: absolute;
    left: 10px;
    font-size: 14px;
    color: var(--text-muted);
}

.topnav-search .global-search-input {
    width: 100%;
    padding: 7px 102px 7px 32px;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 13px;
    background: var(--bg);
    color: var(--text);
    outline: none;
    transition: all 0.2s;
}

.topnav-search .global-search-input:focus {
    width: 100%;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.topnav-search .global-search-hint {
    position: absolute;
    right: 10px;
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid var(--border);
    pointer-events: none;
}

.topnav-icon-btn {
    position: relative;
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: var(--text-secondary);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.15s;
}

.topnav-icon-btn:hover {
    background: var(--bg-secondary);
    color: var(--text);
}

.zoom-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--bg-secondary);
    border-radius: 6px;
    padding: 2px 4px;
    margin-right: 4px;
}
.zoom-controls .zoom-btn {
    width: 24px;
    height: 24px;
    font-size: 15px;
    font-weight: bold;
}
.zoom-label {
    font-size: 11px;
    color: var(--text-secondary);
    min-width: 36px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    line-height: 1;
}
.zoom-label:hover {
    color: var(--primary);
}

.topnav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 50%;
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    font-weight: 700;
    padding: 0 3px;
    line-height: 1;
}

/* User menu */
.topnav-user {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.15s;
    position: relative;
}

.topnav-user:hover { background: var(--bg-secondary); }

.topnav-user .user-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0;
}

.topnav-user-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.topnav-user-dd {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 180px;
    z-index: 300;
    padding: 4px;
    animation: fadeInDown 0.15s ease;
}

.topnav-user-dd.open { display: block; }

.topnav-user-dd-info {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

.topnav-user-dd-info strong { display: block; font-size: 14px; }
.topnav-user-dd-info small { color: var(--text-muted); font-size: 11px; text-transform: uppercase; }

.topnav-user-dd button {
    width: 100%;
    text-align: left;
    padding: 9px 14px;
    border: none;
    background: none;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.12s;
}

.topnav-user-dd button:hover {
    background: var(--bg-secondary);
}

/* ============================================================
   SHORTCUT BAR (F1-F12)
   ============================================================ */

.shortcut-bar {
    position: fixed;
    top: 44px;
    left: 0;
    right: 0;
    height: 28px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    z-index: 199;
    padding: 0 6px;
    gap: 2px;
}
.shortcut-btns {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.shortcut-btns::-webkit-scrollbar { display: none; }
.shortcut-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    font-size: 11px;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1.3;
}
.shortcut-btn:hover {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}
.shortcut-btn.active {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
}
.shortcut-btn kbd {
    display: inline-block;
    font-size: 9px;
    font-family: inherit;
    padding: 0 3px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--text-muted);
    line-height: 1.4;
}
.shortcut-config-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 13px;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    flex-shrink: 0;
}
.shortcut-config-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text);
}

/* Shortcut config modal */
.shortcut-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shortcut-modal {
    background: var(--bg-card);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    width: 440px;
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}
.shortcut-modal-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 14px;
}
.shortcut-modal-header button {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--text-muted);
}
.shortcut-modal-body {
    padding: 12px 16px;
    overflow-y: auto;
    flex: 1;
}
.shortcut-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.shortcut-row label {
    width: 32px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.shortcut-row select {
    flex: 1;
    padding: 4px 6px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--bg);
    color: var(--text);
}
.shortcut-modal-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.shortcut-modal-footer button {
    padding: 6px 16px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
}
.shortcut-modal-footer button.primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.shortcut-modal-footer button.primary:hover {
    background: var(--primary-dark);
}

/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar {
    position: fixed;
    top: 44px;
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    /* Impede o menu de guardar deslocamento horizontal e cortar o inicio dos
       titulos quando uma opcao longa ultrapassa a largura da barra. */
    overflow-x: hidden;
    z-index: 150;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.sidebar-header {
    padding: 16px 20px 10px;
    border-bottom: 1px solid var(--border);
}

.sidebar-header h2 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    cursor: default;
    user-select: none;
}

.sidebar-nav {
    flex: 1;
    padding: 8px 0;
}

.sidebar-nav > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    margin: 1px 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius);
    border-left: none;
    transition: all var(--transition-fast);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-nav > a:hover {
    background: var(--primary-light);
    color: var(--primary);
}

.sidebar-nav > a.active {
    color: var(--primary);
    background: var(--primary-light);
    font-weight: 600;
}

.sidebar-icon { font-size: 18px; flex-shrink: 0; }

/* Sidebar groups */
.sidebar-group {
    border-bottom: 1px solid var(--border);
}

.sidebar-group:last-child { border-bottom: none; }

.sidebar-group-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
}

.sidebar-group-toggle:hover {
    background: var(--bg-secondary);
    color: var(--text);
}

.sidebar-arrow {
    margin-left: auto;
    font-size: 12px;
    transition: transform 0.2s;
}

.sidebar-group.open .sidebar-arrow {
    transform: rotate(180deg);
}

.sidebar-group-items {
    display: none;
    padding-bottom: 4px;
}

.sidebar-group.open .sidebar-group-items {
    display: block;
}

.sidebar-group-items a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 38px;
    margin: 1px 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    border-radius: var(--radius);
    transition: all var(--transition-fast);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-group-items a:hover {
    background: var(--primary-light);
    color: var(--primary);
}

.sidebar-group-items a.active {
    color: var(--primary);
    background: var(--primary-light);
    font-weight: 600;
}

/* Sidebar overlay for mobile/tablet */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 44px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 140;
}

.sidebar-overlay.active { display: block; }

/* ============================================================
   MAIN CONTENT
   ============================================================ */

.main-content {
    margin-left: var(--sidebar-w);
    flex: 1;
    min-height: 100vh;
    padding: 56px 20px 20px 20px;
    transition: margin-right 0.3s;
}

.main-content.chat-open {
    margin-right: var(--chat-w);
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.page-header h1 {
    font-size: 22px;
    font-weight: 700;
}

.page-header .actions {
    display: flex;
    gap: 8px;
}

/* ============================================================
   CARDS / KPIs
   ============================================================ */

.kpi-grid {
    display: grid;
    /* auto-fit (nao fill): sem trilha fantasma — os cards preenchem a largura em monitor largo */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: visible;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.kpi-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.kpi-card .kpi-icon {
    font-size: 22px;
    margin-bottom: 4px;
    opacity: 0.8;
}

.kpi-card .kpi-value {
    font-size: clamp(16px, 2.5vw, 24px);
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.1;
    word-break: break-word;
}

.kpi-card .kpi-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ============================================================
   TABLE
   ============================================================ */

.data-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
    transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.data-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

.data-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    gap: 12px;
    background: var(--bg-secondary);
}

.data-card-header h2 { font-size: 15.5px; font-weight: 700; }
/* Assinatura visual (barrinha azul antes do título de card) — igual à tela Venda. Inline p/ não reflowar
   elementos internos do h2; usa var(--primary) => funciona em light e dark. */
.data-card-header h2::before,
.card > h3:first-child::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--primary);
    margin-right: 9px;
    vertical-align: -1px;
}
/* .card não tinha estilo base (painéis de gráfico ficavam "soltos", sem borda/fundo). Recebe o MESMO look
   do .data-card p/ consistência com a Venda. Estilos inline (margin/padding próprios) continuam vencendo. */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 15px 18px;
    transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--border-hover); }
.card > h3:first-child { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--text); }

.search-bar {
    display: flex;
    gap: 8px;
    align-items: center;
}

.search-bar input, .search-bar select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    background: var(--bg);
    color: var(--text);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-bar input:focus, .search-bar select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.search-bar input::placeholder { color: var(--text-muted); opacity: 0.7; }

.search-bar input { width: 250px; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table thead th {
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    background: var(--bg-secondary);
    position: sticky;
    top: 0;
    z-index: 1;
}

.data-table thead th:hover { color: var(--primary); }

/* Reposição: card rola internamente p/ o cabeçalho (já sticky) grudar no topo ao rolar a lista */
.rep-tablecard {
    overflow: auto;
    max-height: calc(100vh - 230px);
    min-height: 320px;
}
.rep-tablecard thead th {
    top: 0;
    z-index: 4;               /* acima das linhas de grupo por fornecedor */
    box-shadow: 0 2px 0 var(--border);
}

/* cabecalho de coluna numerica acompanha o alinhamento dos valores */
.data-table thead th.text-right { text-align: right; }
/* digitos de largura fixa: virgulas/decimais alinham verticalmente em toda coluna de R$/qtde */
.data-table td.text-right, .data-table th.text-right,
.dash-table td.text-right { font-variant-numeric: tabular-nums; }

.data-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background var(--transition-fast);
}
.data-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg-secondary) 50%, transparent); }

.data-table tbody tr:hover { background: var(--primary-light); }

.data-table tbody td {
    padding: 9px 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.data-table tbody td.text-right,
.data-table tbody td.text-center {
    overflow: visible;
    text-overflow: clip;
    max-width: none;
    white-space: nowrap;
}

.data-table .text-right { text-align: right; }
.data-table .text-center { text-align: center; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
    line-height: 1.4;
    transition: opacity var(--transition-fast);
}
.badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
    flex-shrink: 0;
}

.badge-success { background: rgba(22,163,74,0.1); color: #16a34a; border: 1px solid rgba(22,163,74,0.2); }
.badge-warning { background: rgba(217,119,6,0.1); color: #d97706; border: 1px solid rgba(217,119,6,0.2); }
.badge-danger { background: rgba(220,38,38,0.1); color: #dc2626; border: 1px solid rgba(220,38,38,0.2); }
.badge-info { background: rgba(37,99,235,0.1); color: #2563eb; border: 1px solid rgba(37,99,235,0.2); }
.badge-muted { background: var(--bg-secondary); color: var(--text-muted); border: 1px solid var(--border); }
.badge-secondary { background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border); }

[data-theme="dark"] .badge-success { background: #14532d; color: #86efac; border-color: #166534; }
[data-theme="dark"] .badge-warning { background: #78350f; color: #fcd34d; border-color: #92400e; }
[data-theme="dark"] .badge-danger { background: #7f1d1d; color: #fca5a5; border-color: #991b1b; }
[data-theme="dark"] .badge-info { background: #1e3a5f; color: #93c5fd; border-color: #1e40af; }
[data-theme="dark"] .badge-muted { background: #334155; color: #94a3b8; border-color: #475569; }
[data-theme="dark"] .badge-secondary { background: #334155; color: #94a3b8; border-color: #475569; }

/* Selo de status unificado: pares de cores com contraste WCAG AA (>= 4,5:1). */
.status-badge { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:24px; padding:3px 9px; border:1px solid transparent; border-radius:999px; font-size:12px; font-weight:700; line-height:1.35; white-space:nowrap; }
.status-badge--success { background:#dcfce7; color:#14532d; border-color:#86efac; }
.status-badge--warning { background:#fef3c7; color:#78350f; border-color:#fcd34d; }
.status-badge--danger { background:#fee2e2; color:#7f1d1d; border-color:#fca5a5; }
.status-badge--info { background:#dbeafe; color:#1e3a5f; border-color:#93c5fd; }
.status-badge--neutral { background:#e2e8f0; color:#334155; border-color:#94a3b8; }
[data-theme="dark"] .status-badge--success { background:#14532d; color:#dcfce7; border-color:#166534; }
[data-theme="dark"] .status-badge--warning { background:#78350f; color:#fef3c7; border-color:#92400e; }
[data-theme="dark"] .status-badge--danger { background:#7f1d1d; color:#fee2e2; border-color:#991b1b; }
[data-theme="dark"] .status-badge--info { background:#1e3a5f; color:#dbeafe; border-color:#1e40af; }
[data-theme="dark"] .status-badge--neutral { background:#334155; color:#f1f5f9; border-color:#475569; }
.status-group-row > td { background:var(--bg-secondary); color:var(--text); border-top:2px solid var(--border); padding:8px 6px; font-size:12px; font-weight:700; }
.cot-forn-actions { overflow:visible !important; min-width:96px; }
.cot-forn-actions .table-action-popover { min-width:190px; right:0; left:auto; }
.cot-forn-actions .table-action-popover :is(button,a) { min-height:32px; }
.owner-status-banner { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px; border:1px solid; border-left-width:4px; border-radius:10px; background:var(--bg-card); color:var(--text); font-size:14px; font-weight:600; }
.owner-status-icon { font-size:20px; }
#painelDonoKPIs .widget-value { white-space:nowrap; overflow-wrap:normal; font-size:clamp(20px,2vw,30px); }
#saKpis { grid-template-columns:repeat(7,minmax(120px,1fr)); }
.sa-table-scroll { overflow-x:auto; padding-bottom:72px; }
.sa-priority-table th:first-child,.sa-priority-table td:first-child,.cot-forn-table th:first-child,.cot-forn-table td:first-child { position:sticky; left:0; z-index:2; background:var(--bg-card); }
.dash-table.cot-forn-table td { vertical-align: top; }
@media (max-width:1500px) and (min-width:769px) {
    #saKpis { grid-template-columns:repeat(7,minmax(100px,1fr)); }
    .sa-priority-table :is(th,td):nth-child(3), .sa-priority-table :is(th,td):nth-child(5), .sa-priority-table :is(th,td):nth-child(6), .sa-priority-table :is(th,td):nth-child(8), .sa-priority-table :is(th,td):nth-child(12) { display:none; }
    #pageCotacoesFornecedor .cot-forn-table :is(th,td):nth-child(4), #pageCotacoesFornecedor .cot-forn-table :is(th,td):nth-child(6) { display:none; }
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
}

.pagination .page-btns {
    display: flex;
    gap: 4px;
}

.pagination button {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text);
    cursor: pointer;
    font-size: 13px;
}

.pagination button:hover { border-color: var(--primary); color: var(--primary); }
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination button.active { background: var(--primary); color: white; border-color: var(--primary); }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    background: var(--bg-card);
    color: var(--text);
    transition: all var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}

.btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.btn:active { transform: scale(0.97); }

.btn-primary {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 1px 3px rgba(37,99,235,0.3);
}
.btn-primary:hover { background: var(--primary-dark); color: white; box-shadow: 0 2px 6px rgba(37,99,235,0.35); }

.btn-success { background: var(--success); color: white; border-color: var(--success); }
.btn-success:hover { filter: brightness(1.1); }
.btn-danger { background: var(--danger); color: white; border-color: var(--danger); }
.btn-danger:hover { filter: brightness(1.1); }
.btn-sm { padding: 6px 14px; font-size: 12px; }

.btn:disabled, .btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.pcli-status-btn {
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    transition: all 0.2s;
}
.pcli-status-btn:hover { border-color: var(--primary); color: var(--primary); }
.pcli-status-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* ============================================================
   CHAT PANEL
   ============================================================ */

.chat-panel {
    width: var(--chat-w);
    height: 100vh;
    position: fixed;
    right: 0;
    top: 0;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transform: translateX(100%);
    transition: transform 0.3s;
    box-shadow: -4px 0 12px rgba(0,0,0,0.1);
}

.chat-panel.open { transform: translateX(0); }

.chat-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-header h3 { font-size: 15px; }

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-msg {
    max-width: 90%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
    word-wrap: break-word;
}

.chat-msg.user {
    align-self: flex-end;
    background: var(--primary);
    color: white;
    border-bottom-right-radius: 4px;
}

.chat-msg.assistant {
    align-self: flex-start;
    background: var(--bg);
    border-bottom-left-radius: 4px;
}

.chat-msg .sql-block {
    background: #1e293b;
    color: #e2e8f0;
    padding: 8px 10px;
    border-radius: 6px;
    margin-top: 8px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    overflow-x: auto;
    white-space: pre-wrap;
}

.chat-msg .data-result {
    margin-top: 8px;
    font-size: 12px;
    overflow-x: auto;
}

.chat-msg .data-result table {
    border-collapse: collapse;
    width: 100%;
}

.chat-msg .data-result th, .chat-msg .data-result td {
    padding: 4px 8px;
    border: 1px solid var(--border);
    text-align: left;
    font-size: 11px;
}

.chat-msg .data-result th {
    background: var(--primary-light);
    font-weight: 600;
}

.chat-input-area {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
}

.chat-input-area input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 13px;
    background: var(--bg);
    color: var(--text);
    outline: none;
}

.chat-input-area input:focus { border-color: var(--primary); }

.chat-input-area button {
    padding: 10px 16px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
}

.chat-input-area button:hover { background: var(--primary-dark); }

/* ============================================================
   CHAT TOGGLE BUTTON
   ============================================================ */

.chat-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    z-index: 99;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-toggle:hover { transform: scale(1.1); }
.chat-toggle.hidden { display: none; }

/* ============================================================
   MODAL / DETAIL
   ============================================================ */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-content {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    width: 98vw;
    max-width: 1600px;
    max-height: 95vh;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.modal-content.modal-fullscreen {
    width: 98vw;
    height: 95vh;
    max-width: 98vw;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
}
.modal-content.modal-fullscreen > .modal-header {
    flex-shrink: 0;
    position: static;
}
.modal-content.modal-fullscreen > .modal-body {
    flex: 1;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-card);
}

.modal-header h2 { font-size: 16px; font-weight: 700; }

.modal-close {
    background: none;
    border: 1px solid transparent;
    font-size: 22px;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px 8px;
    border-radius: var(--radius);
    transition: all var(--transition-fast);
    line-height: 1;
}

.modal-close:hover { color: var(--danger); background: rgba(220,38,38,0.1); border-color: rgba(220,38,38,0.2); }

.modal-body { padding: 16px 20px; font-size: 14px; overflow-x: auto; }

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    margin-bottom: 16px;
}

.detail-item {
    padding: 6px 0;
}

.detail-item label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    margin-bottom: 2px;
    font-weight: 500;
}

.detail-item span {
    font-size: 14px;
    font-weight: 500;
}

.modal-body input, .modal-body select, .modal-body textarea {
    padding: 8px 12px;
    font-size: 13px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.modal-body input:focus, .modal-body select:focus, .modal-body textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
    outline: none;
}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */

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

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
}

.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14.5px;
    background: var(--bg);
    color: var(--text);
    outline: none;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--primary);
}

.form-row {
    display: flex;
    gap: 16px;
}

.form-row .form-group { flex: 1; }

/* ============================================================
   ORCAMENTO EDITOR
   ============================================================ */

/* ===== Editor de orçamento — lista de itens estilo Venda ===== */
.orc-itens-box {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-card, var(--bg));
}
/* grid compartilhado header + linhas: # | produto | qtde | preço | subtotal | x */
.orc-it-head,
.orc-it-row {
    display: grid;
    grid-template-columns: 34px 1fr 92px 118px 128px 40px;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
}
.orc-it-head {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
}
.orc-it-head .orc-it-c { text-align: right; }
.orc-it-row {
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    transition: background .12s;
}
.orc-it-row:last-child { border-bottom: 0; }
.orc-it-row:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.orc-it-n { color: var(--text-muted); font-size: 12px; text-align: center; }

.orc-it-prod { min-width: 0; }
.orc-it-desc {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    line-height: 1.35;
}
.orc-it-cod {
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.orc-it-cod:hover { text-decoration: underline; }
.orc-it-nome {
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.orc-it-tab {
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 5px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.orc-it-pill {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.orc-it-hints { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px; }
.orc-it-hints:empty { display: none; }

.orc-it-c { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.orc-it-inp {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    text-align: right;
    background: var(--bg);
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.orc-it-inp:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
}
.orc-it-sub { font-weight: 700; }
.orc-it-descpct { font-size: 10px; font-weight: 700; white-space: nowrap; }

.orc-it-x { text-align: center; }
.orc-it-del {
    width: 28px; height: 28px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}
.orc-it-del:hover { background: #fef2f2; color: #dc2626; border-color: #fca5a5; }

/* ===== Barra de totais ===== */
.orc-total {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    padding: 16px 4px 8px;
    flex-wrap: wrap;
}
.orc-tot-meta { display: flex; gap: 16px; color: var(--text-muted); font-size: 13px; font-weight: 600; }
.orc-tot-right { display: flex; flex-direction: column; gap: 4px; min-width: 240px; margin-left: auto; }
.orc-tot-line { display: flex; justify-content: space-between; gap: 24px; font-size: 14px; color: var(--text-secondary); }
.orc-tot-grand {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: baseline;
    padding-top: 6px;
    margin-top: 2px;
    border-top: 2px solid var(--border);
}
.orc-tot-grand span { font-size: 15px; font-weight: 700; color: var(--text); }
.orc-tot-grand strong { font-size: 24px; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }

/* ===== Barra de margem (admin) ===== */
.orc-marg-wrap {
    margin: 6px 4px 4px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-secondary);
}
.orc-marg-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.orc-marg-lbl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); }
.orc-marg-pct { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.orc-marg-track {
    height: 9px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--text-muted) 22%, transparent);
    overflow: hidden;
}
.orc-marg-fill { height: 100%; border-radius: 6px; transition: width .25s ease, background .25s ease; }
.orc-marg-meta { display: flex; justify-content: space-between; gap: 16px; margin-top: 7px; font-size: 13px; color: var(--text-secondary); }
.orc-marg-meta strong { font-variant-numeric: tabular-nums; }

/* ===== Cotação de impostos (revenda) ===== */
.orc-imp-ctrls {
    display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end;
    padding: 12px 14px; margin-bottom: 14px;
    background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px;
}
.orc-imp-c { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; }
.orc-imp-c select, .orc-imp-c input {
    padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg); color: var(--text); font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0;
}
.orc-imp-chk { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); cursor: pointer; }
.orc-imp-chk input { width: 17px; height: 17px; }
.orc-imp-tbl th, .orc-imp-tbl td { font-size: 13px; }
.orc-imp-tbl .orc-imp-desc {
    max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.orc-imp-mvacell { min-width: 96px; }
.orc-imp-mvainp {
    width: 64px; padding: 5px 6px; text-align: right;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg); color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums;
}
.orc-imp-src-wrap { display: flex; gap: 5px; justify-content: center; align-items: center; margin-top: 3px; font-size: 10px; color: var(--text-muted); }
.orc-imp-src { padding: 1px 5px; border-radius: 4px; font-size: 10px; font-weight: 700; }

/* ===== Painel de Compras (Entradas) ===== */
.cv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.cv-kpi { padding: 14px 16px; background: var(--bg-card, var(--bg)); border: 1px solid var(--border); border-radius: 12px; }
.cv-kpi-lbl { font-size: 12px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.cv-kpi-val { font-size: 24px; font-weight: 800; color: var(--text); margin-top: 4px; font-variant-numeric: tabular-nums; }
.cv-kpi-sub { font-size: 12px; color: var(--text-secondary); margin-top: 4px; min-height: 16px; }
.cv-bar { height: 8px; border-radius: 5px; background: color-mix(in srgb, var(--text-muted) 20%, transparent); overflow: hidden; }
.cv-bar-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #6366f1, #8b5cf6); }

/* Cruzamento compras × demanda */
.cv-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cv-chip {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 8px 14px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--bg-card, var(--bg)); color: var(--text); font-size: 13px;
    transition: border-color .15s, background .15s;
}
.cv-chip:hover { border-color: var(--chip); }
.cv-chip.active { border-color: var(--chip); background: color-mix(in srgb, var(--chip) 14%, transparent); }
.cv-chip-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--chip); flex: none; }
.cv-chip-lbl { font-weight: 700; }
.cv-chip-n { font-weight: 800; font-variant-numeric: tabular-nums; }
.cv-chip-v { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.cv-cruz-row { transition: background .12s; }
.cv-cruz-row:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.cv-sinal { padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.cv-abc { display: inline-block; min-width: 18px; padding: 1px 5px; border-radius: 4px; font-size: 11px; font-weight: 800; }
.cv-abc-A { background: color-mix(in srgb, #22c55e 20%, transparent); color: #16a34a; }
.cv-abc-B { background: color-mix(in srgb, #f59e0b 20%, transparent); color: #d97706; }
.cv-abc-C { background: color-mix(in srgb, #64748b 22%, transparent); color: var(--text-secondary); }
.orc-imp-tbl small { color: var(--text-muted); font-weight: 600; }
.orc-imp-tot { margin-top: 14px; padding: 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; }
.orc-imp-tot-grid { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-end; }
.orc-imp-tot-grid > div { display: flex; flex-direction: column; gap: 2px; }
.orc-imp-tot-grid span { font-size: 12px; color: var(--text-muted); }
.orc-imp-tot-grid strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.orc-imp-tot-nf { margin-left: auto; text-align: right; }
.orc-imp-tot-nf span { font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.orc-imp-tot-nf strong { font-size: 22px; color: var(--primary); }
.orc-imp-aviso {
    margin-top: 14px; padding: 10px 14px; font-size: 12.5px; line-height: 1.5;
    background: color-mix(in srgb, #f59e0b 12%, var(--bg-card, var(--bg)));
    border: 1px solid color-mix(in srgb, #f59e0b 40%, transparent); border-radius: 8px; color: var(--text);
}

/* Import overlay */
.orc-import-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.orc-import-panel {
    background: var(--bg-card);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.orc-import-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
    color: white;
}
.orc-import-header h3 { font-size: 15px; margin: 0; color: white; }
.orc-import-header .modal-close { color: white; opacity: 0.8; }
.orc-import-header .modal-close:hover { opacity: 1; }
.orc-import-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
}

/* ============================================================
   PRODUCT SEARCH AUTOCOMPLETE
   ============================================================ */

.autocomplete-wrapper {
    position: relative;
}

.autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: var(--shadow-lg);
    max-height: 200px;
    overflow-y: auto;
    z-index: 50;
    display: none;
}

.autocomplete-list.visible { display: block; }

.autocomplete-item {
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
}

.autocomplete-item:hover, .autocomplete-item.ac-active { background: var(--primary-light); }

.autocomplete-item .code { color: var(--text-muted); font-size: 11px; }

/* Generic search dropdown styling */
.search-dropdown {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    overflow-y: auto;
    z-index: 100;
}
.search-dropdown .sd-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
    transition: background 0.1s;
}
.search-dropdown .sd-item:last-child { border-bottom: none; }
.search-dropdown .sd-item:nth-child(even) { background: color-mix(in srgb, var(--bg-secondary) 40%, transparent); }
.search-dropdown .sd-item:hover { background: var(--primary-light) !important; }
.search-dropdown .sd-empty {
    padding: 12px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

/* Rich autocomplete (orcamento) */
.orc-ac-rich {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
}
/* Ensure checkboxes in autocomplete are always visible */
.autocomplete-list input[type="checkbox"],
.orc-ac-rich .orc-multi-cb {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    min-height: 18px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--primary, #1976d2);
}
.orc-ac-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 4px;
    background: #f1f5f9;
    flex-shrink: 0;
}
.orc-ac-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.orc-ac-desc {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.orc-ac-meta {
    font-size: 10px;
    color: var(--text-muted);
    display: flex;
    gap: 8px;
    margin-top: 1px;
}
.orc-ac-right {
    text-align: right;
    flex-shrink: 0;
    min-width: 80px;
}
.orc-ac-price {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
}
.orc-ac-stock {
    font-size: 10px;
    font-weight: 600;
}

/* Make autocomplete list taller for rich items */
#orcProdList.visible {
    max-height: 400px;
}

/* ============================================================
   LOADING
   ============================================================ */

.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: var(--text-muted);
}

.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-right: 12px;
}

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

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .main-content { margin-left: 0; }
}

@media (max-width: 768px) {
    .main-content.chat-open { margin-right: 0; }
    .chat-panel { width: 100%; }
    .kpi-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    .search-bar { flex-wrap: wrap; }
    .search-bar input { width: 100%; }
    .detail-grid { grid-template-columns: 1fr; }
    .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .topnav-search { display: none; }
}

.mobile-menu-btn {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 101;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 20px;
    cursor: pointer;
}

@media (max-width: 768px) {
    .mobile-menu-btn { display: block; }
}

/* ============================================================
   MISC
   ============================================================ */

.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}

.empty-state .icon { font-size: 40px; margin-bottom: 12px; opacity: 0.5; }
.empty-state p { font-size: 13px; line-height: 1.6; max-width: 400px; margin: 0 auto; }

.hidden { display: none !important; }

.text-muted-cell { color: var(--text-muted); font-size: 12px; }

.kpi-alert { border-left: 3px solid var(--danger); }
.kpi-alert .kpi-value { color: var(--danger); }

.tag {
    display: inline-block;
    padding: 2px 6px;
    background: var(--bg);
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-muted);
}

.chart-container {
    padding: 10px;
    height: 240px;
}

/* ============================================================
   DASHBOARD MODERN
   ============================================================ */

.dash-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

@media (max-width: 1024px) {
    .dash-grid-2 { grid-template-columns: 1fr; }
}

/* ============================================================
   DASHBOARD WIDGETS GRID (Resizable)
   ============================================================ */

.dash-widgets-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.dash-w-small { grid-column: span 2; }
.dash-w-half  { grid-column: span 3; }
.dash-w-full  { grid-column: span 6; }

@media (max-width: 1024px) {
    .dash-w-small, .dash-w-half { grid-column: span 3; }
}
@media (max-width: 768px) {
    .dash-widgets-grid { grid-template-columns: 1fr; }
    .dash-w-small, .dash-w-half, .dash-w-full { grid-column: span 1; }
}

/* Size buttons */
.size-btns {
    display: inline-flex;
    gap: 2px;
    margin-left: 8px;
}

.size-btn {
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1.3;
}

.size-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.size-btn-active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* View toggle button */
.view-toggle-btn {
    padding: 2px 7px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    margin-left: 4px;
    line-height: 1.3;
}

.view-toggle-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* Widget header controls wrapper */
.widget-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.auto-refresh-label {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.dash-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.dash-table th {
    padding: 7px 10px;
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.dash-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.dash-table tr:hover { background: var(--primary-light); }
.dash-table .text-right { text-align: right; }
.dash-table .text-center { text-align: center; }
.dash-table .text-danger { color: var(--danger); font-weight: 600; }

.dash-mini-bar {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
    width: 60px;
    display: inline-block;
    vertical-align: middle;
}

.dash-mini-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

.kpi-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary);
    opacity: 0.3;
}

.kpi-alert::after { background: var(--danger); opacity: 0.6; }

.kpi-card .kpi-trend {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ============================================================
   GLOBAL SEARCH (Bling/Tiny style)
   ============================================================ */

.global-search-wrapper {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 12px 0;
    margin-bottom: 16px;
    background: linear-gradient(to bottom, var(--bg) 80%, transparent);
}

.global-search-container {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

.global-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    opacity: 0.5;
}

.global-search-input {
    width: 100%;
    padding: 14px 100px 14px 48px;
    font-size: 15px;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card);
    color: var(--text);
    transition: all 0.2s;
    box-shadow: var(--shadow);
}

.global-search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1), var(--shadow-lg);
}

.global-search-input::placeholder {
    color: var(--text-muted);
    font-size: 14px;
}

.global-search-hint {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px 8px;
    font-size: 11px;
    font-family: monospace;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
}

.global-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-width: 600px;
    margin: 0 auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1000;
}

.topnav-search .global-search-results {
    min-width: 500px;
    max-width: 700px;
}

.global-search-results.hidden { display: none; }

.search-result-section {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.search-result-section:last-child { border-bottom: none; }

.search-result-section-title {
    padding: 8px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg);
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
}

.search-result-item:hover {
    background: var(--primary-light);
}

.search-result-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border-radius: 8px;
    font-size: 18px;
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.search-result-badge {
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    background: var(--bg);
    border-radius: 6px;
    color: var(--text-muted);
}

.search-result-item.search-fn {
    background: rgba(37,99,235,0.04);
}
[data-theme="dark"] .search-result-item.search-fn {
    background: rgba(59,130,246,0.08);
}
.search-result-item.search-fn:hover {
    background: rgba(37,99,235,0.1);
}
[data-theme="dark"] .search-result-item.search-fn:hover {
    background: rgba(59,130,246,0.15);
}
.search-fn-group {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
}

.search-loading {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
}

.search-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
}

/* Highlight matched text */
.search-highlight {
    background: rgba(37, 99, 235, 0.2);
    padding: 1px 2px;
    border-radius: 2px;
}

/* ============================================================
   ANALYTICS PAGE
   ============================================================ */

.analytics-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.analytics-row .analytics-card-lg {
    grid-column: 1;
}

@media (max-width: 1200px) {
    .analytics-row {
        grid-template-columns: 1fr;
    }
    .analytics-row .analytics-card-lg {
        grid-column: auto;
    }
}

.analytics-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: opacity 0.2s, transform 0.2s;
}

.analytics-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    gap: 8px;
    flex-wrap: wrap;
    background: var(--bg);
}

.analytics-card-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.analytics-card-header select {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    background: var(--bg-card);
    color: var(--text);
    cursor: pointer;
}

.analytics-card-body {
    padding: 0;
}

.chart-container {
    padding: 10px;
    height: 240px;
    position: relative;
}

.chart-wide {
    height: 350px;
}

/* ABC Resumo */
.abc-resumo {
    display: flex;
    justify-content: space-around;
    padding: 16px;
    border-top: 1px solid var(--border);
    background: var(--bg);
}

.abc-resumo-item {
    text-align: center;
}

.abc-resumo-item .abc-letter {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    margin: 0 auto 8px;
}

.abc-resumo-item .abc-letter.abc-a { background: #16a34a; color: white; }
.abc-resumo-item .abc-letter.abc-b { background: #d97706; color: white; }
.abc-resumo-item .abc-letter.abc-c { background: #dc2626; color: white; }

.abc-resumo-item .abc-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.abc-resumo-item .abc-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

/* RFM Legenda */
.rfm-legenda {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    font-size: 11px;
}

.rfm-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rfm-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* Giro Resumo */
.giro-resumo {
    padding: 16px;
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.giro-item {
    text-align: center;
    padding: 12px;
    background: var(--bg);
    border-radius: 8px;
}

.giro-item .giro-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
}

.giro-item .giro-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Produtos Parados Lista */
.produtos-parados-lista {
    max-height: 300px;
    overflow-y: auto;
}

.produto-parado-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
}

.produto-parado-item:hover { background: var(--primary-light); }

.produto-parado-item .pp-info {
    flex: 1;
    min-width: 0;
}

.produto-parado-item .pp-nome {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.produto-parado-item .pp-codigo {
    font-size: 11px;
    color: var(--text-muted);
}

.produto-parado-item .pp-dias {
    font-size: 12px;
    font-weight: 600;
    color: var(--danger);
    white-space: nowrap;
}

/* Top Margem Lista */
.top-margem-lista {
    max-height: 350px;
    overflow-y: auto;
}

.margem-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.margem-item .margem-rank {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
}

.margem-item .margem-rank.rank-1 { background: #fbbf24; }
.margem-item .margem-rank.rank-2 { background: #94a3b8; }
.margem-item .margem-rank.rank-3 { background: #a16207; }

.margem-item .margem-info {
    flex: 1;
    min-width: 0;
}

.margem-item .margem-nome {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.margem-item .margem-detalhe {
    font-size: 11px;
    color: var(--text-muted);
}

.margem-item .margem-valor {
    text-align: right;
}

.margem-item .margem-percent {
    font-size: 16px;
    font-weight: 700;
    color: var(--success);
}

.margem-item .margem-abs {
    font-size: 11px;
    color: var(--text-muted);
}

/* Tabela wrapper scroll */
.table-wrapper-scroll {
    max-height: 350px;
    overflow-y: auto;
}

/* Sugestao de Compra: tabela expandida sem scroll interno */
#saTableWrapper.table-wrapper-scroll {
    max-height: none;
    overflow-y: visible;
}

.table-wrapper-scroll table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.table-wrapper-scroll th {
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-card);
}

.table-wrapper-scroll td {
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
}

.table-wrapper-scroll tr:hover { background: var(--primary-light); }

.badge-abc {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 11px;
}

.badge-abc-a { background: #dcfce7; color: #16a34a; }
.badge-abc-b { background: #fef3c7; color: #d97706; }
.badge-abc-c { background: #fee2e2; color: #dc2626; }

[data-theme="dark"] .badge-abc-a { background: #14532d; }
[data-theme="dark"] .badge-abc-b { background: #78350f; }
[data-theme="dark"] .badge-abc-c { background: #7f1d1d; }

/* Analytics KPI specific */
#analyticsKpiGrid .kpi-card {
    display: flex;
    align-items: center;
    gap: 16px;
}

#analyticsKpiGrid .kpi-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 0;
}

#analyticsKpiGrid .kpi-content {
    flex: 1;
}

#analyticsKpiGrid .kpi-label {
    margin-top: 0;
    margin-bottom: 4px;
}

#analyticsKpiGrid .kpi-trend-up {
    color: var(--success);
}

#analyticsKpiGrid .kpi-trend-down {
    color: var(--danger);
}

/* ============================================================
   ANALYTICS - ALERTAS / SEMAFOROS
   ============================================================ */

.alert-grid-container { margin-bottom: 20px; }

.alert-grid {
    padding: 0;
}

.alert-item {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
}

.alert-item:last-child { border-bottom: none; }
.alert-item:hover { background: var(--bg); }

.alert-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.alert-icon {
    font-size: 20px;
    width: 32px;
    text-align: center;
}

.alert-info {
    flex: 1;
    min-width: 0;
}

.alert-titulo {
    font-size: 14px;
    font-weight: 600;
}

.alert-descricao {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.alert-valor {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.alert-red { border-left: 4px solid #dc2626; }
.alert-red .alert-titulo { color: #dc2626; }
.alert-red .alert-valor { color: #dc2626; }

.alert-yellow { border-left: 4px solid #d97706; }
.alert-yellow .alert-titulo { color: #d97706; }
.alert-yellow .alert-valor { color: #d97706; }

.alert-green { border-left: 4px solid #16a34a; }
.alert-green .alert-titulo { color: #16a34a; }
.alert-green .alert-valor { color: #16a34a; }

.alert-details {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}

.alert-details table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.alert-details th {
    padding: 6px 8px;
    text-align: left;
    font-size: 11px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.alert-details td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--border);
}

/* ============================================================
   ANALYTICS - KPI CARDS PEQUENOS (dentro dos cards)
   ============================================================ */

.kpi-grid-sm {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.kpi-card-sm {
    background: var(--bg);
    border-radius: 8px;
    padding: 10px 14px;
    text-align: center;
    overflow: visible;
}

.kpi-label-sm {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}

.kpi-value-sm {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}

/* ============================================================
   ANALYTICS - FINANCEIRO BARRA
   ============================================================ */

.financeiro-barra-container {
    padding: 16px 20px;
}

.financeiro-barra {
    padding: 0;
}

.financeiro-barra-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.financeiro-barra-track {
    height: 32px;
    background: var(--bg);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.financeiro-barra-fill {
    height: 100%;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 13px;
    min-width: 60px;
    transition: width 0.6s ease;
}

.financeiro-barra-sublabel {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
}

/* ============================================================
   ANALYTICS - METAS VENDEDORES
   ============================================================ */

.meta-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
}

.meta-item .meta-info {
    flex: 1;
    min-width: 0;
}

.meta-item .meta-nome {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
}

.meta-item .meta-detail {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.meta-bar-track {
    height: 8px;
    background: var(--bg);
    border-radius: 4px;
    overflow: hidden;
}

.meta-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}

.meta-item .meta-pct {
    font-size: 18px;
    font-weight: 700;
    min-width: 55px;
    text-align: right;
}

/* ============================================================
   RELATORIOS PAGE
   ============================================================ */

.relatorios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 10px;
}

.relatorios-lista {
    padding: 8px 0;
}

.relatorio-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.15s;
    border-bottom: 1px solid var(--border);
}

.relatorio-item:last-child {
    border-bottom: none;
}

.relatorio-item:hover {
    background: var(--primary-light);
}

.relatorio-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border-radius: 8px;
}

.relatorio-info {
    flex: 1;
}

.relatorio-info strong {
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
}

.relatorio-info small {
    color: var(--text-muted);
    font-size: 12px;
}

/* Modal de Relatorio */
.relatorio-modal-content {
    padding: 20px;
}

.relatorio-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    padding: 16px;
    background: var(--bg);
    border-radius: 8px;
}

.relatorio-filtros .form-group {
    margin-bottom: 0;
    min-width: 150px;
}

.relatorio-preview {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.relatorio-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    justify-content: flex-end;
}

/* ============================================================
   PEDIDOS DE COMPRA - NF-e COMPLETO
   ============================================================ */

.pc-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--border);
}

.pc-tab {
    padding: 8px 16px;
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}

.pc-tab:hover {
    color: var(--text);
}

.pc-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.pc-tab-content {
    padding: 8px 0;
}

.pc-item-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 12px;
}

.pc-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.pc-item-num {
    font-weight: 600;
    color: var(--primary);
    min-width: 30px;
}

.pc-item-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pc-item-main input {
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
    background: var(--bg);
    color: var(--text);
}

.pc-item-main input:focus {
    border-color: var(--primary);
    outline: none;
}

.pc-item-details {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}

.pc-item-impostos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 12px;
}

.pc-item-impostos fieldset {
    margin: 0;
}

.pc-item-impostos label {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.pc-item-impostos input {
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 11px;
    background: var(--bg);
    color: var(--text);
}

/* Detalhe do pedido */
/* Shared automatic table cards: same owner as table geometry, no runtime CSS. */
@media (max-width: 680px) {
    table.data-table.rwd-cards thead { display: none; }
    table.data-table.rwd-cards,
    table.data-table.rwd-cards tbody,
    table.data-table.rwd-cards tr,
    table.data-table.rwd-cards td {
        display: block;
        width: 100%;
        min-width: 0 !important;
        box-sizing: border-box;
    }
    table.data-table.rwd-cards tr {
        margin: 0 0 10px;
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 6px 12px;
        background: var(--bg-card);
    }
    table.data-table.rwd-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        text-align: right;
        border: 0;
        border-bottom: 1px solid var(--border);
        padding: 6px 0;
        max-width: none !important;
        overflow: visible;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
    table.data-table.rwd-cards td:last-child { border-bottom: 0; }
    table.data-table.rwd-cards td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted);
        text-align: left;
        flex: 0 1 42%;
        font-size: 12px;
    }
    table.data-table.rwd-cards td > :is(input, select, textarea) {
        min-width: 0;
        max-width: 58%;
    }
    table.data-table.rwd-cards td:empty { display: none; }
}

.pc-detail-shell .pc-cost-summary {
    grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)) !important;
}

.pc-detail-shell .detail-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important;
}

.pc-detail-shell .detail-item {
    min-width: 0;
    margin-inline: 0 !important;
}

.pc-detail-shell .detail-item[style*="grid-column"] {
    grid-column: 1 / -1 !important;
}

.pc-detail-shell .detail-item > span {
    white-space: normal !important;
    overflow-wrap: anywhere;
    min-width: 0;
}

.pc-detail-shell .pc-section > div,
.pc-receive-shell .modal-body > div {
    min-width: 0;
    max-width: 100%;
}

.pc-receive-shell .modal-body > div {
    flex-wrap: wrap;
}

.pc-receive-shell .modal-body > div > div {
    min-width: 0 !important;
    max-width: 100%;
}

.pc-receive-shell .modal-body > div:first-child {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.pc-receive-shell .modal-body > div:first-child label {
    display: block;
    margin-bottom: 6px;
}

.pc-receive-shell input[type="date"] {
    max-width: 100%;
}

.pc-receive-shell table {
    min-width: 850px;
}

.pc-receive-shell td:nth-child(2) {
    white-space: normal !important;
    overflow-wrap: anywhere;
    min-width: 180px;
}

.wm-window .pc-receive-shell > .modal-header {
    display: none !important;
}

.pc-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.pc-section h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--primary);
}

.pc-totais-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

.pc-total-item {
    background: var(--bg);
    padding: 8px 12px;
    border-radius: 6px;
}

.pc-total-item label {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.pc-total-item span {
    font-size: 14px;
    font-weight: 600;
}

.pc-total-grande {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--primary);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 12px;
}

.pc-total-grande label {
    font-size: 14px;
    font-weight: 600;
}

.pc-total-grande span {
    font-size: 20px;
    font-weight: 700;
}

.pc-section-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary);
    margin: 20px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--primary-light);
}

.pc-section-title:first-of-type {
    margin-top: 0;
}

/* Linha de campos adicionais do item */
.pc-item-row2 {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.pc-item-row2 .form-group {
    flex: 1;
    margin-bottom: 0;
}

.pc-item-row2 label {
    font-size: 11px;
    color: var(--text-muted);
}

/* Grid de impostos */
.imp-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 4px;
}

.imp-row label {
    font-size: 10px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 2px;
}

.imp-row input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
    background: var(--bg);
    color: var(--text);
}

.imp-row input:focus {
    outline: none;
    border-color: var(--primary);
}

.pc-item-impostos fieldset {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 8px;
}

.pc-item-impostos legend {
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
}

/* Subtotal do item */
.pc-item-subtotal {
    font-weight: 600;
    color: var(--primary);
    min-width: 100px;
    text-align: right;
}

.spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ============================================================
   BUSCA AVANCADA DE PRODUTOS (POPUP)
   ============================================================ */

.busca-produto-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(2px);
}

.busca-produto-modal {
    background: var(--bg-card);
    border-radius: 12px;
    width: 900px;
    max-width: 95%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.busca-produto-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
    color: white;
}

.busca-produto-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.busca-produto-header .btn-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.busca-produto-header .btn-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.busca-produto-filtros {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.busca-produto-filtros input,
.busca-produto-filtros select {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg-card);
    color: var(--text);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.busca-produto-filtros input:focus,
.busca-produto-filtros select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.busca-produto-filtros input[type="text"] {
    flex: 1;
    min-width: 200px;
}

.busca-produto-filtros select {
    min-width: 180px;
}

.busca-produto-filtros .btn-buscar {
    padding: 10px 20px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}

.busca-produto-filtros .btn-buscar:hover {
    background: var(--primary-dark);
}

.busca-produto-resultados {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    min-height: 300px;
}

.busca-produto-loading,
.busca-produto-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.busca-produto-loading .spinner {
    margin-bottom: 12px;
}

.busca-produto-empty .icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.busca-produto-empty p {
    font-size: 14px;
    margin: 4px 0;
}

.busca-produto-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.busca-produto-table thead {
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 1;
}

.busca-produto-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

.busca-produto-table tbody tr {
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}

.busca-produto-table tbody tr:hover {
    background: var(--primary-light);
}

.busca-produto-table tbody tr:active {
    background: rgba(37, 99, 235, 0.2);
}

.busca-produto-table tbody td {
    padding: 12px 16px;
    vertical-align: middle;
}

.busca-produto-table .col-codigo {
    color: var(--primary);
    font-weight: 600;
    width: 100px;
}

.busca-produto-table .col-descricao {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.busca-produto-table .col-grupo {
    color: var(--text-muted);
    font-size: 12px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.busca-produto-table .col-preco {
    text-align: right;
    font-weight: 600;
    color: var(--success);
    white-space: nowrap;
}

.busca-produto-table .col-estoque {
    text-align: right;
    white-space: nowrap;
}

.busca-produto-table .col-estoque.stock-ok {
    color: var(--success);
}

.busca-produto-table .col-estoque.stock-low {
    color: var(--warning);
}

.busca-produto-table .col-estoque.stock-zero {
    color: var(--danger);
}

.busca-produto-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--bg);
    border-top: 1px solid var(--border);
    font-size: 13px;
}

.busca-produto-footer .info {
    color: var(--text-muted);
}

.busca-produto-footer .btn-manual {
    padding: 8px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}

.busca-produto-footer .btn-manual:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* ============================================================
   ITEM PRODUTO NO PEDIDO DE COMPRA
   ============================================================ */

.pc-item-produto-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 260px;
    min-width: min(260px, 100%);
    max-width: 100%;
}

.pc-item-produto-wrapper input.pc-item-desc {
    flex: 1;
    min-width: 0;
}

/* Purchase forms already have a title and close control in workspace windows. */
.wm-window:has(#pcNovoItens) .wm-body > .modal-header { display: none !important; }
#pcTotaisResumo > div > div:last-child { color: var(--mg-canvas, #101216) !important; }

.pc-btn-buscar {
    padding: 6px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-muted);
    transition: all 0.15s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pc-btn-buscar:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

.produto-vinculado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #dcfce7;
    color: #166534;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 500;
}

.produto-vinculado .codigo {
    font-weight: 700;
}

.produto-vinculado .btn-desvincular {
    background: none;
    border: none;
    color: #166534;
    cursor: pointer;
    padding: 0;
    margin-left: 4px;
    font-size: 14px;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.produto-vinculado .btn-desvincular:hover {
    opacity: 1;
}

[data-theme="dark"] .produto-vinculado {
    background: #14532d;
    color: #bbf7d0;
}

[data-theme="dark"] .produto-vinculado .btn-desvincular {
    color: #bbf7d0;
}

.produto-manual {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #fef3c7;
    color: #92400e;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
}

[data-theme="dark"] .produto-manual {
    background: #78350f;
    color: #fef3c7;
}

/* Paginacao dentro do popup */
.busca-produto-paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px;
    border-top: 1px solid var(--border);
    background: var(--bg);
}

.busca-produto-paginacao button {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
}

.busca-produto-paginacao button:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
}

.busca-produto-paginacao button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.busca-produto-paginacao button.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.busca-produto-paginacao .page-info {
    padding: 0 12px;
    font-size: 12px;
    color: var(--text-muted);
}

/* Estados e mensagens da busca */
.busca-hint {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.busca-vazio {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.busca-vazio p {
    margin: 8px 0;
}

.busca-vazio .hint {
    font-size: 12px;
    opacity: 0.7;
}

.busca-erro {
    text-align: center;
    padding: 30px 20px;
    color: var(--danger);
    font-size: 14px;
}

/* Classes auxiliares de texto */
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-primary { color: var(--primary) !important; }

/* Ajuste do modal da busca dentro do modal principal */
.busca-produto-overlay .modal-header {
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
    color: white;
}

.busca-produto-overlay .modal-header h2 {
    color: white;
    font-size: 16px;
}

.busca-produto-overlay .modal-close {
    color: white;
    opacity: 0.8;
}

.busca-produto-overlay .modal-close:hover {
    color: white;
    opacity: 1;
}

.busca-produto-overlay .modal-body {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.busca-produto-overlay .busca-produto-filtros {
    padding: 16px 20px;
}

.busca-produto-overlay .busca-produto-resultados {
    flex: 1;
    max-height: 400px;
    overflow-y: auto;
}

.busca-produto-overlay .busca-produto-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--bg);
    border-top: 1px solid var(--border);
}

.busca-produto-info {
    padding: 8px 20px;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

/* Responsivo para o popup */
@media (max-width: 768px) {
    .busca-produto-modal {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .busca-produto-filtros {
        flex-direction: column;
    }

    .busca-produto-filtros input[type="text"],
    .busca-produto-filtros select {
        width: 100%;
    }

    .busca-produto-table .col-grupo {
        display: none;
    }

    .busca-produto-table .col-descricao {
        max-width: 150px;
    }
}

/* ============================================================
   DRE - Financeiro
   ============================================================ */

.dre-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.dre-tabs::-webkit-scrollbar {
    display: none;
}

.dre-tab {
    padding: 10px 18px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
    white-space: nowrap;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}

.dre-tab:hover {
    color: var(--text);
}

.dre-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.dre-tab-content {
    animation: fadeIn 0.2s ease;
}

.dre-tab-content.hidden {
    display: none;
}

/* DRE Table */
.dre-table {
    font-size: 13px;
}

.dre-table th {
    background: var(--bg);
    font-weight: 600;
    padding: 8px 12px;
}

.dre-table td {
    padding: 6px 12px;
}

.dre-indent {
    padding-left: 32px !important;
}

.dre-row-titulo td {
    font-weight: 700;
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    padding-top: 12px;
}

.dre-row-subtotal td {
    font-weight: 700;
    border-top: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    color: var(--primary-dark);
    background: var(--primary-light);
}

.dre-row-resultado td {
    font-weight: 700;
    font-size: 14px;
    background: var(--success);
    color: white;
    border-radius: 0;
}

[data-theme="dark"] .dre-row-resultado td {
    background: #166534;
}

.dre-negativo {
    color: var(--danger);
}

.dre-row-normal:hover td {
    background: rgba(37, 99, 235, 0.04);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Pagination ellipsis */
.page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    color: var(--text-muted);
    font-weight: 600;
    user-select: none;
}

@media (max-width: 768px) {
    .dre-tabs {
        gap: 0;
    }
    .dre-tab {
        padding: 8px 12px;
        font-size: 12px;
    }
    #dreDashboard > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    #dreConfig > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   WIDGET DRAG & DROP + MINIMIZE
   ============================================================ */

.widget-drag-handle {
    cursor: grab;
    font-size: 14px;
    color: var(--text-muted);
    margin-right: 8px;
    user-select: none;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.widget-drag-handle:hover {
    opacity: 1;
}
.widget-header-draggable {
    display: flex;
    align-items: center;
}
.widget-header-draggable h2 {
    flex: 1;
}
.widget-draggable {
    transition: opacity 0.2s, transform 0.2s;
}
.widget-dragging {
    opacity: 0.4;
    transform: scale(0.95);
}
.widget-drag-over {
    outline: 2px dashed var(--primary);
    outline-offset: -2px;
}
.widget-minimized .data-card > *:not(.data-card-header):not(.widget-header-draggable) {
    display: none !important;
}
.widget-minimized .data-card {
    min-height: auto;
}
.widget-minimized {
    min-height: 0;
}
.widget-minimized .analytics-card-body {
    display: none !important;
}

/* Badge secondary */
.badge-secondary {
    background: var(--bg-secondary);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.badge-warning {
    background: #fff3cd;
    color: #856404;
}

/* Button variants */
.btn-success {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}
.btn-warning {
    background: #ffc107;
    color: #212529;
    border-color: #ffc107;
}
.btn-danger {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

/* ============================================================
   WMS / TMS Styles
   ============================================================ */

/* --- Stats bar (top counters) --- */
.wms-stats-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.wms-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 10px 14px;
    text-align: center;
    min-width: 90px;
    flex: 1;
    transition: all var(--transition-fast);
}
.wms-stat:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.wms-stat-num {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.wms-stat-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 3px;
}

/* --- Cards (list items) --- */
.wms-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.wms-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(99,102,241,0.10);
    transform: translateY(-1px);
}
.wms-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.wms-card-header strong {
    font-size: 15px;
}
.wms-card-header small {
    color: var(--text-secondary);
    font-size: 12px;
}
.wms-card-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 6px 16px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* --- Modal detail view --- */
.wms-detalhe {
    padding: 28px 32px;
    max-width: 750px;
    margin: 0 auto;
}
.wms-detalhe-lg {
    max-width: 950px;
}
.wms-detalhe h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--text-primary);
}
.wms-detalhe h3 {
    display: none; /* replaced by section class */
}

/* --- Section blocks inside modal --- */
.wms-section {
    margin-top: 24px;
}
.wms-section-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--border);
}

/* --- Meta info grid --- */
.wms-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin: 16px 0;
    padding: 14px 16px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    border: 1px solid var(--border);
}
.wms-meta-item {
    font-size: 13px;
}
.wms-meta-item .wms-meta-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 2px;
    font-weight: 600;
}
.wms-meta-item .wms-meta-value {
    font-weight: 500;
    color: var(--text-primary);
}

/* --- Observacoes --- */
.wms-obs {
    background: var(--bg-tertiary);
    padding: 10px 14px;
    border-radius: 8px;
    border-left: 4px solid var(--primary);
    font-size: 13px;
    margin: 12px 0;
    color: var(--text-secondary);
    font-style: italic;
}

/* --- Actions bar --- */
.wms-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

/* --- Odometro form --- */
.wms-odometro-form {
    margin-top: 14px;
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    border: 1px solid var(--border);
}
.wms-odometro-form h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px 0;
}
.wms-odometro-form .wms-form-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.wms-form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wms-form-group label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
}
.wms-form-group input,
.wms-form-group select {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 13px;
}
.wms-form-group input:focus,
.wms-form-group select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}

/* --- Small modal (nova entrega, parada, assinatura) --- */
.wms-form-modal {
    padding: 28px 32px;
    max-width: 520px;
    margin: 0 auto;
}
.wms-form-modal h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 6px 0;
}
.wms-form-modal p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 16px 0;
}
.wms-form-modal .wms-form-field {
    margin-bottom: 16px;
}
.wms-form-modal .wms-form-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-primary);
}
.wms-form-modal .wms-form-field input,
.wms-form-modal .wms-form-field select,
.wms-form-modal .wms-form-field textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 13px;
    box-sizing: border-box;
}
.wms-form-modal .wms-form-field input:focus,
.wms-form-modal .wms-form-field select:focus,
.wms-form-modal .wms-form-field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}

/* --- Checkboxes list (nova entrega) --- */
.wms-checkbox-list {
    max-height: 220px;
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
}
.wms-checkbox-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    cursor: pointer;
    font-size: 13px;
    border-radius: 6px;
    transition: background 0.1s;
}
.wms-checkbox-list label:hover {
    background: var(--bg-tertiary);
}

/* --- Geocode results --- */
.wms-geo-results {
    max-height: 130px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-top: 6px;
}
.wms-geo-results .wms-geo-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}
.wms-geo-results .wms-geo-item:last-child { border-bottom: none; }
.wms-geo-results .wms-geo-item:hover { background: var(--bg-tertiary); }

/* --- Assinatura pad --- */
.wms-assinatura-box {
    border: 2px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    touch-action: none;
    margin: 12px 0;
}
.wms-assinatura-box canvas {
    width: 100%;
    cursor: crosshair;
    display: block;
}
.wms-assinatura-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    flex-wrap: wrap;
    gap: 8px;
}

/* --- Map --- */
.wms-map-container {
    width: 100%;
    height: 350px;
    border-radius: 10px;
    border: 1px solid var(--border);
    overflow: hidden;
    margin-top: 8px;
}
.wms-map-marker {
    background: none !important;
    border: none !important;
}

/* --- Scanner container --- */
.wms-scanner-wrap {
    margin: 14px 0;
    padding: 14px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    border: 1px solid var(--border);
    text-align: center;
}
.wms-scanner-wrap #wms-scanner-reader {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

/* --- Badges --- */
.badge-primary {
    background: var(--primary);
    color: #fff;
}
.badge-info {
    background: #3b82f6;
    color: #fff;
}

/* Leaflet popup override for dark mode */
[data-theme="dark"] .leaflet-popup-content-wrapper,
[data-theme="dark"] .leaflet-popup-tip {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* --- WMS table tweaks --- */
.wms-detalhe .data-table {
    margin-top: 8px;
}
.wms-detalhe .data-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Separacao: lista de itens em cards (mobile-first, sem tabela larga) --- */
.sep-progress {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}
.sep-progress-bar {
    height: 100%;
    background: #16a34a;
    border-radius: 4px;
    transition: width 0.3s;
}
.sep-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: 10px;
    transition: background 0.15s, border-color 0.15s;
}
.sep-item.done {
    border-left-color: #16a34a;
    background: color-mix(in srgb, #16a34a 8%, var(--bg-secondary));
}
.sep-item-main {
    flex: 1 1 55%;
    min-width: 0;
}
.sep-item-desc {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.25;
}
.sep-item-sub {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}
.sep-item-qty {
    flex: 0 0 auto;
    text-align: center;
    min-width: 44px;
}
.sep-item-qty b {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}
.sep-item-qty span {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.sep-item-act {
    flex: 1 1 100%;
    display: flex;
    gap: 8px;
}
.sep-toggle {
    flex: 1;
    min-height: 46px;
    border: 2px solid var(--primary);
    background: transparent;
    color: var(--primary);
    font-weight: 700;
    font-size: 15px;
    border-radius: 10px;
    cursor: pointer;
    touch-action: manipulation;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sep-toggle.on {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}
.sep-cam {
    flex: 0 0 auto;
    width: 54px;
    min-height: 46px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    touch-action: manipulation;
}
.sep-item-badge {
    flex: 0 0 auto;
    font-size: 22px;
}
/* Desktop: acoes na mesma linha, sem esticar */
@media (min-width: 769px) {
    .sep-item-act { flex: 0 0 auto; }
    .sep-toggle { flex: 0 0 auto; min-width: 130px; }
}

@media (max-width: 768px) {
    .wms-stats-bar { gap: 6px; }
    .wms-stat { padding: 8px 10px; min-width: 60px; }
    .wms-stat-num { font-size: 18px; }
    .wms-card-body { grid-template-columns: 1fr; gap: 4px; }
    .wms-meta { grid-template-columns: 1fr 1fr; gap: 6px; }
    .wms-detalhe, .wms-form-modal { padding: 20px 16px; }
    .wms-map-container { height: 250px; }
    .wms-actions { justify-content: center; }
    .wms-actions .btn { flex: 1 1 auto; min-height: 46px; font-size: 15px; }
    .wms-assinatura-actions { flex-direction: column; }
}

/* ============================================================
   TABLET OPTIMIZATIONS (768px - 1024px)
   ============================================================ */

@media (min-width: 769px) and (max-width: 1024px) {
    /* === TABLET OPTIMIZATION (769px-1024px) === */

    /* Inputs e botoes maiores para touch */
    .btn, button, select, .dre-tab {
        min-height: 44px;
        font-size: 14px;
    }
    input[type="text"], input[type="number"], input[type="date"],
    input[type="password"], input[type="email"], select, textarea {
        min-height: 44px;
        font-size: 16px !important; /* previne zoom Android/iOS */
    }

    /* Tabelas compactas e scrollaveis */
    .data-table { font-size: 12px; }
    .data-table tbody td {
        padding: 8px 6px; white-space: nowrap;
        max-width: 150px; overflow: hidden; text-overflow: ellipsis;
    }
    .data-table tbody td.text-right,
    .data-table tbody td.text-center {
        overflow: visible;
        text-overflow: clip;
        max-width: none;
        white-space: nowrap;
    }
    .data-table thead th { padding: 8px 6px; font-size: 11px; white-space: nowrap; }
    .data-card, .table-responsive, .table-wrapper-scroll {
        overflow-x: auto; -webkit-overflow-scrolling: touch;
    }
    .table-wrapper-scroll { max-height: calc(100vh - 200px); }
    /* Classe pra esconder colunas secundarias no tablet */
    .tablet-hide { display: none !important; }

    /* KPI grid: 2 colunas */
    .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

    /* Search bars: compactas, lado a lado */
    .search-bar { flex-wrap: wrap; gap: 6px; }
    .search-bar input { min-width: 120px; flex: 1; }
    .search-bar select { min-width: 100px; flex: 0 1 auto; }

    /* Page header */
    .page-header { flex-wrap: wrap; gap: 8px; }
    .page-header .actions { flex-wrap: wrap; gap: 6px; }
    .page-header .actions .btn { font-size: 12px; padding: 6px 10px; }
    .page-header h1, .page-header h2 { font-size: 18px; }

    /* Layout */
    .main-content { padding: 84px 10px 10px 10px; }
    .data-card, .card { padding: 10px; }
    .data-card-header { padding: 8px 12px; gap: 8px; }
    .data-card-header h2 { font-size: 14px; }

    /* Shortcut bar: touch-friendly */
    .shortcut-bar {
        height: 36px;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    .shortcut-btns { flex-wrap: nowrap; gap: 4px; }
    .shortcut-btn {
        font-size: 12px; padding: 4px 10px;
        min-height: 28px;
        scroll-snap-align: start;
    }
    .shortcut-btn kbd { font-size: 10px; padding: 1px 4px; }

    /* Sidebar: mais larga pra touch */
    .sidebar { width: 260px; }
    .sidebar.open + .sidebar-overlay { display: block; }

    /* Modals: ajustes tablet (apenas touch devices) */

    /* Detail grids */
    .detail-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .detail-grid-danfe { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* === TABLET LANDSCAPE 10" (1025-1280px, apenas touch) === */
@media (min-width: 1025px) and (max-width: 1280px) and (pointer: coarse) {
    /* Sidebar visivel em landscape wide tablet */
    .sidebar { transform: translateX(0); width: 200px; }
    .main-content { margin-left: 200px; padding-top: 84px; }
    .topnav-hamburger { display: none; }
    .dash-w-small, .dash-w-half { grid-column: span 3; }
    .data-table { font-size: 12px; }
    .data-table tbody td { padding: 8px 6px; max-width: 150px; }
    .data-table thead th { padding: 8px 6px; font-size: 11px; }
    .tablet-hide { display: none !important; }
    .search-bar { flex-wrap: wrap; gap: 6px; }
    .search-bar input { min-width: 120px; flex: 1; }
    .page-header h1, .page-header h2 { font-size: 18px; }
    .shortcut-bar { height: 36px; }
    .shortcut-btn { font-size: 12px; padding: 4px 10px; min-height: 28px; }
}

/* === TABLET PORTRAIT (apenas touch) === */
@media (orientation: portrait) and (min-width: 769px) and (max-width: 1024px) and (pointer: coarse) {
    /* Portrait: mais vertical, menos colunas */
    .kpi-grid { grid-template-columns: 1fr; }
    .dash-widgets-grid { grid-template-columns: 1fr; }
    .dash-w-small, .dash-w-half, .dash-w-full { grid-column: span 1; }
    .detail-grid, .detail-grid-danfe { grid-template-columns: 1fr; }
    /* Tabelas mais compactas em portrait */
    .data-table { font-size: 11px; }
    .data-table tbody td { padding: 6px 4px; max-width: 120px; }
    .data-table thead th { padding: 6px 4px; font-size: 10px; }
}

/* === TABLET LANDSCAPE (apenas touch) === */
@media (orientation: landscape) and (min-width: 769px) and (max-width: 1280px) and (pointer: coarse) {
    /* Landscape: mais espaço horizontal */
    .kpi-grid { grid-template-columns: repeat(3, 1fr); }
    .dash-widgets-grid { grid-template-columns: repeat(6, 1fr); }
    .dash-w-small { grid-column: span 2; }
    .dash-w-half { grid-column: span 3; }
    .dash-w-full { grid-column: span 6; }
}

/* Touch-friendly: targets minimos de 44px para todos os dispositivos touch */
@media (pointer: coarse) {
    .btn, button { min-height: 44px; padding-left: 16px; padding-right: 16px; }
    .btn-sm, button.btn-sm { min-height: 44px; padding: 6px 12px; font-size: 13px; }
    .data-table .btn, .data-table button { min-height: 44px; min-width: 44px; padding: 4px 10px; }
    .sidebar-nav a { padding: 14px 20px; font-size: 14px; }
    .data-table tbody td { padding: 12px 14px; }
    .data-table thead th { padding: 12px 14px; }
    .badge { padding: 4px 10px; font-size: 12px; }
    .dre-tab { padding: 12px 16px; }
    .page-header select, .search-bar select { min-height: 44px; padding: 8px 12px; }
    input[type="checkbox"], input[type="radio"] { min-width: 20px; min-height: 20px; }
    .pagination button, .pagination a { min-height: 44px; min-width: 44px; }

    /* Previne zoom em inputs no iOS */
    input[type="text"], input[type="number"], input[type="date"],
    input[type="password"], input[type="email"], select, textarea {
        font-size: 16px !important;
    }

    /* Orcamento touch targets */
    .orc-field input,
    .orc-field select,
    .orc-field textarea {
        min-height: 44px;
    }
    /* Itens do orçamento em cartão (1 coluna) no mobile/tablet */
    .orc-it-head { display: none; }
    .orc-it-row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "prod prod"
            "qtde preco"
            "sub  x";
        gap: 8px 10px;
        padding: 12px;
        row-gap: 10px;
    }
    .orc-it-n { display: none; }
    .orc-it-prod { grid-area: prod; }
    .orc-it-c[data-col="Qtde"] { grid-area: qtde; }
    .orc-it-c[data-col="Preço unit."] { grid-area: preco; }
    .orc-it-c[data-col="Subtotal"] { grid-area: sub; }
    .orc-it-x { grid-area: x; justify-self: end; align-self: center; }
    .orc-it-c { align-items: stretch; }
    .orc-it-c::before {
        content: attr(data-col);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .3px;
        color: var(--text-muted);
        text-align: left;
    }
    .orc-it-inp { min-height: 44px; text-align: right; }
    .orc-it-del { min-width: 44px; min-height: 44px; }
    .orc-footer .btn {
        min-height: 48px;
    }
    .orc-tot-grand strong { font-size: 22px; }
    /* Modal tablet touch */
    .modal-content { width: 96vw; max-height: 88vh; }
    .modal-body { padding-bottom: 60px; }

    /* Touch feedback */
    .btn:active { transform: scale(0.97); opacity: 0.9; }
}

/* Notificacao toast animation */
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ============================================================
   WHATSAPP BUSINESS - Chat UI
   ============================================================ */

.wa-container {
    display: flex;
    height: calc(100vh - 140px);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 12px;
    overflow: hidden;
    background: var(--card-bg, #fff);
}

.wa-sidebar {
    width: 320px;
    min-width: 280px;
    border-right: 1px solid var(--border-color, #e0e0e0);
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary, #f7f7f7);
}

.wa-sidebar-header {
    padding: 12px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.wa-search {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 8px;
    font-size: 14px;
    background: var(--card-bg, #fff);
    color: var(--text-primary, #333);
}

.wa-filter-btn {
    font-size: 12px !important;
    padding: 4px 10px !important;
}
.wa-filter-btn.active {
    background: #25D366 !important;
    color: #fff !important;
}

.wa-conversas-list {
    flex: 1;
    overflow-y: auto;
}

.wa-conv-item {
    display: flex;
    align-items: center;
    padding: 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color, #eee);
    transition: background 0.15s;
}
.wa-conv-item:hover {
    background: var(--hover-bg, rgba(0,0,0,0.04));
}
.wa-conv-active {
    background: var(--active-bg, rgba(37, 211, 102, 0.1)) !important;
    border-left: 3px solid #25D366;
}

.wa-conv-info {
    flex: 1;
    min-width: 0;
}
.wa-conv-name {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary, #333);
}
.wa-conv-preview {
    font-size: 13px;
    color: var(--text-secondary, #888);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.wa-conv-time {
    font-size: 11px;
    color: var(--text-secondary, #aaa);
    white-space: nowrap;
    margin-left: 8px;
}
.wa-conv-badge {
    display: inline-block;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 18px;
    padding: 0 4px;
    margin-left: 6px;
}

.wa-bot-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
    vertical-align: middle;
}
.wa-bot-on { background: #25D366; color: #fff; }
.wa-bot-off { background: #e67e22; color: #fff; }

/* Chat area */
.wa-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wa-chat-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #aaa);
}

.wa-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    background: var(--bg-secondary, #f7f7f7);
}

.wa-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: var(--wa-chat-bg, #e5ddd5);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
[data-theme="dark"] .wa-chat-messages {
    background: var(--wa-chat-bg-dark, #0b141a);
}

.wa-msg {
    display: flex;
    margin-bottom: 2px;
}
.wa-msg-in {
    justify-content: flex-start;
}
.wa-msg-out {
    justify-content: flex-end;
}
.wa-msg-bubble {
    max-width: 65%;
    padding: 8px 12px;
    border-radius: 8px;
    position: relative;
    word-wrap: break-word;
}
.wa-msg-in .wa-msg-bubble {
    background: var(--card-bg, #fff);
    border-top-left-radius: 0;
}
.wa-msg-out .wa-msg-bubble {
    background: #dcf8c6;
    border-top-right-radius: 0;
}
[data-theme="dark"] .wa-msg-out .wa-msg-bubble {
    background: #005c4b;
    color: #e9edef;
}
[data-theme="dark"] .wa-msg-in .wa-msg-bubble {
    background: #202c33;
    color: #e9edef;
}

.wa-msg-sender {
    font-size: 11px;
    font-weight: 600;
    color: #25D366;
    margin-bottom: 2px;
}
.wa-msg-text {
    font-size: 14px;
    line-height: 1.4;
    white-space: pre-wrap;
}
.wa-msg-meta {
    font-size: 11px;
    color: var(--text-secondary, #999);
    text-align: right;
    margin-top: 2px;
}

/* Chat input */
.wa-chat-input {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--border-color, #e0e0e0);
    background: var(--bg-secondary, #f0f0f0);
}
.wa-msg-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 20px;
    font-size: 14px;
    background: var(--card-bg, #fff);
    color: var(--text-primary, #333);
    outline: none;
}
.wa-msg-input:focus {
    border-color: #25D366;
}
.wa-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
    background: #25D366 !important;
    color: #fff !important;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: none;
    cursor: pointer;
}
.wa-send-btn:hover {
    background: #1da851 !important;
}

.wa-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-secondary, #aaa);
    font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
    .wa-container {
        flex-direction: column;
        height: calc(100vh - 120px);
    }
    .wa-sidebar {
        width: 100%;
        min-width: 100%;
        max-height: 40%;
        border-right: none;
        border-bottom: 1px solid var(--border-color, #e0e0e0);
    }
    .wa-msg-bubble {
        max-width: 85%;
    }
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-slider {
    position: absolute;
    inset: 0;
    background: #ccc;
    border-radius: 24px;
    transition: background 0.2s;
}
.toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-slider {
    background: var(--primary, #2563eb);
}
.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

/* Verificador de Custos */
.verif-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border, #e0e0e0);
    margin-bottom: 16px;
}
.verif-tab-btn {
    padding: 10px 20px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted, #666);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}
.verif-tab-btn:hover { color: var(--text, #222); }
.verif-tab-btn.active {
    color: var(--primary, #2563eb);
    border-bottom-color: var(--primary, #2563eb);
}
.verif-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.verif-summary-card {
    padding: 16px;
    border-radius: 10px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e0e0e0);
    text-align: center;
}
.verif-summary-card .count {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}
.verif-summary-card .label {
    font-size: 12px;
    color: var(--text-muted, #666);
    margin-top: 4px;
}
.verif-summary-card.critico { border-left: 4px solid #e74c3c; }
.verif-summary-card.critico .count { color: #e74c3c; }
.verif-summary-card.alerta { border-left: 4px solid #f39c12; }
.verif-summary-card.alerta .count { color: #f39c12; }
.verif-summary-card.info { border-left: 4px solid #3498db; }
.verif-summary-card.info .count { color: #3498db; }
.verif-summary-card.ok { border-left: 4px solid #27ae60; }
.verif-summary-card.ok .count { color: #27ae60; }
.badge-sev {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}
.badge-sev.critico { background: #fde8e8; color: #e74c3c; }
.badge-sev.alerta { background: #fef3e2; color: #e67e22; }
.badge-sev.info { background: #ebf5fb; color: #2980b9; }
[data-theme="dark"] .badge-sev.critico { background: #5a1a1a; color: #f87171; }
[data-theme="dark"] .badge-sev.alerta { background: #5a3a0a; color: #fbbf24; }
[data-theme="dark"] .badge-sev.info { background: #1a3a5a; color: #60a5fa; }
.verif-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--bg-alt, #f8f9fa);
    border-radius: 8px;
}
.verif-filters label { font-size: 13px; font-weight: 500; }
.verif-filters select, .verif-filters input[type="number"], .verif-filters input[type="range"] {
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--card-bg);
}
.verif-row-pos { background: rgba(39,174,96,0.06); }
.verif-row-neg { background: rgba(231,76,60,0.06); }
[data-theme="dark"] .verif-row-pos { background: rgba(39,174,96,0.12); }
[data-theme="dark"] .verif-row-neg { background: rgba(231,76,60,0.12); }
.verif-actions-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg-alt, #f8f9fa);
    border-radius: 8px;
    margin-top: 12px;
}
.verif-mini-form {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
.verif-mini-form input {
    width: 100px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 13px;
}

/* ============================================================
   DANFE-STYLE INFO BOXES
   ============================================================ */

.info-section {
    border: 1px solid var(--box-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 12px;
}

.info-section-header {
    background: var(--box-header-bg);
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--box-border);
}

.info-box-row {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--box-border);
}

.info-box-row:last-child {
    border-bottom: none;
}

.info-box {
    flex: 1;
    min-width: 120px;
    padding: 4px 8px;
    border-right: 1px solid var(--box-border);
}

.info-box:last-child {
    border-right: none;
}

.info-box-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 1px;
}

.info-box-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.info-box-sm { flex: 0 0 100px; min-width: 100px; }
.info-box-md { flex: 0 0 180px; min-width: 180px; }
.info-box-lg { flex: 1 1 300px; min-width: 250px; }

/* DANFE-style detail grid for modals */
.detail-grid-danfe {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--box-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 12px;
}

.detail-grid-danfe .detail-item {
    flex: 1 1 180px;
    min-width: 140px;
    padding: 8px 14px;
    border-right: 1px solid var(--box-border);
    border-bottom: 1px solid var(--box-border);
}

.detail-grid-danfe .detail-item label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 2px;
    display: block;
}

.detail-grid-danfe .detail-item span {
    font-size: 16px;
    font-weight: 600;
    display: block;
}

/* Section title inside modals */
.modal-section-title {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-secondary);
    margin: 18px 0 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--box-border);
}

.modal-section-title:first-child {
    margin-top: 0;
}

/* Responsive: stack DANFE boxes vertically on mobile */
@media (max-width: 768px) {
    .info-box-row { flex-direction: column; }
    .info-box { border-right: none; border-bottom: 1px solid var(--box-border); }
    .info-box:last-child { border-bottom: none; }
    .info-box-sm, .info-box-md, .info-box-lg { flex: 1 1 100%; min-width: 100%; }
    .detail-grid-danfe .detail-item { flex: 1 1 100%; border-right: none; }
}

/* ============================================================
   RESPONSIVE — EXPANDED 768px (Mobile)
   ============================================================ */

@media (max-width: 768px) {
    /* Selects e date inputs full-width */
    .search-bar select { width: 100%; }
    .search-bar input[type="date"] { width: 48%; min-width: 0; }

    /* Modal quase full-screen */
    .modal-overlay { padding: 8px; }
    .modal-content { width: 100vw; max-width: 100vw; border-radius: 8px; }

    /* Acoes empilham (quebra texto no ultimo td) */
    .data-table td:last-child { white-space: normal; }

    /* Sidebar mais larga para alvos de toque */
    .sidebar.open { width: 260px; }

    /* Tabs scrollam horizontalmente */
    .verif-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .verif-tab-btn { white-space: nowrap; flex-shrink: 0; }

    /* Dashboard grids em 1 coluna */
    .dash-grid-2 { grid-template-columns: 1fr; }

    /* Verificador filters empilham */
    .verif-filters { flex-direction: column; align-items: stretch; }

    /* Pagination compacta */
    .pagination { flex-wrap: wrap; gap: 6px; justify-content: center; }
    .pagination .page-btns { flex-wrap: wrap; justify-content: center; }

    /* Ranking Fornecedores: esconder barra proporcao em tablet */
    .rkf-table .rkf-col-bar { display: none; }
    .rkf-table .rkf-col-pend { min-width: 90px; }

    /* Ranking KPIs em 2x2 */
    #rkfKpis { gap: 8px !important; }
    #rkfKpis .kpi-card { min-width: calc(50% - 8px) !important; flex: 0 0 calc(50% - 8px) !important; }

    /* Ranking page header */
    #pageRankingFornecedores .page-header .actions { flex-wrap: wrap; }
}

/* ============================================================
   RESPONSIVE — EXPANDED 1024px (Tablet)
   ============================================================ */

@media (max-width: 1024px) {
    /* Menu nao ultrapassa metade da tela */
    .topnav-menu { max-width: 50vw; }

    /* Sidebar aberta mais larga para touch */
    .sidebar.open { width: 260px; }
}

/* ============================================================
   RESPONSIVE — 480px (Celulares Pequenos)
   ============================================================ */

@media (max-width: 480px) {
    /* Topnav compacto */
    .topnav { height: 36px; padding: 0 6px; gap: 4px; }
    .monfer-logo { width: 24px; height: 24px; font-size: 13px; }
    .brand-name { font-size: 13px; }
    .brand-sub { display: none; }
    .topnav-menu { display: none; }
    .topnav-hamburger { padding: 4px 8px; font-size: 16px; }
    .topnav-right { gap: 4px; }
    .topnav-icon-btn { width: 32px; height: 32px; font-size: 14px; }
    .topnav-user { padding: 4px 6px; gap: 4px; }
    .topnav-user-name { display: none; }
    .topnav-user .user-avatar { width: 24px; height: 24px; font-size: 10px; }

    /* Shortcut bar compacta */
    .shortcut-bar { top: 36px; height: 24px; }
    .shortcut-btn { font-size: 10px; padding: 1px 5px; }
    .shortcut-btn kbd { font-size: 8px; }

    /* Main content padding minimo */
    .main-content { padding: 68px 6px 8px 6px; }

    /* Sidebar top ajustada */
    .sidebar { top: 60px; }

    /* Page header compacto */
    .page-header h1 { font-size: 16px; }
    .page-header .actions { flex-wrap: wrap; width: 100%; }
    .page-header .actions .btn,
    .page-header .actions button { flex: 1; min-width: 0; text-align: center; }

    /* KPI grid: 2 colunas, compacto */
    .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .kpi-card { padding: 8px; }
    .kpi-card .kpi-icon { font-size: 18px; }
    .kpi-card .kpi-value { font-size: 16px; }
    .kpi-card .kpi-label { font-size: 10px; }

    /* Data card header empilhado */
    .data-card-header { flex-direction: column; align-items: flex-start; gap: 6px; padding: 6px 8px; }
    .data-card-header h2 { font-size: 12px; }

    /* Search bar compacta */
    .search-bar { gap: 4px; }
    .search-bar input, .search-bar select { padding: 6px 8px; font-size: 12px; }

    /* Tabela compacta */
    .data-table { font-size: 11px; }
    .data-table thead th { padding: 6px; font-size: 10px; }
    .data-table tbody td { padding: 4px 6px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .data-table tbody td.text-right,
    .data-table tbody td.text-center {
        overflow: visible;
        text-overflow: clip;
        max-width: none;
        white-space: nowrap;
    }
    .data-table td:last-child { max-width: none; white-space: normal; }

    /* Badges menores */
    .badge { font-size: 10px; padding: 1px 5px; }

    /* Botoes menores */
    .btn-sm { font-size: 11px; padding: 4px 8px; }

    /* Modal full-screen */
    .modal-overlay { padding: 0; }
    .modal-content { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
    .modal-content.modal-fullscreen { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; border-radius: 0; }
    .modal-header { padding: 8px 12px; }
    .modal-header h2 { font-size: 13px; }
    .modal-body { padding: 8px; }

    /* Pagination compacta */
    .pagination { padding: 4px 6px; font-size: 11px; flex-wrap: wrap; gap: 4px; }
    .pagination button { padding: 4px 8px; font-size: 11px; }

    /* Graficos menores */
    .chart-container { height: 180px; }

    /* Dashboard widgets: colunas reduzidas */
    .dash-widgets-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
    .dash-w-small { grid-column: span 1; }
    .dash-w-half { grid-column: span 2; }
    .dash-w-full { grid-column: span 2; }

    /* Size buttons ocultos no celular (nao cabe) */
    .size-btns { display: none; }

    /* Verificador tabs compactas */
    .verif-tab-btn { padding: 8px 12px; font-size: 12px; }
    .verif-summary-cards { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .verif-summary-card { padding: 10px; }

    /* DANFE info boxes */
    .info-box { padding: 3px 6px; }
    .info-box-value { font-size: 12px; }

    /* Detail grid */
    .detail-grid { gap: 8px; }

    /* Empty state compacto */
    .empty-state { padding: 20px 12px; }
    .empty-state .icon { font-size: 36px; }

    /* Mobile menu btn reposicionado */
    .mobile-menu-btn { top: 6px; left: 6px; padding: 6px 10px; font-size: 18px; }
}

/* ============================================================
   RESPONSIVE — Paisagem em Celular
   ============================================================ */

@media (max-height: 500px) and (orientation: landscape) {
    /* Topnav mais fino */
    .topnav { height: 32px; }
    .monfer-logo { width: 22px; height: 22px; font-size: 12px; }
    .brand-name { font-size: 12px; }
    .brand-sub { display: none; }

    /* Shortcut bar hidden in landscape mobile */
    .shortcut-bar { display: none; }

    /* Sidebar e conteudo ajustados */
    .sidebar { top: 32px; }
    .main-content { padding-top: 36px; }
    .mobile-menu-btn { top: 4px; }

    /* KPI compactos */
    .kpi-card { padding: 6px; }
    .kpi-card .kpi-value { font-size: 15px; }
    .kpi-card .kpi-label { font-size: 9px; }

    /* Graficos mais baixos */
    .chart-container { height: 160px; }

    /* Modal nao ocupa tudo verticalmente */
    .modal-content { max-height: 98vh; }
}

/* IA Sugestoes */
.ia-sugestao { border: 2px dashed #f59e0b; border-radius: 8px; padding: 12px; margin: 8px 0; position: relative; }
.ia-sugestao.aprovada { border-color: #22c55e; border-style: solid; }
.ia-sugestao.rejeitada { opacity: 0.5; border-color: #ef4444; }
.ia-badge { position: absolute; top: -8px; right: 8px; background: #f59e0b; color: #fff; font-size: 10px; padding: 2px 8px; border-radius: 4px; font-weight: 600; }
.ia-img-sugestao { border: 3px dashed #f59e0b; border-radius: 8px; }
.ia-img-sugestao.aprovada { border-color: #22c55e; border-style: solid; }

/* ============================================================
   LIBERACOES — Responsivo
   ============================================================ */

/* Tabela Liberacoes: colunas com classes para controle responsivo */
.lib-table .col-desc-atual,
.lib-table .col-motivo { /* colunas menos criticas */ }

/* Filtros liberacoes */
#pageLiberacoes .lib-filtros {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
}
#pageLiberacoes .lib-filtros select {
    padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;
    font-size: 13px; min-width: 140px;
}

/* Tablet (768-1024px) */
@media (max-width: 1024px) {
    .lib-table thead th { padding: 8px 6px; font-size: 12px; }
    .lib-table tbody td { padding: 6px; font-size: 12px; }
    .lib-table .col-motivo { max-width: 120px; }
}

/* Mobile (max 768px) — esconde colunas secundarias, cards empilhados */
@media (max-width: 768px) {
    /* KPIs em 2x2 grid */
    #liberacoesKpis { gap: 8px !important; }
    #liberacoesKpis .kpi-card { min-width: calc(50% - 8px) !important; flex: 0 0 calc(50% - 8px) !important; }

    /* Filtros empilham */
    #pageLiberacoes .lib-filtros { flex-direction: column; }
    #pageLiberacoes .lib-filtros select { width: 100%; }

    /* Esconder colunas menos importantes */
    .lib-table .col-desc-atual { display: none; }
    .lib-table .col-motivo { display: none; }

    /* Acoes mais touch-friendly */
    .lib-table .col-acoes { min-width: 90px; }
    .lib-table .col-acoes .btn-sm { padding: 8px 12px; font-size: 12px; min-height: 36px; }
}

/* Celulares pequenos e Android alta resolucao (max 480px) */
@media (max-width: 480px) {
    /* KPIs compactos */
    #liberacoesKpis .kpi-card { padding: 8px !important; }
    #liberacoesKpis .kpi-card .kpi-value { font-size: 22px !important; }
    #liberacoesKpis .kpi-card .kpi-label { font-size: 10px !important; }

    /* Tabela modo card no celular */
    .lib-table thead { display: none; }
    .lib-table tbody tr {
        display: block; padding: 12px; margin-bottom: 8px;
        border: 1px solid var(--border); border-radius: 8px;
        background: var(--card-bg); position: relative;
    }
    .lib-table tbody td {
        display: flex; justify-content: space-between; align-items: center;
        padding: 4px 0; border: none; max-width: none;
        white-space: normal; overflow: visible; text-overflow: unset;
    }
    .lib-table tbody td::before {
        content: attr(data-label);
        font-weight: 600; font-size: 11px; color: var(--text-muted);
        flex-shrink: 0; margin-right: 8px; min-width: 80px;
    }
    .lib-table tbody td:empty { display: none; }
    /* Esconder colunas que ja estao ocultas */
    .lib-table .col-desc-atual,
    .lib-table .col-motivo { display: none; }
    /* Desc solicitado esconde tambem no card mode */
    .lib-table .col-desc-sol { display: none; }

    /* Acoes como bloco full-width */
    .lib-table .col-acoes {
        display: flex; gap: 8px; padding-top: 8px !important;
        border-top: 1px solid var(--border); margin-top: 4px;
        justify-content: flex-end;
    }
    .lib-table .col-acoes::before { display: none; }
    .lib-table .col-acoes .btn-sm {
        padding: 10px 16px; font-size: 13px; min-height: 40px;
        border-radius: 6px; flex: 1;
    }
}

/* ============================================================
   MAPA DA LOJA — Indoor Store Mapping
   ============================================================ */
.mapa-label { background: transparent !important; border: none !important; box-shadow: none !important; }
.mapa-local-icon { background: transparent !important; border: none !important; box-shadow: none !important; }
.mapa-highlight-pulse {
    animation: mapaHighlightPulse 0.8s ease-in-out infinite alternate;
}
@keyframes mapaHighlightPulse {
    from { opacity: 0.5; stroke-width: 3; }
    to { opacity: 1; stroke-width: 5; }
}
.mapa-zoom-controls { box-shadow: 0 2px 6px rgba(0,0,0,.15); border-radius: 4px; }
.mapa-zoom-controls button:hover { background: #f1f5f9 !important; }
.mapa-image-overlay { pointer-events: none; }
.mapa-symbol-icon { background: transparent !important; border: none !important; box-shadow: none !important; }
.mapa-symbol-marker { cursor: grab; }
.mapa-symbol-marker:active { cursor: grabbing; }
.mapa-symbol-emoji {
    font-size: 22px; line-height: 1; text-shadow: 0 1px 3px rgba(0,0,0,.3);
    user-select: none; pointer-events: auto;
}
.mapa-symbol-nota { font-size: 9px; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px; text-align: center; }
.mapa-img-adjust-panel input[type="range"] {
    -webkit-appearance: none; appearance: none;
    height: 5px; border-radius: 3px; background: #e2e8f0; outline: none; width: 100%;
}
.mapa-img-adjust-panel input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--primary); cursor: pointer; border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.mapa-img-adjust-panel input[type="range"]::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--primary); cursor: pointer; border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.mapa-simbolo-paleta {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px;
    max-height: 200px; overflow-y: auto; padding: 4px;
}
.mapa-simbolo-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 4px 2px; border-radius: 6px; cursor: pointer; border: 2px solid transparent;
    transition: all .15s; font-size: 11px; text-align: center; min-height: 50px;
}
.mapa-simbolo-item:hover { background: var(--bg-secondary); border-color: var(--border); }
.mapa-simbolo-item.active { background: var(--primary-light, #dbeafe); border-color: var(--primary); }
.mapa-simbolo-item .emoji { font-size: 20px; line-height: 1.2; }
.mapa-simbolo-item .label { font-size: 9px; color: var(--text-muted); line-height: 1.1; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 44px; }
.mapa-ctx-menu {
    position: fixed; z-index: 10000; background: #fff; border: 1px solid var(--border);
    border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.15); padding: 4px 0;
    min-width: 160px; font-size: 13px;
}
.mapa-ctx-menu button {
    display: block; width: 100%; text-align: left; padding: 8px 14px;
    background: none; border: none; cursor: pointer; font-size: 13px;
}
.mapa-ctx-menu button:hover { background: var(--bg-secondary); }
.mapa-measure-label {
    background: rgba(255,255,255,.9) !important; border: 1px solid var(--primary) !important;
    border-radius: 4px !important; padding: 2px 6px !important;
    font-size: 12px !important; font-weight: 600 !important; color: var(--primary) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.15) !important;
}
#mapaOpacidadeSlider {
    -webkit-appearance: none; appearance: none;
    height: 6px; border-radius: 3px; background: #e2e8f0; outline: none;
}
#mapaOpacidadeSlider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--primary); cursor: pointer; border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
#mapaOpacidadeSlider::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--primary); cursor: pointer; border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* ============================================================
   RESPONSIVO GERAL — Tabelas em card-mode para mobile (<480px)
   ============================================================ */
@media (max-width: 480px) {
    /* Touch targets minimos de 44px (recomendacao Google/Apple) */
    .data-table .btn-sm,
    .data-table button.btn-sm {
        min-height: 36px; min-width: 36px; padding: 6px 10px;
    }

    /* Data cards scroll suave */
    .data-card { -webkit-overflow-scrolling: touch; }

    /* Ranking Fornecedores: esconder barra e coluna pendente, card mode */
    .rkf-table .rkf-col-bar { display: none; }
    .rkf-table thead { display: none; }
    .rkf-table tbody tr {
        display: block; padding: 12px; margin-bottom: 8px;
        border: 1px solid var(--border); border-radius: 8px;
        background: var(--card-bg);
    }
    .rkf-table tbody td {
        display: flex; justify-content: space-between; align-items: center;
        padding: 3px 0; border: none; max-width: none;
        white-space: normal; overflow: visible;
    }
    .rkf-table tbody td::before {
        content: attr(data-label);
        font-weight: 600; font-size: 11px; color: var(--text-muted);
        flex-shrink: 0; margin-right: 8px;
    }
    .rkf-table tbody td[data-label=""]::before { display: none; }
    .rkf-table tbody td[data-label=""] { display: none; }
    .rkf-table .rkf-col-pend { display: none; }

    /* Ranking KPIs 2x2 */
    #rkfKpis .kpi-card { min-width: calc(50% - 8px) !important; flex: 0 0 calc(50% - 8px) !important; }
}

/* ============================================================
   PERSONALIZACAO — Tamanho de fonte / densidade
   ============================================================ */

/* Font scale presets applied to <html> */
html[data-font="small"]  { font-size: 13px; }
html[data-font="medium"] { font-size: 15px; }
html[data-font="large"]  { font-size: 17px; }
html[data-font="xlarge"] { font-size: 19px; }

/* Scale key elements with rem when font preset is active */
html[data-font] .data-table { font-size: 0.82rem; }
html[data-font] .data-table thead th { font-size: 0.7rem; }
html[data-font] .data-table tbody td { padding: 0.35rem 0.6rem; }
html[data-font] .kpi-card .kpi-value { font-size: 1.3rem; }
html[data-font] .kpi-card .kpi-label { font-size: 0.7rem; }
html[data-font] .sidebar-nav a { font-size: 0.88rem; padding: 0.5rem 0.8rem; }
html[data-font] .btn { font-size: 0.82rem; }
html[data-font] .modal-body { font-size: 0.9rem; }
html[data-font] .badge { font-size: 0.68rem; }
html[data-font] label { font-size: 0.82rem; }
html[data-font] input, html[data-font] select, html[data-font] textarea { font-size: 0.88rem; }
html[data-font] .detail-grid .detail-item label { font-size: 0.72rem; }
html[data-font] .detail-grid .detail-item span { font-size: 0.88rem; }
html[data-font] .page-header h1 { font-size: 1.2rem; }
html[data-font] .chart-container { height: 260px; }

/* Density: comfortable = more padding */
html[data-density="comfortable"] .data-table tbody td { padding: 8px 12px; }
html[data-density="comfortable"] .data-table thead th { padding: 8px 12px; }
html[data-density="comfortable"] .kpi-card { padding: 14px 16px; }
html[data-density="comfortable"] .sidebar-nav a { padding: 10px 14px; }
html[data-density="comfortable"] .btn { padding: 8px 16px; }

/* Density: compact = less padding */
html[data-density="compact"] .data-table tbody td { padding: 3px 6px; }
html[data-density="compact"] .data-table thead th { padding: 4px 6px; }
html[data-density="compact"] .kpi-card { padding: 6px 10px; }
html[data-density="compact"] .sidebar-nav a { padding: 5px 10px; }

/* Config panel styles */
.config-panel {
    position: fixed; top: 40px; right: 12px; z-index: 10001;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: var(--shadow-lg);
    width: 280px; padding: 16px; display: none;
}
.config-panel.open { display: block; }
.config-panel h3 { font-size: 14px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.config-section { margin-bottom: 14px; }
.config-section label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.config-btn-group { display: flex; gap: 4px; }
.config-btn-group button {
    flex: 1; padding: 6px 4px; border: 1px solid var(--border);
    border-radius: 6px; background: var(--bg-secondary);
    color: var(--text); font-size: 12px; cursor: pointer;
    transition: all 0.15s;
}
.config-btn-group button:hover { border-color: var(--primary); color: var(--primary); }
.config-btn-group button.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.config-preview { padding: 10px; background: var(--bg-secondary); border-radius: 6px; margin-top: 10px; font-size: 13px; text-align: center; color: var(--text-secondary); }

/* ============================================================
   PONTO DE VENDA (POS)
   ============================================================ */
.venda-header-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 8px 16px;
    align-items: end;
}
.venda-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.venda-field input, .venda-field select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    color: #000;
}
.venda-field-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.venda-field-row input { width: auto; }

/* Autocomplete dropdown */
.venda-autocomplete-dd {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    max-height: 260px;
    overflow-y: auto;
}
.venda-autocomplete-dd .venda-dd-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid var(--border-light, #f0f0f0);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.venda-autocomplete-dd .venda-dd-item:hover,
.venda-autocomplete-dd .venda-dd-item.active {
    background: var(--primary-light, #eff6ff);
}
.venda-autocomplete-dd .venda-dd-item .dd-code {
    font-weight: 700;
    color: var(--primary);
    min-width: 40px;
}
.venda-autocomplete-dd .venda-dd-item .dd-name {
    flex: 1;
    margin-left: 8px;
}
.venda-autocomplete-dd .venda-dd-item .dd-info {
    font-size: 11px;
    color: var(--text-muted);
}

/* Product grid */
.venda-grid { font-size: 13px; }
.venda-grid thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-alt, #f8fafc);
    padding: 8px 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.venda-grid tbody td {
    padding: 4px 6px;
    vertical-align: middle;
}
.venda-grid tbody tr:hover { background: var(--primary-light, #f0f7ff); }
.venda-grid input {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 13px;
    background: transparent;
    color: #000;
    text-align: inherit;
}
.venda-grid input:focus {
    border-color: var(--primary);
    background: #fff;
    color: #000;
    outline: none;
}
.venda-grid .venda-row-empty input {
    border: 1px dashed var(--border);
    background: var(--bg-alt, #fafbfc);
}
.venda-grid .venda-row-remove {
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    border-radius: 4px;
}
.venda-grid .venda-row-remove:hover { background: #fef2f2; color: #ef4444; }
.venda-grid .venda-row-search {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
}
.venda-grid .venda-row-search:hover { background: var(--primary-light, #eff6ff); border-radius: 4px; }

/* Totals bar */
.venda-totals-bar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 20px;
    margin-top: 8px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.venda-total-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.venda-total-item span { color: var(--text-muted); }
.venda-total-item strong { font-size: 14px; }
.venda-total-final {
    margin-left: auto;
    font-size: 15px !important;
}
.venda-total-final strong {
    font-size: 20px !important;
    color: var(--primary);
}

/* Product search popup */
.venda-prod-popup {
    max-width: 98vw;
    width: 98vw;
}
.venda-prod-popup .venda-prod-results {
    max-height: 65vh;
}
.venda-prod-popup .venda-prod-search {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.venda-prod-popup .venda-prod-search input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
}
.venda-prod-popup .venda-prod-results {
    overflow-y: auto;
}
.venda-prod-popup .venda-prod-row {
    display: flex;
    gap: 8px;
    padding: 8px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-light, #f0f0f0);
    font-size: 13px;
    align-items: center;
}
.venda-prod-popup .venda-prod-row .prod-thumb {
    width: 36px; height: 36px; object-fit: contain; border-radius: 4px;
    background: var(--bg-secondary, #f1f5f9); flex-shrink: 0;
}
.venda-prod-popup .venda-prod-row .prod-code { min-width: 60px; }
.venda-prod-popup .venda-prod-row .prod-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.venda-prod-popup .venda-prod-row:hover,
.venda-prod-popup .venda-prod-row.active {
    background: var(--primary-light, #eff6ff);
}
.venda-prod-popup .venda-prod-row.selected {
    background: #d1fae5;
    border-left: 3px solid #10b981;
}
.venda-prod-popup .venda-prod-card {
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-light, #e8e8e8);
    transition: background 0.1s;
}
.venda-prod-popup .venda-prod-card:hover,
.venda-prod-popup .venda-prod-card.active {
    background: var(--primary-light, #eff6ff);
}
.venda-prod-popup .venda-prod-card.selected {
    background: #d1fae5;
    border-left: 3px solid #10b981;
}
.venda-prod-selbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 2px solid #10b981;
    background: #ecfdf5;
    font-weight: 600;
    font-size: 14px;
}
.venda-prod-popup .venda-prod-row .prod-code {
    font-weight: 700;
    color: var(--primary);
}
.venda-prod-popup .venda-prod-row .prod-saldo { text-align: right; min-width: 60px; }
.venda-prod-popup .venda-prod-row .prod-preco { text-align: right; font-weight: 600; min-width: 80px; }
.venda-prod-popup .venda-prod-detail {
    padding: 12px 16px;
    border-top: 2px solid var(--border);
    background: var(--bg-alt, #f8fafc);
    font-size: 12px;
}
.venda-prod-popup .venda-prod-detail .detail-row {
    display: flex;
    gap: 16px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.venda-prod-popup .venda-prod-detail .detail-label {
    font-weight: 600;
    color: var(--text-muted);
    min-width: 60px;
}
.venda-prod-popup .venda-prod-descontos {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    padding: 6px 0;
}
.venda-prod-popup .venda-prod-descontos .desc-badge {
    padding: 3px 10px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}
.venda-prod-popup .venda-prod-estoques {
    margin-top: 8px;
}
.venda-prod-popup .venda-prod-estoques table {
    width: 100%;
    font-size: 12px;
}
.venda-prod-popup .venda-prod-estoques th {
    text-align: left;
    font-weight: 600;
    padding: 3px 8px;
    color: var(--text-muted);
}
.venda-prod-popup .venda-prod-estoques td {
    padding: 3px 8px;
}

/* Discount buttons in product cards */
.desc-btn {
    padding: 3px 10px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text-muted);
    opacity: 0.5;
}
.desc-btn:disabled {
    cursor: not-allowed;
    opacity: 0.35;
}
.desc-btn:not(:disabled):hover {
    border-color: var(--primary);
    color: var(--primary);
    opacity: 1;
}
.desc-btn.desc-btn-active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    opacity: 1;
}
.desc-btn-atacado:not(:disabled) {
    background: #dbeafe;
    border-color: #3b82f6;
    color: #1e40af;
    opacity: 0.6;
}
.desc-btn-atacado.desc-btn-active {
    background: #1e40af;
    color: #fff;
    border-color: #1e40af;
    opacity: 1;
}

/* Finalization modal */
.venda-finalizar-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.venda-finalizar-grid .venda-field { margin-bottom: 0; }
.venda-finalizar-totais {
    margin-top: 16px;
    padding: 12px;
    background: var(--bg-alt, #f8fafc);
    border-radius: 8px;
}
.venda-finalizar-totais .fin-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
}
.venda-finalizar-totais .fin-row.fin-total {
    border-top: 2px solid var(--border);
    margin-top: 6px;
    padding-top: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
}

@media (max-width: 900px) {
    .venda-header-grid { grid-template-columns: 1fr 1fr; }
    .venda-header-grid .venda-field[style*="grid-column: span 2"] { grid-column: span 2; }
    .venda-totals-bar { flex-wrap: wrap; gap: 12px; }
}
@media (max-width: 600px) {
    .venda-header-grid { grid-template-columns: 1fr; }
    .venda-header-grid .venda-field[style*="grid-column: span 2"] { grid-column: span 1; }
}

/* Tiny Sync Monitor FAB + Drawer */
.tiny-sync-fab {
    position: fixed;
    bottom: 20px;
    right: 60px;
    z-index: 9997;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #1565c0, #1e88e5);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(21,101,192,0.4);
    transition: all 0.3s ease;
}
.tiny-sync-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(21,101,192,0.5);
}
.tiny-sync-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e74c3c;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}
.tiny-sync-drawer {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    height: 100vh;
    background: var(--card-bg, #fff);
    border-left: 1px solid var(--border, #e0e0e0);
    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
    z-index: 10000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}
.tiny-sync-drawer.open {
    right: 0;
}
.tiny-sync-drawer-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border, #e0e0e0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--sidebar-bg, #f8f9fa);
    flex-shrink: 0;
}
.tiny-sync-drawer-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}
.tiny-sync-drawer-logs {
    flex: 1;
    overflow-y: auto;
    font-size: 12px;
}
@media (max-width: 480px) {
    .tiny-sync-drawer { width: 100vw; right: -100vw; }
}

/* Product Detail Tabs */
.prod-tabs { display:flex; flex-wrap:wrap; gap:0; border-bottom:2px solid var(--border); margin:12px 0 0; }
.prod-tab { padding:6px 10px; cursor:pointer; font-size:12px; font-weight:500;
            border-bottom:2px solid transparent; margin-bottom:-2px;
            color:var(--text-secondary); white-space:nowrap; transition:color 0.15s, border-color 0.15s; user-select:none; }
.prod-tab:hover { color:var(--text); background:var(--bg-secondary); }
.prod-tab.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
.prod-tab-content { display:none; padding:16px 0; }
.prod-tab-content.active { display:block; }

/* ============================================================
   WINDOW MANAGER
   ============================================================ */

.wm-container {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 400;
}

/* Janelas das paginas internas nao devem cobrir aplicativos standalone do workspace. */
body.workspace-app-active .wm-container,
body.workspace-app-active .wm-taskbar {
    display: none !important;
}

.wm-window {
    position: fixed;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-window);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    transition: box-shadow var(--transition-fast);
    animation: wmOpen 0.2s ease-out;
}

@keyframes wmOpen {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.wm-window.wm-closing {
    animation: wmClose 0.18s ease-in forwards;
}

@keyframes wmClose {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}

.wm-window.wm-opening {
    opacity: 0;
    transform: scale(0.95);
}

.wm-window.wm-active {
    box-shadow: var(--shadow-window), 0 0 0 2px var(--primary-glow);
}

.wm-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px 0 14px;
    height: 38px;
    min-height: 38px;
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    cursor: default;
    user-select: none;
    flex-shrink: 0;
}

.wm-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    margin-right: 8px;
}

.wm-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.wm-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 16px;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
@media (pointer: coarse) {
    .wm-btn { width: 44px; height: 44px; font-size: 22px; }
    .wm-btn-close { background: rgba(220,38,38,0.1); }
    .wm-titlebar { min-height: 48px; }
    .data-table td .btn-sm { min-height: 40px; min-width: 40px; padding: 6px 10px; }
}

.wm-btn:hover {
    background: var(--bg-secondary);
    color: var(--text);
}

.wm-btn-close:hover {
    background: var(--danger);
    color: #fff;
}

.wm-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

/* Hide duplicate close button inside modal-header when inside wm-window */
.wm-body .modal-header .modal-close { display: none; }
.wm-body .modal-header h2 { font-size: 15px; color: var(--text-secondary); }

/* Resize handles */
.wm-resize {
    position: absolute;
    z-index: 2;
}
.wm-resize-n { top: -3px; left: 12px; right: 12px; height: 6px; cursor: n-resize; }
.wm-resize-s { bottom: -3px; left: 12px; right: 12px; height: 6px; cursor: s-resize; }
.wm-resize-e { right: -3px; top: 12px; bottom: 12px; width: 6px; cursor: e-resize; }
.wm-resize-w { left: -3px; top: 12px; bottom: 12px; width: 6px; cursor: w-resize; }
.wm-resize-ne { top: -3px; right: -3px; width: 14px; height: 14px; cursor: ne-resize; }
.wm-resize-nw { top: -3px; left: -3px; width: 14px; height: 14px; cursor: nw-resize; }
.wm-resize-se { bottom: -3px; right: -3px; width: 14px; height: 14px; cursor: se-resize; }
.wm-resize-sw { bottom: -3px; left: -3px; width: 14px; height: 14px; cursor: sw-resize; }

/* Maximized state */
.wm-window.wm-maximized {
    border-radius: 0;
    border: none;
}
.wm-window.wm-maximized .wm-resize { display: none; }

/* ============================================================
   TASKBAR (lateral direita)
   ============================================================ */

.wm-taskbar {
    position: fixed;
    top: 44px;
    right: 0;
    bottom: 0;
    width: var(--taskbar-w);
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-left: 1px solid var(--border);
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    z-index: 500;
    box-shadow: -2px 0 8px rgba(0,0,0,0.06);
    overflow: hidden;
}

.wm-taskbar-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    width: 100%;
    scrollbar-width: none;
}
.wm-taskbar-items::-webkit-scrollbar { display: none; }

.wm-taskbar-item {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.wm-taskbar-item:hover {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
    transform: scale(1.08);
}

/* Tooltip on hover */
.wm-taskbar-item::after {
    content: attr(title);
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 510;
}
.wm-taskbar-item:hover::after {
    opacity: 1;
}

.wm-taskbar-item.wm-taskbar-active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-glow);
}

.wm-taskbar-item.wm-taskbar-minimized {
    opacity: 0.5;
    border-style: dashed;
}

/* ============================================================
   VISUAL REFINEMENTS
   ============================================================ */

/* Cards: subtle hover lift */
.data-card {
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
.data-card:hover {
    box-shadow: var(--shadow-md);
}

/* Tables: refined header + row hover */
.data-table thead th {
    background: var(--bg-secondary);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.data-table tbody tr {
    transition: background var(--transition-fast);
    border-left: 3px solid transparent;
}
.data-table tbody tr:hover {
    background: var(--primary-light);
    border-left-color: var(--primary);
}

/* Buttons: subtle shadow + hover lift */
.btn {
    box-shadow: var(--shadow-xs);
    transition: all var(--transition-fast);
}
.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-xs);
}

/* ============================================================
   WINDOW MANAGER MOBILE OVERRIDES
   ============================================================ */

@media (max-width: 1024px) {
    .wm-window {
        left: 0 !important;
        top: 40px !important;
        width: 100vw !important;
        height: calc(100vh - 40px) !important;
        border-radius: 0;
        border: none;
    }
    .wm-window .wm-resize { display: none; }
    .wm-btn-minimize, .wm-btn-maximize { display: none; }
    .wm-taskbar { display: none !important; }
}

/* Busca produto overlay must be above windows */
.busca-produto-overlay { z-index: 600; }

/* ============================================================
   CALCULOS DE CUSTOS - Tabela tipo planilha
   ============================================================ */
.calc-scroll {
    overflow-x: auto;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.calc-scroll::-webkit-scrollbar { height: 8px; width: 8px; }
.calc-scroll::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 4px; }
.calc-table {
    font-size: 12px;
    white-space: nowrap;
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
}
.calc-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    font-size: 11px;
    padding: 4px 6px;
    background: var(--box-header-bg);
    border-bottom: 2px solid var(--border);
    text-align: right;
    font-weight: 600;
}
.calc-table th:nth-child(1), .calc-table th:nth-child(2), .calc-table th:nth-child(3) { text-align: left; }
.calc-table td { padding: 2px 4px; border-bottom: 1px solid var(--border); text-align: right; }
.calc-table td:nth-child(1), .calc-table td:nth-child(2), .calc-table td:nth-child(3) { text-align: left; }
.calc-table .calc-input {
    width: 70px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 2px 4px;
    background: var(--bg-secondary);
    text-align: right;
    color: var(--text);
}
.calc-table .calc-input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px var(--primary-glow);
}
.calc-table .calc-computed { color: var(--text-secondary); }
.calc-table .calc-highlight { background: rgba(37,99,235,0.06); font-weight: 600; }
[data-theme="dark"] .calc-table .calc-highlight { background: rgba(59,130,246,0.1); }
.calc-table tr:hover { background: var(--bg-tertiary); }
.tabs-mini { display: flex; gap: 0; }
.tabs-mini .tab-btn {
    padding: 4px 12px;
    font-size: 13px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    cursor: pointer;
    color: var(--text-secondary);
}
.tabs-mini .tab-btn:first-child { border-radius: 4px 0 0 4px; }
.tabs-mini .tab-btn:last-child { border-radius: 0 4px 4px 0; margin-left: -1px; }
.tabs-mini .tab-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Column visibility menu */
.calc-col-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: var(--shadow-lg);
    padding: 8px 12px;
    min-width: 180px;
    max-height: 400px;
    overflow-y: auto;
}
.calc-col-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}
.calc-col-label:hover { color: var(--primary); }
.calc-col-label input[type="checkbox"] { margin: 0; cursor: pointer; }

/* Column resize handle */
.calc-table th { position: relative; }
.calc-th-label { pointer-events: none; }
.calc-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
    background: transparent;
}
.calc-resize-handle:hover,
.calc-resize-handle:active { background: var(--primary); opacity: 0.4; }

/* ============================================================
   Dashboard Executivo
   ============================================================ */

/* Barra de alertas executiva */
.exec-alert-bar { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.exec-alert-item { padding:8px 14px; border-radius:8px; font-size:13px; flex:1; min-width:200px; }
.exec-alert-vermelho { background:#fee2e2; border-left:4px solid #ef4444; color:#991b1b; }
.exec-alert-amarelo { background:#fef9c3; border-left:4px solid #eab308; color:#854d0e; }
.exec-alert-verde { background:#dcfce7; border-left:4px solid #22c55e; color:#166534; }
[data-theme="dark"] .exec-alert-vermelho { background:#450a0a; border-left-color:#f87171; color:#fca5a5; }
[data-theme="dark"] .exec-alert-amarelo { background:#422006; border-left-color:#facc15; color:#fde68a; }
[data-theme="dark"] .exec-alert-verde { background:#052e16; border-left-color:#4ade80; color:#bbf7d0; }

/* KPI cards grandes (executivo) */
.exec-kpi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
.exec-kpi-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px 20px; position:relative; overflow:visible; box-shadow:var(--shadow-xs); }
.exec-kpi-card .kpi-label { font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px; }
.exec-kpi-card .kpi-main-value { font-size:28px; font-weight:800; color:var(--text); line-height:1.1; }
.exec-kpi-card .kpi-sub { font-size:12px; color:var(--text-muted); margin-top:4px; }
.exec-kpi-card .kpi-detail { font-size:11px; color:var(--text-secondary); margin-top:6px; line-height:1.5; }
.exec-kpi-status { position:absolute; top:12px; right:12px; width:12px; height:12px; border-radius:50%; }
.exec-kpi-status.verde { background:#22c55e; }
.exec-kpi-status.amarelo { background:#eab308; }
.exec-kpi-status.vermelho { background:#ef4444; }

/* Progress bar para PEF */
.exec-progress-bar { height:8px; background:var(--border); border-radius:4px; margin-top:8px; overflow:hidden; }
.exec-progress-fill { height:100%; border-radius:4px; transition:width 0.5s; }

/* Exec tables */
.exec-table { width:100%; border-collapse:collapse; font-size:12px; }
.exec-table th { text-align:left; padding:6px 8px; background:var(--bg-tertiary); border-bottom:1px solid var(--border); font-weight:600; color:var(--text-secondary); white-space:nowrap; }
.exec-table td { padding:5px 8px; border-bottom:1px solid var(--border); }
.exec-table tr:hover { background:var(--bg-secondary); }
.exec-urgencia-critico { color:#ef4444; font-weight:700; }
.exec-urgencia-alerta { color:#eab308; font-weight:600; }
.exec-urgencia-ok { color:#22c55e; }
.exec-sell-bar { display:inline-block; height:6px; border-radius:3px; background:var(--primary); vertical-align:middle; }

/* Responsivo */
@media (max-width:1024px) { .exec-kpi-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px) { .exec-kpi-grid { grid-template-columns:1fr; } }

/* ── Busca por Imagem ── */
.btn-camera {
    position: absolute;
    right: 74px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px 6px;
    border-radius: 50%;
    transition: all 0.2s;
    z-index: 2;
    line-height: 1;
}
.btn-camera:hover { color: var(--primary); background: var(--bg-secondary); }

.btn-camera-inline {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px 4px;
    border-radius: 50%;
    transition: all 0.2s;
    line-height: 1;
}
.btn-camera-inline:hover { color: var(--primary); background: var(--bg-secondary); }

.busca-img-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 60px;
    overflow-y: auto;
}
.busca-img-modal {
    background: var(--bg);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    width: 95%;
    max-width: 700px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 20px;
    position: relative;
}
.busca-img-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--text-muted);
}
.busca-img-close:hover { color: var(--text); }
.busca-img-preview {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.busca-img-preview img {
    max-width: 150px;
    max-height: 150px;
    border-radius: 8px;
    object-fit: contain;
    border: 1px solid var(--border);
}
.busca-img-ia-desc {
    flex: 1;
    font-size: 13px;
    color: var(--text-secondary);
}
.busca-img-ia-desc strong { color: var(--text); font-size: 15px; }
.busca-img-ia-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.busca-img-ia-tag {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
}
.busca-img-loading {
    text-align: center;
    padding: 40px 0;
    color: var(--text-muted);
}
.busca-img-loading .spinner { margin: 0 auto 12px; }
.busca-img-resultado {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--border);
}
.busca-img-resultado:hover { background: var(--bg-secondary); }
.busca-img-resultado img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #fff;
    flex-shrink: 0;
}
.busca-img-resultado .no-thumb {
    width: 56px;
    height: 56px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.busca-img-info { flex: 1; min-width: 0; }
.busca-img-info .titulo { font-weight: 600; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.busca-img-info .subtitulo { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.busca-img-info .motivo { font-size: 11px; color: var(--text-muted); font-style: italic; margin-top: 2px; }
.score-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    min-width: 42px;
    text-align: center;
}
.score-badge.high { background: #dcfce7; color: #166534; }
.score-badge.medium { background: #fef9c3; color: #854d0e; }
.score-badge.low { background: var(--bg-tertiary); color: var(--text-muted); }

@media (max-width: 768px) {
    .busca-img-preview { flex-direction: column; align-items: flex-start; }
    .busca-img-preview img { max-width: 120px; }
    .busca-img-modal { padding: 14px; }
}

/* ============================================================
   NOTAS — Google Keep grid
   ============================================================ */

.notas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.nota-card {
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
    transition: box-shadow .2s, transform .15s;
    position: relative;
    min-height: 80px;
}
.nota-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    transform: translateY(-2px);
}
.nota-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}
.nota-card-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity .2s;
    position: relative;
}
.nota-card:hover .nota-card-actions {
    opacity: 1;
}
.nota-cor-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
}

/* ============================================================
   EMAIL — 3-column Outlook layout
   ============================================================ */

/* ── EMAIL CLIENT (Outlook/Gmail style) ─────────────────────── */
.email-layout {
    display: grid;
    grid-template-columns: 220px minmax(280px, 340px) 1fr;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    height: calc(100vh - 100px);
    min-height: 500px;
    background: var(--bg);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
/* Remove padding lateral para email fullwidth */
#pageEmail { margin: 0 -16px; }

/* ── Sidebar ── */
.email-sidebar {
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.email-sidebar-top { padding: 12px; }
.email-compose-btn {
    width: 100%;
    padding: 10px 16px;
    border: none;
    border-radius: 20px;
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: filter .15s, transform .1s;
    box-shadow: 0 2px 8px rgba(59,130,246,.25);
}
.email-compose-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.email-compose-btn:active { transform: translateY(0); }

#emailContasList {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.email-conta-section { margin-bottom: 4px; }
.email-conta-header {
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background .15s;
    border-radius: 0 24px 24px 0;
    margin-right: 8px;
}
.email-conta-header:hover { background: rgba(128,128,128,.08); }
.email-conta-header.active { background: var(--primary-light, rgba(59,130,246,.1)); }
.email-conta-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; color: #fff;
    flex-shrink: 0;
}
.email-conta-info {
    flex: 1; min-width: 0;
}
.email-conta-name {
    font-size: 13px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.email-conta-email {
    font-size: 11px; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.email-conta-badge {
    background: var(--primary); color: #fff;
    font-size: 11px; font-weight: 700;
    padding: 1px 7px; border-radius: 10px;
    min-width: 20px; text-align: center;
}

.email-pasta-item {
    padding: 7px 14px 7px 28px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background .15s;
    border-radius: 0 24px 24px 0;
    margin-right: 8px;
    color: var(--text);
}
.email-pasta-item:hover { background: rgba(128,128,128,.08); }
.email-pasta-item.email-pasta-active {
    background: var(--primary-light, rgba(59,130,246,.12));
    color: var(--primary);
    font-weight: 600;
}
.email-pasta-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.email-pasta-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.email-pasta-count {
    font-size: 11px; font-weight: 700; color: var(--primary);
    min-width: 18px; text-align: right;
}

.email-sidebar-bottom {
    border-top: 1px solid var(--border);
    padding: 6px 8px;
    display: flex;
    gap: 4px;
}
.email-sidebar-action {
    flex: 1; padding: 6px 8px; border: none; background: transparent;
    color: var(--text-muted); font-size: 12px; cursor: pointer;
    border-radius: 6px; transition: background .15s, color .15s;
}
.email-sidebar-action:hover {
    background: rgba(128,128,128,.1); color: var(--text);
}

/* ── Message list ── */
.email-list {
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.email-list-toolbar {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg);
    flex-shrink: 0;
}
.email-search-wrap {
    flex: 1;
    position: relative;
}
.email-search-icon {
    position: absolute;
    left: 10px; top: 50%; transform: translateY(-50%);
    font-size: 14px; color: var(--text-muted); pointer-events: none;
}
.email-search-wrap input {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text);
    font-size: 13px;
    transition: border-color .2s, box-shadow .2s;
}
.email-search-wrap input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59,130,246,.12);
    outline: none;
}
.email-toolbar-actions {
    display: flex; gap: 2px; flex-shrink: 0;
}
.email-toolbar-btn {
    padding: 6px 8px; border: none; background: transparent;
    color: var(--text-muted); font-size: 16px; cursor: pointer;
    border-radius: 6px; transition: background .15s, color .15s;
}
.email-toolbar-btn:hover {
    background: rgba(128,128,128,.12); color: var(--text);
}

.email-list-info {
    padding: 4px 12px;
    font-size: 11px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
}

.email-messages-scroll {
    flex: 1;
    overflow-y: auto;
}

/* ── Message item (Outlook style) ── */
.email-msg-item {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(128,128,128,.08);
    cursor: pointer;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    transition: background .12s;
    position: relative;
}
.email-msg-item:hover {
    background: rgba(128,128,128,.05);
}
.email-msg-item.email-msg-selected {
    background: var(--primary-light, rgba(59,130,246,.08));
}
.email-msg-item.email-msg-unread {
    background: rgba(59,130,246,.03);
}
.email-msg-item.email-msg-unread::before {
    content: '';
    position: absolute;
    left: 0; top: 12px;
    width: 4px; height: 24px;
    border-radius: 0 3px 3px 0;
    background: var(--primary);
}
.email-msg-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; color: #fff;
    flex-shrink: 0; margin-top: 2px;
}
.email-msg-body { flex: 1; min-width: 0; }
.email-msg-row1 {
    display: flex; align-items: baseline; gap: 6px;
}
.email-msg-from {
    flex: 1; font-size: 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.email-msg-item.email-msg-unread .email-msg-from { font-weight: 700; color: var(--text); }
.email-msg-date {
    font-size: 11px; color: var(--text-muted);
    white-space: nowrap; flex-shrink: 0;
}
.email-msg-item.email-msg-unread .email-msg-date { color: var(--primary); font-weight: 600; }
.email-msg-row2 {
    display: flex; align-items: center; gap: 6px; margin-top: 2px;
}
.email-msg-subject {
    font-size: 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.email-msg-item.email-msg-unread .email-msg-subject { font-weight: 600; }
.email-msg-icons {
    display: flex; gap: 2px; flex-shrink: 0; font-size: 13px;
}
.email-msg-preview {
    font-size: 12px; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 2px;
    line-height: 1.4;
}
.email-msg-tags {
    display: flex; gap: 4px; margin-top: 4px;
}
.email-msg-tag {
    font-size: 10px; padding: 1px 6px;
    border-radius: 3px; font-weight: 600;
}

.email-pagination {
    padding: 8px 12px;
    text-align: center;
    border-top: 1px solid var(--border);
    font-size: 12px;
    flex-shrink: 0;
}

/* ── Preview pane ── */
.email-preview {
    overflow-y: auto;
    background: var(--bg);
    display: flex;
    flex-direction: column;
}
.email-preview-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    height: 100%; color: var(--text-muted); gap: 8px;
}
.email-empty-icon { font-size: 48px; opacity: .3; }
.email-preview-empty p { font-size: 14px; }

.email-read-toolbar {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    display: flex; gap: 6px; flex-wrap: wrap;
    background: var(--bg);
    flex-shrink: 0;
}
.email-action-btn {
    padding: 6px 12px; border: 1px solid var(--border); background: var(--bg);
    color: var(--text); font-size: 12px; cursor: pointer;
    border-radius: 6px; display: flex; align-items: center; gap: 4px;
    transition: background .15s, border-color .15s;
}
.email-action-btn:hover { background: var(--bg-secondary); border-color: var(--text-muted); }
.email-action-btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.email-action-btn.primary:hover { filter: brightness(1.1); }
.email-action-btn.danger:hover { color: var(--danger); border-color: var(--danger); }

/* Email IA Assistant */
.email-ia-stat-card { background:var(--bg-secondary); border:1px solid var(--border); border-radius:10px; padding:14px; text-align:center; cursor:pointer; transition:all .15s; }
.email-ia-stat-card:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.1); }
.email-ia-stat-num { font-size:28px; font-weight:700; line-height:1.2; }
.email-ia-stat-label { font-size:12px; color:var(--text-muted); margin-top:4px; }
.email-ia-cat-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:500; background:var(--bg-secondary); border:1px solid var(--border); }
.email-ia-cat-pedido { background:rgba(34,197,94,.1); color:#16a34a; border-color:#16a34a; }
.email-ia-cat-cobranca { background:rgba(245,158,11,.1); color:#d97706; border-color:#d97706; }
.email-ia-cat-reclamacao { background:rgba(239,68,68,.1); color:#dc2626; border-color:#dc2626; }
.email-ia-cat-cotacao { background:rgba(59,130,246,.1); color:#2563eb; border-color:#2563eb; }
.email-ia-cat-nfe { background:rgba(139,92,246,.1); color:#7c3aed; border-color:#7c3aed; }
.email-ia-cat-boleto { background:rgba(236,72,153,.1); color:#db2777; border-color:#db2777; }
.email-ia-cat-marketing { background:rgba(107,114,128,.1); color:#6b7280; border-color:#6b7280; }
.email-ia-cat-spam { background:rgba(239,68,68,.1); color:#ef4444; border-color:#ef4444; }
.email-ia-cat-bounce { background:rgba(245,158,11,.1); color:#f59e0b; border-color:#f59e0b; }
.email-ia-cat-informativo { background:rgba(59,130,246,.1); color:#3b82f6; border-color:#3b82f6; }
.email-ia-cat-outro { background:var(--bg-secondary); color:var(--text-muted); }

.email-read-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.email-read-subject {
    font-size: 20px; font-weight: 700; margin: 0 0 12px;
    line-height: 1.3; color: var(--text);
}
.email-read-meta {
    display: flex; align-items: flex-start; gap: 12px;
}
.email-read-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 16px; color: #fff;
    flex-shrink: 0;
}
.email-read-info { flex: 1; min-width: 0; }
.email-read-from {
    font-size: 14px; font-weight: 600; color: var(--text);
}
.email-read-to {
    font-size: 12px; color: var(--text-muted); margin-top: 2px;
}
.email-read-date-side {
    font-size: 12px; color: var(--text-muted);
    white-space: nowrap; flex-shrink: 0; text-align: right;
}

.email-attachments {
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    display: flex; flex-wrap: wrap; gap: 8px;
    align-items: center;
}
.email-attachment-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    font-size: 12px; color: var(--text);
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.email-attachment-chip:hover {
    border-color: var(--primary); background: rgba(59,130,246,.05);
}
.email-attachment-icon { font-size: 16px; }
.email-attachment-size { color: var(--text-muted); font-size: 11px; }

.email-read-body {
    flex: 1; padding: 16px 20px; overflow: auto;
}
.email-read-body iframe {
    width: 100%; border: none; min-height: 400px;
    background: #fff; border-radius: 6px;
}
.email-read-body pre {
    white-space: pre-wrap; padding: 0;
    font-family: inherit; font-size: 14px; line-height: 1.6;
    margin: 0; word-break: break-word;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .email-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        height: auto;
    }
    .email-sidebar { display: none; }
    .email-preview { min-height: 300px; }
}
@media (max-width: 1200px) and (min-width: 901px) {
    .email-layout {
        grid-template-columns: 180px 260px 1fr;
    }
}

/* ---- Kit image thumbnails ---- */
.kit-img-wrap {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    overflow: visible;
    cursor: pointer;
}
.kit-img-wrap img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: #f8f8f8;
}
.kit-img-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
    z-index: 1;
}
.kit-img-badge.aprovada { background: var(--success); }
.kit-img-badge.pendente { background: var(--warning); }
.kit-img-badge.sem { background: var(--danger); }
.kit-img-sem {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px dashed var(--border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    color: var(--text-secondary);
}
.kit-img-sem:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* ============================================================
   VISUAL IMPROVEMENTS v41 — Global Foundation
   ============================================================ */

/* 1.1 Thin scrollbars — targeted containers only (NOT *) */
.main-content,
.modal-content,
.modal-body,
.data-card,
.autocomplete-list,
.shortcut-modal-body,
.busca-produto-modal,
.table-wrapper-scroll,
.analytics-list-wrapper,
.analytics-grid-wrapper,
.produtos-parados-lista,
.top-margem-lista,
.email-list-scroll,
.email-sidebar-scroll,
.orc-items-container,
.calc-col-list {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.main-content::-webkit-scrollbar,
.modal-content::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.data-card::-webkit-scrollbar,
.autocomplete-list::-webkit-scrollbar,
.table-wrapper-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.main-content::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.data-card::-webkit-scrollbar-thumb,
.autocomplete-list::-webkit-scrollbar-thumb,
.table-wrapper-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.main-content::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.data-card::-webkit-scrollbar-track,
.autocomplete-list::-webkit-scrollbar-track,
.table-wrapper-scroll::-webkit-scrollbar-track { background: transparent; }

/* 1.2 Modal backdrop blur */
.modal-overlay,
.shortcut-modal-overlay,
.busca-img-overlay {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* 1.3 Selection color */
::selection {
    background: var(--primary);
    color: #fff;
}

/* 1.4 Global focus glow on inputs */
input:focus,
select:focus,
textarea:focus {
    box-shadow: 0 0 0 3px var(--primary-glow);
    border-color: var(--primary) !important;
    outline: none;
}

/* 1.5 Focus-visible for keyboard accessibility */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ============================================================
   VISUAL IMPROVEMENTS v41 — Page Transitions & Topnav Glass
   ============================================================ */

/* 2.1 Fade-in animation on page switch */
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.page:not(.hidden) {
    animation: pageFadeIn 0.25s ease-out;
}

/* 2.2 Topnav — semi-transparent without blur (blur on fixed elements is GPU-heavy) */
.topnav {
    background: var(--bg-glass);
}

/* ============================================================
   VISUAL IMPROVEMENTS v41 — Component Polish
   ============================================================ */

/* 3.1 Sidebar polish */
.sidebar-nav > a.active {
    border-left-width: 4px;
}
.sidebar-group-items a.active {
    border-left-width: 4px;
}
/* Sidebar group animation removed — display:none/block is faster than max-height transition */
.sidebar-group-toggle:hover {
    color: var(--primary);
}
.sidebar-group-toggle .sidebar-arrow {
    transition: transform 0.25s ease;
}

/* 3.2 Empty state improved */
.empty-state {
    background: var(--bg-secondary);
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
}
@keyframes emptyPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}
.empty-state .icon {
    animation: emptyPulse 2.5s ease-in-out infinite;
}

/* 3.3 Spinner modernized — dual arc */
.spinner {
    border-bottom-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--border);
}

/* 3.4 Tab buttons polish */
.tabs-mini .tab-btn {
    transition: all 0.15s ease;
}
.tabs-mini .tab-btn:hover:not(.active) {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}
.tabs-mini .tab-btn.active {
    box-shadow: 0 0 0 2px var(--primary-glow);
}

/* ============================================================
   VISUAL IMPROVEMENTS v41 — Cards, Pagination, Autocomplete
   ============================================================ */

/* 4.1 KPI cards — gradient accent & hover */
.kpi-card::after {
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    opacity: 0.4;
    transition: opacity 0.2s;
}
.kpi-card:hover::after {
    opacity: 0.8;
}
.kpi-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* 4.2 Pagination pill shape */
.pagination button {
    border-radius: 16px;
    transition: all 0.15s ease;
}
.pagination button:hover:not(:disabled) {
    transform: scale(1.05);
}
.pagination button.active {
    box-shadow: 0 0 0 3px var(--primary-glow);
    border-radius: 16px;
}

/* 4.3 Autocomplete improvements */
.autocomplete-list {
    margin-top: 4px;
    border-radius: 8px;
    box-shadow: var(--shadow-xl);
    animation: acSlideDown 0.15s ease-out;
}
@keyframes acSlideDown {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 4.4 Detail grid alternating rows */
.detail-grid .detail-item:nth-child(4n+3),
.detail-grid .detail-item:nth-child(4n+4) {
    background: var(--bg-secondary);
    border-radius: var(--radius);
    padding: 4px 6px;
    margin: -4px -6px;
}

/* ============================================================
   VISUAL IMPROVEMENTS v41 — Micro-animations
   ============================================================ */

/* 5.1 Exec alert bar stagger */
@keyframes alertSlideIn {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}
.exec-alert-bar .exec-alert-item {
    animation: alertSlideIn 0.3s ease-out both;
}
.exec-alert-bar .exec-alert-item:nth-child(1) { animation-delay: 0s; }
.exec-alert-bar .exec-alert-item:nth-child(2) { animation-delay: 0.08s; }
.exec-alert-bar .exec-alert-item:nth-child(3) { animation-delay: 0.16s; }
.exec-alert-bar .exec-alert-item:nth-child(4) { animation-delay: 0.24s; }

/* 5.2 KPI value reveal */
@keyframes kpiReveal {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.kpi-card .kpi-value {
    animation: kpiReveal 0.35s ease-out;
}

/* ============================================================
   VISUAL IMPROVEMENTS v41 — Print Stylesheet
   ============================================================ */
@media print {
    .sidebar,
    .topnav,
    .shortcut-bar,
    .topnav-hamburger,
    .mobile-menu-btn,
    .search-bar,
    .pagination,
    .chat-panel,
    .chat-toggle,
    .btn,
    button:not(.print-keep),
    .page-header .actions {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
    }

    .main-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .page:not(.hidden) {
        animation: none !important;
    }

    .data-card,
    .kpi-card,
    .card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
    }

    .kpi-card::after {
        display: none !important;
    }

    .badge {
        background: transparent !important;
        color: #000 !important;
        border: 1px solid #999 !important;
    }

    table {
        font-size: 11px !important;
    }

    .data-table th,
    .data-table td {
        padding: 4px 6px !important;
    }

    a { color: #000 !important; text-decoration: none !important; }
}

/* ============================================================
   ADAPTIVE CONTENT v41 — Conteudo Fluido
   Regra: nada oculto, tudo se adapta ao espaco disponivel
   Desktop = text-wrap | Mobile = scroll horizontal | Hover = expande
   ============================================================ */

/* ---- DESKTOP (> 768px): Texto adaptavel ---- */
@media (min-width: 769px) {
    /* Celulas: permite wrap MAS mantém overflow:hidden (performance) */
    .data-table tbody td {
        white-space: normal;
        word-break: break-word;
        max-width: 500px;
    }

    /* Busca de produtos: colunas mais largas */
    .busca-produto-table .col-descricao {
        max-width: 500px;
        white-space: normal;
    }
    .busca-produto-table .col-familia,
    .busca-produto-table .col-grupo {
        max-width: 250px;
        white-space: normal;
    }

    /* Table wrappers: altura relativa ao viewport */
    .table-wrapper-scroll {
        max-height: calc(100vh - 260px);
    }

    .analytics-list-wrapper,
    .analytics-grid-wrapper,
    .produtos-parados-lista,
    .top-margem-lista {
        max-height: calc(100vh - 320px);
    }

    /* Labels especificos: sem truncar */
    .analytics-card-title,
    .sales-header-label,
    .sales-detail-label,
    .dfe-num-txt,
    .dfe-dt-txt,
    .orc-item-row .item-desc {
        white-space: normal;
    }
}

/* ---- MOBILE (≤ 768px): Scroll horizontal ---- */
@media (max-width: 768px) {
    .data-card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---- HOVER EXPAND: Texto truncado expande ao hover (leve, sem reflow pesado) ---- */
.busca-img-info .titulo:hover,
.wm-window-title:hover,
.email-msg-subject:hover,
.email-msg-from:hover,
.email-conta-name:hover,
.email-pasta-name:hover {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
}

/* ---- DETAIL GRID: Conteudo completo sem cortar ---- */
.detail-item span {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Map symbols: wider labels */
.mapa-symbol-nota {
    max-width: 120px;
}
.mapa-simbolo-item .label {
    max-width: 80px;
}

/* ---- Reduced motion: disable all animations ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   COLUMN VISIBILITY TOGGLE (generic for all .data-table)
   ============================================================ */
.colvis-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    margin-left: 6px;
}
.colvis-btn:hover { color: var(--primary); border-color: var(--primary); }
.colvis-btn[data-hidden-count]:not([data-hidden-count="0"])::after {
    content: attr(data-hidden-count);
    position: absolute;
    top: -6px; right: -6px;
    min-width: 16px; height: 16px;
    background: var(--danger);
    color: #fff;
    font-size: 10px; font-weight: 700;
    border-radius: 99px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
    line-height: 1;
}
.colvis-wrap { position: relative; display: inline-flex; }
.colvis-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 1000;
    min-width: 200px;
    max-height: 400px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 6px 0;
    display: none;
}
.colvis-menu.open { display: block; }
.colvis-menu-title {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
.colvis-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    color: var(--text);
}
.colvis-label:hover { background: var(--primary-light); color: var(--primary); }
.colvis-label input[type="checkbox"] { accent-color: var(--primary); }
.colvis-menu-footer {
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding: 6px 12px;
}
.colvis-menu-footer button {
    width: 100%;
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
}
.colvis-menu-footer button:hover { color: var(--primary); border-color: var(--primary); }

/* ============================================================
   MODERNIZAÇÃO VISUAL 2026 — Append-Only Block
   Adicionado ao final para override via cascata CSS.
   Para reverter: deletar tudo daqui até o final do arquivo.
   ============================================================ */

/* ── 1. Variáveis CSS Refinadas ── */
:root {
    --radius: 6px;
    --radius-lg: 10px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    --bg: #f8fafc;
    --text: #0f172a;
    --text-muted: #94a3b8;
    --success: #059669;
    --shadow-colored: 0 4px 14px -2px rgba(37,99,235,0.12), 0 2px 6px -2px rgba(37,99,235,0.08);
    --transition-fast: 0.15s cubic-bezier(0.4,0,0.2,1);
    --transition-normal: 0.25s cubic-bezier(0.4,0,0.2,1);
    --font-xs: 11px;
    --font-sm: 12px;
    --font-base: 13px;
    --font-md: 14px;
    --font-lg: 16px;
    --font-xl: 20px;
    --font-2xl: 24px;
    --font-3xl: 30px;
}

[data-theme="dark"] {
    --bg: #0c1222;
    --text: #f1f5f9;
    --text-muted: #64748b;
    --success: #34d399;
    --shadow-colored: 0 4px 14px -2px rgba(59,130,246,0.15), 0 2px 6px -2px rgba(59,130,246,0.10);
}

/* ── 2. Cards e KPIs ── */
.kpi-card {
    border-radius: var(--radius-lg);
    padding: 14px;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    border-color: transparent;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}
.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-colored);
}
.kpi-card::after {
    height: 4px;
    background: linear-gradient(90deg, var(--primary) 0%, #60a5fa 50%, var(--primary-dark) 100%);
    opacity: 0.6;
}
.kpi-card:hover::after {
    opacity: 1;
}
.kpi-card .kpi-value {
    font-weight: 800;
    letter-spacing: -0.02em;
}
.kpi-card .kpi-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
    font-size: var(--font-xs);
    color: var(--text-muted);
}
.data-card {
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    border-color: transparent;
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
.data-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
}
.data-card-header {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

/* ── 3. Sidebar ── */
.sidebar {
    top: 72px;
    border-right-color: transparent;
    box-shadow: 1px 0 3px rgba(0,0,0,0.04);
}
.sidebar-nav > a {
    border-left: 3px solid transparent;
    border-radius: 0 6px 6px 0;
    margin-right: 8px;
    transition: all var(--transition-fast);
}
.sidebar-nav > a:hover {
    background: color-mix(in srgb, var(--primary) 6%, transparent);
}
.sidebar-nav > a.active {
    border-left: 4px solid var(--primary);
    background: var(--primary-light);
    font-weight: 600;
    color: var(--primary);
    border-radius: 0 6px 6px 0;
}
.sidebar-group-items a {
    border-radius: 0 6px 6px 0;
    margin-right: 8px;
    transition: all var(--transition-fast);
}
.sidebar-group-items a:hover {
    background: color-mix(in srgb, var(--primary) 6%, transparent);
}
.sidebar-group-items a.active {
    border-left: 4px solid var(--primary);
    background: var(--primary-light);
    font-weight: 600;
    color: var(--primary);
    border-radius: 0 6px 6px 0;
}
.sidebar-group-toggle {
    border-radius: 0 6px 6px 0;
    margin-right: 8px;
}
.sidebar-group-toggle::after {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg, var(--border) 0%, transparent 100%);
    position: absolute;
    bottom: 0;
    left: 12px;
    right: 12px;
}

/* ── 4. Tabelas ── */
.data-table thead th {
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: var(--font-xs);
    font-weight: 600;
    padding: 10px 14px;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
}
.data-table thead th:hover {
    color: var(--primary);
}
.data-table tbody td {
    padding: 10px 14px;
}
.data-table tbody tr:nth-child(even) {
    background: rgba(0,0,0,0.015);
}
[data-theme="dark"] .data-table tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.015);
}
.data-table tbody tr {
    border-left: 3px solid transparent;
    transition: all var(--transition-fast);
}
.data-table tbody tr:hover {
    border-left-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 5%, transparent);
}
.pagination button {
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
    font-weight: 500;
}
.pagination button.active {
    box-shadow: 0 0 0 3px var(--primary-glow);
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.pagination button:hover:not(:disabled):not(.active) {
    background: var(--primary-light);
    color: var(--primary);
    transform: scale(1.05);
}

/* ── 5. Botões ── */
.btn {
    padding: 7px 14px;
    border-radius: var(--radius);
    transition: all var(--transition-fast);
    font-weight: 500;
}
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-xs);
}
.btn-primary, .btn.primary {
    box-shadow: 0 2px 8px rgba(37,99,235,0.25);
}
.btn-primary:hover, .btn.primary:hover {
    box-shadow: 0 4px 14px rgba(37,99,235,0.35);
}

/* ── 6. Modais ── */
.modal-overlay {
    background: rgba(0,0,0,0.45);
}
.modal-content {
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 48px -12px rgba(0,0,0,0.18), 0 8px 16px -8px rgba(0,0,0,0.1);
    animation: modalEnter 0.25s cubic-bezier(0.4,0,0.2,1);
    border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
@keyframes modalEnter {
    from {
        opacity: 0;
        transform: scale(0.97) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
.modal-header {
    padding: 14px 20px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.modal-header .close-btn,
.modal-header .modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    transition: all var(--transition-fast);
}
.modal-header .close-btn:hover,
.modal-header .modal-close:hover {
    background: rgba(220,38,38,0.1);
    color: #dc2626;
}

/* ── 7. Top Navigation ── */
.topnav {
    height: 44px;
    background: var(--bg-glass);
    border-bottom-color: color-mix(in srgb, var(--border) 50%, transparent);
}
.topnav-search .global-search-input {
    border-radius: var(--radius-full);
    padding: 7px 12px 7px 32px;
    transition: all var(--transition-normal);
}
.topnav-search .global-search-input:focus {
    box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
    border-color: var(--primary);
}
.topnav-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    transition: all var(--transition-fast);
}
.topnav-icon-btn:hover {
    background: var(--primary-light);
    color: var(--primary);
}

/* Cascata — ajuste posições para nova altura topnav (44px) */
.shortcut-bar {
    top: 44px;
}
.sidebar {
    top: 72px;
}
.main-content {
    padding-top: 82px;
}

/* ── 8. Polish Geral ── */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="password"],
input[type="email"],
select,
textarea {
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.10);
    outline: none;
}
.badge {
    letter-spacing: 0.02em;
}
.empty-state {
    padding: 40px;
}
.empty-state .icon {
    font-size: 52px;
}
::selection {
    background: rgba(37,99,235,0.15);
    color: inherit;
}
.login-box {
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 48px -12px rgba(0,0,0,0.18), 0 8px 16px -8px rgba(0,0,0,0.1);
}
.autocomplete-list {
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px -8px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.05);
}
.config-panel {
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 40px -8px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.05);
    border-color: color-mix(in srgb, var(--border) 50%, transparent);
}

/* Scrollbar refinement */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-muted) 30%, transparent);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--text-muted) 50%, transparent);
}

/* ── 9. Responsive overrides for new heights ──
   Valores alinhados com o bloco ETAPA 2 (final do arquivo), que é quem vence a cascata:
   topnav 52 no mobile / 48 no ≤480; shortcut-bar (36px alta no touch) SEMPRE colada no topnav;
   main-content começa abaixo de topnav+shortcut (+4 de respiro). */
@media (max-width: 767px) {
    .topnav { height: 52px; }
    .shortcut-bar { top: 52px; }
    .sidebar { top: 52px; }
    .main-content { padding-top: 92px; }
    .modal-content { border-radius: 8px; }
}
@media (max-width: 480px) {
    .topnav { height: 48px; }
    .shortcut-bar { top: 48px; }
    .sidebar { top: 48px; }
    .main-content { padding-top: 88px; }
    .modal-content { border-radius: 0; }
    .kpi-card { padding: 8px; border-radius: var(--radius); }
}
@media (max-height: 500px) and (orientation: landscape) {
    .topnav { height: 32px; }
    .sidebar { top: 32px; }
    .main-content { padding-top: 36px; }
}

/* ── 10. Todas as Janelas WM — Máximo Compacto ── */

.wm-body {
    overflow-x: auto !important;
}

/* ── Header ── */
.wm-body .modal-header {
    padding: 6px 12px !important;
    gap: 6px;
    flex-wrap: wrap;
}
.wm-body .modal-header > div {
    gap: 5px !important;
    flex-wrap: wrap !important;
}
.wm-body .modal-header h2 {
    font-size: 15px !important;
    line-height: 1.3;
}
.wm-body .modal-header .btn,
.wm-body .modal-header .btn-sm {
    padding: 4px 10px !important;
    font-size: 12px !important;
    white-space: nowrap;
    min-height: auto !important;
    line-height: 1.4;
}

/* ── Modal body ── */
.wm-body .modal-body {
    padding: 10px 14px !important;
    font-size: 14px;
    line-height: 1.4;
}

/* ── Detail grid DANFE — grid compacto ── */
.wm-body .detail-grid-danfe {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    flex-wrap: unset !important;
    gap: 0 !important;
    margin-bottom: 8px !important;
    border: 1px solid var(--box-border);
    border-radius: 4px;
    overflow: visible;
}
.wm-body .detail-grid-danfe .detail-item {
    padding: 6px 10px !important;
    min-width: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 1px solid color-mix(in srgb, var(--box-border) 50%, transparent) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--box-border) 50%, transparent) !important;
}
.wm-body .detail-grid-danfe .detail-item label {
    font-size: 10px !important;
    margin-bottom: 1px !important;
    line-height: 1.3;
    display: block;
}
.wm-body .detail-grid-danfe .detail-item span {
    font-size: 14px !important;
    line-height: 1.3;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Documentos/Chave NFe span full row */
.wm-body .detail-grid-danfe .detail-item[style*="grid-column"] {
    grid-column: 1 / -1 !important;
}

/* ── Detail grid padrão ── */
.wm-body .detail-grid {
    gap: 0px 6px !important;
    margin-bottom: 6px !important;
}
.wm-body .detail-grid .detail-item label {
    font-size: 10px !important;
}
.wm-body .detail-grid .detail-item span {
    font-size: 14px !important;
}

/* ── Tabelas — redimensionável ── */
.wm-body .data-table,
.wm-body .modal-body table {
    font-size: 13px;
    width: 100% !important;
    min-width: 0 !important;
}
.wm-body .data-table thead th,
.wm-body .modal-body table thead th {
    padding: 6px 8px !important;
    font-size: 12px !important;
    white-space: nowrap;
}
.wm-body .data-table tbody td,
.wm-body .modal-body table tbody td {
    padding: 5px 8px !important;
    font-size: 13px !important;
    white-space: nowrap;
}
.wm-body .data-table tbody td:nth-child(2),
.wm-body .modal-body table tbody td:nth-child(2) {
    white-space: normal;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Section titles ── */
.wm-body .modal-section-title,
.wm-body h3 {
    font-size: 14px !important;
    margin: 8px 0 4px !important;
    font-weight: 700;
}

/* ── Tabs ── */
.wm-body .tabs-mini .tab-btn {
    padding: 4px 10px !important;
    font-size: 12px !important;
}

/* ── Forms ── */
.wm-body .form-group {
    margin-bottom: 6px !important;
}
.wm-body .form-group label {
    font-size: 12px !important;
    margin-bottom: 2px !important;
}
.wm-body .form-group input,
.wm-body .form-group select,
.wm-body .form-group textarea {
    padding: 4px 8px !important;
    font-size: 13px !important;
}

/* ── Badges ── */
.wm-body .badge {
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.3;
}

/* ── Blocos inline (cliente, obs, etc.) ── */
.wm-body .modal-body > div {
    font-size: 13px;
    margin-top: 4px;
    margin-bottom: 4px;
}
.wm-body .modal-body > div[style*="padding"] {
    padding: 6px 10px !important;
}
.wm-body .modal-body > div[style*="margin:14px"],
.wm-body .modal-body > div[style*="margin:12px"],
.wm-body .modal-body > div[style*="margin:8px"] {
    margin: 6px 0 !important;
}

/* ── Espaçamento ── */
.wm-body .modal-body > div + div { margin-top: 4px; }
.wm-body .modal-body > div + h3 { margin-top: 6px; }

/* ── Override ALL inline font-sizes inside wm-body ── */
.wm-body .modal-body span[style*="font-size"],
.wm-body .modal-body div[style*="font-size"],
.wm-body .modal-body small[style*="font-size"],
.wm-body .modal-body label[style*="font-size"],
.wm-body .modal-body p[style*="font-size"],
.wm-body .modal-body td[style*="font-size"],
.wm-body .modal-body button[style*="font-size"] {
    font-size: 13px !important;
}
.wm-body .modal-body strong[style*="font-size"],
.wm-body .modal-body h3[style*="font-size"],
.wm-body .modal-body h4[style*="font-size"] {
    font-size: 14px !important;
}
/* Small elements inside wm-body */
.wm-body .modal-body small {
    font-size: 12px !important;
}
/* Code/monospace labels */
.wm-body .code {
    font-size: 12px !important;
}

/* ── Contatos chips ── */
.wm-body .modal-body span[style*="background:var(--bg-tertiary)"] {
    padding: 2px 6px !important;
    font-size: 12px !important;
}

/* ── IA edit panel ── */
.wm-body .ia-edit-panel,
.wm-body [id*="iaEdit"] {
    padding: 6px 10px !important;
    font-size: 13px;
}
.wm-body .ia-edit-panel input,
.wm-body .ia-edit-panel textarea {
    font-size: 13px !important;
    padding: 6px 10px !important;
}

/* ── Gap entre flex children com gap inline ── */
.wm-body .modal-body div[style*="gap:18px"] {
    gap: 14px !important;
}
.wm-body .modal-body div[style*="gap:16px"] {
    gap: 12px !important;
}
.wm-body .modal-body div[style*="gap:12px"] {
    gap: 10px !important;
}
.wm-body .modal-body div[style*="gap:8px"] {
    gap: 6px !important;
}

/* ── Column resize handles ── */
.col-resize-handle {
    position: absolute;
    top: 0;
    right: -2px;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    z-index: 1;
    background: transparent;
}
.col-resize-handle:hover,
.col-resize-handle:active {
    background: var(--primary);
    opacity: 0.4;
}
.wm-body .data-table thead th {
    overflow: hidden !important;
    text-overflow: ellipsis;
}
.wm-body .data-table tbody td {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   ORCAMENTO EDITOR — COMPACT LAYOUT (outlined fields)
   ============================================================ */

/* Outlined field wrapper (Material Design style) */
.orc-field {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0;
    min-width: 0;
}
.orc-field:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}
.orc-field > label {
    position: absolute;
    top: -8px;
    left: 10px;
    background: var(--bg);
    padding: 0 4px;
    font-size: 11px;
    color: var(--text-muted);
    pointer-events: none;
    line-height: 1;
    z-index: 1;
    white-space: nowrap;
}
.orc-field:focus-within > label {
    color: var(--primary);
}
.orc-field input,
.orc-field select,
.orc-field textarea {
    width: 100%;
    border: none;
    background: transparent;
    padding: 10px 10px 8px;
    font-size: 13px;
    color: var(--text);
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
}
.orc-field select {
    cursor: pointer;
    -webkit-appearance: auto;
    appearance: auto;
}
.orc-field textarea {
    resize: vertical;
    min-height: 38px;
}
.orc-field input[readonly] {
    color: var(--text-muted);
    cursor: default;
}

/* Compound field (input + buttons inside) */
.orc-field-compound {
    display: flex;
    align-items: center;
    gap: 0;
}
.orc-field-compound input {
    flex: 1;
    min-width: 0;
}
.orc-field-compound .btn {
    border-radius: 0;
    border-left: 1px solid var(--border);
    padding: 8px 10px;
    font-size: 12px;
    white-space: nowrap;
    height: 100%;
    flex-shrink: 0;
}
.orc-field-compound .btn:last-child {
    border-radius: 0 5px 5px 0;
}

/* Grid layouts */
.orc-grid {
    display: grid;
    gap: 14px 10px;
    margin-bottom: 12px;
}
.orc-grid-cli {
    grid-template-columns: 2fr 100px 1fr;
}
.orc-grid-row2 {
    grid-template-columns: 1fr 1fr 100px 90px 90px 90px;
}
.orc-grid-items {
    grid-template-columns: 2fr 80px 80px auto auto;
    align-items: end;
}
.orc-grid-ia {
    grid-template-columns: 1fr auto;
    align-items: end;
}

/* Section title */
.orc-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin: 0 0 10px;
    padding: 0;
}

/* Divider */
.orc-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 14px 0;
}

/* Autocomplete inside outlined field */
.orc-field .autocomplete-list {
    position: absolute;
    top: 100%;
    left: -1px;
    right: -1px;
    z-index: 1000;
}

/* Footer buttons */
.orc-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 14px;
    flex-wrap: wrap;
}

/* Items list scroll constraint */
#orcItensList {
    max-height: 40vh;
    overflow-y: auto;
}

/* ── Responsive: Orcamento ── */

/* Tablet (≤ 1024px) — grids 3-col, descriptions wrap */
@media (max-width: 1024px) {
    .orc-grid-cli {
        grid-template-columns: 1fr 100px;
    }
    .orc-grid-cli .orc-field:first-child {
        grid-column: 1 / -1;
    }
    .orc-grid-row2 {
        grid-template-columns: 1fr 1fr 100px;
    }
    .orc-grid-items {
        grid-template-columns: 2fr 80px 80px auto auto;
    }
    .orc-grid-items .orc-field:first-child {
        grid-column: 1 / -1;
    }
    .orc-item-row .item-desc {
        white-space: normal;
    }
    .orc-total {
        flex-wrap: wrap;
    }
}

/* Mobile (≤ 768px) — card-style items, 2-col grids */
@media (max-width: 768px) {
    .orc-grid {
        gap: 10px 8px;
    }
    .orc-grid-cli {
        grid-template-columns: 1fr;
    }
    .orc-grid-row2 {
        grid-template-columns: 1fr 1fr;
    }
    .orc-grid-items {
        grid-template-columns: 1fr 1fr 1fr auto;
    }
    .orc-grid-items .orc-field:first-child {
        grid-column: 1 / -1;
    }
    .orc-grid-ia {
        grid-template-columns: 1fr;
    }

    /* Hide header on mobile — items show as cards */
    .orc-item-header-row {
        display: none;
    }

    /* Item rows: card-style wrap */
    .orc-item-row {
        flex-wrap: wrap;
        position: relative;
        padding: 10px 0;
        padding-right: 32px;
    }
    .orc-item-row .item-desc {
        flex-basis: 100%;
        white-space: normal;
        margin-bottom: 4px;
        font-weight: 500;
    }
    .orc-item-row input {
        flex: 1;
        min-width: 60px;
    }
    .orc-item-row .btn-danger {
        position: absolute;
        top: 10px;
        right: 0;
    }

    /* Inputs: touch-friendly padding */
    .orc-field input,
    .orc-field select,
    .orc-field textarea {
        padding: 10px 12px;
    }

    /* Cliente info: single column */
    #orcClienteInfo {
        grid-template-columns: 1fr !important;
    }

    /* Totals: wrap and center */
    .orc-total {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    /* Items list scroll */
    #orcItensList {
        max-height: 35vh;
    }
}
/* Small mobile (≤ 480px) — single column, stacked footer */
@media (max-width: 480px) {
    .orc-grid {
        gap: 8px 6px;
    }
    .orc-grid-row2 {
        grid-template-columns: 1fr;
    }
    .orc-grid-items {
        grid-template-columns: 1fr 1fr;
    }
    .orc-grid-items .orc-field:first-child {
        grid-column: 1 / -1;
    }
    .orc-footer {
        flex-direction: column;
    }
    .orc-footer .btn {
        width: 100%;
    }
    .orc-item-row input {
        font-size: 14px;
        min-width: 50px;
    }
    .orc-total {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    .orc-section-title {
        font-size: 10px;
        letter-spacing: 0.5px;
    }
    .orc-field-compound .btn {
        padding: 6px 8px;
    }
}

/* Landscape mobile — compact vertical */
@media (max-height: 500px) and (orientation: landscape) {
    .orc-grid {
        gap: 6px 8px;
        margin-bottom: 6px;
    }
    .orc-field input,
    .orc-field select,
    .orc-field textarea {
        padding: 4px 8px;
        font-size: 12px;
    }
    .orc-section-title {
        margin: 0 0 4px;
    }
    .orc-item-row {
        padding: 4px 0;
        gap: 6px;
    }
    .orc-footer {
        margin-top: 8px;
    }
    .orc-total {
        padding: 8px 0;
        gap: 12px;
    }
}

/* ── Vendedor Selection Modal ── */
.vendedor-modal-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #e2e8f0;
    cursor: pointer;
    transition: background 0.15s;
}
.vendedor-modal-item:hover {
    background: #ebf4ff;
}
.vendedor-modal-item.selected {
    background: #bee3f8;
    border-left: 3px solid #2b6cb0;
}

/* ── CRM PAGE ── */
.crm-tabs {
    display:flex; gap:4px; padding:4px; margin-bottom:20px;
    background:var(--bg-secondary,#f1f5f9); border-radius:12px; overflow-x:auto;
}
.crm-tab-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:10px 18px; border:none; border-radius:10px;
    background:transparent; color:var(--text-muted,#64748b);
    font-size:13px; font-weight:500; cursor:pointer;
    transition:all 0.2s ease; white-space:nowrap;
}
.crm-tab-btn:hover { background:var(--card-bg,#fff); color:var(--text,#1e293b); box-shadow:0 1px 3px rgba(0,0,0,.06); }
.crm-tab-btn.active {
    background:var(--card-bg,#fff); color:var(--primary,#3b82f6); font-weight:600;
    box-shadow:0 1px 4px rgba(59,130,246,.15), 0 1px 2px rgba(0,0,0,.06);
}
.crm-tab-icon { font-size:15px; line-height:1; }
@media(max-width:640px) {
    .crm-tab-btn { padding:8px 12px; font-size:12px; }
    .crm-tab-icon { display:none; }
}
.crm-contact-item { padding:10px 12px; border-bottom:1px solid var(--border,#eee); cursor:pointer; transition:background 0.15s; }
.crm-contact-item:hover { background:var(--bg-hover,#f1f5f9); }
.crm-contact-item.active { background:var(--primary-light,#eff6ff); border-left:3px solid var(--primary,#3b82f6); }
.crm-contact-name { font-weight:600; font-size:14px; }
.crm-contact-sub { font-size:12px; color:var(--text-muted,#64748b); margin-top:2px; }
.crm-contact-badges { display:flex; gap:4px; margin-top:4px; flex-wrap:wrap; }
.crm-badge { padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; }
.crm-badge-blue { background:#dbeafe; color:#1d4ed8; }
.crm-badge-green { background:#dcfce7; color:#15803d; }
.crm-badge-red { background:#fee2e2; color:#dc2626; }
.crm-badge-yellow { background:#fef3c7; color:#b45309; }
.crm-badge-purple { background:#f3e8ff; color:#7c3aed; }
.crm-timeline-item { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--border,#eee); }
.crm-timeline-icon { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; }
.crm-timeline-info { flex:1; min-width:0; }
.crm-timeline-title { font-size:13px; font-weight:600; }
.crm-timeline-sub { font-size:12px; color:var(--text-muted,#64748b); margin-top:2px; }
.crm-timeline-date { font-size:11px; color:var(--text-muted,#94a3b8); flex-shrink:0; }
.crm-prio-urgente { border-left:3px solid #ef4444; }
.crm-prio-alta { border-left:3px solid #f59e0b; }
.crm-prio-normal { border-left:3px solid #3b82f6; }
.crm-prio-baixa { border-left:3px solid #94a3b8; }
.crm-insight-card { border:1px solid var(--border,#e2e8f0); border-radius:8px; padding:16px; margin-bottom:12px; }
.crm-insight-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.crm-alert { padding:8px 12px; border-radius:6px; margin-bottom:8px; font-size:13px; }
.crm-alert-danger { background:#fee2e2; color:#991b1b; }
.crm-alert-warning { background:#fef3c7; color:#92400e; }
.crm-alert-info { background:#dbeafe; color:#1e40af; }
@media (max-width:768px) {
    #crmContatoLayout { grid-template-columns:1fr !important; }
}

/* ── MOBILE IMPROVEMENTS 2026 ── */

/* Tabs responsivas - scroll horizontal em telas pequenas */
@media (max-width: 768px) {
    .dre-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        white-space: nowrap;
        padding-bottom: 2px;
    }
    .dre-tabs::-webkit-scrollbar { display: none; }
    .dre-tab { font-size: 11px !important; padding: 6px 10px !important; flex-shrink: 0; }

    /* Tabelas scrollaveis */
    .data-table { font-size: 11px; }
    .data-card { padding: 8px !important; }

    /* KPIs em 2 colunas no mobile */
    .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .kpi-card { padding: 10px !important; }
    .kpi-value { font-size: 16px !important; }
    .kpi-label { font-size: 10px !important; }

    /* Page headers empilhados */
    .page-header { flex-direction: column; align-items: flex-start !important; gap: 8px; }
    .page-header .actions { width: 100%; display: flex; flex-wrap: wrap; gap: 4px; }
    .page-header .actions .btn { font-size: 11px; padding: 5px 8px; }

    /* Grids 2 colunas viram 1 */
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Filtros empilhados */
    .search-bar { flex-direction: column; }
    .search-bar input, .search-bar select { width: 100% !important; min-width: unset !important; }

    /* Topnav compacta */
    .topnav-right { gap: 4px !important; }
    #globalSearchInput { width: 120px !important; }
    .zoom-controls { display: none !important; }
}

@media (max-width: 480px) {
    /* Botoes de acao em full width */
    .btn { font-size: 11px !important; padding: 6px 10px !important; }

    /* KPIs em 1 coluna */
    .kpi-grid { grid-template-columns: 1fr !important; }

    /* Esconder colunas menos importantes em tabelas */
    .data-table th:nth-child(n+6),
    .data-table td:nth-child(n+6) { display: none; }

    /* Notificacoes dropdown full width */
    #notifDropdown { width: calc(100vw - 16px) !important; right: 8px !important; left: 8px !important; }
}

/* ============================================================
   OTIMIZAÇÃO UI 2026 - Classes Globais
   ============================================================ */

/* ── Form Grid: layouts 2/3/4 colunas para modais ── */
.form-grid { display: grid; gap: 12px 16px; margin-bottom: 16px; }
.form-grid-2 { grid-template-columns: 1fr 1fr; }
.form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-3 { grid-column: span 3; }
.form-grid .span-full { grid-column: 1 / -1; }

@media (max-width: 768px) {
    .form-grid-2, .form-grid-3, .form-grid-4 { grid-template-columns: 1fr; }
    .form-grid .span-2, .form-grid .span-3 { grid-column: span 1; }
}

/* ── Inputs compactos ── */
.fi { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-lg); font-size: 13.5px; background: var(--bg-card); color: var(--text); outline: none; transition: border-color var(--transition-fast); box-sizing: border-box; }
.fi:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-glow); }
.fi::placeholder { color: var(--text-muted); }
.fi-sm { padding: 5px 8px; font-size: 12.5px; }
.fi-lg { padding: 10px 14px; font-size: 15px; }
textarea.fi { resize: vertical; min-height: 60px; }
select.fi { cursor: pointer; }

/* ── Labels compactos ── */
.fl { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.3px; }

/* ── Grupo de campo compacto (label + input) ── */
.fg { margin-bottom: 0; }
.fg > .fl { margin-bottom: 3px; }
.fg > .fi { width: 100%; }

/* ── Botões de ação de tabela (ícones) ── */
.btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); }
.btn-icon:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.btn-icon svg { width: 15px; height: 15px; }
.btn-icon.danger:hover { border-color: var(--danger); color: var(--danger); background: #fef2f2; }
.btn-icon.success:hover { border-color: var(--success); color: var(--success); background: #f0fdf4; }
.btn-icon.warning:hover { border-color: var(--warning); color: var(--warning); background: #fffbeb; }
[data-theme="dark"] .btn-icon.danger:hover { background: rgba(220,38,38,0.15); }
[data-theme="dark"] .btn-icon.success:hover { background: rgba(22,163,74,0.15); }
[data-theme="dark"] .btn-icon.warning:hover { background: rgba(217,119,6,0.15); }

/* ── Grupo de ações na tabela ── */
.td-actions { display: flex; gap: 4px; justify-content: center; align-items: center; }

/* ── Botão compacto ── */
.btn-xs { padding: 4px 10px; font-size: 12px; border-radius: var(--radius); }

/* ── Dropdown de ações ── */
.action-dropdown { position: relative; display: inline-block; }
.action-dropdown-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; font-size: 16px; }
.action-dropdown-btn:hover { border-color: var(--primary); color: var(--primary); }
.action-dropdown-menu { display: none; position: absolute; right: 0; top: 100%; min-width: 140px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); z-index: 100; padding: 4px 0; }
.action-dropdown.open .action-dropdown-menu { display: block; }
.action-dropdown-menu a, .action-dropdown-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 12px; border: none; background: none; color: var(--text); font-size: 13px; cursor: pointer; text-align: left; text-decoration: none; }
.action-dropdown-menu a:hover, .action-dropdown-menu button:hover { background: var(--bg-secondary); color: var(--primary); }
.action-dropdown-menu .text-danger:hover { color: var(--danger); }

/* ── Seção de modal com título ── */
.modal-section { background: var(--bg-secondary); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 14px; }
.modal-section-title { font-size: 13px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 10px; }

/* ── Tabela compacta ── */
.table-compact th, .table-compact td { padding: 6px 10px; font-size: 13px; }
.table-compact th { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-secondary); }

/* ── Badge/Tag inline ── */
.badge-sm { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge-success { background: #dcfce7; color: #15803d; }
.badge-warning { background: #fef3c7; color: #b45309; }
.badge-danger { background: #fee2e2; color: #dc2626; }
.badge-info { background: var(--primary-light); color: var(--primary); }
[data-theme="dark"] .badge-success { background: rgba(22,163,74,0.2); color: #4ade80; }
[data-theme="dark"] .badge-warning { background: rgba(217,119,6,0.2); color: #fbbf24; }
[data-theme="dark"] .badge-danger { background: rgba(220,38,38,0.2); color: #f87171; }
[data-theme="dark"] .badge-info { background: rgba(59,130,246,0.2); color: #60a5fa; }

/* ============================================================
   WIZARD / STEPPER — Componente reutilizável
   ============================================================ */

/* Overlay fullscreen */
.wizard-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: var(--bg); display: flex; flex-direction: column;
    animation: wizFadeIn .25s ease;
}
@keyframes wizFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Header */
.wizard-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px; border-bottom: 1px solid var(--border);
    background: var(--bg-secondary); flex-shrink: 0;
}
.wizard-header h2 { margin: 0; font-size: 18px; font-weight: 700; }
.wizard-close {
    background: none; border: none; font-size: 24px; cursor: pointer;
    color: var(--text-muted); padding: 8px 12px; border-radius: 6px;
    transition: background .15s; touch-action: manipulation;
    -webkit-tap-highlight-color: transparent; min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
}
.wizard-close:hover { background: var(--bg-muted); color: var(--text); }

/* Progress bar */
.wizard-progress {
    display: flex; align-items: center; justify-content: center;
    padding: 16px 20px; gap: 0; flex-shrink: 0;
    background: var(--bg); overflow-x: auto;
}
.wizard-step-dot {
    display: flex; flex-direction: column; align-items: center;
    gap: 4px; cursor: pointer; position: relative; min-width: 60px;
    transition: opacity .2s;
}
.wizard-step-dot.disabled { pointer-events: none; opacity: .5; }
.wizard-step-num {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    background: var(--bg-muted); color: var(--text-muted);
    border: 2px solid var(--border);
    transition: all .25s;
}
.wizard-step-dot.active .wizard-step-num {
    background: var(--primary); color: #fff; border-color: var(--primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent);
}
.wizard-step-dot.done .wizard-step-num {
    background: #16a34a; color: #fff; border-color: #16a34a;
}
.wizard-step-label {
    font-size: 11px; color: var(--text-muted); white-space: nowrap;
    font-weight: 500; transition: color .2s;
}
.wizard-step-dot.active .wizard-step-label { color: var(--primary); font-weight: 600; }
.wizard-step-dot.done .wizard-step-label { color: #16a34a; }

.wizard-step-line {
    flex: 1; height: 2px; background: var(--border);
    min-width: 20px; max-width: 60px; margin: 0 2px;
    margin-bottom: 18px; /* align with dot center */
    transition: background .25s;
}
.wizard-step-line.done { background: #16a34a; }

/* Body */
.wizard-body {
    flex: 1; overflow-y: auto; padding: 24px 20px;
    display: flex; justify-content: center;
}
.wizard-body-inner {
    width: 100%; max-width: 700px;
    animation: wizSlideIn .2s ease;
}
@keyframes wizSlideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

.wizard-step-title { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.wizard-step-subtitle { font-size: 14px; color: var(--text-muted); margin: 0 0 20px; }

/* Footer */
.wizard-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px; border-top: 1px solid var(--border);
    background: var(--bg-secondary); flex-shrink: 0; gap: 12px;
}
.wizard-footer .btn { min-height: 40px; padding: 8px 24px; font-size: 14px; font-weight: 600; }

/* ── Wizard cards (vendedor, tipo, pagamento) ── */
.wiz-cards { display: grid; gap: 10px; }
.wiz-cards-2 { grid-template-columns: 1fr 1fr; }
.wiz-cards-3 { grid-template-columns: 1fr 1fr 1fr; }

.wiz-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 20px 16px; border-radius: 10px; cursor: pointer;
    border: 2px solid var(--border); background: var(--bg-secondary);
    transition: all .15s; text-align: center; gap: 8px;
    min-height: 80px;
}
.wiz-card:hover, .wiz-card:active { border-color: var(--primary); background: var(--primary-light); }
.wiz-card.selected {
    border-color: var(--primary); background: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}
.wiz-card { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.wiz-card-icon { font-size: 28px; }
.wiz-card-title { font-size: 14px; font-weight: 600; }
.wiz-card-desc { font-size: 12px; color: var(--text-muted); }

/* ── Wizard search ── */
.wiz-search {
    width: 100%; padding: 10px 14px; font-size: 15px;
    border: 2px solid var(--border); border-radius: 8px;
    background: var(--bg); color: var(--text);
    transition: border-color .15s;
}
.wiz-search:focus { outline: none; border-color: var(--primary); }

.wiz-search-results {
    margin-top: 12px; display: flex; flex-direction: column; gap: 6px;
    max-height: 400px; overflow-y: auto;
}

.wiz-search-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--border); background: var(--bg-secondary);
    transition: all .15s;
}
.wiz-search-item:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, var(--bg-secondary)); }
.wiz-search-item.selected { border-color: var(--primary); background: var(--primary-light); }
.wiz-search-item-info { flex: 1; min-width: 0; }
.wiz-search-item-name { font-weight: 600; font-size: 14px; }
.wiz-search-item-meta { font-size: 12px; color: var(--text-muted); }

/* ── Wizard product cart ── */
.wiz-cart { margin-top: 16px; }
.wiz-cart-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px; font-weight: 600; font-size: 14px;
}
.wiz-cart-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 8px; margin-bottom: 6px;
    background: var(--bg-secondary); border: 1px solid var(--border);
    font-size: 13px;
}
.wiz-cart-item-info { flex: 1; min-width: 0; }
.wiz-cart-item-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiz-cart-item-price { color: var(--text-muted); font-size: 12px; }
.wiz-cart-item input[type="number"] {
    width: 60px; padding: 4px 6px; border: 1px solid var(--border);
    border-radius: 4px; text-align: center; font-size: 13px;
    background: var(--bg); color: var(--text);
}
.wiz-cart-item .wiz-cart-remove {
    background: none; border: none; color: var(--danger, #ef4444);
    cursor: pointer; font-size: 18px; padding: 2px 6px; border-radius: 4px;
}
.wiz-cart-item .wiz-cart-remove:hover { background: rgba(239,68,68,.1); }

.wiz-total-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; border-radius: 8px; margin-top: 12px;
    background: var(--primary-light); font-weight: 700; font-size: 16px;
}

/* ── Wizard fields ── */
.wiz-field { margin-bottom: 14px; }
.wiz-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: var(--text-secondary); }
.wiz-field input, .wiz-field select, .wiz-field textarea {
    width: 100%; padding: 10px 12px; font-size: 14px;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg); color: var(--text);
}
.wiz-field textarea { resize: vertical; min-height: 80px; }
.wiz-field-row { display: flex; gap: 12px; }
.wiz-field-row .wiz-field { flex: 1; }

/* ── Wizard review (step final) ── */
.wiz-review-section { margin-bottom: 16px; }
.wiz-review-section h4 { font-size: 13px; text-transform: uppercase; color: var(--text-muted); margin: 0 0 6px; letter-spacing: .5px; }
.wiz-review-row {
    display: flex; justify-content: space-between; padding: 6px 0;
    border-bottom: 1px solid var(--border); font-size: 14px;
}
.wiz-review-row:last-child { border-bottom: none; }
.wiz-review-label { color: var(--text-secondary); }
.wiz-review-value { font-weight: 600; }

.wiz-review-items-table {
    width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px;
}
.wiz-review-items-table th {
    text-align: left; padding: 6px 8px; background: var(--bg-muted);
    font-weight: 600; font-size: 12px; color: var(--text-muted);
}
.wiz-review-items-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); }

.wiz-toggle-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; font-size: 14px;
}
.wiz-toggle-row input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }

.wiz-action-btns { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.wiz-action-btns .btn { flex: 1; min-width: 140px; justify-content: center; display: flex; align-items: center; gap: 6px; }

/* ── Wizard skip button ── */
.wiz-skip { color: var(--text-muted); font-size: 13px; cursor: pointer; background: none; border: none; text-decoration: underline; }
.wiz-skip:hover { color: var(--text); }


/* ============================================================
   ETAPA 2 - RESPONSIVIDADE MOBILE/TABLET
   ============================================================ */

/* ── Tablet (até 1024px) ── */
@media (max-width: 1024px) {
    :root { --sidebar-w: 0px; }

    .topnav { height: 48px; padding: 0 8px; }
    .topnav-brand .brand-text { display: none; }
    .topnav-menu { gap: 0; }
    .topnav-link { padding: 6px 8px; font-size: 11px; }
    .topnav-link .nav-label { display: none; }
    .topnav-link .nav-icon { font-size: 18px; }

    .sidebar { top: 48px; width: 280px; }
    .sidebar-overlay { top: 48px; }
    /* shortcut-bar (36px no touch) precisa acompanhar o topnav de 48px — senão cobre o
       comeco do conteudo (o bug dos ~20px escondidos no iPad) */
    .shortcut-bar { top: 48px; }
    .main-content { margin-left: 0; padding: 88px 12px 12px 12px; }

    .data-card-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .data-card-header .search-bar { width: 100%; }

    .wm-window {
        left: 0 !important; top: 48px !important;
        width: 100vw !important; height: calc(100vh - 48px) !important;
        border-radius: 0 !important;
    }
    .wm-btn-minimize, .wm-btn-maximize { display: none; }
    .wm-window .wm-resize { display: none; }
    .wm-taskbar { display: none !important; }
}

/* ── Bulk action bar ── */
.bulk-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--card-bg, #1e293b);
    border: 1px solid var(--accent, #3b82f6);
    border-radius: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.bulk-bar span { font-weight: 600; font-size: 13px; color: var(--accent, #3b82f6); }
.bulk-bar select { padding: 4px 8px; border-radius: 4px; font-size: 13px; background: var(--bg, #0f172a); color: var(--text, #e2e8f0); border: 1px solid var(--border, #334155); }

/* ── Mobile (até 768px) ── */
@media (max-width: 768px) {
    .topnav { height: 52px; }
    .topnav-menu { display: none; }
    .topnav-hamburger { display: flex !important; }
    .topnav-right { gap: 4px; }
    .topnav-right .btn-sm { padding: 4px 8px; font-size: 11px; }

    .sidebar { top: 52px; width: 85vw; max-width: 320px; box-shadow: var(--shadow-xl); }
    .sidebar-overlay { top: 52px; }
    .shortcut-bar { top: 52px; }
    .main-content { padding: 92px 8px 8px 8px; }

    /* Tables: horizontal scroll with shadow hint */
    .data-card { border-radius: var(--radius); }
    .data-table { font-size: 12px; }
    .data-table thead th { padding: 8px 10px; font-size: 10px; }
    .data-table tbody td { padding: 7px 10px; font-size: 12px; }

    /* KPIs: 2 columns */
    .kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 8px; }
    .kpi-card { padding: 10px 12px; }
    .kpi-card .kpi-value { font-size: 18px; }
    .kpi-card .kpi-label { font-size: 11px; }

    /* Search bar: stack vertically */
    .search-bar { flex-direction: column; align-items: stretch !important; gap: 6px !important; }
    .search-bar input, .search-bar select { width: 100% !important; }

    /* Buttons: full width on mobile */
    .page-header { flex-direction: column; gap: 8px; }
    .page-header .btn { width: 100%; justify-content: center; }

    /* Cards grid: single column */
    .detail-grid, .detail-grid-danfe {
        grid-template-columns: 1fr !important;
    }

    /* Modal: full screen */
    .modal-overlay .modal-content,
    .modal-overlay > div {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    /* Chat panel: full width */
    .chat-panel { width: 100% !important; }
    .main-content.chat-open { margin-right: 0; }

    /* Wizard: full screen */
    .wizard-overlay { border-radius: 0; }
    .wizard-body-inner { max-width: 100% !important; padding: 0 8px; }
    .wiz-field-row { flex-direction: column; }

    /* Tabs: scrollable */
    .prod-tabs, .dre-tabs, .dre-tab-bar {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap !important;
    }
    .prod-tabs::-webkit-scrollbar, .dre-tabs::-webkit-scrollbar { display: none; }
    .prod-tab, .dre-tab {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        font-size: 12px !important;
        padding: 8px 12px !important;
    }

    /* Hide non-essential columns */
    .data-table .hide-mobile { display: none !important; }

    /* Sticky action bar */
    .orc-bottom-bar, .bulk-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 100;
        border-radius: 0 !important;
    }
}

/* ── Small mobile (até 480px) ── */
@media (max-width: 480px) {
    .topnav { height: 48px; padding: 0 6px; }
    .topnav-brand .monfer-logo { width: 24px; height: 24px; font-size: 13px; }

    .sidebar { width: 100vw; max-width: 100vw; }

    .shortcut-bar { top: 48px; }
    .main-content { padding: 88px 6px 6px 6px; }

    .kpi-grid { grid-template-columns: 1fr !important; }

    .btn { padding: 8px 14px; font-size: 12px; }
    .btn-sm { padding: 6px 10px; font-size: 11px; }

    .data-table { font-size: 11px; }
    .data-table thead th { padding: 6px 8px; font-size: 9px; }
    .data-table tbody td { padding: 6px 8px; }

    .data-card { margin-bottom: 10px; }
    .data-card-header { padding: 10px 12px; }
    .data-card-header h2 { font-size: 13px; }

    .badge { padding: 2px 8px; font-size: 10px; }
}

/* ── Touch device improvements ── */
@media (pointer: coarse) {
    .btn { min-height: 40px; }
    .btn-sm { min-height: 34px; }
    .data-table tbody td { padding: 10px 12px; }
    .sidebar-nav > a, .sidebar-group-items a { padding: 10px 14px; min-height: 42px; }
    .sidebar-group-toggle { padding: 10px 14px; min-height: 42px; }
    .topnav-link { min-height: 40px; }
    input, select, textarea { min-height: 40px; font-size: 16px !important; }
}

/* ── Landscape phone ── */
@media (max-height: 500px) and (orientation: landscape) {
    .topnav { height: 36px; }
    .sidebar { top: 36px; }
    .main-content { padding-top: 40px; }
    .kpi-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; }
    .kpi-card { padding: 6px 10px; }
    .kpi-card .kpi-value { font-size: 16px; }
}

/* ── Safe area for notch devices ── */
@supports (padding: env(safe-area-inset-top)) {
    .topnav { padding-top: env(safe-area-inset-top); }
    .sidebar { padding-bottom: env(safe-area-inset-bottom); }
    .main-content { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
}

/* ── Mobile responsive ── */
@media (max-width: 768px) {
    .wizard-header { padding: 10px 14px; }
    .wizard-header h2 { font-size: 16px; }
    .wizard-progress { padding: 10px 12px; }
    .wizard-step-label { display: none; }
    .wizard-step-num { width: 28px; height: 28px; font-size: 12px; }
    .wizard-step-line { margin-bottom: 0; }
    .wizard-body { padding: 16px 14px; }
    .wizard-footer { padding: 10px 14px; }
    .wiz-cards-2, .wiz-cards-3 { grid-template-columns: 1fr; }
    .wiz-field-row { flex-direction: column; gap: 0; }
    .wiz-cart-item { flex-wrap: wrap; }
    .wiz-action-btns { flex-direction: column; }
    .wiz-action-btns .btn { min-width: unset; }
}

/* ============================================================
   ETAPA 3 - POLIMENTO DE COMPONENTES
   ============================================================ */

/* ── Loading spinner refinado ── */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    color: var(--text-muted);
    font-size: 13px;
}
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin-right: 10px;
}

/* ── Info sections (detalhe produto, etc) ── */
.info-section {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 16px;
}
.info-section-header {
    padding: 10px 16px;
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ── Toast refinado ── */
.toast-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
}

/* ── Inputs globais refinados ── */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="password"],
input[type="email"],
input[type="search"],
select,
textarea {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
    outline: none;
}
input::placeholder, textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

/* ── Detail grid DANFE ── */
.detail-grid-danfe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.detail-grid-danfe .detail-item {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
}
.detail-grid-danfe .detail-item:last-child { border-right: none; }

/* ── Tooltip customizado ── */
[data-tooltip] {
    position: relative;
}
[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 10px;
    background: var(--text);
    color: var(--bg);
    font-size: 11px;
    border-radius: var(--radius);
    white-space: nowrap;
    pointer-events: none;
    z-index: 1000;
    animation: tooltipIn 0.15s ease;
}
@keyframes tooltipIn { from { opacity: 0; transform: translateX(-50%) translateY(4px); } }

/* ── Truncate helper ── */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Number monospace ── */
.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── Divider ── */
.divider { height: 1px; background: var(--border); margin: 16px 0; }

/* ── Status dot (inline) ── */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    flex-shrink: 0;
}
.status-dot.success { background: var(--success); }
.status-dot.warning { background: var(--warning); }
.status-dot.danger { background: var(--danger); }
.status-dot.info { background: var(--info); }
.status-dot.muted { background: var(--text-muted); }

/* ── Animations ── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.fade-in { animation: fadeIn 0.2s ease; }
.slide-up { animation: slideUp 0.25s ease; }
.pulse { animation: pulse 1.5s ease-in-out infinite; }

/* ── Skeleton loading ── */
.skeleton {
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius);
}
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Keyboard Shortcuts Help Modal ── */
.kb-shortcuts-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kb-shortcuts-modal {
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    width: 480px;
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.2s ease;
}
.kb-shortcuts-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 15px;
}
.kb-shortcuts-header button {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px 6px;
    border-radius: 4px;
}
.kb-shortcuts-header button:hover { background: var(--bg-secondary); color: var(--text); }
.kb-shortcuts-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}
.kb-shortcuts-section {
    margin-bottom: 16px;
}
.kb-shortcuts-section:last-child { margin-bottom: 0; }
.kb-shortcuts-section h3 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 600;
}
.kb-shortcut-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 13px;
    color: var(--text);
}
.kb-shortcut-row kbd {
    display: inline-block;
    padding: 2px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    min-width: 36px;
    text-align: center;
}
.kb-shortcut-row span { color: var(--text-secondary); }

/* ============================================================
   .ped-itens — tabela de itens de pedido (responsiva, isolada)
   Usada nos detalhes de: pedido de cliente, orcamento COBOL,
   pedido de compra. Nao usa .data-table de proposito: as regras
   globais de mobile de .data-table truncam a descricao e escondem
   colunas. Aqui a descricao ocupa o espaco livre no desktop e vira
   o titulo de um card no celular.
   ============================================================ */
.ped-itens {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.ped-itens thead th {
    text-align: left;
    padding: 9px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
.ped-itens tbody td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.ped-itens tbody tr:hover { background: var(--primary-light); }
.ped-itens tfoot td { padding: 6px 10px; }
.ped-itens .text-right { text-align: right; }
.ped-itens .text-center { text-align: center; }
/* Colunas numericas/curtas: encolhem ao conteudo e nao quebram */
.ped-itens thead th:not(.col-desc),
.ped-itens tbody td:not(.col-desc) { width: 1%; white-space: nowrap; }
/* Coluna descricao: ocupa o espaco livre e quebra linha (legivel no desktop) */
.ped-itens .col-desc {
    width: 100%;
    min-width: 220px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
}
.ped-itens td.col-desc a { color: var(--primary); text-decoration: none; }
.ped-itens td.col-desc a:hover { text-decoration: underline; }

/* --- Celular: cada item vira um card --- */
@media (max-width: 640px) {
    .ped-itens,
    .ped-itens tbody,
    .ped-itens tbody tr,
    .ped-itens tbody td { display: block; width: 100%; }
    .ped-itens thead { display: none; }
    .ped-itens tfoot { display: none; }
    .ped-itens tbody tr {
        border: 1px solid var(--border);
        border-radius: 12px;
        margin-bottom: 12px;
        padding: 12px 14px;
        background: var(--bg-secondary);
    }
    .ped-itens tbody tr:hover { background: var(--bg-secondary); }
    .ped-itens tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 6px 0;
        border: none;
        text-align: right;
        min-width: 0 !important;
        white-space: normal;
    }
    .ped-itens tbody td::before {
        content: attr(data-label);
        text-align: left;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        flex: 0 0 auto;
    }
    /* labels vazios (ex.: coluna de acao) nao geram linha fantasma */
    .ped-itens tbody td[data-label=""]::before { display: none; }
    /* Descricao = titulo do card: largura total, sem label, destaque */
    .ped-itens tbody td.col-desc {
        display: block;
        text-align: left;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.35;
        padding: 0 0 8px;
        margin-bottom: 6px;
        border-bottom: 1px dashed var(--border);
    }
    .ped-itens tbody td.col-desc::before { display: none; }
    /* Controles (data, quantidade, barra) nao ficam minusculos no card */
    .ped-itens tbody td input {
        font-size: 15px !important;
        max-width: 62%;
    }
    .ped-itens tbody td input[type="date"] { max-width: 62%; }
}

/* ============================================================
   F3.4 — Tabelas viram CARD no celular (<=600px).
   Aditivo e opt-in: só afeta tabelas dentro de .table-wrapper-scroll
   que o JS marcou com .rcard. Desktop nunca entra nesta media query.
   ============================================================ */
@media (max-width: 600px) {
    .table-wrapper-scroll table.rcard { min-width: 0; width: 100%; }
    .table-wrapper-scroll table.rcard thead {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .table-wrapper-scroll table.rcard tbody,
    .table-wrapper-scroll table.rcard tr,
    .table-wrapper-scroll table.rcard td { display: block; width: 100%; }
    .table-wrapper-scroll table.rcard tr {
        border: 1px solid var(--border, #e2e8f0); border-radius: 10px;
        margin: 0 0 10px; padding: 4px 12px; background: var(--bg-card, #fff);
    }
    .table-wrapper-scroll table.rcard tbody td {
        display: flex; align-items: center; justify-content: space-between; gap: 14px;
        padding: 8px 0; border: none; border-bottom: 1px solid var(--border, #eef1f5);
        text-align: right; white-space: normal; max-width: none !important; overflow: visible;
    }
    .table-wrapper-scroll table.rcard tr td:last-child { border-bottom: none; }
    .table-wrapper-scroll table.rcard td::before {
        content: attr(data-label); font-weight: 600; color: var(--text-muted, #64748b);
        text-align: left; flex: 0 0 42%; white-space: normal;
    }
    .table-wrapper-scroll table.rcard td:empty { display: none; }
    /* No modo card o wrapper não precisa scroll/altura fixa */
    .table-wrapper-scroll:has(table.rcard) {
        max-height: none; overflow: visible; border: none; background: transparent;
    }
}

/* ── FIM MODERNIZAÇÃO 2026 ── */


/* Reposicao: filtros legiveis e responsivos. */
.rep-page-heading{margin-bottom:10px}
.rep-filter-panel{display:grid;grid-template-columns:minmax(150px,.55fr) minmax(280px,1.6fr) minmax(220px,1fr) auto;gap:10px;align-items:end;margin-bottom:18px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--bg-card);box-shadow:var(--shadow)}
.rep-filter-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.rep-filter-field>span{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.35px}
.rep-filter-field select,.rep-brand-wrap>button{width:100%;height:38px;box-sizing:border-box;padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font:inherit;text-align:left}
.rep-filter-field select:focus,.rep-brand-wrap>button:focus,#repMarcaBusca:focus{outline:2px solid color-mix(in srgb,var(--primary) 55%,transparent);outline-offset:1px;border-color:var(--primary)}
.rep-brand-wrap{position:relative;min-width:0}.rep-brand-wrap>button{cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rep-brand-pop{position:absolute;z-index:200;top:calc(100% + 6px);left:0;width:min(360px,calc(100vw - 48px));max-height:390px;overflow:auto;padding:8px;background:var(--bg-card);color:var(--text);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.28)}
#repMarcaBusca{position:sticky;top:0;z-index:1;width:100%;box-sizing:border-box;padding:8px 10px;margin-bottom:6px;border:1px solid var(--border);border-radius:7px;background:var(--bg);color:var(--text)}
#repMarcaOpts label{display:flex;align-items:center;gap:8px;padding:7px;border-radius:6px;cursor:pointer}.rep-brand-actions{position:sticky;bottom:0;display:flex;gap:7px;padding-top:8px;margin-top:5px;border-top:1px solid var(--border);background:var(--bg-card)}
.rep-brand-actions button{flex:1;min-height:34px;border:1px solid var(--border);border-radius:7px;background:transparent;color:var(--text);cursor:pointer}.rep-brand-actions .btn-primary{border-color:var(--primary);background:var(--primary);color:#fff}
.rep-filter-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.rep-filter-actions>span{flex-basis:100%;text-align:right;font-size:11px;color:var(--text-muted)}
#repLimparFiltros:disabled{display:none}
@media(max-width:1180px){.rep-filter-panel{grid-template-columns:minmax(140px,.7fr) minmax(240px,1.5fr) minmax(200px,1fr)}.rep-filter-actions{grid-column:1/-1}.rep-filter-actions>span{flex-basis:auto;margin-right:auto;text-align:left}}
@media(max-width:720px){.rep-filter-panel{grid-template-columns:1fr}.rep-filter-actions{grid-column:auto;justify-content:stretch}.rep-filter-actions>span{flex-basis:100%}.rep-filter-actions .btn{flex:1}.rep-brand-pop{position:fixed;left:16px;right:16px;top:18vh;width:auto;max-height:64vh}}