/* =========================================================
   PORTAL COMPRAS - UI PROFISSIONAL
   Substitua este arquivo em: /assets/css/style.css
   ========================================================= */

:root {
    --bg: #0b1220;
    --bg-2: #101827;
    --surface: #111c2e;
    --surface-2: #16243a;
    --surface-3: #1d2b44;
    --border: #24344f;
    --text: #e8eef8;
    --muted: #98a6bb;
    --muted-2: #c3ccdb;
    --primary: #2563eb;
    --primary-2: #1d4ed8;
    --success: #16a34a;
    --danger: #dc2626;
    --warning: #f59e0b;
    --shadow: 0 24px 70px rgba(0,0,0,.35);
    --radius: 18px;
}

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

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

body {
    font-family: Inter, Segoe UI, Roboto, Arial, Helvetica, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.45;
}

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

button,
input,
select,
textarea {
    font: inherit;
}

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

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background:
        radial-gradient(circle at 18% 12%, rgba(37,99,235,.24), transparent 30%),
        radial-gradient(circle at 85% 25%, rgba(14,165,233,.14), transparent 28%),
        linear-gradient(135deg, #07101f 0%, #0b1220 48%, #050816 100%);
}

.auth-wrapper {
    width: 100%;
    max-width: 450px;
}

.auth-card {
    background: rgba(17, 28, 46, .94);
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 28px;
    padding: 34px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
}

.login-logo {
    text-align: center;
    margin-bottom: 24px;
}

.login-logo img {
    max-width: 225px;
    width: 100%;
    background: #fff;
    padding: 13px;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0,0,0,.22);
}

.auth-card h1,
.auth-card h2 {
    text-align: center;
    margin-bottom: 18px;
    font-size: 25px;
}

.forgot-password {
    text-align: right;
    margin: 8px 0 16px;
}

.forgot-password a {
    color: #93c5fd;
    font-weight: 700;
    font-size: 14px;
}

/* =========================================================
   LAYOUT PRINCIPAL
   ========================================================= */

.app-layout {
    display: flex !important;
    min-height: 100vh !important;
    background: var(--bg) !important;
    overflow-x: hidden !important;
}

.sidebar {
    width: 270px !important;
    min-width: 270px !important;
    min-height: 100vh !important;
    position: sticky !important;
    top: 0 !important;
    align-self: flex-start !important;
    background: linear-gradient(180deg, #07101f 0%, #0b1220 100%) !important;
    border-right: 1px solid var(--border) !important;
    padding: 22px 18px !important;
    overflow: visible !important;
}

.app-main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: calc(100% - 270px) !important;
    display: flex !important;
    flex-direction: column !important;
}

.content {
    width: 100% !important;
    max-width: none !important;
    padding: 30px !important;
    overflow: visible !important;
}

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

.brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 8px 24px !important;
    margin-bottom: 14px !important;
    border-bottom: 1px solid rgba(148,163,184,.12) !important;
}

.brand-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, var(--primary), #0ea5e9) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 900 !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(37,99,235,.32) !important;
}

.brand strong {
    display: block !important;
    color: #fff !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
}

.brand small {
    display: block !important;
    color: var(--muted) !important;
    margin-top: 3px !important;
    line-height: 1.2 !important;
}

.sidebar-nav,
.sidebar nav,
.nav-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding-top: 10px !important;
}

.sidebar-nav a,
.sidebar nav a,
.nav-menu a,
.sidebar a {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    color: var(--muted-2) !important;
    font-weight: 800 !important;
    transition: .18s ease !important;
    white-space: normal !important;
    word-break: normal !important;
}

.sidebar-nav a:hover,
.sidebar nav a:hover,
.nav-menu a:hover,
.sidebar a:hover {
    background: rgba(37,99,235,.14) !important;
    color: #fff !important;
    transform: translateX(2px) !important;
}

/* =========================================================
   HEADER
   ========================================================= */

.app-header {
    width: 100% !important;
    min-height: 82px !important;
    padding: 16px 30px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    background: rgba(17, 28, 46, .96) !important;
    border-bottom: 1px solid var(--border) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    backdrop-filter: blur(10px) !important;
}

.app-header-title {
    min-width: 0 !important;
}

.app-header-title h1,
.app-header h1 {
    margin: 0 !important;
    font-size: 24px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    letter-spacing: -.03em !important;
    color: #fff !important;
}

.app-header-title p,
.app-header p {
    margin: 4px 0 0 !important;
    color: var(--muted) !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
}

.header-actions,
.topbar-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

.bell,
.notification-bell {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 14px !important;
    border: 1px solid rgba(148,163,184,.24) !important;
    background: rgba(15,23,42,.75) !important;
    color: #fff !important;
    position: relative !important;
}

.bell-count {
    position: absolute !important;
    top: -7px !important;
    right: -7px !important;
    background: #ef4444 !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    padding: 4px 6px !important;
    min-width: 18px !important;
    text-align: center !important;
}

.user-menu {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.user-menu-button {
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    border: 1px solid var(--border) !important;
    border-radius: 999px !important;
    background: var(--surface-2) !important;
    color: var(--text) !important;
    padding: 6px 12px 6px 6px !important;
    cursor: pointer !important;
}

.user-avatar {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--primary), #0ea5e9) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 900 !important;
    color: #fff !important;
}

.user-menu-text,
.user-info {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.15 !important;
}

.user-menu-text strong,
.user-info strong {
    max-width: 180px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #fff !important;
    font-size: 14px !important;
}

.user-menu-text small,
.user-info small {
    color: var(--muted) !important;
    font-size: 12px !important;
    margin-top: 2px !important;
}

.user-dropdown {
    display: none !important;
    position: absolute !important;
    top: 58px !important;
    right: 0 !important;
    width: 230px !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 10px !important;
    box-shadow: var(--shadow) !important;
    z-index: 500 !important;
}

.user-dropdown.show {
    display: block !important;
}

.user-dropdown a {
    display: block !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    color: var(--muted-2) !important;
    font-weight: 700 !important;
}

