:root {
    --hd-primary: #0d47a1;
    --hd-primary-light: #5472d3;
    --hd-primary-dark: #002171;
    --hd-surface: #f5f7fa;
    --hd-card-bg: #ffffff;
    --hd-text: #1a237e;
    --hd-text-secondary: #5c6bc0;
}

html, body {
    font-family: 'DM Sans', sans-serif;
    background: var(--hd-surface);
    color: var(--hd-text);
    margin: 0;
}

/* Layout sem MudDrawer/MudCollapse - evita erros de JS interop */
.app-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header" "sidebar main";
    min-height: 100vh;
}

.app-header {
    grid-area: header;
    background: var(--hd-primary);
    color: #fff;
    padding: 0;
    height: 64px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.app-brand {
    font-weight: 700;
    font-size: 1.25rem;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    width: 220px;
    min-width: 220px;
    padding: 0 12px;
    box-sizing: border-box;
}

.app-brand img.app-brand-logo,
.app-brand-logo {
    height: 64px !important;
    max-height: 64px !important;
    width: auto !important;
    max-width: 100%;
    display: block;
    object-fit: contain;
    margin: 13px auto 0 auto;
}

.app-user {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 24px;
}

.app-user-name {
    font-size: 0.875rem;
    opacity: 0.95;
}

.app-logout {
    background: rgba(255,255,255,0.2);
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.875rem;
    cursor: pointer;
}

.app-logout:hover {
    background: rgba(255,255,255,0.3);
}

.app-sidebar {
    grid-area: sidebar;
    background: var(--hd-card-bg);
    border-right: 1px solid #e0e0e0;
    padding: 16px 0;
}

.app-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.app-nav-link {
    padding: 10px 24px;
    color: var(--hd-text);
    text-decoration: none;
    font-size: 0.9375rem;
}

.app-nav-link:hover {
    background: rgba(13, 71, 161, 0.08);
    color: var(--hd-primary);
}

.app-nav-link.active {
    background: rgba(13, 71, 161, 0.12);
    color: var(--hd-primary);
    font-weight: 500;
}

.app-nav-group-title {
    padding: 12px 24px 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--hd-text-secondary);
}

.app-main {
    grid-area: main;
    padding: 24px;
    overflow: auto;
}

.app-error {
    padding: 16px;
    background: #ffebee;
    color: #c62828;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .app-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "header" "main";
    }
    .app-sidebar { display: none; }
    .app-main { padding: 16px; }
}

.mud-main-content {
    padding: 0;
}

/* Campo de descrição do chamado: placeholder quando vazio e imagens coladas */
[contenteditable][data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: #6c757d;
}
.description-body img {
    max-width: 100%;
    height: auto;
}

/* Dashboard: cores de fundo diferentes por card */
.dashboard-card-1 { background: linear-gradient(135deg, #0d47a1 0%, #1565c0 100%); color: #fff; border: none; }
.dashboard-card-1 .dashboard-card-label { color: rgba(255,255,255,0.9); }

.dashboard-card-2 { background: linear-gradient(135deg, #2e7d32 0%, #43a047 100%); color: #fff; border: none; }
.dashboard-card-2 .dashboard-card-label { color: rgba(255,255,255,0.9); }

.dashboard-card-3 { background: linear-gradient(135deg, #0277bd 0%, #0288d1 100%); color: #fff; border: none; }
.dashboard-card-3 .dashboard-card-label { color: rgba(255,255,255,0.9); }

.dashboard-card-4 { background: linear-gradient(135deg, #e65100 0%, #f57c00 100%); color: #fff; border: none; }
.dashboard-card-4 .dashboard-card-label { color: rgba(255,255,255,0.9); }

.dashboard-card-5 { background: #e3f2fd; border: none; }
.dashboard-card-5 .dashboard-card-header-5 { background: #bbdefb; color: #0d47a1; border-bottom: 1px solid #90caf9; }

.dashboard-card-6 { background: #e8f5e9; border: none; }
.dashboard-card-6 .dashboard-card-header-6 { background: #c8e6c9; color: #1b5e20; border-bottom: 1px solid #a5d6a7; }

.dashboard-card-7 { background: #f3e5f5; border: none; }
.dashboard-card-7 .dashboard-card-header-7 { background: #e1bee7; color: #4a148c; border-bottom: 1px solid #ce93d8; }