/* ==========================================================================
   Portail / lanceur d'applications — styles dédiés (CSS pur).
   Indépendant du build Tailwind purgé (classes arbitraires non garanties).
   Charte TheSocle : violet #863bff / #7e14ff.
   ========================================================================== */

:root {
    --socle-violet: #863bff;
    --socle-violet-dark: #7e14ff;
}

/* Durcissement cross-browser : box-sizing + autorise les enfants de grille/flex
   à rétrécir (sans ça, un nom long non sécable élargit sa colonne et casse la
   mise en page — symptôme variable selon le moteur/la largeur). */
.pl-head, .pl-grid, .pl-panel, .pl-cards, .pl-aside, .pl-mh-group, .pl-card,
.pl-card-body, .pl-mh-apps, .pl-search { box-sizing: border-box; }
.pl-grid > *, .pl-cards > *, .pl-mh-apps > *, .pl-card { min-width: 0; max-width: 100%; }

/* ---- En-tête ---- */
.pl-head {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 640px) {
    .pl-head { flex-direction: row; align-items: center; justify-content: space-between; }
}
.pl-title { font-size: 1.5rem; font-weight: 700; color: #111827; }
.pl-subtitle { font-size: 0.875rem; color: #6b7280; margin-top: 0.125rem; }

.pl-search { position: relative; width: 100%; }
@media (min-width: 640px) { .pl-search { width: 18rem; } }
.pl-search svg {
    position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
    width: 1rem; height: 1rem; color: #9ca3af; pointer-events: none;
}
.pl-search input {
    width: 100%; padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    border: 1px solid #e5e7eb; border-radius: 0.5rem; font-size: 0.875rem;
    outline: none; transition: border-color .15s, box-shadow .15s;
}
.pl-search input:focus {
    border-color: var(--socle-violet);
    box-shadow: 0 0 0 3px rgba(134, 59, 255, 0.25);
}
/* Le champ est un `type="search"` : WebKit lui donne une croix d'effacement native, que le
   thème par défaut rend quasi invisible. On la garde — c'est le geste le plus direct pour
   retrouver ses applications quand le champ s'est rempli tout seul. */
.pl-search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 0.875rem; width: 0.875rem; cursor: pointer;
    background-color: #9ca3af;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 6l8 8M14 6l-8 8' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 6l8 8M14 6l-8 8' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pl-search input::-webkit-search-cancel-button:hover { background-color: #4b5563; }

/* ---- Disposition 2 colonnes ---- */
.pl-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 1024px) {
    .pl-grid { grid-template-columns: 2fr 1fr; align-items: start; }
}

/* ---- Cartouches (sections) ---- */
.pl-panel {
    border: 1px solid #e5e7eb; border-radius: 1rem; background: #fff; padding: 1.25rem;
}
.pl-panel--hub {
    background: linear-gradient(135deg, #ffffff 0%, rgba(134, 59, 255, 0.05) 100%);
}
.pl-panel-head {
    display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;
}
.pl-panel-title {
    font-size: 0.8rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: #374151;
}
.pl-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--socle-violet-dark); }
.pl-count { margin-left: auto; font-size: 0.75rem; color: #9ca3af; }
.pl-empty { font-size: 0.875rem; color: #9ca3af; text-align: center; padding: 2.5rem 0; }

/* ---- Grille de cards ---- */
.pl-cards { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .pl-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .pl-cards { grid-template-columns: 1fr 1fr 1fr; } }

/* ---- Colonne mini-hubs ---- */
.pl-aside { display: flex; flex-direction: column; gap: 1rem; }
.pl-mh-group { border: 1px solid #e5e7eb; border-radius: 1rem; background: #fff; padding: 1rem; }
.pl-mh-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.pl-mh-icon { width: 1rem; height: 1rem; color: var(--socle-violet); flex-shrink: 0; }
.pl-mh-slug { font-size: 0.875rem; font-weight: 600; color: #1f2937; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.pl-badge {
    margin-left: auto; font-size: 0.625rem; padding: 0.1rem 0.4rem; border-radius: 9999px;
    font-weight: 600; text-transform: uppercase;
}
.pl-badge--on { background: #d1fae5; color: #047857; }
.pl-badge--off { background: #f3f4f6; color: #6b7280; }
.pl-mh-apps { display: flex; flex-direction: column; gap: 0.5rem; }
.pl-aside-empty {
    border: 1px dashed #e5e7eb; border-radius: 1rem; background: #fff; padding: 1.25rem;
    text-align: center; font-size: 0.875rem; color: #9ca3af;
}

/* ---- Card application ---- */
.pl-card {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem;
    border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff;
    text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pl-card:hover {
    border-color: var(--socle-violet);
    box-shadow: 0 4px 14px rgba(134, 59, 255, 0.12);
    transform: translateY(-1px);
}
.pl-card-mono {
    flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: 0.6rem;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.1rem; font-weight: 700; user-select: none;
    background: linear-gradient(135deg, var(--socle-violet), var(--socle-violet-dark));
}
.pl-card-body { min-width: 0; flex: 1; }
.pl-card-name {
    display: block; font-size: 0.875rem; font-weight: 600; color: #111827;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pl-card:hover .pl-card-name { color: var(--socle-violet-dark); }
.pl-card-status { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.15rem; }
.pl-card-status .pl-status-dot {
    width: 0.4rem; height: 0.4rem; border-radius: 9999px; background: #10b981;
}
.pl-card-status span { font-size: 0.75rem; color: #9ca3af; }
.pl-card-arrow { flex-shrink: 0; width: 1rem; height: 1rem; color: #d1d5db; transition: color .15s; }
.pl-card:hover .pl-card-arrow { color: var(--socle-violet); }

/* ---- Distinction Socle V005 vs applications tierces ---- */
/* Card Socle : liseré violet à gauche. */
.pl-card--socle { border-left: 3px solid var(--socle-violet); }
/* Monogramme tierce : dégradé ardoise neutre au lieu du violet. */
.pl-card-mono--ext { background: linear-gradient(135deg, #94a3b8, #64748b); }

/* Tag de type sous le nom. */
.pl-card-meta { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.2rem; }
.pl-tag {
    display: inline-block; font-size: 0.625rem; font-weight: 600; line-height: 1;
    padding: 0.18rem 0.4rem; border-radius: 0.3rem; text-transform: uppercase;
    letter-spacing: 0.02em;
}
.pl-tag--socle { background: rgba(134, 59, 255, 0.12); color: var(--socle-violet-dark); }
.pl-tag--ext { background: #f1f5f9; color: #64748b; }

.pl-hidden { display: none !important; }
.pl-no-match { text-align: center; font-size: 0.875rem; color: #9ca3af; padding: 2rem 0; }
.pl-clear {
    display: inline-block; margin-left: 0.5rem; padding: 0.25rem 0.75rem;
    border: 1px solid #e5e7eb; border-radius: 0.5rem; background: #fff;
    font-size: 0.8125rem; color: var(--socle-violet); cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.pl-clear:hover { background: #faf7ff; border-color: var(--socle-violet); }