/* ============================================================
   ICEKOM — Shell du portail client externe
   Additif à portal.css
   ============================================================ */

:root {
    --ikp-bg: #f5f8fb;
    --ik-card: #ffffff;
    --ik-text: #12263a;
    --ik-muted: #718197;
    --ik-line: #dde7ef;
    --ik-primary: #0878bd;
    --ik-primary-soft: #eaf5fb;
    --ik-navy: #061d2e;
}

html,
body {
    min-height: 100%;
}

body.icekom-portal-body {
    margin: 0;
    background:
        radial-gradient(circle at 0 0, rgba(49, 144, 207, .08), transparent 32rem),
        var(--ikp-bg);
    color: var(--ik-text);
    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}

body.icekom-portal-auth-body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
}

.icekom-portal-app {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.icekom-portal-topbar {
    position: sticky;
    z-index: 50;
    top: 0;
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 14px clamp(20px, 4vw, 56px);
    border-bottom: 1px solid rgba(216, 228, 237, .9);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 8px 30px rgba(14, 42, 64, .04);
    backdrop-filter: blur(14px);
}

.icekom-portal-brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    color: inherit;
    text-decoration: none;
}

.icekom-portal-logo {
    display: block;
    width: 150px;
    max-height: 54px;
    object-fit: contain;
}

.icekom-portal-brand-copy {
    display: grid;
    gap: 2px;
    padding-left: 17px;
    border-left: 1px solid var(--ik-line);
}

.icekom-portal-brand-copy strong {
    color: #173047;
    font-size: 13px;
    font-weight: 760;
}

.icekom-portal-brand-copy small {
    color: #8997a7;
    font-size: 10px;
}

.icekom-portal-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.icekom-portal-user-copy {
    display: grid;
    gap: 2px;
    text-align: right;
}

