/*
 * Sistema de Manutenção Preventiva — folha de estilos base.
 *
 * Direção visual: painel de controle industrial. Base grafite/azul-petróleo
 * na navegação (referência a quadros de comando de maquinário pesado),
 * conteúdo em tema claro neutro, acento em âmbar (cor de atenção/segurança
 * associada a equipamentos pesados, sem repetir o laranja-argila padrão
 * de interfaces genéricas geradas por IA).
 *
 * Estrutura em variáveis CSS para o modo claro/escuro, alternável pelo
 * botão na navbar: cada componente lê as variáveis, e o bloco
 * [data-bs-theme="dark"] mais abaixo as redefine — nenhum componente
 * precisa ser reescrito por tema.
 */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
    /* Paleta */
    --mp-bg-page: #F2F3F6;
    --mp-bg-surface: #FFFFFF;
    --mp-bg-sidebar: #1B2330;
    --mp-bg-sidebar-active: #2A3547;
    --mp-text-primary: #1D2129;
    --mp-text-secondary: #667085;
    --mp-text-muted: #98A2B3;
    --mp-text-on-sidebar: #C6CCD8;
    --mp-text-on-sidebar-muted: #7C8598;
    --mp-border: #E4E7EC;

    --mp-accent: #DB8B26;
    --mp-accent-dark: #B36F1A;
    --mp-accent-contrast: #4A2E05;

    --mp-success: #1D8A5E;
    --mp-success-bg: #E4F5EE;
    --mp-warning: #C98A1C;
    --mp-warning-bg: #FBF0DC;
    --mp-danger: #C1382E;
    --mp-danger-bg: #FBEAE8;
    --mp-info: #3969A8;
    --mp-info-bg: #E7EFF8;
    --mp-neutral: #667085;
    --mp-neutral-bg: #EEF0F3;

    --mp-radius: 10px;
    --mp-radius-sm: 6px;
    --mp-sidebar-width: 264px;
    --mp-navbar-height: 64px;

    --mp-font-heading: 'Barlow Condensed', 'Inter', sans-serif;
    --mp-font-body: 'Inter', system-ui, sans-serif;

    /* Mapeamento para variáveis do Bootstrap */
    --bs-body-font-family: var(--mp-font-body);
    --bs-body-bg: var(--mp-bg-page);
    --bs-body-color: var(--mp-text-primary);
    --bs-border-color: var(--mp-border);
    --bs-primary: var(--mp-accent);
    --bs-primary-rgb: 219, 139, 38;
}

/* Modo escuro, ativado via botão na navbar (ver app.js: initToggleTema).
   A escolha do usuário é salva em localStorage e reaplicada a cada
   carregamento de página (ver header.php) para não piscar o tema errado. */
[data-bs-theme="dark"] {
    --mp-bg-page: #12161D;
    --mp-bg-surface: #1B2330;
    --mp-text-primary: #E7E9EE;
    --mp-text-secondary: #9AA2B1;
    --mp-text-muted: #6E7686;
    --mp-border: #2B3341;

    --mp-success: #4ADE94;
    --mp-success-bg: rgba(74, 222, 148, 0.14);
    --mp-warning: #F2B84B;
    --mp-warning-bg: rgba(242, 184, 75, 0.14);
    --mp-danger: #F2867A;
    --mp-danger-bg: rgba(242, 134, 122, 0.16);
    --mp-info: #7BAEE8;
    --mp-info-bg: rgba(123, 174, 232, 0.14);
    --mp-neutral: #9AA2B1;
    --mp-neutral-bg: rgba(154, 162, 177, 0.14);

    --bs-body-bg: var(--mp-bg-page);
    --bs-body-color: var(--mp-text-primary);
    --bs-border-color: var(--mp-border);
}

[data-bs-theme="dark"] .mp-icon-btn,
[data-bs-theme="dark"] .mp-user-chip,
[data-bs-theme="dark"] .mp-navbar-search .form-control {
    background-color: var(--mp-bg-page);
}

[data-bs-theme="dark"] .table.mp-table tbody tr.mp-row-atrasada {
    background-color: rgba(242, 134, 122, 0.10);
}

html, body {
    height: 100%;
}

body {
    font-family: var(--mp-font-body);
    background-color: var(--mp-bg-page);
    color: var(--mp-text-primary);
}

h1, h2, h3, h4, h5, .mp-heading {
    font-family: var(--mp-font-heading);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--mp-text-primary);
}

a {
    color: var(--mp-accent-dark);
}

/* ===== Layout geral ===== */

.mp-app {
    display: flex;
    min-height: 100vh;
}

.mp-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

@media (min-width: 992px) {
    .mp-content {
        margin-left: var(--mp-sidebar-width);
    }
}

.mp-main {
    flex: 1;
    padding: 24px;
}

/* ===== Sidebar ===== */

.mp-sidebar {
    background-color: var(--mp-bg-sidebar);
    width: var(--mp-sidebar-width);
    display: flex;
    flex-direction: column;
}

@media (min-width: 992px) {
    .mp-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1030;
    }
}

.mp-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--mp-navbar-height);
    padding: 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.mp-sidebar-brand .mp-logo-mark {
    width: 32px;
    height: 32px;
    border-radius: var(--mp-radius-sm);
    background: var(--mp-accent);
    color: var(--mp-accent-contrast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.mp-sidebar-brand-text {
    font-family: var(--mp-font-heading);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.15;
    color: #fff;
}

.mp-sidebar-brand-text small {
    display: block;
    font-family: var(--mp-font-body);
    font-weight: 400;
    font-size: 11px;
    color: var(--mp-text-on-sidebar-muted);
}

.mp-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 16px 12px;
}

.mp-nav-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mp-text-on-sidebar-muted);
    padding: 16px 12px 6px;
}

