/* =========================================================
   E3R'S GESTÃO CLOUD
   DASHBOARD — SEÇÃO DE SERVIÇOS (arquivo isolado)
   ========================================================= */

/*
 * Controle por segmento: elementos ".only-servico" ficam
 * escondidos por padrão e só aparecem quando o body recebe a
 * classe "segmento-servico". Elementos ".hide-servico" fazem
 * o oposto — aparecem normalmente e somem nesse modo.
 * Empresas "produto" ou "misto" nunca recebem essa classe,
 * então continuam vendo o dashboard como está hoje.
 *
 * Cada tipo de elemento precisa do seu próprio valor de
 * display ao reaparecer — um único "display: flex" genérico
 * quebra o grid dos stat-cards e o layout dos quick-actions,
 * que usam display diferentes entre si.
 */
.only-servico {
    display: none !important;
}

body.segmento-servico .stat-card.only-servico {
    display: inline !important;
}

body.segmento-servico .quick-action.only-servico {
    display: grid !important;
}

body.segmento-servico .primary-button.only-servico {
    display: inline-flex !important;
}

body.segmento-servico .hide-servico {
    display: none !important;
}

.services-panel {
    background: white;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, .05);
    margin-bottom: 24px;
}

.services-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    gap: 14px;
    flex-wrap: wrap;
}

.services-panel .panel-header a {
    font-size: 13px;
    font-weight: bold;
    color: #2563eb;
    text-decoration: none;
    white-space: nowrap;
}

.services-panel .panel-header a:hover {
    text-decoration: underline;
}

.services-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.service-stat {
    background: #f8fafc;
    border-radius: 10px;
    padding: 14px;
    text-align: center;
}

.service-stat strong {
    display: block;
    font-size: 20px;
    color: #0f172a;
}

.service-stat span {
    font-size: 11px;
    color: #64748b;
}

.services-agenda-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f8fafc;
    margin-bottom: 8px;
    text-decoration: none;
    color: inherit;
}

.services-agenda-item:hover {
    background: #eef2ff;
}

.services-agenda-item .sai-info strong {
    display: block;
    font-size: 13px;
    color: #0f172a;
}

.services-agenda-item .sai-info span {
    font-size: 11px;
    color: #64748b;
}

.services-agenda-item .sai-time {
    font-size: 12px;
    font-weight: bold;
    color: #2563eb;
    white-space: nowrap;
}

.services-agenda-empty {
    text-align: center;
    padding: 24px;
    color: #94a3b8;
    font-size: 13px;
}

@media (max-width: 900px) {
    .services-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .services-panel {
        padding: 16px;
    }
}