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

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f4f6fa;
    color: #1e293b;
}

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

button {
    cursor: pointer;
}

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

/* SIDEBAR */

.sidebar {
    width: 245px;
    background: #111c32;
    color: #fff;
    padding: 28px 18px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 55px;
    padding-left: 8px;
}

.logo-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    flex-shrink: 0;
}

.logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.logo h2 {
    font-size: 18px;
}

.logo span {
    display: block;
    color: #94a3b8;
    font-size: 11px;
    margin-top: 4px;
}

.nav-title {
    color: #64748b;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 0 0 15px 10px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 12px;
    margin-bottom: 7px;
    border: none;
    border-radius: 7px;
    color: #b8c4d8;
    background: transparent;
    text-align: left;
    font-size: 13px;
    transition: 0.2s;
}

.nav-item:hover,
.nav-item.active {
    background: #233653;
    color: #fff;
}

.nav-item.active {
    border-left: 3px solid #3b82f6;
}

.nav-item > span:first-child {
    font-size: 18px;
}

.nav-count {
    margin-left: auto;
    background: #334766;
    padding: 3px 7px;
    border-radius: 10px;
    font-size: 11px;
}

.sidebar-footer {
    margin-top: auto;
    color: #94a3b8;
    font-size: 11px;
    padding: 15px 5px;
    border-top: 1px solid #26354b;
}

.online-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #22c55e;
    border-radius: 50%;
    margin-right: 7px;
}


/* CONTEÚDO PRINCIPAL */

.main-content {
    flex: 1;
    min-width: 0;
    padding: 30px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.topbar h1 {
    font-size: 23px;
    color: #17243b;
}

.topbar p {
    color: #8490a3;
    font-size: 13px;
    margin-top: 7px;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #dbeafe;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.user-profile strong {
    font-size: 12px;
    display: block;
}

.user-profile small {
    color: #8490a3;
    font-size: 11px;
}


/* CARDS DE INDICADORES */

.dashboard {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17px;
    margin-bottom: 25px;
}

.stat-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #e8edf4;
    display: flex;
    align-items: center;
    gap: 15px;
}

.stat-icon {
    width: 43px;
    height: 43px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.stat-icon.blue {
    background: #eff6ff;
    color: #2563eb;
}

.stat-icon.orange {
    background: #fff7ed;
    color: #ea580c;
}

.stat-icon.green {
    background: #f0fdf4;
    color: #16a34a;
}

.stat-card span {
    color: #8490a3;
    font-size: 12px;
}

.stat-card h2 {
    font-size: 23px;
    margin-top: 5px;
}


/* ORGANIZAÇÃO DOS PAINÉIS */

.workspace {
    display: grid;
    grid-template-columns: minmax(300px, 0.85fr) minmax(350px, 1.15fr);
    gap: 20px;
    align-items: start;
}

.left-column,
.right-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.panel {
    background: #fff;
    border: 1px solid #e8edf4;
    border-radius: 10px;
    padding: 22px;
    min-width: 0;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.panel-header h2 {
    font-size: 16px;
    color: #1e293b;
}

.panel-header p {
    color: #94a3b8;
    font-size: 11px;
    margin-top: 6px;
}

.header-icon {
    color: #2563eb;
    background: #eff6ff;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-size: 20px;
}


/* FORMULÁRIO */

.form-group {
    margin-bottom: 17px;
}

.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #475569;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #dce3ed;
    border-radius: 6px;
    outline: none;
    background: #fff;
    color: #334155;
    font-size: 12px;
    transition: 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px #dbeafe;
}

.form-group textarea {
    resize: vertical;
    min-height: 90px;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #aab4c2;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.primary-button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 6px;
    background: #2563eb;
    color: white;
    font-size: 12px;
    font-weight: bold;
    transition: 0.2s;
}

.primary-button:hover {
    background: #1d4ed8;
}


/* PESQUISA */

.search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e2e8f0;
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 15px;
    color: #94a3b8;
}

.search-box input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 12px;
    color: #334155;
}


/* LISTA DE CHAMADOS */

.ticket-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-height: 430px;
    overflow-y: auto;
}

.ticket-item {
    border: 1px solid #e8edf4;
    border-radius: 7px;
    padding: 13px;
    cursor: pointer;
    transition: 0.2s;
}