.user-dropdown a:hover {
    background: var(--surface-3) !important;
    color: #fff !important;
}

/* =========================================================
   HEADERS DE PÁGINA
   ========================================================= */

.page-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 18px !important;
    margin-bottom: 24px !important;
}

.page-header h1 {
    font-size: 32px !important;
    letter-spacing: -0.03em !important;
    color: #fff !important;
}

.page-header p {
    color: var(--muted) !important;
    margin-top: 4px !important;
}

/* =========================================================
   CARDS / PAINÉIS
   ========================================================= */

.card,
.panel,
.form-panel,
.request-card,
.content-card,
.modal,
.modal-content {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 24px !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.16) !important;
    margin-bottom: 22px !important;
    overflow: visible !important;
}

.card h2,
.panel h2 {
    color: #fff !important;
    margin-bottom: 8px !important;
}

.card h3,
.panel h3 {
    color: #fff !important;
    margin-bottom: 16px !important;
    font-size: 20px !important;
}

.card p {
    margin: 10px 0 !important;
    color: var(--muted-2) !important;
}

.description-box {
    background: rgba(2,6,23,.38) !important;
    border: 1px solid rgba(148,163,184,.16) !important;
    border-radius: 16px !important;
    padding: 18px !important;
    color: var(--text) !important;
    min-height: 82px !important;
    margin-top: 18px !important;
}

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

.cards-grid,
.dashboard-cards,
.status-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

.card-link,
.dashboard-card,
.status-card {
    min-height: 110px !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    padding: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    transition: .18s ease !important;
}

.card-link:hover,
.dashboard-card:hover,
.status-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(96,165,250,.55) !important;
}

.card-link span,
.dashboard-card span,
.status-card span {
    color: var(--muted) !important;
    font-weight: 700 !important;
}

.card-link strong,
.dashboard-card strong,
.status-card strong {
    font-size: 34px !important;
    color: #fff !important;
    margin-top: 8px !important;
}

/* =========================================================
   FORMULÁRIOS
   ========================================================= */

.form-panel {
    max-width: 980px !important;
}

.form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: start !important;
    overflow: visible !important;
}

.form-grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    overflow: visible !important;
}

.form-grid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    overflow: visible !important;
}

.form-span-2,
.form-span-3 {
    grid-column: 1 / -1 !important;
}

.form-group,
.field-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
    min-width: 0 !important;
    overflow: visible !important;
}

label {
    display: block !important;
    color: #dbeafe !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
    margin: 0 !important;
}

input,
select,
textarea,
.form-control,
.form-select {
    width: 100% !important;
    max-width: 100% !important;
    color: var(--text) !important;
    background: #0b1628 !important;
    border: 1px solid #33445f !important;
    border-radius: 14px !important;
    outline: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important;
}

input,
.form-control {
    min-height: 46px !important;
    padding: 12px 14px !important;
}

textarea {
    min-height: 150px !important;
    padding: 14px !important;
    line-height: 1.5 !important;
    resize: vertical !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 4px rgba(37,99,235,.16) !important;
}

input::placeholder,
textarea::placeholder {
    color: #64748b !important;
}

/* =========================================================
   FIX DEFINITIVO DO SELECT CORTADO
   ========================================================= */

select,
.form-select,
.inline-form select {
    min-height: 50px !important;
    height: 50px !important;
    line-height: normal !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
    appearance: auto !important;
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    background-image: none !important;
    overflow: visible !important;
    cursor: pointer !important;
}

select option {
    background: #0b1628 !important;
    color: #ffffff !important;
}

/* =========================================================
   BOTÕES
   ========================================================= */

.btn,
.btn-primary,
.btn-secondary,
.btn-small,
button.btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    cursor: pointer !important;
    font-weight: 900 !important;
    border-radius: 13px !important;
    transition: .18s ease !important;
    white-space: nowrap !important;
}

.btn-primary {
    min-height: 46px !important;
    padding: 0 22px !important;
    background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
    color: #fff !important;
    box-shadow: 0 12px 25px rgba(37,99,235,.25) !important;
}

.btn-primary:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.08) !important;
}

.btn-secondary,
.btn-small {
    min-height: 38px !important;
    padding: 0 14px !important;
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

.btn-danger {
    background: var(--danger) !important;
    color: #fff !important;
}

.form-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-top: 4px !important;
    overflow: visible !important;
}

/* =========================================================
   TABELAS
   ========================================================= */

.table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    border: 1px solid rgba(148,163,184,.12) !important;
    border-radius: 16px !important;
}

.table-responsive table {
    min-width: 760px !important;
}

table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

th,
td {
    padding: 14px 12px !important;
    border-bottom: 1px solid rgba(148,163,184,.13) !important;
    text-align: left !important;
}

th {
    color: var(--muted) !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
}

td {
    color: var(--muted-2) !important;
}

td a {
    color: #bfdbfe !important;
    font-weight: 800 !important;
}

tbody tr:hover td {
    background: rgba(37,99,235,.06) !important;
}

/* =========================================================
   BADGES / ALERTAS / COMENTÁRIOS
   ========================================================= */

.badge {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 26px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: rgba(96,165,250,.15) !important;
    color: #bfdbfe !important;
    border: 1px solid rgba(96,165,250,.22) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.badge-success {
    background: rgba(22,163,74,.16) !important;
    color: #bbf7d0 !important;
    border-color: rgba(74,222,128,.26) !important;
}

.badge-danger {
    background: rgba(220,38,38,.16) !important;
    color: #fecaca !important;
    border-color: rgba(248,113,113,.28) !important;
}

.alert-error,
.alert-success {
    margin: 0 0 16px !important;
    padding: 13px 15px !important;
    border-radius: 14px !important;
    font-weight: 800 !important;
    border: 1px solid transparent !important;
}

.alert-error {
    background: rgba(220,38,38,.13) !important;
    color: #fecaca !important;
    border-color: rgba(248,113,113,.28) !important;
}

.alert-success {
    background: rgba(22,163,74,.13) !important;
    color: #bbf7d0 !important;
    border-color: rgba(74,222,128,.25) !important;
}

.comments-list {
    margin-top: 20px !important;
    display: grid !important;
    gap: 12px !important;
}

.comment-item {
    background: rgba(2,6,23,.34) !important;
    border: 1px solid rgba(148,163,184,.14) !important;
    border-radius: 16px !important;
    padding: 15px !important;
}

.comment-meta {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    color: var(--muted) !important;
    margin-bottom: 8px !important;
    font-size: 13px !important;
}

/* =========================================================
   DETALHES / FUNCIONAIS
   ========================================================= */

.details-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 18px 0 !important;
}

