/* Salesforce-inspired styling with orange color scheme */
body {
    background-color: #F4F6F9; /* Salesforce neutral background */
    font-family: 'Salesforce Sans', 'Helvetica Neue', Arial, sans-serif;
    color: #181818;
    font-weight: 400;
    font-size: 0.875rem; /* 14px, standard SLDS font size */
}

/* Navbar */
.navbar {
    background-color: #FFFFFF;
    border-bottom: 1px solid #DDDBDA; /* SLDS border color */
    padding: 0.5rem 1rem;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
}

.navbar-brand {
    font-weight: 700;
    color: #FF6200 !important; /* Primary orange */
    font-size: 1.25rem;
}

.navbar-nav .nav-link {
    color: #181818;
    font-weight: 400;
    padding: 0.5rem 1rem;
    transition: color 0.2s ease;
}

.navbar-nav .nav-link:hover {
    color: #FF6200;
}

/* Conteúdo principal */
.container-features {
    padding: 2rem 1rem; /* SLDS spacing */
}

.section-title {
    text-align: center;
    margin-bottom: 2rem;
    font-weight: 700;
    font-size: 1.5rem; /* 24px */
    color: #181818;
}

/* Cartões de grupo */
.group-card {
    background: #FFFFFF;
    border: 1px solid #DDDBDA;
    border-radius: 0.25rem; /* SLDS card radius */
    padding: 1.5rem;
    text-align: center;
    transition: box-shadow 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); /* SLDS subtle shadow */
}

.group-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    border-color: #FF6200;
}

.group-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #FF6200; /* Primary orange */
}

.group-card:hover .group-icon {
    color: #CC4D00; /* Darker orange for hover */
}

.group-title {
    font-weight: 600;
    font-size: 1rem;
    color: #181818;
}

.group-card:hover .group-title {
    color: #FF6200;
}

.group-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

/* Botão de pesquisa global */
.search-btn {
    background: #FF6200;
    border: none;
    color: #FFFFFF;
    border-radius: 0.25rem; /* SLDS button radius */
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    transition: background-color 0.2s ease;
    margin-bottom: 2rem;
    width: 100%;
    max-width: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-btn:hover {
    background: #CC4D00;
}

.search-btn i {
    margin-right: 0.5rem;
}

/* Estilização das modais */
.custom-modal .modal-dialog.modal-fullscreen-94 {
    width: 90vw;
    max-width: none;
    height: 94vh;
    margin: 3vh auto;
}

.custom-modal-content {
    border-radius: 0.25rem;
    border: 1px solid #DDDBDA;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.custom-modal-header {
    background-color: #FF6200;
    color: #FFFFFF;
    border-bottom: none;
    padding: 1rem;
}

.custom-modal-header .modal-title {
    font-weight: 600;
    font-size: 1.125rem; /* 18px */
}

.custom-modal-close {
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 1.25rem;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.custom-modal-close:hover {
    opacity: 1;
}

.custom-modal-body {
    background: #F4F6F9; /* SLDS modal background */
    padding: 1.5rem;
    overflow-y: auto;
    max-height: calc(94vh - 60px);
}

/* Modal de nome da plataforma */
.custom-modal .modal-dialog.modal-sm {
    max-width: 400px;
}

.custom-platform-name-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #DDDBDA;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.custom-platform-name-input:focus {
    border-color: #FF6200;
    box-shadow: 0 0 0 0.125rem rgba(255, 98, 0, 0.25);
    outline: none;
}

.custom-save-platform-btn {
    width: 100%;
    background-color: #FF6200;
    color: #FFFFFF;
    padding: 0.75rem;
    border: none;
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    transition: background-color 0.2s;
}

.custom-save-platform-btn:hover {
    background-color: #CC4D00;
}

/* Campo de busca */
.custom-search-box {
    border-radius: 0.25rem;
    padding: 0.75rem;
    border: 1px solid #DDDBDA;
    width: 100%;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

.custom-search-box:focus {
    border-color: #FF6200;
    box-shadow: 0 0 0 0.125rem rgba(255, 98, 0, 0.25);
    outline: none;
}

/* Botão Criar/Atualizar Plataforma */
.custom-create-platform-btn {
    position: fixed;
    top: 20%;
    right: 1rem;
    background-color: #FF6200;
    color: #FFFFFF;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    transition: background-color 0.2s;
    z-index: 1000;
}

.custom-create-platform-btn:hover {
    background-color: #CC4D00;
}

/* Cartões de módulos/plataformas */
.module-modal-card {
    background: #FFFFFF;
    border: 1px solid #DDDBDA;
    border-radius: 0.25rem;
    padding: 1rem;
    text-align: center;
    transition: box-shadow 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    position: relative;
}

.module-modal-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    border-color: #FF6200;
}

.module-modal-icon {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
    color: #FF6200;
}

.module-modal-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: #181818;
}

/* Tag de plataforma */
.platform-tag {
    font-size: 0.75rem;
    background: #FFE6CC; /* Light orange */
    color: #FF6200;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    margin-top: 0.5rem;
}

/* Contador de resultados */
.result-count {
    color: #514F4F;
    font-size: 0.75rem;
    margin-bottom: 1rem;
    text-align: center;
}

/* Checkbox customizado */
.module-checkbox {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.module-checkbox input {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: #FF6200; /* Orange checkbox */
}

/* Custom Platform Section */
.custom-platform-section {
    background: #FFFFFF;
    border: 1px solid #DDDBDA;
    border-radius: 0.25rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.custom-platform-title {
    font-weight: 700;
    color: #FF6200;
    font-size: 1.125rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-platform-modules {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.custom-module-chip {
    background: #FFE6CC;
    border: none;
    border-radius: 0.25rem;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    color: #181818;
    display: flex;
    align-items: center;
}

.custom-module-chip i {
    color: #FF6200;
    margin-right: 0.5rem;
    font-size: 0.875rem;
}

/* Edit/Delete Buttons */
.platform-action-btn {
    background: none;
    border: none;
    color: #FF6200;
    cursor: pointer;
    padding: 0.25rem;
    margin-left: 0.5rem;
}

.platform-action-btn:hover {
    color: #CC4D00;
}

/* Media Queries */
@media (max-width: 768px) {
    .section-title {
        font-size: 1.25rem;
        margin-bottom: 1.5rem;
    }
    .group-card {
        padding: 1rem;
    }
    .group-icon {
        font-size: 2rem;
    }
    .group-title {
        font-size: 0.875rem;
    }
    .search-btn {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }
    .custom-platform-modules {
        flex-direction: column;
    }
    .custom-create-platform-btn {
        right: 0.5rem;
        padding: 0.5rem 1rem;
    }
}