.ticket-item:hover {
    border-color: #93baf8;
    background: #f8fbff;
}

.ticket-item.selected {
    border-color: #3b82f6;
    background: #eff6ff;
}

.ticket-id {
    font-size: 10px;
    color: #94a3b8;
    margin-bottom: 5px;
}

.ticket-title {
    font-size: 13px;
    margin-bottom: 5px;
    color: #1e293b;
}

.ticket-requester {
    font-size: 11px;
    color: #8490a3;
    margin-bottom: 10px;
}

.status-tag,
.priority-tag {
    display: inline-block;
    padding: 4px 7px;
    border-radius: 4px;
    font-size: 10px;
    margin-right: 5px;
    font-weight: 600;
}

.status-tag {
    background: #eff6ff;
    color: #2563eb;
}

.status-finalizado {
    background: #dcfce7;
    color: #15803d;
}

.status-em-análise,
.status-em-análise {
    background: #fef3c7;
    color: #92400e;
}

.priority-baixa {
    background: #f1f5f9;
    color: #475569;
}

.priority-média {
    background: #fef3c7;
    color: #92400e;
}

.priority-alta {
    background: #ffedd5;
    color: #c2410c;
}

.priority-crítica {
    background: #fee2e2;
    color: #b91c1c;
}

.empty-message {
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
    padding: 30px 10px;
}


/* DETALHES */

.ticket-details {
    min-height: 100px;
}

.details-empty {
    text-align: center;
    color: #94a3b8;
    padding: 25px 10px;
}

.details-empty span {
    font-size: 30px;
    display: block;
    margin-bottom: 10px;
}

.details-empty p {
    font-size: 12px;
}

.details-content h2 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #1e293b;
}

.details-content > p {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
    line-height: 1.5;
}

.ticket-description {
    background: #f8fafc;
    border-radius: 6px;
    padding: 13px;
    margin-top: 15px;
    white-space: pre-wrap;
}


/* ALTERAÇÃO DE STATUS */

.status-management {
    background: #f8fafc;
    border-radius: 7px;
    padding: 13px;
    margin: 18px 0;
}

.status-management label {
    display: block;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 9px;
}

.status-management select {
    width: 100%;
    padding: 10px;
    border: 1px solid #dce3ed;
    border-radius: 5px;
    background: white;
    font-size: 12px;
    margin-bottom: 9px;
}

.update-status-button {
    width: 100%;
    background: #2563eb;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
}

.update-status-button:hover {
    background: #1d4ed8;
}


/* CONVERSA */

.conversation {
    margin-top: 22px;
    border-top: 1px solid #e8edf4;
    padding-top: 18px;
}

.conversation h3 {
    font-size: 14px;
    margin-bottom: 15px;
}

.messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 260px;
    overflow-y: auto;
}

.message {
    background: #f8fafc;
    border: 1px solid #e8edf4;
    padding: 12px;
    border-radius: 7px;
}

.message strong {
    display: block;
    font-size: 11px;
    color: #334155;
    margin-bottom: 7px;
}

.message p {
    font-size: 12px;
    color: #475569;
    line-height: 1.5;
    white-space: pre-wrap;
}

.message small {
    display: block;
    font-size: 10px;
    color: #94a3b8;
    margin-top: 8px;
}

.reply-form {
    margin-top: 15px;
}

.reply-form textarea {
    width: 100%;
    min-height: 75px;
    padding: 11px;
    border: 1px solid #dce3ed;
    border-radius: 6px;
    resize: vertical;
    font-size: 12px;
    outline: none;
}

.reply-form textarea:focus {
    border-color: #3b82f6;
}

.reply-button {
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    margin-top: 8px;
    font-size: 12px;
    font-weight: bold;
}

.reply-button:hover {
    background: #1d4ed8;
}

.closed-message {
    color: #15803d;
    font-size: 11px;
    margin-top: 12px;
}


/* EXCLUSÃO */

.delete-button {
    background: #fff;
    color: #dc2626;
    border: 1px solid #fecaca;
    padding: 10px 13px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 15px;
    width: 100%;
    transition: 0.2s;
}

.delete-button:hover {
    background: #fef2f2;
    border-color: #dc2626;
}


/* RODAPÉ */

