/* ============================================================
   ERParts — Design System CSS
   Tema: industrial refinado | Fonte: DM Sans
   ============================================================ */

/* ── Variáveis ─────────────────────────────────────────────── */
:root {
    --font-body:    'DM Sans', system-ui, sans-serif;
    --font-mono:    'DM Mono', monospace;

    /* Paleta principal */
    --red:          #e63946;
    --red-dark:     #c1121f;
    --red-light:    #ff6b6b;
    --red-muted:    rgba(230,57,70,.12);

    /* Neutros escuros (sidebar) */
    --ink-900:      #0b0f19;
    --ink-800:      #111827;
    --ink-700:      #1e2535;
    --ink-600:      #2d3748;
    --ink-500:      #4a5568;
    --ink-400:      #718096;
    --ink-300:      #a0aec0;
    --ink-200:      #e2e8f0;
    --ink-100:      #f1f5f9;
    --ink-50:       #f8fafc;

    /* Sidebar */
    --sidebar-w:          240px;
    --sidebar-w-collapsed: 64px;
    --sidebar-bg:         #0f172a;
    --sidebar-border:     rgba(255,255,255,.06);
    --sidebar-text:       rgba(255,255,255,.65);
    --sidebar-text-hover: rgba(255,255,255,.95);
    --sidebar-active-bg:  rgba(230,57,70,.18);
    --sidebar-active-txt: #e63946;

    /* Header */
    --header-h:      58px;
    --header-bg:     #ffffff;
    --header-border: #e8ecf0;
    --header-shadow: 0 1px 0 rgba(0,0,0,.06);

    /* Superfícies */
    --bg-page:    #f4f6fa;
    --bg-card:    #ffffff;
    --bg-input:   #ffffff;

    /* Texto */
    --txt-primary:   #111827;
    --txt-secondary: #4b5563;
    --txt-muted:     #9ca3af;

    /* Bordas */
    --border:       #e5e7eb;
    --border-focus: #e63946;

    /* Status */
    --green:        #10b981;
    --amber:        #f59e0b;
    --blue:         #3b82f6;

    /* Sombras */
    --shadow-xs:    0 1px 2px rgba(0,0,0,.05);
    --shadow-sm:    0 2px 8px rgba(0,0,0,.08);
    --shadow-md:    0 4px 20px rgba(0,0,0,.10);
    --shadow-lg:    0 8px 32px rgba(0,0,0,.12);

    /* Transições */
    --ease:         cubic-bezier(.4,0,.2,1);
    --dur:          180ms;

    /* Raios */
    --r-sm:  6px;
    --r-md:  10px;
    --r-lg:  14px;
    --r-xl:  20px;
}

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; -webkit-font-smoothing: antialiased; }

body {
    font-family: var(--font-body);
    background: var(--bg-page);
    color: var(--txt-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; }
img { max-width: 100%; }

/* ── Layout wrapper ────────────────────────────────────────── */
.erp-wrapper {
    display: flex;
    min-height: 100vh;
}

.erp-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-left: var(--sidebar-w);
    transition: margin-left var(--dur) var(--ease);
}

.erp-content {
    flex: 1;
    padding: 28px 32px;
    margin-top: var(--header-h);
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.erp-sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--sidebar-w);
    height: 100vh;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    z-index: 300;
    overflow: hidden;
    transition: transform var(--dur) var(--ease), width var(--dur) var(--ease);
}

/* ── Sidebar: brand ──────────────────────────────────────── */
.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 16px 14px;
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
}