.mp-nav-label:first-child {
    padding-top: 4px;
}

.mp-nav-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
}

.mp-nav-group-chevron {
    font-size: 10px;
    transition: transform 0.15s ease;
}

.mp-nav-group-toggle.mp-nav-group-colapsado .mp-nav-group-chevron {
    transform: rotate(-90deg);
}

.mp-nav-group {
    overflow: hidden;
}

.mp-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--mp-radius-sm);
    color: var(--mp-text-on-sidebar);
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 2px;
    transition: background-color .12s ease, color .12s ease;
}

.mp-nav-link i {
    font-size: 17px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.mp-nav-link:hover {
    background-color: var(--mp-bg-sidebar-active);
    color: #fff;
}

.mp-nav-link.active {
    background-color: var(--mp-accent);
    color: var(--mp-accent-contrast);
    font-weight: 500;
}

.mp-nav-link.disabled {
    color: var(--mp-text-on-sidebar-muted);
    cursor: default;
    pointer-events: none;
    opacity: .55;
}

.mp-nav-link .badge-soon {
    margin-left: auto;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--mp-text-on-sidebar-muted);
}

.mp-sidebar-footer {
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
    color: var(--mp-text-on-sidebar-muted);
    flex-shrink: 0;
}

/* ===== Navbar superior ===== */

.mp-navbar {
    height: var(--mp-navbar-height);
    background-color: var(--mp-bg-surface);
    border-bottom: 1px solid var(--mp-border);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.mp-navbar-toggle {
    border: none;
    background: transparent;
    font-size: 22px;
    color: var(--mp-text-secondary);
    line-height: 1;
}

@media (min-width: 992px) {
    .mp-navbar-toggle {
        display: none;
    }
}

.mp-navbar-search {
    flex: 1;
    max-width: 420px;
}

.mp-navbar-search .form-control {
    background-color: var(--mp-bg-page);
    border-color: var(--mp-border);
}

.mp-navbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.mp-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: var(--mp-radius-sm);
    border: 1px solid var(--mp-border);
    background: var(--mp-bg-surface);
    color: var(--mp-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.mp-icon-btn:hover {
    background-color: var(--mp-bg-page);
    color: var(--mp-text-primary);
}

.mp-user-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 5px;
    border-radius: 24px;
    border: 1px solid var(--mp-border);
    background: var(--mp-bg-surface);
    text-decoration: none;
    color: var(--mp-text-primary);
}

.mp-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mp-accent);
    color: var(--mp-accent-contrast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.mp-user-chip span {
    font-size: 13px;
    font-weight: 500;
}

/* ===== Page header (título + breadcrumb + ações) ===== */

.mp-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.mp-breadcrumb {
    font-size: 13px;
    color: var(--mp-text-muted);
    margin-bottom: 4px;
}

.mp-breadcrumb a {
    color: var(--mp-text-secondary);
    text-decoration: none;
}

.mp-breadcrumb a:hover {
    color: var(--mp-accent-dark);
}

.mp-page-title {
    font-size: 24px;
    margin: 0;
}

/* ===== Cards ===== */

.mp-card {
    background: var(--mp-bg-surface);
    border: 1px solid var(--mp-border);
    border-radius: 12px;
    padding: 20px;
}

.mp-kpi-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.mp-kpi-value {
    font-family: var(--mp-font-heading);
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
    margin: 6px 0 4px;
}

.mp-kpi-label {
    font-size: 13px;
    color: var(--mp-text-secondary);
}

.mp-kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--mp-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}

.mp-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.mp-card-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    font-family: var(--mp-font-body);
}

.mp-card-subtitle {
    font-size: 12.5px;
    color: var(--mp-text-muted);
}

/* ===== Tabelas ===== */

.mp-table-wrap {
    overflow-x: auto;
}

.table.mp-table {
    margin-bottom: 0;
    font-size: 13.5px;
}

.table.mp-table thead th {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--mp-text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--mp-border);
    white-space: nowrap;
}

.table.mp-table td {
    vertical-align: middle;
    color: var(--mp-text-primary);
}

.table.mp-table tbody tr.mp-row-atrasada {
    background-color: var(--mp-danger-bg);
}

.mp-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--mp-text-muted);
}

.mp-empty-state i {
    font-size: 30px;
    margin-bottom: 10px;
    display: block;
}

/* ===== Badges de status ===== */

.mp-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 20px;
}

.mp-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.mp-badge-success { background: var(--mp-success-bg); color: var(--mp-success); }
.mp-badge-warning { background: var(--mp-warning-bg); color: var(--mp-warning); }
.mp-badge-danger  { background: var(--mp-danger-bg);  color: var(--mp-danger); }
.mp-badge-info    { background: var(--mp-info-bg);    color: var(--mp-info); }
.mp-badge-neutral { background: var(--mp-neutral-bg); color: var(--mp-neutral); }

/* ===== Botões (acento da marca) ===== */

.btn-mp-accent {
    background-color: var(--mp-accent);
    border-color: var(--mp-accent);
    color: var(--mp-accent-contrast);
    font-weight: 500;
}

.btn-mp-accent:hover {
    background-color: var(--mp-accent-dark);
    border-color: var(--mp-accent-dark);
    color: #fff;
}

/* ===== Toasts ===== */

.mp-toast-container {
    z-index: 1080;
}

/* ===== Utilidades ===== */

.mp-text-muted { color: var(--mp-text-muted) !important; }
.mp-fw-heading { font-family: var(--mp-font-heading); }

@media (max-width: 991.98px) {
    .mp-main {
        padding: 16px;
    }
}