.footer {
    color: #94a3b8;
    font-size: 10px;
    text-align: center;
    padding: 25px 0 5px;
}


/* RESPONSIVIDADE */

@media (max-width: 1050px) {
    .workspace {
        grid-template-columns: 1fr;
    }

    .dashboard {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 700px) {
    .sidebar {
        width: 65px;
        padding: 20px 8px;
    }

    .logo {
        padding: 0;
        justify-content: center;
    }

    .logo > div:last-child,
    .nav-title,
    .nav-item {
        font-size: 0;
    }

    .nav-item {
        justify-content: center;
        padding: 13px 5px;
    }

    .nav-item > span:first-child {
        font-size: 18px;
    }

    .nav-count {
        display: none;
    }

    .sidebar-footer {
        font-size: 0;
        text-align: center;
    }

    .online-dot {
        margin: 0;
    }

    .main-content {
        padding: 18px 12px;
    }

    .topbar h1 {
        font-size: 18px;
    }

    .dashboard {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .panel {
        padding: 16px;
    }

    .logo-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
    }

    .logo-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

}

/* Formulário de encerramento e resumo da solução */
.finalization-form{margin-top:14px;padding:16px;background:#f0f7fc;border:1px solid #cfe2f1;border-radius:14px}
.finalization-form h3,.saved-solution-summary h3{margin:0 0 10px;color:#2E86C4;font-size:15px}
.finalization-form textarea{display:block;width:100%;min-height:76px;margin:9px 0;padding:11px 12px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;font:inherit;font-size:14px;resize:vertical}
.finalization-form textarea:focus{outline:2px solid rgba(46,134,196,.25);border-color:#2E86C4}
.saved-solution-summary,.ticket-checklist-summary{margin:16px 0;padding:14px 16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px}
.saved-solution-summary p,.ticket-checklist-summary p{margin:6px 0;line-height:1.5;font-size:13px}

/* Avisos operacionais de inspeção */
.inspection-alerts[hidden]{display:none!important}.inspection-alerts{border:1px solid #e5cc91;background:#fffaf0;border-radius:13px;padding:15px 17px;margin:8px 0 22px;color:#654d25;box-shadow:0 5px 15px rgba(27,63,92,.06)}
.inspection-alert-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;border-bottom:1px solid #ead9b4;padding-bottom:11px;margin-bottom:7px}.inspection-alert-header strong{font-size:17px;color:#5d461b}.inspection-alert-header p{font-size:13px;color:#746140;margin:4px 0 0}.inspection-alert-header button{background:#fff;border:1px solid #c99c4f;border-radius:8px;color:#76511a;padding:9px 12px;cursor:pointer;font-weight:750}
.inspection-alert-row{display:flex;align-items:center;flex-wrap:wrap;gap:9px;font-size:13px;padding:11px 4px;border-bottom:1px solid #f1e8d7}.inspection-alert-row:last-child{border-bottom:0}.inspection-alert-row strong{color:#384f61}.inspection-alert-row small{font-size:12px;flex-basis:100%;color:#665e4b}.inspection-alert-row>span:first-child{font-size:12px;font-weight:750;border-radius:14px;padding:4px 9px}.inspection-alert-row.is-late>span:first-child{background:#ffe2e4;color:#b12539}.inspection-alert-row.is-upcoming>span:first-child{background:#fff0c9;color:#8e6310}
.ticket-inspection-late,.ticket-duplicate{color:#b22b3a!important;font-size:12px;font-weight:750;margin:7px 0}.ticket-inspection-upcoming{color:#94600b!important;font-size:12px;font-weight:750;margin:7px 0}

/* Notificações de inspeção no topo do painel */
.inspection-notification-wrap{position:relative;margin-left:auto;margin-right:12px}.inspection-bell{position:relative;cursor:pointer;background:#f0f7fc;border:1px solid #c9dfed;border-radius:10px;padding:10px 13px;font-size:20px;line-height:1}.inspection-bell.has-late{background:#fff0f1;border-color:#e7a5ad}.inspection-bell-count{position:absolute;top:-7px;right:-7px;background:#b82941;color:white;border-radius:20px;padding:2px 6px;font-size:11px;font-weight:800}.inspection-bell-count[hidden],.inspection-notification-panel[hidden]{display:none!important}.inspection-notification-panel{position:absolute;right:0;top:calc(100% + 12px);width:min(380px,calc(100vw - 40px));z-index:50;background:#fff;border:1px solid #d9e5ed;border-radius:13px;box-shadow:0 14px 35px rgba(27,52,73,.17);padding:14px;color:#344b5d}.inspection-notification-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.inspection-notification-heading strong{font-size:16px}.inspection-notification-heading button{border:0;background:#eef4f8;border-radius:7px;font-size:22px;cursor:pointer;padding:0 9px}.inspection-notification-sub{font-size:12px;color:#687d8e;margin:5px 0 12px}.inspection-notification-list{max-height:330px;overflow:auto;display:grid;gap:8px}.inspection-notification-entry{display:grid;text-align:left;gap:5px;width:100%;border-radius:9px;border:1px solid #ead6d9;border-left:4px solid #ce3851;background:#fff6f7;padding:11px;cursor:pointer;color:#344b5d}.inspection-notification-entry.soon{background:#fffaf0;border-color:#f0dfbd;border-left-color:#d8a03d}.inspection-notification-entry strong{font-size:11px;color:#af2941}.inspection-notification-entry.soon strong{color:#906115}.inspection-notification-entry span{font-size:13px;font-weight:700}.inspection-notification-entry small{font-size:12px;color:#65798b}.inspection-notification-empty{font-size:13px;color:#697c8c}


/* Sino SVG de inspeções: animação apenas quando há alerta */
.inspection-bell{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;vertical-align:middle;border-radius:13px;color:#287db8;box-shadow:0 3px 12px rgba(23,71,106,.09);transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}
.inspection-bell:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(23,71,106,.16)}
.inspection-bell:focus-visible{outline:3px solid #88bce1;outline-offset:3px}
.inspection-bell-icon{width:23px;height:23px;display:block;transform-origin:50% 15%}
.inspection-bell.has-warning{background:#fff9eb;border-color:#eacb76;color:#ba8212}
.inspection-bell.has-late{background:#fff1f2;border-color:#e8aab1;color:#c13249}
.inspection-bell.is-ringing .inspection-bell-icon{animation:meduriBellRing 1.65s ease-in-out infinite}
.inspection-bell.is-ringing::after{content:'';position:absolute;inset:-4px;border:2px solid currentColor;border-radius:16px;opacity:0;pointer-events:none;animation:meduriBellPulse 1.65s ease-out infinite}
.inspection-bell-count{display:inline-flex;align-items:center;justify-content:center;min-width:21px;height:21px;line-height:1;padding:0 5px;border:2px solid #fff;box-sizing:border-box}
.inspection-notification-entry.normal{border-left-color:#7ea9c8;border-color:#d9e5ed;background:#f8fbfe}
.inspection-notification-entry.normal strong{color:#356f98}
@keyframes meduriBellRing{0%,42%,100%{transform:rotate(0)}8%{transform:rotate(13deg)}16%{transform:rotate(-11deg)}24%{transform:rotate(8deg)}32%{transform:rotate(-5deg)}}
@keyframes meduriBellPulse{0%{opacity:.4;transform:scale(.94)}45%,100%{opacity:0;transform:scale(1.13)}}
@media(prefers-reduced-motion:reduce){.inspection-bell.is-ringing .inspection-bell-icon,.inspection-bell.is-ringing::after{animation:none}}

/* Ajuste de visibilidade do alerta ativo: movimento claro sem alterar o cabeçalho. */
.inspection-bell.is-ringing .inspection-bell-icon {animation:meduriBellSwing 1.35s ease-in-out infinite !important;transform-origin:50% 10%;will-change:transform}
.inspection-bell.is-ringing {box-shadow:0 0 0 3px rgba(220,166,55,.12),0 6px 16px rgba(23,71,106,.10)}
.inspection-bell.is-ringing.has-late {box-shadow:0 0 0 3px rgba(208,61,78,.16),0 6px 16px rgba(23,71,106,.10)}
@keyframes meduriBellSwing {0%,14%,53%,100%{transform:rotate(0)}21%{transform:rotate(19deg)}28%{transform:rotate(-16deg)}35%{transform:rotate(12deg)}42%{transform:rotate(-8deg)}49%{transform:rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.inspection-bell.is-ringing .inspection-bell-icon{animation:none!important}}