.sidebar-brand__link {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-brand__name {
    font-size: 1.05rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -.2px;
}

.sidebar-brand__logo {
    height: 44px;
    width: auto;
    object-fit: contain;
}

.sidebar-toggle {
    color: var(--sidebar-text);
    padding: 4px;
    border-radius: var(--r-sm);
    transition: color var(--dur), background var(--dur);
    display: none;
}
.sidebar-toggle:hover { color: #fff; background: rgba(255,255,255,.08); }

/* ── Sidebar: collapse button ────────────────────────────── */
.sidebar-collapse-btn {
    display: none; /* visível apenas em desktop via @media */
    align-items: center;
    justify-content: center;
    color: var(--sidebar-text);
    padding: 4px;
    border-radius: var(--r-sm);
    transition: color var(--dur), background var(--dur);
    flex-shrink: 0;
    cursor: pointer;
}
.sidebar-collapse-btn:hover { color: #fff; background: rgba(255,255,255,.08); }
.sidebar-collapse-btn .icon-expand { display: none; }

/* ── Sidebar: estado colapsado (desktop) ─────────────────── */
@media (min-width: 1025px) {
    .sidebar-collapse-btn { display: flex; }

    body.sidebar-collapsed .erp-sidebar  { width: var(--sidebar-w-collapsed); }
    body.sidebar-collapsed .erp-main     { margin-left: var(--sidebar-w-collapsed); }
    body.sidebar-collapsed .erp-header   { left: var(--sidebar-w-collapsed); }

    /* Oculta textos e labels */
    body.sidebar-collapsed .nav-item > span,
    body.sidebar-collapsed .nav-chevron,
    body.sidebar-collapsed .nav-group-label,
    body.sidebar-collapsed .sidebar-empresa__info,
    body.sidebar-collapsed .sidebar-footer__version,
    body.sidebar-collapsed .nav-submenu,
    body.sidebar-collapsed .sidebar-brand__link { display: none; }

    /* Centraliza ícones */
    body.sidebar-collapsed .sidebar-brand  { justify-content: center; padding: 16px 8px; }
    body.sidebar-collapsed .sidebar-empresa { justify-content: center; padding: 12px 8px; }
    body.sidebar-collapsed .sidebar-nav    { padding: 12px 8px; }
    body.sidebar-collapsed .nav-item       { justify-content: center; padding: 9px 8px; }
    body.sidebar-collapsed .sidebar-footer { justify-content: center; padding: 12px 8px; }

    /* Alterna ícone do botão */
    body.sidebar-collapsed .sidebar-collapse-btn .icon-collapse { display: none; }
    body.sidebar-collapsed .sidebar-collapse-btn .icon-expand   { display: flex; }
}

/* Tooltip do sidebar colapsado (gerado via JS, appended ao body) */
.sidebar-tooltip {
    position: fixed;
    background: #1e2535;
    color: rgba(255,255,255,.95);
    font-size: .78rem;
    font-weight: 500;
    font-family: var(--font-body);
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
    border: 1px solid rgba(255,255,255,.08);
    display: none;
    transition: opacity .1s;
}

/* ── Sidebar: empresa ────────────────────────────────────── */
.sidebar-empresa {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
}

.sidebar-empresa__logo {
    width: 34px; height: 34px;
    border-radius: var(--r-sm);
    background: rgba(230,57,70,.2);
    border: 1px solid rgba(230,57,70,.3);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.sidebar-empresa__logo img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-empresa__logo span {
    font-size: .65rem; font-weight: 700;
    color: var(--red-light); letter-spacing: .5px;
}

.sidebar-empresa__info { min-width: 0; }
.sidebar-empresa__nome {
    display: block;
    font-size: .8rem; font-weight: 600;
    color: rgba(255,255,255,.9);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 150px;
}
.sidebar-empresa__cnpj {
    display: block;
    font-size: .7rem;
    color: var(--sidebar-text);
    font-family: var(--font-mono);
}

/* ── Sidebar: nav ────────────────────────────────────────── */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }

.nav-group-label {
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.3);
    padding: 18px 8px 6px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--r-md);
    color: var(--sidebar-text);
    font-size: .88rem;
    font-weight: 400;
    transition: background var(--dur), color var(--dur);
    cursor: pointer;
    width: 100%;
    text-align: left;
    position: relative;
}

.nav-item:hover {
    background: rgba(255,255,255,.07);
    color: var(--sidebar-text-hover);
}

.nav-item--active {
    background: var(--sidebar-active-bg) !important;
    color: var(--sidebar-active-txt) !important;
    font-weight: 500;
}
.nav-item--active .nav-icon { stroke: var(--sidebar-active-txt); }

.nav-icon { flex-shrink: 0; opacity: .75; }
.nav-item:hover .nav-icon, .nav-item--active .nav-icon { opacity: 1; }

.nav-item span { flex: 1; }

.nav-badge {
    background: var(--red);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    min-width: 18px; height: 18px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 5px;
}

/* Submenu */
.nav-chevron {
    margin-left: auto;
    flex-shrink: 0;
    opacity: .5;
    transition: transform var(--dur) var(--ease);
}
.nav-group--open > .nav-item--parent .nav-chevron { transform: rotate(180deg); }

.nav-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s var(--ease);
    padding-left: 12px;
}
.nav-group--open .nav-submenu { max-height: 600px; }

