:root {
    --cmmj-red: #AD1A05;
    --cmmj-red-dark: #8F1504;
    --cmmj-red-soft: #FFF1EF;
    --bg: #F3F4F6;
    --panel: #FFFFFF;
    --panel-soft: #F9FAFB;
    --text: #1F2937;
    --muted: #6B7280;
    --border: #E5E7EB;
    --border-dark: #D1D5DB;
    --green: #047857;
    --green-soft: #ECFDF5;
    --orange: #C2410C;
    --orange-soft: #FFF7ED;
    --red: #991B1B;
    --red-soft: #FEF2F2;
    --blue: #1D4ED8;
    --blue-soft: #EFF6FF;
    --shadow: 0 4px 14px rgba(15, 23, 42, .08);
    --radius: 12px;
    --font: "Segoe UI", Arial, Helvetica, sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0 !important;
    background: var(--bg) !important;
    color: var(--text) !important;
    font-family: var(--font) !important;
    font-size: 14px;
}

header {
    background: var(--cmmj-red) !important;
    color: #fff !important;
    padding: 18px 26px !important;
    border-bottom: 4px solid var(--cmmj-red-dark);
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    flex-wrap: wrap !important;
    box-shadow: none !important;
}

header h1 {
    margin: 0 !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: -.02em;
}

header p {
    margin: 5px 0 0 !important;
    color: rgba(255,255,255,.90) !important;
}

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

.header-brand-cmmj img {
    height: 42px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
}

.header-brand-text {
    display: none;
}

main {
    width: min(1440px, calc(100% - 32px));
    margin: 0 auto !important;
    padding: 22px 0 42px !important;
}

.box,
.card,
.person-card,
.dashboard-card,
.modulo-card {
    background: var(--panel) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
}

.box {
    padding: 20px !important;
    margin-bottom: 18px !important;
}

.box h2,
.card h2 {
    margin: 0 0 14px !important;
    color: var(--text) !important;
    font-size: 19px !important;
    font-weight: 800 !important;
}

.box h3 {
    color: var(--text) !important;
}

.top-actions,
.actions,
.tabs,
.pagination {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    margin-bottom: 16px !important;
}

.link-btn,
button,
input[type="submit"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 9px 13px !important;
    border-radius: 9px !important;
    border: 1px solid var(--border-dark) !important;
    background: #fff !important;
    color: var(--text) !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.link-btn:hover,
button:hover,
input[type="submit"]:hover {
    background: var(--panel-soft) !important;
    border-color: #BFC5CF !important;
    transform: none !important;
    box-shadow: none !important;
}

.link-btn.primary,
.primary,
button.primary,
button,
input[type="submit"] {
    background: var(--cmmj-red) !important;
    color: #fff !important;
    border-color: var(--cmmj-red) !important;
}

.link-btn.primary:hover,
.primary:hover,
button:hover,
input[type="submit"]:hover {
    background: var(--cmmj-red-dark) !important;
    border-color: var(--cmmj-red-dark) !important;
}

.secondary,
button.secondary {
    background: #374151 !important;
    color: #fff !important;
    border-color: #374151 !important;
}

.success,
button.success {
    background: var(--green) !important;
    color: #fff !important;
    border-color: var(--green) !important;
}

.danger,
button.danger {
    background: var(--red) !important;
    color: #fff !important;
    border-color: var(--red) !important;
}

.warning,
button.warning {
    background: #EA580C !important;
    color: #fff !important;
    border-color: #EA580C !important;
}

label {
    display: block;
    font-weight: 700 !important;
    color: #374151 !important;
    margin-bottom: 5px !important;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--border-dark) !important;
    border-radius: 8px !important;
    padding: 10px 11px !important;
    background: #fff !important;
    color: var(--text) !important;
    font-family: var(--font) !important;
    font-size: 14px !important;
}

textarea {
    min-height: 90px;
}

input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--cmmj-red) !important;
    box-shadow: 0 0 0 3px rgba(173, 26, 5, .12) !important;
}

.grid,
.info-grid,
.filters,
.search-grid,
.search-simple,
.search {
    gap: 12px !important;
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    background: #fff;
}

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

th,
td {
    padding: 10px 9px !important;
    border-bottom: 1px solid var(--border) !important;
    text-align: left;
    vertical-align: top;
    font-size: 13px !important;
}

th {
    background: #F3F4F6 !important;
    color: #374151 !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

tbody tr:hover {
    background: #FFFAFA;
}

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

.badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 999px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    white-space: nowrap;
}

.badge.ok,
.badge.green {
    background: var(--green-soft) !important;
    color: var(--green) !important;
}

.badge.warn,
.badge.warning,
.badge.orange {
    background: var(--orange-soft) !important;
    color: var(--orange) !important;
}

.badge.red,
.badge.danger {
    background: var(--red-soft) !important;
    color: var(--red) !important;
}

.badge.info,
.badge.blue {
    background: var(--blue-soft) !important;
    color: var(--blue) !important;
}

.badge.dark {
    background: #111827 !important;
    color: #fff !important;
}

.alert-ok,
.alert-success {
    background: var(--green-soft) !important;
    color: #065F46 !important;
    border: 1px solid #10B981 !important;
    border-radius: 10px !important;
    padding: 12px !important;
}

.alert-erro,
.erro {
    background: var(--red-soft) !important;
    color: var(--red) !important;
    border: 1px solid #EF4444 !important;
    border-radius: 10px !important;
    padding: 12px !important;
}

.person-card {
    display: block !important;
    padding: 14px !important;
    color: var(--text) !important;
    text-decoration: none !important;
}

.person-card:hover {
    border-color: var(--cmmj-red) !important;
}

.floating-cart {
    border-radius: 12px !important;
    box-shadow: 0 8px 28px rgba(15,23,42,.22) !important;
}

.cart-header {
    background: var(--cmmj-red) !important;
}

.divergencia-float {
    border-radius: 12px !important;
    box-shadow: 0 8px 28px rgba(15,23,42,.18) !important;
}

details summary {
    cursor: pointer;
    color: var(--cmmj-red);
    font-weight: 700;
}

/* O seletor permanece no CSS clássico para que o usuário sempre consiga
   retornar à interface nova, inclusive na tela de login. */
.ui-mode-toggle {
    width: auto !important;
    white-space: nowrap;
}

.ui-mode-toggle__icon {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 7px;
    border-radius: 50%;
    background: #fff;
}

.ui-mode-toggle--floating {
    position: fixed !important;
    right: 18px;
    bottom: 18px;
    z-index: 1000;
    width: auto !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .2) !important;
}

.logout-form {
    display: inline-block !important;
    margin: 0 !important;
}

.logout-form .logout-link {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    font: inherit !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

pre {
    white-space: pre-wrap;
    background: #F9FAFB;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
}

@media (max-width: 760px) {
    main {
        width: min(100% - 22px, 1440px);
        padding-top: 16px !important;
    }

    header {
        padding: 16px !important;
    }

    header h1 {
        font-size: 21px !important;
    }

    .box {
        padding: 16px !important;
    }

    .top-actions .link-btn,
    .actions .link-btn {
        width: auto;
    }
}