.request-title {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 20px !important;
    border-bottom: 1px solid rgba(148,163,184,.18) !important;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
}

.hint-box {
    background: rgba(37,99,235,.08) !important;
    border: 1px solid rgba(96,165,250,.22) !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    color: #cbd5e1 !important;
    line-height: 1.5 !important;
}

.danger-soft {
    background: rgba(239,68,68,.09) !important;
    border-color: rgba(248,113,113,.30) !important;
}

.batch-panel {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 16px !important;
}

.batch-panel input {
    max-width: 420px !important;
}

.comment-form {
    display: grid !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
}

.comment-form button {
    justify-self: start !important;
}

.archive-field {
    display: none;
}

.muted-text {
    color: var(--muted) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* =========================================================
   COMPATIBILIDADE COM HEADER ANTIGO
   ========================================================= */

.topbar {
    width: 100% !important;
    min-height: 82px !important;
    padding: 16px 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    background: rgba(17, 28, 46, .96) !important;
    border-bottom: 1px solid var(--border) !important;
}

.topbar-left h1 {
    margin: 0 !important;
    font-size: 24px !important;
}

.topbar-subtitle {
    color: var(--muted) !important;
    font-size: 14px !important;
}

.topbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 1150px) {
    .cards-grid,
    .dashboard-cards,
    .status-grid {
        grid-template-columns: repeat(2, minmax(170px, 1fr)) !important;
    }
}

@media (max-width: 1000px) {
    .form-grid-3,
    .details-grid {
        grid-template-columns: 1fr !important;
    }

    .form-span-3 {
        grid-column: auto !important;
    }

    .batch-panel {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .request-title {
        flex-direction: column !important;
    }
}

@media (max-width: 820px) {
    .app-layout {
        flex-direction: column !important;
    }

    .sidebar,
    .app-main {
        width: 100% !important;
        min-width: 0 !important;
        flex-basis: auto !important;
    }

    .sidebar {
        position: relative !important;
        min-height: auto !important;
    }

    .app-header,
    .topbar {
        position: relative !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 16px 18px !important;
    }

    .header-actions,
    .topbar-right {
        width: 100% !important;
        justify-content: space-between !important;
        margin-left: 0 !important;
    }

    .content {
        padding: 20px 16px !important;
    }

    .page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .form-grid,
    .form-grid-2 {
        grid-template-columns: 1fr !important;
    }

    .form-span-2 {
        grid-column: auto !important;
    }

    .cards-grid,
    .dashboard-cards,
    .status-grid {
        grid-template-columns: 1fr !important;
    }

    .user-menu-text,
    .user-info {
        display: none !important;
    }

    select,
    .form-select {
        min-height: 48px !important;
        height: 48px !important;
    }
}

/* Melhorias Portal Compras - ícones, filtros, anexos e notificações */
.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-nav .nav-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(59, 130, 246, .12);
    font-size: 15px;
    flex: 0 0 24px;
}

.sidebar-nav a:hover .nav-icon {
    background: rgba(59, 130, 246, .24);
}

.filter-panel {
    margin-bottom: 18px;
}

.filter-panel .form-actions {
    align-self: end;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.attachment-box {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 14px;
    background: rgba(15, 23, 42, .45);
}

.attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.attachment-list a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(37, 99, 235, .14);
    color: #dbeafe;
    text-decoration: none;
    border: 1px solid rgba(96, 165, 250, .22);
}

.attachment-list a:hover {
    background: rgba(37, 99, 235, .26);
}

.notification-list {
    display: grid;
    gap: 12px;
}

.notification-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, .2);
    background: rgba(15, 23, 42, .45);
    color: inherit;
    text-decoration: none;
}

.notification-item:hover {
    border-color: rgba(96, 165, 250, .38);
    background: rgba(30, 41, 59, .55);
}

.notification-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 158, 11, .14);
}

.notification-item p {
    margin: 4px 0;
}