.nav-subitem {
    display: block;
    padding: 7px 10px 7px 26px;
    font-size: .83rem;
    color: rgba(255,255,255,.5);
    border-radius: var(--r-sm);
    transition: color var(--dur), background var(--dur);
    position: relative;
    cursor: pointer;
    text-decoration: none;
}
.nav-subitem::before {
    content: '';
    position: absolute;
    left: 10px; top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    transition: background var(--dur);
}
.nav-subitem:hover { color: rgba(255,255,255,.9); background: rgba(255,255,255,.05); }
.nav-subitem:hover::before { background: var(--red); }
.nav-subitem.nav-item--active { color: var(--red-light); }
.nav-subitem.nav-item--active::before { background: var(--red-light); }

/* ── Sidebar: footer ─────────────────────────────────────── */
.sidebar-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--sidebar-border);
    flex-shrink: 0;
}
.sidebar-footer__version {
    font-size: .7rem;
    color: rgba(255,255,255,.25);
    font-family: var(--font-mono);
}

/* Overlay mobile */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 299;
    backdrop-filter: blur(2px);
}

/* ============================================================
   HEADER
   ============================================================ */
.erp-header {
    position: fixed;
    top: 0;
    left: var(--sidebar-w);
    right: 0;
    height: var(--header-h);
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    box-shadow: var(--header-shadow);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 12px;
    z-index: 200;
    transition: left var(--dur) var(--ease);
}

/* ── Header: left ────────────────────────────────────────── */
.header-left { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.header-menu-btn {
    display: flex;
    flex-direction: column;
    gap: 4.5px;
    padding: 8px;
    border-radius: var(--r-sm);
    color: var(--txt-secondary);
    transition: background var(--dur), color var(--dur);
    display: none;
}
.header-menu-btn span {
    display: block;
    width: 20px; height: 1.8px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--dur), opacity var(--dur);
}
.header-menu-btn:hover { background: var(--ink-100); color: var(--txt-primary); }

.header-logo { display: flex; align-items: center; gap: 8px; }
.header-logo__text { font-weight: 600; font-size: .92rem; color: var(--txt-primary); display: none; }

.header-quick-nav { display: flex; align-items: center; gap: 2px; padding-left: 10px; border-right: 0px solid var(--border); }
.header-quick-nav__item { position: relative; color: var(--txt-secondary); }
.header-quick-nav__item::after {
    content: attr(title);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--txt-primary);
    color: var(--bg-surface, #fff);
    font-size: .72rem;
    font-weight: 500;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: var(--r-sm);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur);
    z-index: 100;
}
.header-quick-nav__item:hover::after { opacity: 1; }

/* ── Header: actions ────────────────────────────────────── */
.header-actions { display: flex; align-items: center; gap: 6px; flex: 1; }

.btn-header {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 14px;
    border-radius: var(--r-md);
    font-size: .84rem;
    font-weight: 500;
    color: var(--txt-secondary);
    background: transparent;
    border: 1px solid var(--border);
    transition: all var(--dur);
    white-space: nowrap;
}
.btn-header:hover { background: var(--ink-100); color: var(--txt-primary); border-color: var(--ink-200); }

.btn-header--primary {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}
.btn-header--primary:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }

.btn-header--icon {
    padding: 7px 10px;
    border-color: transparent;
}
.btn-header--icon:hover { border-color: var(--border); }

/* ── Header: dropdowns ──────────────────────────────────── */
.header-dropdown { position: relative; }

.header-dropdown__menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 500;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--dur), transform var(--dur), visibility var(--dur);
}
.header-dropdown__menu--right { left: auto; right: 0; }
.header-dropdown.open .header-dropdown__menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}

