/* =========================================================================
   app-pages.css — style commun professionnel : barre de navigation + pages
   utilisateurs / amis / bloqués. Chargé globalement via _Layout.
   ========================================================================= */

/* ----------------------- Barre de navigation ----------------------- */
.navbar.ms-nav {
    background: #ffffff;
    border-bottom: 1px solid #e8edf3;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .05);
    padding: .55rem 0;
    margin-bottom: 22px;
}
.ms-nav .navbar-brand {
    font-weight: 800;
    font-size: 20px;
    color: #1e293b;
    letter-spacing: -.2px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ms-nav .navbar-brand .ms-logo {
    width: 30px; height: 30px; border-radius: 9px;
    background: linear-gradient(135deg, #3d6efb, #7c3aed);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px; box-shadow: 0 3px 8px rgba(61,110,251,.35);
}
.ms-nav .nav-link {
    font-weight: 600; font-size: 14.5px; color: #475569 !important;
    border-radius: 9px; padding: 8px 14px !important; margin: 0 2px; transition: background .15s, color .15s;
}
.ms-nav .nav-link:hover { background: #eef2f7; color: #3d6efb !important; }
.ms-nav .nav-link.ms-accent { color: #0d9488 !important; }
.ms-nav .nav-link.ms-accent:hover { background: #ccfbf1; color: #0f766e !important; }
.ms-nav .dropdown-menu {
    border: 1px solid #eef2f6; border-radius: 12px; box-shadow: 0 12px 34px rgba(15,23,42,.12);
    padding: 8px; margin-top: 8px; min-width: 210px;
}
.ms-nav .dropdown-item {
    border-radius: 8px; padding: 9px 12px; font-size: 14px; font-weight: 500; color: #334155;
    display: flex; align-items: center; gap: 9px;
}
.ms-nav .dropdown-item:hover { background: #f5f8ff; color: #3d6efb; }
.ms-nav .dropdown-item .ms-di-ico { width: 18px; text-align: center; opacity: .85; }
.ms-nav .ms-logout {
    background: #fff; border: 1px solid #fecaca; color: #dc2626 !important;
    border-radius: 9px; padding: 8px 16px !important; font-weight: 700; font-size: 14px;
}
.ms-nav .ms-logout:hover { background: #fef2f2; }

/* Menu "Fichier" (Sauvegarder / Ouvrir / Nouveau) sur le tableau blanc */
.ms-nav .ms-fico { width: 18px; height: 18px; flex-shrink: 0; }
.ms-nav .ms-file > .dropdown-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    color: #0d9488 !important; background: #f0fdfa; border: 1px solid #99f6e4;
}
.ms-nav .ms-file > .dropdown-toggle:hover { background: #ccfbf1; color: #0f766e !important; }
.ms-nav .dropdown-item .ms-fico { color: #475569; }
.ms-nav .nav-link.ms-signin { color: #3d6efb !important; }
.ms-nav .nav-link.ms-signup {
    background: #3d6efb; color: #fff !important; padding: 8px 16px !important; border-radius: 9px;
}
.ms-nav .nav-link.ms-signup:hover { background: #2b5bfb; color:#fff !important; }

/* --- Barre COMPACTE : boutons en icône seule + hauteur réduite (plus de place
   pour le tableau blanc). Les libellés sont remplacés par des tooltips (title). --- */
.navbar.ms-nav { padding: .28rem 0; margin-bottom: 8px; }
.ms-nav .navbar-brand { font-size: 18px; }
.ms-nav .navbar-brand .ms-logo { width: 26px; height: 26px; font-size: 15px; }
.ms-nav .nav-link.ms-icononly {
    padding: 7px 10px !important; margin: 0 1px;
    display: inline-flex; align-items: center; justify-content: center;
}
.ms-nav .nav-link.ms-icononly .ms-fico { width: 21px; height: 21px; }
.ms-nav .ms-file > .dropdown-toggle.ms-icononly { padding: 7px 11px !important; gap: 2px; }
.ms-nav .nav-link.ms-icononly.dropdown-toggle::after { margin-left: 1px; }
.ms-nav .ms-logout.ms-icononly { padding: 7px 10px !important; }

/* Libellé : caché sur la barre horizontale (desktop = icône seule), MAIS affiché
   à droite de l'icône dans le menu vertical mobile (plus lisible sur iPhone). */
.ms-nav .ms-lbl { display: none; }
@media (max-width: 575.98px) {
    .ms-nav .ms-iconbar { padding: 4px 0; }
    .ms-nav .ms-iconbar .nav-item { width: 100%; }
    .ms-nav .nav-link.ms-icononly {
        width: 100%; justify-content: flex-start; padding: 11px 14px !important; margin: 1px 0;
    }
    .ms-nav .nav-link.ms-icononly .ms-fico { width: 20px; height: 20px; }
    .ms-nav .ms-lbl { display: inline; margin-left: 12px; font-weight: 600; font-size: 15px; }
    .ms-nav .ms-file > .dropdown-toggle.ms-icononly { justify-content: flex-start; }
    .ms-nav .dropdown-menu { min-width: 100%; }
}

/* ----------------------- Gabarit de page ----------------------- */
.ap-wrap { max-width: 940px; margin: 0 auto; padding: 6px 16px 60px; font-family: 'Segoe UI', Arial, sans-serif; color: #1f2937; }
.ap-head { margin-bottom: 18px; }
.ap-head h1 { margin: 0; font-size: 26px; letter-spacing: -.3px; display: flex; align-items: center; gap: 10px; }
.ap-head .ap-sub { margin: 4px 0 0; color: #64748b; font-size: 14px; }

.ap-search { position: relative; margin-bottom: 18px; max-width: 460px; }
.ap-search input {
    width: 100%; padding: 12px 14px 12px 42px; border: 1px solid #cbd5e1; border-radius: 12px;
    font-size: 15px; box-sizing: border-box; background: #fff;
}
.ap-search input:focus { outline: none; border-color: #3d6efb; box-shadow: 0 0 0 3px rgba(61,110,251,.15); }
.ap-search::before {
    content: "\1F50D"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    font-size: 15px; opacity: .55;
}

.ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }

.ap-person {
    display: flex; align-items: center; gap: 13px; background: #fff; border: 1px solid #eef2f6;
    border-radius: 14px; padding: 14px; box-shadow: 0 2px 10px rgba(15,23,42,.04);
    transition: box-shadow .15s, transform .1s, border-color .15s;
}
.ap-person:hover { box-shadow: 0 6px 18px rgba(15,23,42,.09); border-color: #dbe4f3; }
.ap-ava {
    width: 52px; height: 52px; border-radius: 50%; flex: 0 0 52px; display: flex; align-items: center;
    justify-content: center; color: #fff; font-weight: 700; font-size: 19px; box-shadow: inset 0 -3px 8px rgba(0,0,0,.12);
}
.ap-info { flex: 1; min-width: 0; }
.ap-info .ap-name { font-weight: 700; font-size: 15.5px; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-info .ap-mail { color: #64748b; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-cardactions { display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap; }

.ap-btn {
    border: 1px solid #d1d9e6; background: #fff; color: #334155; padding: 7px 14px; border-radius: 9px;
    font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: filter .12s, background .12s;
    display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
}
.ap-btn:hover { filter: brightness(.97); }
.ap-btn-primary { background: #3d6efb; border-color: #3d6efb; color: #fff; }
.ap-btn-green   { background: #16a34a; border-color: #16a34a; color: #fff; }
.ap-btn-warn    { background: #fff7ed; border-color: #fed7aa; color: #b45309; }
.ap-btn-danger  { background: #fff; border-color: #fca5a5; color: #dc2626; }
.ap-btn-danger:hover { background: #fef2f2; }

.ap-empty {
    text-align: center; color: #94a3b8; padding: 46px 20px; font-size: 15px; background: #fff;
    border: 1px dashed #dbe2ec; border-radius: 16px;
}
.ap-empty .ap-empty-ico { font-size: 40px; display: block; margin-bottom: 10px; opacity: .6; }
.ap-empty a { color: #3d6efb; font-weight: 700; text-decoration: none; }
.ap-nores { display: none; text-align: center; color: #94a3b8; padding: 24px; font-size: 14px; font-style: italic; }

@media (max-width: 560px) {
    .ap-grid { grid-template-columns: 1fr; }
    .ap-head h1 { font-size: 22px; }
}