.icekom-portal-user-copy strong {
    max-width: 260px;
    overflow: hidden;
    color: #263a4d;
    font-size: 12px;
    font-weight: 740;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icekom-portal-user-copy small {
    max-width: 260px;
    overflow: hidden;
    color: #8a98a7;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icekom-portal-avatar {
    flex: 0 0 39px;
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient(135deg, #0a7fc5, #075d94);
    color: #fff;
    box-shadow: 0 8px 18px rgba(7, 105, 168, .17);
    font-size: 12px;
    font-weight: 800;
}

.icekom-portal-logout {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid var(--ik-line);
    border-radius: 9px;
    background: #fff;
    color: #526579;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease;
}

.icekom-portal-logout:hover {
    border-color: #cbdbe7;
    background: #f8fafc;
    color: #17364d;
}

.icekom-portal-main {
    flex: 1;
    width: min(1280px, calc(100% - 40px));
    margin: 0 auto;
    padding: 32px 0 48px;
}

.icekom-portal-flashes {
    margin-bottom: 16px;
}

.icekom-portal-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 22px;
    border-top: 1px solid #e3ebf1;
    color: #94a0ad;
    font-size: 10px;
}

@media (max-width: 760px) {
    .icekom-portal-topbar {
        min-height: 72px;
        padding: 11px 16px;
    }

    .icekom-portal-logo {
        width: 120px;
    }

    .icekom-portal-brand-copy {
        display: none;
    }

    .icekom-portal-user-copy {
        display: none;
    }

    .icekom-portal-main {
        width: min(100% - 24px, 1280px);
        padding-top: 20px;
    }
}

@media (max-width: 460px) {
    .icekom-portal-logo {
        width: 108px;
    }

    .icekom-portal-avatar {
        display: none;
    }

    .icekom-portal-logout {
        min-height: 36px;
        padding: 0 10px;
    }
}


/* ============================================================
   V11.4.1 — Navigation rapide portail
   ============================================================ */
.icekom-portal-quicknav {
    position: sticky;
    z-index: 45;
    top: 82px;
    border-bottom: 1px solid rgba(216, 228, 237, .95);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(12px);
}

.icekom-portal-quicknav-inner {
    width: min(1280px, calc(100% - 40px));
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.icekom-portal-quicknav-inner::-webkit-scrollbar {
    display: none;
}

.icekom-portal-quicknav-link {
    flex: 0 0 auto;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid #dce7ef;
    border-radius: 9px;
    background: #fff;
    color: #53677a;
    font-size: 11px;
    font-weight: 750;
    text-decoration: none;
    transition: .18s ease;
}

.icekom-portal-quicknav-link:hover {
    border-color: #bcd7e8;
    background: #f6fbfe;
    color: #075f98;
}

.icekom-portal-quicknav-link.active {
    border-color: #0878bd;
    background: #0878bd;
    color: #fff;
    box-shadow: 0 6px 15px rgba(8, 120, 189, .15);
}

@media (max-width: 760px) {
    .icekom-portal-quicknav {
        top: 72px;
    }

    .icekom-portal-quicknav-inner {
        width: calc(100% - 24px);
        padding: 8px 0;
    }

    .icekom-portal-quicknav-link {
        min-height: 38px;
        padding: 0 12px;
        font-size: 10px;
    }
}

/* ============================================================
   ICEKOM Portail V11.4.2 — raccord design V4 + shell horizontal
   ============================================================ */
body.portal-v4.icekom-portal-body {
    background:
        radial-gradient(circle at 0 0, rgba(49, 144, 207, .08), transparent 32rem),
        var(--ikp-bg);
}

body.portal-v4 .icekom-portal-main {
    width: min(1280px, calc(100% - 40px));
    padding-top: 42px;
}

body.portal-v4 .icekom-portal-main > .page-head,
body.portal-v4 .icekom-portal-main > .page-head-modern,
body.portal-v4 .icekom-portal-main > .dashboard-hero {
    margin-bottom: 24px;
}

body.portal-v4 .card {
    border-color: var(--portal-line);
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(20,31,58,.055);
}

body.portal-v4 .icekom-portal-quicknav {
    position: sticky;
    z-index: 45;
    top: 82px;
    border-bottom: 1px solid rgba(216, 228, 237, .95);
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(12px);
}

body.portal-v4 .icekom-portal-quicknav-inner {
    width: min(1280px, calc(100% - 40px));
    margin: 0 auto;
}

body.portal-v4 .icekom-portal-quicknav-link {
    min-height: 42px;
    font-size: 12px;
}

body.portal-v4 .resource-grid {
    align-items: stretch;
}

body.portal-v4 .resource-card-v4 {
    height: 100%;
}

body.portal-v4 .messages-v114-thread .messages-thread {
    min-height: 420px;
}

body.portal-v4 .messages-v114-compose {
    top: 148px;
}

body.portal-v4 .input label,
body.portal-v4 .message-compose-form label {
    color: #4d5a70;
    font-size: 11px;
    font-weight: 760;
}

body.portal-v4 .input input,
body.portal-v4 .input select,
body.portal-v4 .input textarea,
body.portal-v4 .message-compose-form select,
body.portal-v4 .message-compose-form textarea {
    border-color: #dfe5ee;
    border-radius: 11px;
    background: #fff;
}

body.portal-v4 .input input:focus,
body.portal-v4 .input select:focus,
body.portal-v4 .input textarea:focus,
body.portal-v4 .message-compose-form select:focus,
body.portal-v4 .message-compose-form textarea:focus {
    border-color: #7890f4;
    outline: 3px solid rgba(79,109,245,.10);
}

@media (max-width: 760px) {
    body.portal-v4 .icekom-portal-quicknav {
        top: 72px;
    }

    body.portal-v4 .icekom-portal-main {
        width: min(100% - 28px, 1280px);
        padding-top: 28px;
    }

    body.portal-v4 .icekom-portal-quicknav-inner {
        width: 100%;
        padding-inline: 14px;
    }
}