.header-dropdown__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--r-md);
    font-size: .84rem;
    color: var(--txt-primary);
    transition: background var(--dur), color var(--dur);
    cursor: pointer;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    font-family: inherit;
}
.header-dropdown__item:hover { background: var(--ink-100); }
.header-dropdown__item--danger { color: var(--red); }
.header-dropdown__item--danger:hover { background: var(--red-muted); }

.header-dropdown__item > div span { display: block; font-weight: 500; }
.header-dropdown__item > div small { font-size: .75rem; color: var(--txt-muted); }

.header-dropdown__item--empresa { gap: 10px; }
.header-dropdown__item--active { background: var(--red-muted); }
.header-dropdown__item--active span { color: var(--red); }

.header-dropdown__label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--txt-muted);
    padding: 6px 12px 4px;
}

.header-dropdown__divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

.header-dropdown__user-info {
    padding: 10px 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.header-dropdown__user-info strong { font-size: .88rem; color: var(--txt-primary); }
.header-dropdown__user-info small { font-size: .75rem; color: var(--txt-muted); }
.user-permissao {
    display: inline-block;
    margin-top: 4px;
    font-size: .7rem;
    font-weight: 500;
    background: var(--red-muted);
    color: var(--red-dark);
    padding: 2px 8px;
    border-radius: 20px;
    align-self: flex-start;
}

/* ── Empresa avatar ─────────────────────────────────────── */
.empresa-avatar {
    width: 30px; height: 30px;
    border-radius: var(--r-sm);
    background: var(--red-muted);
    color: var(--red);
    font-size: .65rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.check-icon { margin-left: auto; color: var(--green); }

.btn-empresa {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    border-radius: var(--r-md);
    font-size: .82rem; font-weight: 500;
    background: var(--ink-50);
    border: 1px solid var(--border);
    color: var(--txt-secondary);
    max-width: 200px;
}
.btn-empresa:hover { background: var(--ink-100); color: var(--txt-primary); }
.btn-empresa__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
}
.btn-empresa__nome {
    flex: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Header: right ──────────────────────────────────────── */
.header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }

/* Perfil */
.btn-perfil {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--red-muted);
    border: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    transition: border-color var(--dur);
    overflow: hidden;
    cursor: pointer;
}
.btn-perfil:hover { border-color: var(--red); }
.btn-perfil__foto { width: 100%; height: 100%; object-fit: cover; }
.btn-perfil__inicial {
    font-size: .75rem; font-weight: 700;
    color: var(--red); letter-spacing: .5px;
}

/* ── Notificações ───────────────────────────────────────── */
.header-notif { position: relative; }

.btn-notif { position: relative; }

.notif-badge {
    position: absolute;
    top: 2px; right: 2px;
    min-width: 16px; height: 16px;
    background: var(--red);
    color: #fff;
    font-size: .6rem; font-weight: 700;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--header-bg);
    animation: notif-pop .3s var(--ease);
}

@keyframes notif-pop {
    0%  { transform: scale(.4); }
    70% { transform: scale(1.2); }
    100%{ transform: scale(1); }
}

.notif-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 360px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    z-index: 500;
    opacity: 0; visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur), transform var(--dur), visibility var(--dur);
    overflow: hidden;
}
.header-notif.open .notif-panel {
    opacity: 1; visibility: visible; transform: translateY(0);
}

.notif-panel__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border);
    font-size: .9rem; font-weight: 600;
}

.notif-todas-lidas {
    font-size: .75rem; color: var(--red);
    font-weight: 500;
    padding: 4px 8px;
    border-radius: var(--r-sm);
    transition: background var(--dur);
}
.notif-todas-lidas:hover { background: var(--red-muted); }

.notif-panel__list { max-height: 380px; overflow-y: auto; }

.notif-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background var(--dur);
}
.notif-item:hover { background: var(--ink-50); }
.notif-item--nao-lida { background: rgba(59,130,246,.04); }
.notif-item--nao-lida::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--blue);
}

.notif-item__icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: .85rem;
}
.notif-icon--agendamento { background: rgba(59,130,246,.12); color: var(--blue); }
.notif-icon--assinatura  { background: rgba(16,185,129,.12); color: var(--green); }
.notif-icon--estoque     { background: rgba(245,158,11,.12); color: var(--amber); }

