/* /public_html/assets/css/dashboard-teachers.css */

/* ========== PANEL PROFESSEURS ========== */

.teachers-panel-list {
    margin-top: 0; /* l’espace est géré par .panel-body */
}

.teacher-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    --card-glow-color: var(--color-accent);
}

.teacher-card-main {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.teacher-avatar {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    border: 2px solid var(--color-border-subtle);
    overflow: hidden;
    background: linear-gradient(135deg, #e5e7eb, #cbd5f5);
    flex-shrink: 0;
}

.teacher-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.teacher-avatar-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    color: #ffffff;
}

/* Version plus grande pour la vue détail */
.teacher-avatar-fallback-large {
    width: 72px;
    height: 72px;
    border-radius: 24px;
    border: 2px solid var(--color-border-subtle);
}

.teacher-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.teacher-name {
    font-weight: 600;
}

.teacher-styles-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.teacher-style-badge {
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
    background: var(--color-surface-soft);
    color: var(--color-text);
}

.teacher-style-badge.is-empty {
    background: transparent;
    color: var(--color-text-muted);
    border: 1px dashed var(--color-border-subtle);
}

.teacher-style-chip {
    border-radius: 999px;
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface-soft);
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}

.teacher-style-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
}

.teacher-style-chip.is-selected {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent-soft);
}

.teacher-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.teacher-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.teacher-contact span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.teacher-contact i {
    font-size: 0.9rem;
}

.teacher-courses-label {
    font-size: 0.75rem;
    opacity: 0.9;
}

/* vue détail prof */

.teacher-view {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.teacher-view-main {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Avatar dans le modal profil : taille fixe + découpe */
.teacher-view-avatar {
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    border-radius: 26px;
    border: 2px solid var(--color-border-subtle);
    overflow: hidden;
    background: linear-gradient(135deg, #e5e7eb, #cbd5f5);
}

/* L'image remplit le cadre sans déformer */
.teacher-view-avatar .teacher-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Pour le fallback initiales dans le profil */
.teacher-view-avatar .teacher-avatar-fallback-large {
    width: 100%;
    height: 100%;
    border-radius: 0; /* déjà arrondi par le parent */
    border: 0;
}

.teacher-view-info h3 {
    margin: 0 0 0.3rem;
}

.teacher-view-meta {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.teacher-view-details {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem 1rem;
    margin: 0;
}

.teacher-view-details dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.teacher-view-details dd {
    margin: 0;
}

.teacher-view-styles-row {
    margin-top: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.teacher-view-styles-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.teacher-avatar-upload {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.teacher-avatar-preview {
    width: 72px;
    height: 72px;
    border-radius: 24px;
    border: 2px solid var(--color-border-subtle);
    overflow: hidden;
    background: linear-gradient(135deg, #e5e7eb, #cbd5f5);
    flex-shrink: 0;
}

.teacher-avatar-upload-controls {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

@media (min-width: 640px) {
    .teacher-view-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================================
   TEACHERS PANEL — enlever le “cadre” global du formulaire en mode panel
   (le look “card” vient souvent de .form-vertical au niveau global)
   ========================================================================== */

#teachers-panel-content[data-mode="create"] .form-vertical,
#teachers-panel-content[data-mode="edit"] .form-vertical {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Si ton global applique aussi un wrapper interne (parfois .form-vertical > .ui-card, etc.)
   tu peux compléter avec ceci au besoin : */
#teachers-panel-content[data-mode="create"] .form-vertical .ui-card,
#teachers-panel-content[data-mode="edit"] .form-vertical .ui-card,
#teachers-panel-content[data-mode="create"] .form-vertical .modal-card,
#teachers-panel-content[data-mode="edit"] .form-vertical .modal-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}