/* Admin inline management */
.inline-edit-form{display:flex;gap:10px;align-items:center;min-width:360px}
.inline-edit-form input{max-width:260px;padding:10px 12px;border-radius:12px;border:1px solid var(--border,#24344f);background:#081426;color:#fff}
.actions-cell{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.table-action-form{display:inline-flex;margin:0}
@media (max-width: 768px){.inline-edit-form{min-width:0;flex-direction:column;align-items:stretch}.actions-cell{align-items:stretch}.inline-edit-form input{max-width:100%}}

/* Ajustes: edição de usuário, pedidos retroativos e aprovações */
.action-stack{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.edit-row{display:none;background:rgba(15,23,42,.85)}.edit-row.is-open{display:table-row}.compact-edit-form{padding:18px;border:1px solid var(--border,#22324d);border-radius:16px;background:rgba(2,8,23,.28)}.inline-edit-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.inline-edit-form input{min-width:180px}.batch-panel{display:block}.batch-panel>strong{display:inline-block;margin-right:12px}.batch-panel>input{max-width:420px;margin-right:12px}.muted-text{opacity:.75;font-size:.85rem}.empty-state{text-align:center;opacity:.75;padding:24px!important}
.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.inline-form input{min-width:180px}.badge-warning{background:#f59e0b22;color:#fbbf24;border:1px solid #f59e0b55}.badge-success{background:#16a34a22;color:#86efac;border:1px solid #16a34a55}.filter-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}.mention-box{position:absolute;background:#0b1220;border:1px solid #334155;border-radius:12px;box-shadow:0 16px 40px #0008;z-index:99;min-width:260px;display:none;overflow:hidden}.mention-box button{display:block;width:100%;text-align:left;background:transparent;color:#e5e7eb;border:0;padding:10px 12px;cursor:pointer}.mention-box button:hover{background:#1d4ed8}.comment-form{position:relative}


/* =========================================================
   CATEGORIAS DE PEDIDOS - LAYOUT AJUSTADO
   ========================================================= */

.categories-page {
    max-width: 1280px;
    margin: 0 auto;
}

.clean-page-header {
    margin-bottom: 24px;
}

.category-create-card,
.category-list-card {
    border: 1px solid rgba(96, 165, 250, .16);
    background: linear-gradient(180deg, rgba(17, 28, 46, .98), rgba(13, 22, 37, .98));
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}

.category-create-form {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    align-items: end;
    gap: 20px;
}

.category-create-form .form-actions {
    margin: 0;
}

.category-create-form .btn-primary {
    min-height: 52px;
    padding-inline: 28px;
    white-space: nowrap;
}

.category-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.category-table-wrap {
    margin-top: 14px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 16px;
    overflow: hidden;
}

.category-table {
    width: 100%;
    border-collapse: collapse;
}

.category-table th {
    color: #b8c7dd;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: rgba(15, 23, 42, .62);
}

.category-table th,
.category-table td {
    padding: 18px 20px;
    vertical-align: middle;
}

.category-table tbody tr {
    transition: background .18s ease, transform .18s ease;
}

.category-table tbody tr:hover {
    background: rgba(37, 99, 235, .08);
}

.category-name-view {
    color: #e8eef8;
    font-weight: 700;
    line-height: 1.35;
}

.category-edit-form {
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.category-edit-form input {
    width: min(100%, 460px);
    min-height: 44px;
}

.category-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.category-actions .table-action-form {
    margin: 0;
}

.text-right {
    text-align: right;
}

.btn-edit {
    color: #bfdbfe;
    border-color: rgba(59, 130, 246, .55);
    background: rgba(37, 99, 235, .14);
}

.btn-edit:hover {
    background: rgba(37, 99, 235, .25);
    border-color: rgba(96, 165, 250, .8);
}

.btn-save {
    color: #d1fae5;
    border-color: rgba(34, 197, 94, .45);
    background: rgba(22, 163, 74, .16);
}

.btn-cancel {
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, .28);
    background: rgba(148, 163, 184, .08);
}

.btn-danger-soft {
    color: #fecaca;
    border-color: rgba(248, 113, 113, .42);
    background: rgba(220, 38, 38, .13);
}

.btn-danger-soft:hover {
    background: rgba(220, 38, 38, .24);
}

.btn-success-soft {
    color: #bbf7d0;
    border-color: rgba(34, 197, 94, .42);
    background: rgba(22, 163, 74, .13);
}

.btn-success-soft:hover {
    background: rgba(22, 163, 74, .24);
}

.empty-state-cell {
    padding: 32px 20px !important;
    text-align: center;
    color: #94a3b8;
}

@media (max-width: 900px) {
    .category-create-form {
        grid-template-columns: 1fr;
    }

    .category-create-form .btn-primary {
        width: 100%;
    }

    .category-table th:nth-child(2),
    .category-table td:nth-child(2) {
        width: auto;
    }

    .category-actions {
        justify-content: flex-start;
    }

    .text-right {
        text-align: left;
    }
}


/* =========================================================
   CATEGORIAS DE PEDIDOS - REFINO FINAL
   ========================================================= */

.categories-page-refined {
    max-width: 100%;
    margin: 0;
    padding-top: 0;
}

.categories-page-refined .page-header,
.categories-page-refined .clean-page-header {
    display: none !important;
}

.refined-category-create,
.refined-category-list {
    border: 1px solid rgba(96, 165, 250, .16) !important;
    background: linear-gradient(180deg, rgba(17, 28, 46, .98), rgba(13, 22, 37, .98)) !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22) !important;
}

.refined-category-create {
    margin-top: 0 !important;
    margin-bottom: 28px !important;
    padding: 28px 32px !important;
}

.refined-category-list {
    padding: 28px 32px 24px !important;
}

.refined-category-create .panel-header-simple h2,
.refined-category-list .panel-header-simple h2 {
    margin: 0 0 10px !important;
    font-size: 28px !important;
    line-height: 1.15 !important;
}

.refined-category-create .panel-header-simple p,
.refined-category-list .panel-header-simple p {
    margin: 0 0 18px !important;
    color: #d7e6ff !important;
}

.refined-category-form {
    display: grid !important;
    grid-template-columns: minmax(320px, 1fr) 180px !important;
    gap: 22px !important;
    align-items: end !important;
}

.refined-category-form .form-group {
    margin: 0 !important;
}

.refined-category-form label {
    display: block !important;
    margin-bottom: 8px !important;
}

.refined-category-form input {
    min-height: 52px !important;
    width: 100% !important;
}

.refined-category-form .form-actions {
    margin: 0 !important;
    display: flex !important;
    align-items: end !important;
}

.btn-create-category {
    min-height: 52px !important;
    width: 100% !important;
    padding: 0 22px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
}

.btn-create-category .btn-icon {
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
}

.category-table-wrap {
    margin-top: 14px !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

.refined-category-table {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
}

.refined-category-table th,
.refined-category-table td {
    padding: 16px 18px !important;
    vertical-align: middle !important;
}

.refined-category-table th {
    color: #b8c7dd !important;
    font-size: 13px !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    background: rgba(15, 23, 42, .62) !important;
}

.refined-category-table tbody tr {
    border-top: 1px solid rgba(148, 163, 184, .12) !important;
}

.refined-category-table tbody tr:hover {
    background: rgba(37, 99, 235, .08) !important;
}

.refined-category-table .status-col,
.refined-category-table .status-cell {
    width: 180px !important;
    text-align: center !important;
}

.refined-category-table .actions-col,
.refined-category-table .actions-cell {
    width: 270px !important;
    text-align: left !important;
}

.category-name-view {
    color: #e8eef8 !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.category-actions {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
}

.category-actions .table-action-form {
    margin: 0 !important;
}

.category-actions .btn-small {
    min-width: 104px !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border-radius: 10px !important;
}

.btn-edit {
    color: #bfdbfe !important;
    border-color: rgba(59, 130, 246, .7) !important;
    background: rgba(37, 99, 235, .12) !important;
}

.btn-edit:hover {
    background: rgba(37, 99, 235, .24) !important;
}

.btn-danger-soft {
    color: #fecaca !important;
    border-color: rgba(248, 113, 113, .7) !important;
    background: rgba(220, 38, 38, .10) !important;
}

.btn-danger-soft:hover {
    background: rgba(220, 38, 38, .22) !important;
}

.btn-success-soft {
    color: #bbf7d0 !important;
    border-color: rgba(34, 197, 94, .60) !important;
    background: rgba(22, 163, 74, .13) !important;
}

.category-edit-form {
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.category-edit-form input {
    width: min(100%, 460px) !important;
    min-height: 42px !important;
}

.category-footer {
    margin-top: 18px !important;
    color: #a8bad4 !important;
    font-size: 14px !important;
}

@media (max-width: 900px) {
    .refined-category-form {
        grid-template-columns: 1fr !important;
    }

    .refined-category-table {
        table-layout: auto !important;
    }

    .refined-category-table .actions-cell {
        width: auto !important;
    }

    .category-actions {
        flex-wrap: wrap !important;
    }
}


/* =========================================================
   GESTÃO DE USUÁRIOS - REFINO FINAL
   ========================================================= */

.users-page-refined {
    max-width: 100%;
    margin: 0;
    padding-top: 0;
}

.users-page-refined .page-header {
    display: none !important;
}

.users-filter-card,
.users-create-card,
.users-list-card {
    border: 1px solid rgba(96, 165, 250, .16) !important;
    background: linear-gradient(180deg, rgba(17, 28, 46, .98), rgba(13, 22, 37, .98)) !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22) !important;
}

.users-toolbar {
    margin-bottom: 22px !important;
}

.users-filter-card {
    padding: 24px !important;
    display: grid !important;
    grid-template-columns: minmax(320px, 1.5fr) minmax(180px, .55fr) minmax(180px, .55fr) auto !important;
    gap: 20px !important;
    align-items: end !important;
}

.users-filter-card label {
    display: block !important;
    margin-bottom: 8px !important;
    color: #dbeafe !important;
    font-weight: 700 !important;
}

.user-search-field small {
    display: block !important;
    margin-top: 8px !important;
    color: #8fa3bf !important;
}

.search-input-wrap {
    position: relative !important;
}

.search-input-wrap span {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #93a4bc !important;
    font-size: 20px !important;
}

.search-input-wrap input {
    padding-left: 44px !important;
    min-height: 52px !important;
    width: 100% !important;
}

.users-filter-card select {
    min-height: 52px !important;
}

.users-filter-actions {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
}

.users-filter-actions .btn-primary,
.users-filter-actions .btn-ghost {
    min-height: 52px !important;
    min-width: 110px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

.btn-ghost {
    border: 1px solid rgba(148, 163, 184, .24) !important;
    background: rgba(15, 23, 42, .25) !important;
    color: #dbeafe !important;
    text-decoration: none !important;
    border-radius: 12px !important;
    padding: 0 18px !important;
    font-weight: 800 !important;
}

.btn-ghost:hover {
    border-color: rgba(96, 165, 250, .55) !important;
    background: rgba(37, 99, 235, .12) !important;
}

.users-create-card {
    padding: 28px 32px !important;
    margin-bottom: 28px !important;
}

.users-list-card {
    padding: 28px 32px 24px !important;
}

.users-create-card .panel-header-simple h2,
.users-list-card .panel-header-simple h2 {
    margin: 0 0 10px !important;
    font-size: 28px !important;
    line-height: 1.15 !important;
}

.users-create-card .panel-header-simple p,
.users-list-card .panel-header-simple p {
    margin: 0 0 18px !important;
    color: #d7e6ff !important;
}

.users-create-form {
    gap: 22px !important;
}

.users-create-form input,
.users-create-form select {
    min-height: 52px !important;
}

.users-table-wrap {
    margin-top: 14px !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

.users-table {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
}

.users-table th,
.users-table td {
    padding: 16px 18px !important;
    vertical-align: middle !important;
}

.users-table th {
    color: #b8c7dd !important;
    font-size: 13px !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    background: rgba(15, 23, 42, .62) !important;
}

.users-table tbody tr {
    border-top: 1px solid rgba(148, 163, 184, .12) !important;
}

.users-table tbody tr:hover {
    background: rgba(37, 99, 235, .08) !important;
}

.users-table th:nth-child(1),
.users-table td:nth-child(1) {
    width: 260px !important;
}

.users-table th:nth-child(2),
.users-table td:nth-child(2) {
    width: 280px !important;
}

.users-table th:nth-child(3),
.users-table td:nth-child(3) {
    width: 210px !important;
}

.users-table th:nth-child(4),
.users-table td:nth-child(4) {
    width: 160px !important;
}

.users-table th:nth-child(5),
.users-table td:nth-child(5) {
    width: 130px !important;
}

.users-table .actions-col,
.users-table .users-actions {
    width: 240px !important;
}

.user-identity {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.user-avatar {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #2563eb, #22c55e) !important;
    color: #fff !important;
    font-weight: 900 !important;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .25) !important;
}

.user-identity strong {
    display: block !important;
    color: #e8eef8 !important;
    line-height: 1.25 !important;
}

.user-identity small {
    display: block !important;
    margin-top: 2px !important;
    color: #9fb1ca !important;
}

.role-pill {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    color: #bfdbfe !important;
    background: rgba(37, 99, 235, .16) !important;
    border: 1px solid rgba(96, 165, 250, .18) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.users-actions {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
}

.users-actions .table-action-form {
    margin: 0 !important;
}

.users-actions .btn-small {
    min-width: 104px !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border-radius: 10px !important;
}

.btn-edit {
    color: #bfdbfe !important;
    border-color: rgba(59, 130, 246, .7) !important;
    background: rgba(37, 99, 235, .12) !important;
}

.btn-danger-soft {
    color: #fecaca !important;
    border-color: rgba(248, 113, 113, .7) !important;
    background: rgba(220, 38, 38, .10) !important;
}

.btn-success-soft {
    color: #bbf7d0 !important;
    border-color: rgba(34, 197, 94, .60) !important;
    background: rgba(22, 163, 74, .13) !important;
}

.current-user-label {
    display: inline-flex !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.user-edit-row {
    display: none;
}

.user-edit-row.is-open {
    display: table-row !important;
}

.user-edit-row td {
    background: rgba(15, 23, 42, .45) !important;
}

.edit-form-actions {
    justify-content: flex-start !important;
}

.users-pagination {
    margin-top: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    color: #a8bad4 !important;
    font-size: 14px !important;
}

.pagination-controls {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

.page-btn {
    min-width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    border: 1px solid rgba(148, 163, 184, .20) !important;
    background: rgba(15, 23, 42, .35) !important;
    color: #dbeafe !important;
    text-decoration: none !important;
    font-weight: 800 !important;
}

.page-btn.active {
    border-color: rgba(37, 99, 235, .9) !important;
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #fff !important;
}

.page-btn.disabled {
    opacity: .4 !important;
    pointer-events: none !important;
}

.empty-state-cell {
    padding: 34px 20px !important;
    text-align: center !important;
    color: #94a3b8 !important;
}

@media (max-width: 1100px) {
    .users-filter-card {
        grid-template-columns: 1fr 1fr !important;
    }

    .users-filter-actions {
        grid-column: span 2 !important;
    }

    .users-table {
        table-layout: auto !important;
    }
}

@media (max-width: 760px) {
    .users-filter-card {
        grid-template-columns: 1fr !important;
    }

    .users-filter-actions {
        grid-column: auto !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .users-pagination {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .users-actions {
        flex-wrap: wrap !important;
    }
}


/* =========================================================
   HOTFIX - USUÁRIOS: TABELA COMPACTA SEM SCROLL LATERAL
   ========================================================= */

.users-filter-card {
    grid-template-columns: minmax(340px, 1fr) 220px 220px 320px !important;
}

.users-filter-actions {
    height: 52px !important;
    align-self: end !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 12px !important;
}

.users-filter-actions .btn-primary,
.users-filter-actions .btn-ghost {
    height: 52px !important;
    min-height: 52px !important;
    width: 145px !important;
    min-width: 145px !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
}

.users-table-wrap {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

.users-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
}

.users-table th:nth-child(1),
.users-table td:nth-child(1) {
    width: 48% !important;
    min-width: 0 !important;
}

.users-table th:nth-child(2),
.users-table td:nth-child(2) {
    width: 18% !important;
    min-width: 0 !important;
}

.users-table th:nth-child(3),
.users-table td:nth-child(3) {
    width: 14% !important;
    min-width: 0 !important;
}

.users-table th:nth-child(4),
.users-table td:nth-child(4),
.users-table .actions-col,
.users-table .users-actions {
    width: 20% !important;
    min-width: 250px !important;
}

.users-table .actions-col {
    text-align: left !important;
}

.users-actions {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

.users-actions .table-action-form {
    display: inline-flex !important;
    margin: 0 !important;
}

.users-actions .btn-small {
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    white-space: nowrap !important;
    flex: 0 0 112px !important;
}

.user-identity {
    min-width: 0 !important;
}

.user-identity > span:last-child {
    min-width: 0 !important;
}

.user-identity strong,
.user-identity small {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.current-user-label {
    width: 112px !important;
    min-width: 112px !important;
    justify-content: center !important;
    text-align: center !important;
}

.user-edit-row td {
    padding: 20px !important;
}

.user-edit-row .compact-edit-form {
    background: rgba(15, 23, 42, .35) !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    border-radius: 16px !important;
    padding: 20px !important;
}

@media (max-width: 1180px) {
    .users-filter-card {
        grid-template-columns: 1fr 1fr !important;
    }

    .users-filter-actions {
        grid-column: span 2 !important;
        justify-content: flex-start !important;
    }

    .users-table th:nth-child(4),
    .users-table td:nth-child(4),
    .users-table .actions-col,
    .users-table .users-actions {
        min-width: 235px !important;
    }

    .users-actions .btn-small {
        width: 104px !important;
        min-width: 104px !important;
        max-width: 104px !important;
    }
}

@media (max-width: 760px) {
    .users-filter-card {
        grid-template-columns: 1fr !important;
    }

    .users-filter-actions {
        grid-column: auto !important;
        height: auto !important;
        flex-direction: row !important;
    }

    .users-filter-actions .btn-primary,
    .users-filter-actions .btn-ghost {
        width: 50% !important;
        min-width: 0 !important;
    }
}


/* =========================================================
   HOTFIX FINAL - USUÁRIOS: AÇÕES DENTRO DA TABELA
   ========================================================= */

.users-page-refined {
    overflow: hidden !important;
}

.users-filter-card {
    grid-template-columns: minmax(320px, 1fr) 220px 220px 310px !important;
    align-items: end !important;
}

.users-filter-actions {
    height: 52px !important;
    align-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.users-filter-actions .btn-primary,
.users-filter-actions .btn-ghost {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 12px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.users-list-card {
    overflow: hidden !important;
}

.users-table-wrap {
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    border-radius: 16px !important;
}

.users-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

.users-table th,
.users-table td {
    box-sizing: border-box !important;
}

/* 4 colunas compactas */
.users-table th:nth-child(1),
.users-table td:nth-child(1) {
    width: 46% !important;
    min-width: 0 !important;
}

.users-table th:nth-child(2),
.users-table td:nth-child(2) {
    width: 18% !important;
    min-width: 0 !important;
}

.users-table th:nth-child(3),
.users-table td:nth-child(3) {
    width: 14% !important;
    min-width: 0 !important;
}

.users-table th:nth-child(4),
.users-table td:nth-child(4),
.users-table .actions-col,
.users-table .users-actions {
    width: 22% !important;
    min-width: 0 !important;
    max-width: none !important;
}

.users-table .actions-col {
    text-align: center !important;
}

.users-table td.users-actions {
    display: table-cell !important;
    white-space: normal !important;
    overflow: hidden !important;
}

.users-table td.users-actions {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.users-actions {
    text-align: center !important;
}

.users-actions > .btn-small,
.users-actions > form,
.users-actions > .current-user-chip {
    vertical-align: middle !important;
}

.users-actions .table-action-form {
    display: inline-flex !important;
    margin: 0 0 0 8px !important;
}

.users-actions .btn-small {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 8px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

.current-user-chip {
    width: 72px !important;
    min-width: 72px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 8px !important;
    border-radius: 999px !important;
    color: #a7b5ca !important;
    background: rgba(148, 163, 184, .10) !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.user-identity {
    min-width: 0 !important;
}

.user-identity span:last-child {
    min-width: 0 !important;
}

.user-identity strong,
.user-identity small {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Evita que badges grandes empurrem a coluna de ações */
.role-pill {
    max-width: 150px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

@media (max-width: 1280px) {
    .users-table th:nth-child(1),
    .users-table td:nth-child(1) {
        width: 42% !important;
    }

    .users-table th:nth-child(2),
    .users-table td:nth-child(2) {
        width: 17% !important;
    }

    .users-table th:nth-child(3),
    .users-table td:nth-child(3) {
        width: 14% !important;
    }

    .users-table th:nth-child(4),
    .users-table td:nth-child(4),
    .users-table .actions-col,
    .users-table .users-actions {
        width: 27% !important;
    }
}

@media (max-width: 980px) {
    .users-filter-card {
        grid-template-columns: 1fr !important;
    }

    .users-filter-actions {
        height: auto !important;
    }

    .users-filter-actions .btn-primary,
    .users-filter-actions .btn-ghost {
        width: 140px !important;
    }

    .users-table-wrap {
        overflow-x: auto !important;
    }

    .users-table {
        min-width: 760px !important;
    }
}


/* =========================================================
   GESTÃO DE PERFIS - REFINO FINAL
   ========================================================= */

.roles-page-refined {
    max-width: 100%;
    margin: 0;
    padding-top: 0;
}

.roles-page-refined .page-header {
    display: none !important;
}

.roles-filter-card,
.roles-create-card,
.roles-list-card {
    border: 1px solid rgba(96, 165, 250, .16) !important;
    background: linear-gradient(180deg, rgba(17, 28, 46, .98), rgba(13, 22, 37, .98)) !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22) !important;
}

.roles-toolbar {
    margin-bottom: 22px !important;
}

.roles-filter-card {
    padding: 24px !important;
    display: grid !important;
    grid-template-columns: minmax(360px, 1fr) 220px 310px !important;
    gap: 20px !important;
    align-items: end !important;
}

.roles-filter-card label {
    display: block !important;
    margin-bottom: 8px !important;
    color: #dbeafe !important;
    font-weight: 700 !important;
}

.role-search-field small {
    display: block !important;
    margin-top: 8px !important;
    color: #8fa3bf !important;
}

.roles-filter-card .search-input-wrap {
    position: relative !important;
}

.roles-filter-card .search-input-wrap span {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #93a4bc !important;
    font-size: 20px !important;
}

.roles-filter-card .search-input-wrap input {
    padding-left: 44px !important;
    min-height: 52px !important;
    width: 100% !important;
}

.roles-filter-card select {
    min-height: 52px !important;
}

.roles-filter-actions {
    height: 52px !important;
    align-self: end !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 12px !important;
}

.roles-filter-actions .btn-primary,
.roles-filter-actions .btn-ghost {
    width: 140px !important;
    min-width: 140px !important;
    height: 52px !important;
    min-height: 52px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    white-space: nowrap !important;
}

.roles-create-card {
    padding: 28px 32px !important;
    margin-bottom: 28px !important;
}

.roles-list-card {
    padding: 28px 32px 24px !important;
}

.roles-create-card .panel-header-simple h2,
.roles-list-card .panel-header-simple h2 {
    margin: 0 0 10px !important;
    font-size: 28px !important;
    line-height: 1.15 !important;
}

.roles-create-card .panel-header-simple p {
    margin: 0 0 18px !important;
    color: #d7e6ff !important;
}

.roles-create-form {
    gap: 22px !important;
}

.roles-create-form input,
.roles-create-form select {
    min-height: 52px !important;
}

.roles-table-wrap {
    margin-top: 14px !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

.roles-table {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
}

.roles-table th,
.roles-table td {
    padding: 16px 18px !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

.roles-table th {
    color: #b8c7dd !important;
    font-size: 13px !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    background: rgba(15, 23, 42, .62) !important;
}

.roles-table tbody tr {
    border-top: 1px solid rgba(148, 163, 184, .12) !important;
}

.roles-table tbody tr:hover {
    background: rgba(37, 99, 235, .08) !important;
}

.roles-table th:nth-child(1),
.roles-table td:nth-child(1) {
    width: 38% !important;
}

.roles-table th:nth-child(2),
.roles-table td:nth-child(2) {
    width: 24% !important;
}

.roles-table th:nth-child(3),
.roles-table td:nth-child(3) {
    width: 14% !important;
}

.roles-table .actions-col,
.roles-table .roles-actions {
    width: 24% !important;
}

.role-name-view {
    color: #e8eef8 !important;
    font-weight: 800 !important;
}

.role-slug-pill {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    color: #bfdbfe !important;
    background: rgba(37, 99, 235, .16) !important;
    border: 1px solid rgba(96, 165, 250, .18) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.roles-actions {
    text-align: left !important;
    white-space: nowrap !important;
}

.roles-actions .table-action-form {
    display: inline-flex !important;
    margin: 0 0 0 8px !important;
}

.roles-actions .btn-small {
    width: 112px !important;
    min-width: 112px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

.role-edit-form {
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.role-edit-form select,
.role-edit-form input {
    min-height: 42px !important;
    max-width: 230px !important;
}

.roles-pagination {
    margin-top: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    color: #a8bad4 !important;
    font-size: 14px !important;
}

@media (max-width: 980px) {
    .roles-filter-card {
        grid-template-columns: 1fr !important;
    }

    .roles-filter-actions {
        height: auto !important;
    }

    .roles-table-wrap {
        overflow-x: auto !important;
    }

    .roles-table {
        min-width: 780px !important;
    }
}


/* =========================================================
   NOTAS FISCAIS - CORREÇÃO FINAL
   ========================================================= */

.invoices-page-refined {
    max-width: 100%;
}

.invoice-filter-card,
.invoice-list-card,
.invoice-form-card {
    border: 1px solid rgba(96, 165, 250, .16) !important;
    background: linear-gradient(180deg, rgba(17, 28, 46, .98), rgba(13, 22, 37, .98)) !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22) !important;
}

.invoice-filter-card {
    padding: 24px !important;
    margin-bottom: 24px !important;
}

.invoice-filter-form {
    display: grid !important;
    grid-template-columns: minmax(320px, 1fr) 260px auto !important;
    gap: 18px !important;
    align-items: end !important;
}

.invoice-filter-form input,
.invoice-filter-form select {
    min-height: 52px !important;
}

.invoice-filter-actions {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

.invoice-filter-actions .btn-primary,
.invoice-filter-actions .btn-secondary {
    min-height: 52px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

.invoice-list-card {
    padding: 28px !important;
}

.invoice-table th,
.invoice-table td {
    vertical-align: middle !important;
}

.invoice-confirm-form {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

.invoice-confirm-form input {
    min-height: 40px !important;
    max-width: 220px !important;
}

.invoice-confirm-form button {
    min-height: 40px !important;
}

.invoice-create-page .invoice-page-actions {
    display: flex !important;
    justify-content: flex-end !important;
    margin-bottom: 18px !important;
}

.invoice-form-card {
    padding: 28px !important;
}

.invoice-form-card input,
.invoice-form-card textarea {
    min-height: 52px !important;
}

.invoice-form-card textarea {
    min-height: 160px !important;
}

@media (max-width: 980px) {
    .invoice-filter-form {
        grid-template-columns: 1fr !important;
    }

    .invoice-filter-actions {
        align-items: stretch !important;
    }
}


.invoice-row-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.invoice-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.invoice-detail-grid > div,
.invoice-notes-box {
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    padding: 14px;
}

.invoice-detail-grid strong,
.invoice-notes-box strong {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94a3b8;
    margin-bottom: 6px;
}

.invoice-detail-grid span,
.invoice-notes-box p {
    color: #e5e7eb;
    margin: 0;
}

.invoice-notes-box {
    margin-top: 16px;
}

@media (max-width: 900px) {
    .invoice-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* Ajustes: paginação e menção inteligente na observação/justificativa */
.mention-wrapper { position: relative !important; }
.status-form .mention-box { margin-top: 6px !important; }
.users-pagination .pagination-controls { margin-left: auto !important; }
.page-btn.disabled { opacity: .45 !important; pointer-events: none !important; }

/* =========================================================
   APROVAÇÕES - seleção em lote no final da lista
   ========================================================= */
.approvals-panel {
    display: block !important;
    overflow: hidden !important;
}

.approvals-list-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 18px !important;
    margin-bottom: 18px !important;
}

.approvals-list-header h2 {
    margin: 0 0 6px 0 !important;
    font-size: 1.35rem !important;
}

.approvals-list-header p {
    margin: 0 !important;
    color: var(--muted, #9fb4d0) !important;
}

.selection-counter {
    border: 1px solid rgba(96,165,250,.28) !important;
    background: rgba(37,99,235,.12) !important;
    color: #dbeafe !important;
    border-radius: 999px !important;
    padding: 8px 14px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

.approvals-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    border-radius: 18px !important;
}

.approvals-table {
    width: 100% !important;
    min-width: 1180px !important;
}

.approvals-table .check-col {
    width: 52px !important;
    text-align: center !important;
}

.approval-row:hover {
    background: rgba(37,99,235,.07) !important;
}

.approval-title-cell {
    min-width: 260px !important;
    max-width: 360px !important;
}

.approval-batch-footer {
    margin-top: 18px !important;
    padding: 18px !important;
    border: 1px solid rgba(96,165,250,.22) !important;
    border-radius: 18px !important;
    background: rgba(2,8,23,.30) !important;
    display: grid !important;
    grid-template-columns: minmax(210px, 280px) minmax(260px, 1fr) auto !important;
    gap: 14px !important;
    align-items: center !important;
}

.batch-footer-info {
    display: grid !important;
    gap: 4px !important;
}

.batch-footer-info strong {
    color: #fff !important;
    font-size: 1rem !important;
}

.batch-footer-info span {
    color: var(--muted, #9fb4d0) !important;
    font-size: .92rem !important;
}

.approval-batch-footer input {
    width: 100% !important;
    max-width: none !important;
}

.approval-batch-footer button:disabled {
    opacity: .55 !important;
    cursor: not-allowed !important;
    filter: grayscale(.15) !important;
}

@media (max-width: 900px) {
    .approvals-list-header,
    .approval-batch-footer {
        grid-template-columns: 1fr !important;
        display: grid !important;
    }
    .selection-counter {
        justify-self: start !important;
    }
}