.notif-item__body { flex: 1; min-width: 0; }
.notif-item__titulo { font-size: .83rem; font-weight: 500; color: var(--txt-primary); }
.notif-item__msg    { font-size: .78rem; color: var(--txt-muted); margin-top: 2px; }
.notif-item__tempo  { font-size: .72rem; color: var(--txt-muted); margin-top: 4px; }

.notif-empty {
    padding: 32px 16px;
    text-align: center;
    font-size: .85rem;
    color: var(--txt-muted);
}

.notif-panel__footer {
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    text-align: center;
}
.notif-ver-lidas { font-size: .8rem; color: var(--txt-muted); }
.notif-ver-lidas:hover { color: var(--red); }

/* ── Busca rápida ───────────────────────────────────────── */
.header-search { position: relative; }

.header-search__panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    width: 500px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    z-index: 500;
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur), transform var(--dur), visibility var(--dur);
    overflow: hidden;
}
.header-search.open .header-search__panel {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.header-search__input-wrap {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.header-search__input-wrap svg { flex-shrink: 0; color: var(--txt-muted); }

.header-search__input-wrap input {
    flex: 1;
    border: none; outline: none;
    font-size: .9rem;
    color: var(--txt-primary);
    background: none;
}
.header-search__input-wrap kbd {
    font-size: .7rem;
    padding: 2px 6px;
    background: var(--ink-100);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--txt-muted);
    font-family: var(--font-mono);
}

.header-search__results { max-height: 300px; overflow-y: auto; }

.search-result-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--ink-100);
    transition: background var(--dur);
}
.search-result-item:hover { background: var(--ink-50); }
.search-result-item__img {
    width: 38px; height: 38px;
    border-radius: var(--r-sm);
    background: var(--ink-100);
    object-fit: cover;
    flex-shrink: 0;
}
.search-result-item__info { flex: 1; min-width: 0; }
.search-result-item__titulo { font-size: .85rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-item__meta   { font-size: .75rem; color: var(--txt-muted); }
.search-result-item__preco  { font-size: .85rem; font-weight: 600; color: var(--red); flex-shrink: 0; }
.search-empty { padding: 24px; text-align: center; font-size: .85rem; color: var(--txt-muted); }

/* ============================================================
   PWA PROMPT
   ============================================================ */
.pwa-prompt {
    position: fixed;
    bottom: 20px; left: 50%;
    transform: translateX(-50%);
    background: var(--ink-800);
    color: #fff;
    border-radius: var(--r-xl);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    max-width: 480px;
    width: calc(100vw - 40px);
    animation: slide-up .4s var(--ease);
}
@keyframes slide-up { from { transform: translateX(-50%) translateY(20px); opacity: 0; } }

.pwa-prompt__icon { color: var(--amber); flex-shrink: 0; }
.pwa-prompt__text { flex: 1; }
.pwa-prompt__text strong { display: block; font-size: .9rem; font-weight: 600; }
.pwa-prompt__text span   { font-size: .78rem; opacity: .7; }
.btn-pwa-install {
    background: var(--red); color: #fff;
    padding: 7px 16px; border-radius: var(--r-md);
    font-size: .82rem; font-weight: 600;
    flex-shrink: 0;
    transition: background var(--dur);
}
.btn-pwa-install:hover { background: var(--red-dark); }
.btn-pwa-dismiss { font-size: .78rem; opacity: .5; padding: 4px; flex-shrink: 0; color: #fff; }
.btn-pwa-dismiss:hover { opacity: .9; }

/* ============================================================
   CARDS E UTILITÁRIOS DE CONTEÚDO
   ============================================================ */
.page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
}
.page-title { font-size: 1.35rem; font-weight: 600; color: var(--txt-primary); }
.page-subtitle { font-size: .85rem; color: var(--txt-muted); margin-top: 2px; }

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
}
.card__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}
.card__body { padding: 20px; }

/* Tabela */
.erp-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.erp-table thead { background: var(--ink-50); }
.erp-table th {
    padding: 11px 14px;
    text-align: left;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--txt-muted);
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}
.erp-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--ink-100);
    color: var(--txt-primary);
    vertical-align: middle;
}
.erp-table tbody tr:last-child td { border-bottom: none; }
.erp-table tbody tr:hover td { background: var(--ink-50); }

/* Badges */
.badge {
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .72rem; font-weight: 600;
    letter-spacing: .02em;
}
.badge--green  { background: rgba(16,185,129,.12); color: #065f46; }
.badge--red    { background: rgba(230,57,70,.12);  color: var(--red-dark); }
.badge--amber  { background: rgba(245,158,11,.12); color: #92400e; }
.badge--blue   { background: rgba(59,130,246,.12); color: #1e3a8a; }
.badge--gray   { background: var(--ink-100); color: var(--ink-500); }

/* Botões */
.btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px;
    border-radius: var(--r-md);
    font-size: .875rem; font-weight: 500;
    border: 1px solid transparent;
    transition: all var(--dur);
    cursor: pointer; white-space: nowrap;
    font-family: var(--font-body);
}
.btn--primary   { background: var(--red); color: #fff; border-color: var(--red); }
.btn--primary:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn--secondary { background: transparent; color: var(--txt-secondary); border-color: var(--border); }
.btn--secondary:hover { background: var(--ink-100); color: var(--txt-primary); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--txt-secondary); }
.btn--ghost:hover { background: var(--ink-100); }
.btn--danger { background: transparent; color: var(--red); border-color: rgba(230,57,70,.3); }
.btn--danger:hover { background: var(--red-muted); border-color: var(--red); }
.btn--sm { padding: 6px 12px; font-size: .8rem; border-radius: var(--r-sm); }
.btn--icon { padding: 8px; border-radius: var(--r-sm); }

/* Inputs */
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: .82rem; font-weight: 500; color: var(--txt-secondary); }
.form-label.required::after { content: ' *'; color: var(--red); }
.form-control {
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: .875rem;
    color: var(--txt-primary);
    background: var(--bg-input);
    transition: border-color var(--dur), box-shadow var(--dur);
    width: 100%;
    font-family: var(--font-body);
}
.form-control:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(230,57,70,.12);
}
.form-control::placeholder { color: var(--txt-muted); }
textarea.form-control { height: auto; padding: 10px 12px; resize: vertical; }
select.form-control { cursor: pointer; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1024px) {
    .erp-sidebar {
        transform: translateX(-100%);
    }
    .erp-sidebar.open {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }
    .erp-main { margin-left: 0; }
    .erp-header { left: 0; }

    .header-menu-btn { display: flex; }
    .sidebar-toggle  { display: flex; }
    .sidebar-overlay.open { display: block; }

    .erp-content { padding: 20px 16px; }
    .header-search__panel { width: calc(100vw - 32px); left: 16px; transform: none; }
    .header-search.open .header-search__panel { transform: none; }
}

@media (max-width: 640px) {
    .header-logo__text { display: none; }
    .btn-empresa__nome { max-width: 100px; }
    .header-actions .btn-header:not(.btn-header--icon):not(.btn-header--primary) { display: none; }
    .notif-panel { width: calc(100vw - 24px); right: -8px; }
}

/* ── Menu dropdown global de ações ────────────────────────────────────── */
.mnu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: .84rem;
    color: #374151;
    cursor: pointer;
    transition: background .12s;
    width: 100%;
    border: none;
    background: none;
    font-family: inherit;
    text-align: left;
    white-space: nowrap;
}
.mnu-item:hover { background: #f9fafb; }
.mnu-item:disabled { opacity: .45; cursor: not-allowed; }
.mnu-item--danger { color: #e63946; }
.mnu-item--danger:hover { background: rgba(230,57,70,.06); }

/* ── Modais globais ────────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.modal {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0,0,0,.2);
    max-width: 98vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal__header {
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.modal__title {
    font-size: .95rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
    display: flex;
    align-items: center;
}
.modal__close {
    padding: 6px;
    border-radius: 8px;
    color: #9ca3af;
    background: none;
    border: none;
    cursor: pointer;
    transition: background .12s;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.modal__close:hover { background: #f3f4f6; }
.modal__body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}
.modal__footer {
    padding: 14px 20px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}