html {
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 60px;
}
/*Homepage*/
.banner-video-container {
    position: relative;
    width: 100%;
    height: 500px;
    border-radius: 10px;
    margin-bottom: 4rem;
    margin-top: 2rem;
}

.banner-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.media-item, .resource-text {
    background-color: white;
    padding: 10px;
    width: 30%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.15);
    margin-bottom: 4rem;
}

    .media-item:hover, .resource-text:hover {
        transform: translateY(-10px) scale(1.03); 
        box-shadow: 0 10px 20px rgba(0,0,0,0.2); 
    }

/*login page*/
.form-page {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.15);
    margin-left: 5px;
}

.divider-text {
    position: relative;
    text-align: center;
    margin: 20px 0;
    font-weight: 500;
}

    .divider-text::before,
    .divider-text::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 20%;
        height: 1px;
        background: #ccc;
    }

    .divider-text::before {
        left: 0;
    }

    .divider-text::after {
        right: 0;
    }

.btn-form, .btn-back {
    background-color: #C8C4C1;
    border-radius: 30px;
    box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.15);
}
    .btn-form:hover, .btn-back:hover {
        background-color: #A6A09B;
        box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.25);
    }
.form-page .form-control, .apt-page .form-control, .meeting-form-container .form-control {
    color: black;
    border-radius: 30px;
    background-color: #F2F2F2;
    box-shadow: inset 5px 5px 10px #d9d9d9, inset -5px -5px 10px #ffffff;
    border: none;
}

    .form-page .form-control:focus, .apt-page .form-control:focus {
        box-shadow: inset 5px 5px 10px #cfcfcf, inset -5px -5px 10px #ffffff;
        outline: none;
    }
.image-container .img-fluid {
    border-radius: 10px;
    box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.15);
}

.form-page .card {
    background-color: white;
    padding: 20px;
    border-radius: 10px;

}

/*registration page*/
.register-form {
    margin-top: 4rem;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.15);
}

    .register-form .form-control, .form-select {
        color: black;
        border-radius: 30px;
        background-color: #F2F2F2;
        box-shadow: inset 5px 5px 10px #d9d9d9, inset -5px -5px 10px #ffffff;
        border: none;
    }

        .register-form .form-control:focus, .form-select:focus {
            box-shadow: inset 5px 5px 10px #cfcfcf, inset -5px -5px 10px #ffffff;
            outline: none;
        }
    .register-form .prev-step, .next-step {
        background-color: #B3C3D5;
        box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.15);
        border-radius: 30px;
        margin-bottom: 1rem;
        color: white;
    }

        .register-form .prev-step:hover, .next-step:hover {
            background-color: #A6A09B;
            box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.25);
        }
.image-container .text-overlay {
    padding: 1rem; 
    top: 0;
    left: 0;
}
    .image-container .text-overlay h1 {
        font-weight: 600;
        color: #FAF9F6;
        font-size: 60px;
        -webkit-text-stroke: 2px #FAF9F6;

    }

/*>>> NEW UI <<<*/

:root {
    /* -----------------------------------------
       BRAND / PRIMARY (CALM – COOL MIST)
       ----------------------------------------- */
    --brand-main: #8FB6D9; /* Soft wave blue */
    --brand-dark: #6D97BF; /* Deeper wave edge */
    --brand-soft: #E6F0FA; /* Misty light blue */
    --brand-text: #1E3A5F; /* Calm deep blue text */
    /* -----------------------------------------
       NEUTRAL / TRUST (BLUE-GREY)
       ----------------------------------------- */
    --neutral-main: #2E415A; /* Primary text */
    --neutral-soft: #6B86A3; /* Secondary text */
    --neutral-light: #D6E3F0; /* Light UI fills */
    --neutral-bg: #F4F8FC; /* Page background */
    /* -----------------------------------------
       SURFACE / READING
       ----------------------------------------- */
    --surface-main: #FFFFFF;
    --surface-soft: #EEF4FA;
    --border-soft: rgba(46, 65, 90, 0.12);
    --text-primary: #24364A;
    --text-secondary: #5E738A;
    --text-disabled: #A6B5C6;
    /* -----------------------------------------
       SUCCESS (POSITIVE FEEDBACK – COOL CALM)
       ----------------------------------------- */
    --success-main: #7FB8C8;
    --success-soft: #E3F2F6;
    --success-text: #1F4E5F;
    /* -----------------------------------------
       WARNING (GENTLE – MUTED)
       ----------------------------------------- */
    --warning-main: #E6C98A;
    --warning-soft: #FBF3DD;
    --warning-text: #6B5A2A;
    /* -----------------------------------------
       DANGER (CLEAR BUT NOT HARSH)
       ----------------------------------------- */
    --danger-main: #B66A6A;
    --danger-dark: #8F4A4A;
    --danger-soft: #F4DADA;
    --danger-text: #5A1F1F;
    /* -----------------------------------------
       EFFECTS
       ----------------------------------------- */
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-blur: blur(14px);
    --shadow-soft: box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    --shadow-main: box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}


/*ADMIN 
USER MANAGEMENT*/
.um-title {
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.um-shell {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 14px;
    align-items: start;
}

/* Left card */
.um-left {
    position: sticky;
    top: 92px;
    height: calc(100vh - 140px);
}

.um-left-card {

    height: 100%;
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 18px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
    overflow: hidden;

}

/* Left top bar: tabs + info */
.um-left-topbar {
    padding: 12px 12px;
    border-bottom: 1px solid rgba(17,24,39,.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--surface-main);
}

.um-left-tabs {
    display: flex;
    gap: 10px;
}

.um-tab {
    background: #fff;
    border-radius: 5rem;
    border:none;
    padding: 5px 14px;
    font-weight: 900;
    color: rgba(17,24,39,.75);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

    .um-tab.active {
        box-shadow: var(--brand-main) 0px 2px 4px 0px inset;
        color: #166534;
    }

.um-info-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    border: none;
    font-size: 25px;
    background: #fff;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .um-info-btn:hover {
        background: rgba(59,130,246,.06);
        border-color: rgba(59,130,246,.20);
    }
    .um-info-btn.dropdown-toggle::after {
        display: none !important;
    }
.um-info-menu {
    border-radius: 16px;
    border: 1px solid rgba(17,24,39,.10);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
    padding: 10px;
    width: 320px;
}

.um-left-body {
    padding: 14px;
    overflow: auto;
    flex: 1;
}

/* Empty */
.um-empty-title {
    font-weight: 900;
    font-size: 1.05rem;
}

.um-empty-sub {
    color: rgba(17,24,39,.65);
    font-weight: 700;
    margin-top: 4px;
}

.um-empty-box {
    margin-top: 12px;
    border-radius: 15px;
    padding: 12px;
    text-align:center;

}

.um-empty-chip {
    display: inline-flex;
    padding: 4px 5px;
    border-radius: 50px;
    font-weight: 900;
    font-size: 1rem;
    color: var(--brand-dark);
    margin-bottom: 8px;
    text-transform: uppercase;
}

.um-empty-text {
    font-weight: 400;
    color: var(--text-primary);
    font-size: 16px;
    padding: 0 5px;
}

/* Details head + close COLORS : #2F4156 #567C8D #C8D9E6 #F5EFEB*/
.um-details-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 14px;
    background: #6FAF8A;
    background: linear-gradient(90deg, rgba(111, 175, 138, 1) 0%, rgba(214, 237, 227, 1) 50%, rgba(255, 255, 255, 1) 100%);
    padding: 12px;
    border-radius: 1rem;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}

.um-details-head-main {
    display: flex;
    gap: 12px;
    align-items: center;
}

.um-x {
    border: none;
    background: #fff;
    border-radius: 60%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 23px;
    line-height: 1;
    color: rgba(17,24,39,.70);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}

    .um-x:hover {
        background: var(--surface-main);
        border-color: rgba(239,68,68,.18);
        color: var(--danger-main);
    }

.um-left-name {
    font-weight: 900;
    font-size: 1.05rem;
    color: #166534;
}

.um-left-email {
    color: #166534;
    font-size: .95rem;
    margin-top: 2px;
    font-weight: 400
}

.um-left-meta {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size:0.87rem;
}

.um-dot {
    color: rgba(17,24,39,.30);
}

.um-type {
    font-weight: 900;
    color: #166534;
}

.um-left-actions {
    padding: 12px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    background: #4F9A74;
    background: linear-gradient(260deg, rgba(79, 154, 116, 1) 0%, rgba(111, 175, 138, 1) 50%, rgba(207, 233, 220, 1) 100%);
    position: sticky;
    bottom: 0;
    margin-top: 14px;
    border-radius: 50px;

}

.um-action-btn {
    border-radius: 25px;
    padding: 6px 16px;
    font-weight: 900;
    box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
}

.btn.btn-success.um-action-btn {
    background-color: var(--surface-main);
    color: var(--brand-dark);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
.btn.btn-danger.um-action-btn {
    background-color: var(--surface-main);
    color: var(--danger-main);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
/* Right table surface */
.um-surface {
    background: #fff;
    border-radius: 18px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    padding: 12px 15px 12px;
}

/* DataTables “card rows” */
table.dataTable.um-table {
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
}

    table.dataTable.um-table thead th {
        border: none !important;
        color: var(--brand-text);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        font-size: .78rem;
        padding: 10px 14px !important;
    }

    table.dataTable.um-table tbody td {
        border:none !important;
        padding: 2px 15px !important;
        vertical-align: middle;
    }

    table.dataTable.um-table tbody tr:hover td {
        background: var(--brand-soft) !important;
        color: var(--brand-main) !important;
    }

.um-name {
    font-weight: 500;
    color: var(--brand-text);
    line-height: 1.2;
}

.um-email {
    color: var(--text-primary);
    font-size: .95rem;
}

/* Avatar + badges */
.um-avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #FFFFFF;
    color: var(--brand-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    flex: 0 0 auto;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.um-badge {
    padding: .35rem .6rem;
    border-radius: 5rem;
    font-weight: 900;
    font-size: .78rem;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .um-badge::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 5rem;
        display: inline-block;
    }

    .um-badge.pending {
        background: rgba(234,179,8,.12);
        border-color: rgba(234,179,8,.25);
        color: #7c5b00;
    }

        .um-badge.pending::before {
            background: #eab308;
        }

    .um-badge.active {
        background: var(--surface-main);
        border-color: rgba(34,197,94,.25);
        color: #166534;
        box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    }

        .um-badge.active::before {
            background: #22c55e;
        }

    .um-badge.blocked {
        background: var(--surface-main);
        color: var(--danger-text);
        box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    }

        .um-badge.blocked::before {
            background: #ef4444;
        }

    .um-badge.unknown {
        background: var(--surface-main);
        border-color: rgba(148,163,184,.25);
        color: #334155;
    }

        .um-badge.unknown::before {
            background: #94a3b8;
        }

.um-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.um-span-2 {
    grid-column: span 2;
}

.um-field {
    padding: 10px;
}

.um-label {
    font-size: .76rem;
    color: var(--brand-dark);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.um-value {
    color: var(--text-primary);
    margin-top: 4px;
    font-weight: 600;
    font-size: 0.95rem;
    padding:1px 5px
}

.um-section {
    margin-bottom: 16px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    background: var(--surface-main);    
    padding:5px 10px;
    border-radius:1rem;
}

.um-section-title {
    font-weight: 600;
    color:var(--text-secondary);
    font-size:16px;
    padding: 5px 12px;
}

.um-btn {
    border-radius: 20px;
    padding: 3px 15px;
    font-weight: 700;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.um-view-btn {
    border-radius: 50px;
    padding: 5px 10px;
    border: none;
    background: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

    .um-view-btn:hover {
        background: var(--surface-soft);
        border-color: rgba(59,130,246,.20);
    }

@media (max-width: 1100px) {
    .um-shell {
        grid-template-columns: 1fr;
    }

    .um-left {
        position: relative;
        top: 0;
        height: auto;
    }
}

/*-------------------------------------PROFESSIONAL SIDE------------------------------------------- */
/* -----------------------------------------=======
   Appointment UI — Calendar (Clean)
   Full CSS Replacement
   -----------------------------------------======= */

.appt-surface {
    padding: 1rem 5rem;
}

/* Calendar container card */
#calendar {
    background: var(--surface-soft);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--shadow-soft);
}

/* Remove FullCalendar default "today" tint (yellow-ish) */
.fc {
    --fc-today-bg-color: transparent;
}

    /* Prevent shadow clipping (month cards) */
    .fc .fc-daygrid-body,
    .fc .fc-scrollgrid-section-body,
    .fc .fc-scroller-harness,
    .fc .fc-scroller {
        overflow: visible !important;
    }

    /* Give the month grid breathing room */
    .fc .fc-daygrid-body {
        padding: 10px;
    }

    /* Day-of-week header (SUN MON TUE...) */
    .fc .fc-col-header-cell {
        color: var(--neutral-main);
        font-weight: 700;
        letter-spacing: .35em;
        font-size: .95rem;
    }

/* --------------------------------
   MONTH VIEW (dayGridMonth) — card cells
   -------------------------------- */

/* Remove grid lines ONLY for month view */
.fc-dayGridMonth-view.fc-theme-standard td,
.fc-dayGridMonth-view.fc-theme-standard th,
.fc-dayGridMonth-view .fc-scrollgrid,
.fc-dayGridMonth-view .fc-scrollgrid-section > table {
    border: none !important;
}

/* Outer cell transparent; use padding for GAP between cards */
.fc-dayGridMonth-view .fc-daygrid-day {
    background: transparent !important;
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 6px; /*  GAP BETWEEN CARDS (safe, prevents glue) */
}

/* The visible card */
.fc-dayGridMonth-view .fc-daygrid-day-frame {
    background: var(--surface-main);
    border-radius: 15px;
    margin: 0;
    padding: 8px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden; /* keeps content neat */

    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

/* Hover */
.fc-dayGridMonth-view .fc-daygrid-day:hover .fc-daygrid-day-frame {
    background: var(--brand-soft);
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(0,0,0,.08);
}

/* Day number */
.fc .fc-daygrid-day-number {
    color: var(--brand-dark);
    font-weight: 700;
    text-decoration: none;
    padding: 6px 8px;
    border-radius: 10px;
}

/* Today highlight (card only) */
.fc-dayGridMonth-view .fc-day-today {
    background: transparent !important;
}

    .fc-dayGridMonth-view .fc-day-today .fc-daygrid-day-frame {
        background: var(--brand-soft) !important;
        border: 1px solid var(--brand-main);
    }

/* Outside-month days */
.fc-dayGridMonth-view .fc-day-other .fc-daygrid-day-frame {
    background: var(--surface-soft);
    opacity: .6;
}

.fc-dayGridMonth-view .fc-day-other .fc-daygrid-day-number {
    color: var(--text-disabled);
}

/* Keep events tidy inside month cards (no glue) */
.fc-dayGridMonth-view .fc-daygrid-day-events {
    max-height: calc(100% - 40px);
    overflow: auto;
    padding-right: 4px;
}

    .fc-dayGridMonth-view .fc-daygrid-day-events::-webkit-scrollbar {
        width: 6px;
    }

    .fc-dayGridMonth-view .fc-daygrid-day-events::-webkit-scrollbar-thumb {
        background: rgba(47,65,86,.25);
        border-radius: 5rem;
    }

.fc-dayGridMonth-view .fc-daygrid-event {
    margin: 4px 0 !important;
}

/* --------------------------------
   WEEK/DAY VIEWS (timeGridWeek/timeGridDay) — restore grid lines
   -------------------------------- */

/* Bring back the table borders in week/day */
.fc-timeGridWeek-view.fc-theme-standard td,
.fc-timeGridWeek-view.fc-theme-standard th,
.fc-timeGridDay-view.fc-theme-standard td,
.fc-timeGridDay-view.fc-theme-standard th {
    border: 1px solid var(--border-soft) !important;
}

/* Slot horizontal lines */
.fc-timeGridWeek-view .fc-timegrid-slot,
.fc-timeGridDay-view .fc-timegrid-slot {
    border-top: 1px solid var(--border-soft) !important;
}

/* Column divider lines */
.fc-timeGridWeek-view .fc-timegrid-col,
.fc-timeGridDay-view .fc-timegrid-col {
    border-left: 1px solid var(--border-soft) !important;
}

/* Axis divider */
.fc-timeGridWeek-view .fc-timegrid-axis,
.fc-timeGridDay-view .fc-timegrid-axis {
    border-right: 1px solid var(--border-soft) !important;
}

/* --------------------------------
   Events (Pills) — all views
   -------------------------------- */
.fc .fc-daygrid-event,
.fc .fc-timegrid-event {
    background: var(--surface-main);
    border: 0;
    border-radius: 20px;
    padding: 4px 10px;
    font-weight: 700;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    margin-bottom: 5px;
}

.fc .fc-event-title,
.fc .fc-event-time {
    color: var(--text-primary);
}

.fc .fc-event-time {
    font-weight: 600;
    opacity: .9;
}

/* --------------------------------
   Toolbar / Buttons
   -------------------------------- */
.fc .fc-toolbar {
    margin-bottom: 12px;
}

.fc .fc-button {
    background: var(--brand-main);
    border: 0;
    border-radius: 12px;
    padding: 8px 14px;
    font-weight: 700;
    box-shadow: none;
    transition: transform .12s ease, background .15s ease, color .15s ease;
}

    .fc .fc-button:hover {
        transform: translateY(-1px);
        background: var(--brand-soft);
        color: var(--text-primary);
    }

    .fc .fc-button:focus {
        outline: none;
        box-shadow: 0 0 0 4px rgba(111,175,138,.25);
    }

/* “Today” button as pill */
.fc .fc-today-button {
    border-radius: 5rem;
    padding: 8px 18px;
}

/* Active button (month/week/day) */
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background: var(--brand-dark);
    color: #fff;
}

/* --------------------------------
   Week/Day (Time Grid) labels
   -------------------------------- */
.fc .fc-timegrid-axis {
    color: var(--text-secondary);
    font-size: .85rem;
}

/* Links cleanup */
.fc a {
    text-decoration: none;
    color: inherit;
}


/* -----------------------------------------
    Modal shell   
    ----------------------------------------- */
.appt-modal .modal-content {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

/* Header */
.appt-modal .modal-header {
    border: 0;
    padding: 18px 30px;
    background: var(--surface-soft);

}

.appt-title {
    font-weight: 700;
    letter-spacing: 2px;
    font-size:1.05rem;
}

.appt-subtitle {
    margin-top: 2px;
    font-size: .92rem;
    color: var(--text-secondary);
    font-weight:500;
}

/* Body */
.appt-modal .modal-body {
    padding: 18px 30px;
    background: var(--surface-soft)
}

/* Labels */
.appt-modal .form-label {
    font-size: .88rem;
    color: var(--text-primary);
    font-weight:500;
    margin-bottom: 6px;
}

/* Inputs */
.appt-modal .form-control,
.appt-modal .form-select {
    border-radius: 10px;
    padding: 12px 20px;
    background: rgba(255,255,255,.92);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

    .appt-modal .form-control:focus,
    .appt-modal .form-select:focus {
        border-color: rgba(111,175,138,.55);
        box-shadow: 0 0 0 4px rgba(111,175,138,.18);
    }

/* Notes textarea better feel */
#Notes {
    min-height: 110px;
    resize: vertical;
}

/* Soft hint text */
.appt-hint {
    font-size: .80rem;
    color: rgba(17,24,39,.55);
}

/* Suggestion card (replace ugly alert) */
.appt-suggest {
    margin-top: 14px;
    border-radius: 10px;
    padding: 14px 14px;
    background: var(--surface-main);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}

    .appt-suggest .icon {
        width: 40px;
        height: 40px;
        border-radius: 50px;
        display: grid;
        place-items: center;
        background: rgba(111,175,138,.18);
        color: rgba(17,24,39,.80);
        flex: 0 0 auto;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    }

    .appt-suggest .title {
        font-weight: 800;
        font-size: .95rem;
    }

    .appt-suggest .desc {
        font-size: .90rem;
        color: var(--text-secondary);
        font-weight:400;
        margin-top: 2px;
    }

/* Footer */
.appt-modal .modal-footer {
    border: 0;
    padding: 14px 20px 18px;
    background: var(--surface-soft);
}

/* Buttons */
.appt-btn {
    border-radius: 30px;
    padding: 7px 16px;
    font-weight: 700;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.appt-btn-soft {
    background: var(--surface-main);
}
    .appt-btn-soft:hover {
        background: var(--surface-main);
        color: var(--danger-main);
    }
.appt-btn-danger {
    background: var(--surface-main);
    color: var(--danger-dark);
}
.appt-btn-danger:hover {
    background: var(--danger-main);
    color: var(--surface-main);
}

.appt-btn-primary {
    background: var(--brand-dark);
}

    .appt-btn-primary:hover {
        background: var(--success-main);
        color:var(--danger-dark);
    }

/* -------------------------------------- Resources page ----------------------------------- */

.resource-toolbar {
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 20;
}

/* -----------------------------------------
   Search with filter INSIDE
   ----------------------------------------- */
.resource-search-wrap {
    position: relative;
    width: min(520px, 100%);
}

.resource-search {
    width: 100%;
    padding-right: 54px !important; /* space for filter btn */
    border-radius:5rem;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    background:#FFFFFF;
}

.resource-filter-dd {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.resource-filter-btn {
    width: 38px;
    height: 38px;
    border-radius: 5rem;
    border: 0;
    background: var(--brand-soft);
    display: grid;
    place-items: center;
    box-shadow: rgba(0,0,0,.10) 0 6px 16px;
    color: var(--brand-dark);
}

/* Center the filter dropdown under the search bar */
.resource-filter-menu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + 10px); /* space below search */
    width: min(320px, calc(100vw - 24px));
    max-width: 320px;
    border-radius: 16px;
}



.filter-title {
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Upload (+) button */
.resource-add {
    width: 48px;
    height: 48px;
    border-radius: 5rem;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-main);
    color: var(--brand-soft);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    font-size:1.55rem;
}

/* info button style */
.resource-info-btn {
    border-radius: 5rem;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    background: var(--brand-soft);
    padding: 10px 14px;
}

.resource-actions {
    gap: 10px !important;
}

/* Delete = icon round button */
.resource-btn-danger {
    width: 42px;
    height: 42px;
    border-radius: 5rem;
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
    color: #c0392b;
    display: grid;
    place-items: center;
    box-shadow: rgba(0,0,0,.08) 0 8px 20px;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

    .resource-btn-danger:hover {
        transform: translateY(-1px);
        background: rgba(192,57,43,.08);
        box-shadow: rgba(0,0,0,.12) 0 12px 26px;
    }

    .resource-btn-danger:active {
        transform: translateY(0);
    }

/* Edit = pill button */
.resource-btn-edit {
    height: 42px;
    border-radius: 5rem;
    border: 1px solid rgba(0,0,0,.08);
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: rgba(0,0,0,.08) 0 8px 20px;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

    .resource-btn-edit:hover {
        transform: translateY(-1px);
        box-shadow: rgba(0,0,0,.12) 0 12px 26px;
        filter: brightness(0.98);
    }

    .resource-btn-edit:active {
        transform: translateY(0);
    }
.resource-info-menu {
    width: 320px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: rgba(0,0,0,.18) 0 24px 60px;
}

/* -----------------------------------------
   Cards Grid
   ----------------------------------------- */

.resource-cards {
    margin-top: 0.5rem;
    padding: 10px;
    z-index: 1;
}

/* -----------------------------------------
   Resource Card Styling
   ----------------------------------------- */

.resource-card {
    border-radius: 1rem;
    background: #FFFFFF;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

    .resource-card:hover {
        transform: translateY(-1px);
        box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    }

.resource-card-body {
    padding: 20px 25px;
}

.resource-card-title {
    font-weight: 800;
    margin: 0 0 8px;
    letter-spacing: .2px;
    font-size: .85rem;
}

.resource-card-desc {
    margin: 0 0 10px;
    opacity: .85;
    line-height: 1.4;

}

resource-desc-text {
    font-size: 0.95rem;
    text-align: justify;
    letter-spacing: 0.5px;
}

.resource-badge {
    background: var(--brand-soft) !important;
    color: var(--brand-dark) !important;
    border-radius: 5rem;
    padding: 6px 10px;
    font-size: .75rem;
}

/* file chips container (optional) */
.resource-files .btn,
.resource-files .disabled {
    border-radius: 12px;
}

.resource-actions {
    gap: 8px;
}


/* -----------------------------------------
   Pagination
   ----------------------------------------- */

.resource-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 1.5rem;
}

.resource-pages {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

    /* Pagination buttons */
    .resource-pages .btn {
        border-radius: 10px;
        min-width: 36px;
    }

    /* Active page (optional if you add class in JS) */
    .resource-pages .active {
        background: var(--brand-main, #6FAF8A);
        border-color: var(--brand-main, #6FAF8A);
        color: #fff;
    }


/* -----------------------------------------
   Media Button + Expand Panel (inside card)
   ----------------------------------------- */
.resource-toprow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.media-menu {
    position: relative;
}

    .media-menu.is-disabled {
        opacity: .55;
    }

.media-menu-btn {
    width: 34px;
    height: 34px;
    border-radius: 5rem;
    border: 0;
    background: #FFFFFF;
    display: grid;
    place-items: center;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    transition: transform .15s ease, box-shadow .15s ease;
    color:var(--brand-dark);
}

    .media-menu-btn:hover {
        transform: translateY(-1px);
        box-shadow: rgba(0, 0, 0, 0.12) 0px 10px 15px -3px, rgba(0, 0, 0, 0.08) 0px 4px 6px -2px;
    }


.media-panel {
    width: 240px;
    position: absolute;
    right: 0;
    top: 44px;
    background: #fff;
    border-radius: 5rem;
    padding: 10px 10px 8px;
    z-index: 50;
    box-shadow: rgba(0, 0, 0, 0.30) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(.92);
    transform-origin: top right;
    transition: opacity .18s ease, transform .22s cubic-bezier(.2,.9,.2,1), visibility 0s linear .22s, border-radius .25s ease;
    will-change: opacity, transform;
}

.media-panel {
    border-radius: 5rem;
}

    .media-panel.is-box {
        border-radius: 18px;
    }

    .media-panel.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: scale(1);
        transition: opacity .18s ease, transform .22s cubic-bezier(.2,.9,.2,1), visibility 0s, border-radius .25s ease;
    }

.media-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.media-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

/* X at top-right */
.media-panel-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 5rem;
    border: 0;
    background: var(--danger-soft);
    color: var(--danger-dark);
    display: grid;
    place-items: center;
    box-shadow: rgba(0,0,0,.10) 0 10px 24px;
}

.media-panel-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-right: 54px; /* space for close button */
}

.media-dot {
    width: 40px;
    height: 40px;
    border-radius: 5rem;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,.03);
    text-decoration: none;
    box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;

}

    .media-dot img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.media-dot-icon i {
    font-size: 1.05rem;
}

.media-empty {
    color: rgba(0,0,0,.6);
    font-size: .9rem;
}

/* -----------------------------------------
   Description More/Less
   ----------------------------------------- */
.resource-desc-wrap {
    margin: 0 0 10px;
    position: relative;
}

.resource-desc-text {
    opacity: .85;
    line-height: 1.5;
    font-size: .95rem;
    letter-spacing: .3px;
    white-space: normal;
}

/* collapsed state uses line clamp */
.resource-desc-wrap.is-collapsed .resource-desc-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.resource-desc-toggle {
    border: 0;
    background: transparent;
    padding: 6px 0 0;
    font-weight: 700;
    color: var(--brand-dark);
}

.dropdown-menu {
    border-radius: 1rem;
    padding: 10px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}


/* ----------------------------------------- PROFESSIONAL DASHBOARD (pro-*) ----------------------------------------- */

/* Toolbar */
.pro-toolbar {
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 20;
}

/* Search with filter inside */
.pro-search-wrap {
    position: relative;
    width: min(520px, 100%);
}

.pro-search {
    width: 100%;
    padding-right: 54px !important;
    border-radius: 5rem;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    background: #FFFFFF;
}

.pro-filter-dd {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.pro-filter-btn {
    width: 38px;
    height: 38px;
    border-radius: 5rem;
    border: 0;
    background: var(--brand-soft);
    display: grid;
    place-items: center;
    box-shadow: rgba(0,0,0,.10) 0 6px 16px;
    color: var(--brand-dark);
}

/* Center dropdown under search */
.pro-filter-menu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + 10px);
    width: min(320px, calc(100vw - 24px));
    max-width: 320px;
    border-radius: 16px;
}

.pro-filter-title {
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Info button */
.pro-info-btn {
    border-radius: 5rem;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    background: var(--brand-soft);
    padding: 10px 14px;
}

.pro-info-menu {
    width: 320px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: rgba(0,0,0,.18) 0 24px 60px;
}

/* Cards container */
.pro-cards {
    margin-top: 0.5rem;
    padding: 10px;
    z-index: 1;
}

/* Card styling */
.pro-card {
    border-radius: 1rem;
    background: var(--surface-main);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    overflow: visible;
}

    .pro-card:hover {
        transform: translateY(-1px);
        box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    }

.pro-card-body {
    padding: 20px 25px;
}


/* ----------- card banner -----------*/

.pro-card-banner {
    position: relative;
    height: 150px; /* adjust as you like */
    width: 100%;
    overflow: visible;
}

    .pro-card-banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 1rem;
    }

    .pro-card-banner .pro-circles {
        position: absolute;
        right: 0;
        bottom: 0;
        transform: translateY(50%);
        display: flex;
        gap: 14px;
        padding: 12px 18px;
        background: var(--surface-main);
        backdrop-filter: blur(8px);
        border-top-left-radius: 2rem;
        z-index: 5;
    }


.pro-card-banner .pro-circle {
    width: 42px;
    height: 42px;
    font-size: 0.85rem;
}

/* ----------- name pill (top-left) ----------- */
.pro-name-pill {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--surface-main);
    backdrop-filter: blur(6px);
    padding: 2px 16px 2px;
    border-radius: 5rem;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--brand-dark);
    box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
    white-space: nowrap;
    max-width: calc(100% - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 2;
}

/* Make an <a> look like your circle (no underline, same size) */
.pro-circle-link {
    text-decoration: none;
    color: inherit;
    display: grid;
    place-items: center;
    border:none;
}

    /* Disabled look for when no latestSessionId */
    .pro-circle-link.is-disabled {
        pointer-events: none;
        opacity: .55;
        filter: grayscale(.2);
    }



/* Pagination */
.pro-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 1.5rem;
}

.pro-pages {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

    .pro-pages .btn {
        border-radius: 10px;
        min-width: 36px;
    }

.pro-user-topname {
    font-weight: 700;
    letter-spacing: .4px;
    font-size: 0.90rem;
    text-transform:uppercase;
    margin: 0 0 20px;
    color: var(--neutral-main, #2F4156);
    text-align: center;
}

.pro-circles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: nowrap;
}

.pro-circle {
    width: 45px;
    height: 45px;
    border-radius: 5rem;
    display: grid;
    place-items: center;
    background: var(--surface-soft, #EDF1F3);
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
    flex: 0 0 auto;
}

    .pro-circle-sev.sev-severe i {
        color: var(--danger-dark);
    }
    .pro-circle-sev.sev-minimal {
        background: rgba(111,175,138,.22) !important;
    }

    .pro-circle-sev.sev-mild {
        background: rgba(111,175,138,.32) !important;
    }

    .pro-circle-sev.sev-moderate {
        background: rgba(255,193,7,.26) !important;
    }

    .pro-circle-sev.sev-modsev {
        background: rgba(255,152,0,.26) !important;
    }

    .pro-circle-sev.sev-severe {
        background: rgba(220,53,69,.22) !important;
    }

    .pro-circle-sev.sev-unknown {
        background: rgba(47,65,86,.14) !important;
    }

/* Reason circle button */
.pro-menu {
    position: relative;
}

.pro-menu-btn {
    width: 42px;
    height: 42px;
    border-radius: 5rem;
    border: 0;
    background: var(--success-soft);
    display: grid;
    place-items: center;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    color: var(--brand-dark);
    transition: transform .15s ease, box-shadow .15s ease;
}

    .pro-menu-btn:hover {
        transform: translateY(-1px);
        box-shadow: rgba(0, 0, 0, 0.14) 0px 12px 18px -6px;
    }

/* Reason panel */
.pro-panel {
    width: 240px;
    position: absolute;
    right: 0;
    background: var(--surface-soft);
    border-radius: 18px;
    padding: 12px;
    z-index: 1000;
    opacity: 0;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    visibility: hidden;
    pointer-events: none;
    transform: scale(.92);
    transform-origin: top right;
    transition: opacity .18s ease, transform .22s cubic-bezier(.2,.9,.2,1), visibility 0s linear .22s;
    will-change: opacity, transform;
}

    .pro-panel.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: scale(1);
        transition: opacity .18s ease, transform .22s cubic-bezier(.2,.9,.2,1), visibility 0s;
    }

.pro-panel-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 5rem;
    border: 0;
    background: var(--danger-soft);
    color: var(--danger-dark);
    display: grid;
    place-items: center;
    box-shadow: rgba(0,0,0,.10) 0 10px 24px;
}

.pro-panel-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 0;
}

.pro-panel-title {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--brand-dark);
    font-size: .92rem;
}

.pro-panel-text {
    font-size: .90rem;
    line-height: 1.5;
    padding-right: 54px;
    text-align: justify;
    white-space: normal;
    overflow-wrap: anywhere;
    letter-spacing: 2px;
}

/* Accordions stack */
.pro-acc-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pro-circle-guardian {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .pro-circle-guardian .ga-icon {
        width: 48px;
        height: 48px;
        border-radius:2rem;
        display: block;
        pointer-events: none;
    }
.pro-guardian-row {
    padding: 8px;
}

/* kill bootstrap switch defaults that cause the weird square/dark look */
.form-switch .form-check-input.guardian-switch {
    background-image: none !important;
}

.pro-guardian-title {
    display: flex;
    font-size: .90rem;
    font-weight: 500;
    color: var(--neutral-main, #2F4156);
}

/* custom switch */
.guardian-switch {
    width: 50px !important;
    height: 25px !important;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 50px !important;
    background: rgba(148,163,184,.22) !important;
    box-shadow: rgba(0,0,0,.08) 0 8px 18px, rgba(0,0,0,.10) 0 2px 4px inset;
    position: relative;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

    /* the knob */
    .guardian-switch::before {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 20px;
        height: 20px;
        border-radius: 50px;
        background: var(--surface-soft);
        box-shadow: rgba(0,0,0,.18) 0 8px 18px;
        transition: transform .18s cubic-bezier(.2,.9,.2,1);
    }

    /* ON state */
    .guardian-switch:checked {
        background: rgba(34,197,94,.22) !important;
        border-color: rgba(34,197,94,.45) !important;
        box-shadow: rgba(34,197,94,.12) 0 12px 26px, rgba(0,0,0,.10) 0 2px 4px inset;
    }

        .guardian-switch:checked::before {
            transform: translateX(24px);
        }

    /* Remove the highlight / ring */
    .guardian-switch:focus,
    .guardian-switch:focus-visible,
    .form-switch .form-check-input.guardian-switch:focus,
    .form-switch .form-check-input.guardian-switch:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }

    /* Also prevent the “pressed” glow on click */
    .guardian-switch:active,
    .form-switch .form-check-input.guardian-switch:active {
        box-shadow: none !important;
    }

/* -----------------------------------------
       Accordion (shared)
       ----------------------------------------- */
.checkins-acc {
    margin-top: 0;
}

.checkins-acc-btn {
    width: 100%;
    border: none;
    background: none;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: box-shadow .18s ease, transform .12s ease, background .18s ease;
}

.checkins-acc-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    font-size: 0.90rem;
    letter-spacing:1px;
}


.checkins-acc-caret {
    transition: transform .22s ease;
    opacity: .75;
}

.checkins-acc-btn.is-open .checkins-acc-caret {
    transform: rotate(180deg);
}

.checkins-acc-body {
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height .35s ease, opacity .22s ease, transform .22s ease;
}

    .checkins-acc-body:not([hidden]) {
        max-height: 260px;
        opacity: 1;
        transform: translateY(0);
    }

.checkins-acc-meta {
    font-size: .92rem;
    margin-bottom: 10px;
    padding: 2px 10px;
}

    .checkins-acc-meta b {
        color: var(--neutral-main, #2F4156);
    }

.checkins-acc-actions {
    display: flex;
    gap: 12px;
}

    .checkins-acc-actions .btn {
        flex: 1 1 0;
        width: 100%;
        border-radius: 5rem;
        margin-bottom:4px;
        font-weight: 800;
        padding: 3px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
        background: #fff;
        color: var(--brand-dark);
    }

        .checkins-acc-actions .btn.disabled {
            pointer-events: none;
            opacity: .55;
        }



/* ----------------------------------------- Checkin page ------------------------------------------*/
.ci-shell {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 2rem;
    align-items: stretch;
}


/* ---------- LEFT IMAGE CARD ---------- */
.ci-left {
    top: 18px;
    height: 100%;
}

.ci-hero {
    border-radius: 22px;
    overflow: hidden;
    height: 100%;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
    min-height: 300px;
}

/* image container becomes the full card */
.ci-hero-img {
    background-size: cover;
    background-position: center;
    position: relative;
    height: 100%;
    min-height: 300px;
}

    /* gradient for readability */
    .ci-hero-img::after {
        content: "";
        position: absolute;
        inset: 0;
    }

/* footer OVER image */
.ci-hero-foot {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 15px;
    z-index: 2;
    padding: 10px 18px;
    background: var(--surface-soft);
    backdrop-filter: blur(10px);
    /* smooth separation */
    border-radius: 5rem;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}

/* ensure footer content sits above gradient */
.ci-meta {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* ---- BACK BUTTON ---- */
.ci-back {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center; /* vertical centering */
    justify-content: center; /* horizontal centering */

    border-radius: 4rem;
    height: 40px;
    width: 40px;
    font-weight: 700;
    font-size: .95rem;
    color: var(--brand-dark);
    background: var(--surface-soft);
    backdrop-filter: blur(8px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}


    .ci-back:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 25px rgba(0,0,0,.18);
        color: var(--brand-dark);
        background: var(--brand-soft);
        text-decoration: none;
    }

.ci-date {
    font-size: .9rem;
    color: var(--text-primary);
}

/* ---- Severity badge ---- */
.ci-badge {
    font-weight: 800;
    font-size: .78rem;
    padding: .45rem .65rem;
    border-radius: 5rem;
    border: 1px solid rgba(0,0,0,.08);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
}

.ci-dot {
    width: 8px;
    height: 8px;
    border-radius: 5rem;
}

.sev-severe .ci-dot {
    background: #ef4444;
}

.sev-modsev .ci-dot {
    background: #f97316;
}

.sev-moderate .ci-dot {
    background: #f59e0b;
}

.sev-mild .ci-dot {
    background: #22c55e;
}

.sev-minimal .ci-dot {
    background: #10b981;
}

.sev-unknown .ci-dot {
    background: #64748b;
}

/* ---------- RIGHT CARD ---------- */
.ci-card {
    border-radius: 1rem;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    background: #FFFFFF;
    overflow: hidden;
    padding:15px
}

.ci-card-head {
    padding: 18px;
}

.ci-title {
    margin: 0;
    font-weight: 900;
}


.ci-tabs {
    display: flex;
    gap: 10px;
    padding: 12px 18px 0;
}

.ci-tab {
    border: none;
    background: var(--surface-soft);
    padding: .55rem .9rem;
    border-radius: 5rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

    .ci-tab.active {
        background: var(--brand-main);
        color: var(--brand-dark);
    }


.ci-panel {
    display: none;
}

    .ci-panel.show {
        display: block;
    }

.ci-summary {
    padding: 25px;
}

.ci-turn {
    border-radius: 18px;
    padding: 20px;
}

.ci-q {
    font-weight: 400;
}

.ci-a {
    padding: 10px;
    font-weight: 500;
    color: var(--brand-dark);
}

@media (max-width:992px) {
    .ci-shell {
        grid-template-columns: 1fr;
    }

    .ci-hero-img {
        height: 260px;
    }
}

/* header row: title left, tabs right */
.ci-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

/* inline tabs inside header */
.ci-tabs-inline {
    padding: 0; /* remove the old padding */
    margin: 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap; /* prevents overflow */
    justify-content: flex-end;
}

    /* make tabs a bit smaller so they fit nicely in header */
    .ci-tabs-inline .ci-tab {
        padding: .45rem .75rem;
        font-size: .85rem;
    }

/* responsive: on small screens, stack title and tabs */
@media (max-width: 576px) {
    .ci-head-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .ci-tabs-inline {
        justify-content: flex-start;
    }
}

/* tabs + info button sit together */
.ci-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* info icon button */
.ci-info-btn {
    width: 38px;
    height: 38px;
    border-radius: 5rem;
    border: 1px solid rgba(0,0,0,.10);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(17,24,39,.72);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

    .ci-info-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(0,0,0,.10);
        background: rgba(246,247,251,.9);
    }

/* dropdown panel */
.ci-info-menu {
    width: min(320px, calc(100vw - 32px));
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 18px 45px rgba(0,0,0,.12);
}

/* make header row wrap cleanly on small screens */
@media (max-width: 576px) {
    .ci-head-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .ci-head-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* ----------------------------------------- FORUM Professional side ----------------------------------------- */

.feed-post {
    margin-bottom: 18px;
}

.feed-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: rgba(0,0,0,.08) 0 16px 34px;
    overflow: hidden;
}

    .feed-card.is-unlisted {
        opacity: .78;
    }

    .feed-card.is-flagged {
        box-shadow: rgba(220,53,69,.18) 0 18px 38px;
    }

.feed-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 10px;
}

.feed-left {
    display: flex;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.feed-avatar {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-weight: 900;
    color: #0f5132;
    background: rgba(25,135,84,.12);
    box-shadow: rgba(0,0,0,.08) 0 10px 24px;
    flex: 0 0 auto;
}

.feed-meta {
    min-width: 0;
    flex: 1;
}

.feed-name-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.feed-name {
    font-weight: 900;
    color: var(--text-primary, #1f2a37);
    letter-spacing: .01em;
}

.feed-author-actions {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.feed-subrow {
    margin-top: 4px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    color: #6c757d;
    font-size: .88rem;
}

.feed-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.feed-right {
    display: flex;
    align-items: center;
}

.feed-menu-btn {
    width: 38px;
    height: 38px;
    border-radius: 5rem;
    border: 1px solid rgba(0,0,0,.06);
    background: #fff;
    display: grid;
    place-items: center;
    box-shadow: rgba(0,0,0,.08) 0 10px 24px;
    transition: transform .15s ease;
}

    .feed-menu-btn:hover {
        transform: translateY(-1px);
    }

.feed-mini-btn {
    width: 32px;
    height: 32px;
    border-radius: 5rem;
    border: 1px solid rgba(0,0,0,.06);
    background: rgba(25,135,84,.10);
    color: #0f5132;
    display: grid;
    place-items: center;
    box-shadow: rgba(0,0,0,.08) 0 8px 16px;
    transition: transform .15s ease, background .15s ease;
}

    .feed-mini-btn:hover {
        transform: translateY(-1px);
        background: rgba(25,135,84,.16);
    }

    .feed-mini-btn.is-danger {
        background: rgba(220,53,69,.10);
        color: #b02a37;
    }

        .feed-mini-btn.is-danger:hover {
            background: rgba(220,53,69,.16);
        }

    .feed-mini-btn.is-success {
        background: rgba(25,135,84,.10);
        color: #0f5132;
    }

    .feed-mini-btn.is-warn {
        background: rgba(255,193,7,.18);
        color: #7a5b00;
    }

/* Content */
.feed-content {
    /* kill any centering */
    text-align: left !important;
    /* readable line length */
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
    padding: 20px 16px 20px;
}

/* -----------------------------------------
   TAG BAR (LEFT) + ACTIONS (RIGHT)
   ----------------------------------------- */
.feed-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid rgba(0,0,0,.06);
    border-bottom: 1px solid rgba(0,0,0,.06);
    background: rgba(0,0,0,.01);
    flex-wrap: wrap;
}

.feed-actions-left {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    flex: 1 1 260px;
}

.feed-actions-right {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.feed-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 5rem;
    font-weight: 600;
    font-size: .70rem;
    background: rgba(255,255,255,.92);
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
}

    .feed-tag i {
        opacity: .9;
    }

.feed-tag-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 7px;
    border-radius: 5rem;
    background: rgba(0,0,0,.08);
    font-size: .75rem;
}

.feed-tag--danger {
    background: rgba(220,53,69,.10);
    color: #b02a37;
}

.feed-tag--warn {
    background: rgba(255,193,7,.20);
    color: #7a5b00;
    border:none;
}

.feed-tag--muted {
    background: rgba(108,117,125,.14);
    color: #4b545c;
}

.feed-tag--removed {
    background: rgba(0,0,0,.06);
    color: #4b545c;
}

/* Action pill buttons */
.feed-action {
    border: 0;
    background: #fff;
    border-radius: 5rem;
    padding: 8px 14px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: rgba(0,0,0,.08) 0 10px 20px;
    transition: transform .15s ease;
    white-space: nowrap;
}

    .feed-action:hover {
        transform: translateY(-1px);
    }

.feed-action--ghost-warn {
    background: rgba(255,193,7,.16);
}

.feed-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 20px;
    padding: 0 8px;
    border-radius: 5rem;
    background: rgba(0,0,0,.05);
    font-size: .82rem;
}

/* -----------------------------------------
   COMMENTS
   ----------------------------------------- */
.feed-comments {
    padding: 10px 14px 14px;
    animation: feedPop 220ms cubic-bezier(.2,.9,.2,1) both;
}

@keyframes feedPop {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.feed-comments-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.feed-link {
    border: 0;
    background: transparent;
    padding: 0;
    font-weight: 900;
    color: var(--brand-dark, #4F9A74);
}

.feed-comments-empty {
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(0,0,0,.02);
    border: 1px dashed rgba(0,0,0,.12);
    color: #6c757d;
}

.comment-item {
    display: flex;
    gap: 10px;
    padding: 10px 8px;
}

    .comment-item.is-flagged .comment-body {
        background: rgba(255,193,7,.12);
    }

.comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-weight: 900;
    background: rgba(25,135,84,.10);
    color: #0f5132;
    flex: 0 0 auto;
}

.comment-body {
    flex: 1;
    min-width: 0;
    background: rgba(0,0,0,.02);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 16px;
    padding: 10px 12px;
}

.comment-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.comment-name {
    font-weight: 900;
    color: var(--text-primary, #1f2a37);
}

.comment-actions {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.comment-text {
    margin-top: 6px;
    color: var(--text-secondary, #4b5563);
    line-height: 1.5;
    white-space: pre-wrap;
}

.comment-meta {
    margin-top: 6px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    color: #6c757d;
    font-size: .86rem;
}

/* small chips for reply meta */
.feed-chip {
    font-size: .72rem;
    border-radius: 5rem;
    padding: 2px 10px;
    font-weight: 900;
    background: rgba(0,0,0,.03);
    box-shadow: rgba(0,0,0,.06) 0 2px 4px inset;
}

.feed-chip--danger {
    background: rgba(220,53,69,.10);
    color: #b02a37;
}

.feed-chip--warn {
    background: rgba(255,193,7,.18);
    color: #7a5b00;
}

/* -----------------------------------------
   REPORT POPUP (FORCED NICE)
   ----------------------------------------- */

.reports-container {
    margin: 10px 16px 0;
    display: none;
    position: relative;
    z-index: 20;
}

    .reports-container.is-open {
        display: block;
        animation: forumPopIn 260ms cubic-bezier(.2,.9,.2,1) both;
        transform-origin: top right;
    }

@keyframes forumPopIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.report-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 16px;
    box-shadow: rgba(0,0,0,.12) 0 18px 38px;
    overflow: hidden;
}

.report-card-head {
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: rgba(255,193,7,.14);
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.report-card-title {
    font-weight: 900;
    color: var(--text-primary, #1f2a37);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .report-card-title i {
        color: #7a5b00;
    }

.report-card-body {
    padding: 10px 14px 14px;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--text-secondary, #4b5563);
}

.report-raw-lines {
    display: grid;
    gap: 10px;
}

.report-line {
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.06);
    background: rgba(0,0,0,.02);
}


/* -----------------------------------------
   AVATAR — BLOCKED STATE
   ----------------------------------------- */
.forum-toolbar-inner {
    display: flex;
    justify-content: flex-end; /* keep search on right BUT within centered container */
    align-items: center;
    gap: 12px;
    padding: 18px 0 8px;
}

.feed-avatar,
.comment-avatar {
    display: grid;
    place-items: center;
    font-weight: 900;
    user-select: none;
}

    /* Normal avatars already styled by you */

    /* BLOCKED */
    .feed-avatar.is-blocked,
    .comment-avatar.is-blocked {
        background: rgba(220,53,69,.18);
        color: #b02a37;
        font-size: 18px;
        box-shadow: rgba(220,53,69,.25) 0 8px 20px;
    }

        /* Icon size tuning */
        .feed-avatar.is-blocked i {
            font-size: 20px;
        }

        .comment-avatar.is-blocked i {
            font-size: 16px;
        }

    /* Optional: remove letter spacing weirdness */
    .feed-avatar.is-blocked,
    .comment-avatar.is-blocked {
        letter-spacing: 0;
    }

/* ============================================
   FORUM COMPOSER: inputs + POST button (your palette)
   Drop this under your existing .feed-* CSS
   ============================================ */

:root {
    --eh-brand: #6FAF8A;
    --eh-brand-dark: #4F9A74;
    --eh-ink: #2F4156;
    /* subtle input border in your green */
    --eh-input-border: rgba(79,154,116,.28);
    --eh-input-border-hover: rgba(79,154,116,.45);
    --eh-input-ring: rgba(79,154,116,.20);
}

/* ---------- Inputs (textarea + tag input + comments textarea) ---------- */
.feed-post .form-control,
.feed-comments .form-control {
    border: 1px solid var(--eh-input-border) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.92) !important;
    color: var(--eh-ink) !important;
    box-shadow: rgba(0,0,0,.06) 0 2px 6px inset;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .feed-post .form-control:hover,
    .feed-comments .form-control:hover {
        border-color: var(--eh-input-border-hover) !important;
    }

    .feed-post .form-control:focus,
    .feed-comments .form-control:focus {
        border-color: var(--eh-brand-dark) !important;
        box-shadow: 0 0 0 .18rem var(--eh-input-ring), rgba(0,0,0,.06) 0 2px 6px inset;
        outline: 0 !important;
    }

/* Make textarea feel nicer */
.feed-post textarea.form-control,
.feed-comments textarea.form-control {
    resize: vertical;
    min-height: 98px;
}

/* ---------- Tag box wrapper (your #tagBox) ---------- */
#tagBox {
    border-radius: 14px !important;
    background: rgba(255,255,255,.75);
}

    /* Remove double borders inside tagBox (input already styled) */
    #tagBox .form-control {
        border-radius: 12px !important;
    }

/* Tag suggestions list */
#tagSuggestions {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: rgba(0,0,0,.10) 0 18px 38px;
}

    #tagSuggestions .list-group-item {
        border: 0;
        padding: 10px 12px;
    }

        #tagSuggestions .list-group-item:hover {
            background: rgba(79,154,116,.10);
        }

/* ---------- POST button (create post + comment send) ---------- */
/* Create Post button */
.feed-post .btn-primary {
    border: 0 !important;
    background: linear-gradient(135deg, var(--eh-brand-dark), var(--eh-brand)) !important;
    color: #fff !important;
    font-weight: 900;
    border-radius: 14px !important;
    padding: 10px 16px !important;
    box-shadow: rgba(79,154,116,.30) 0 14px 28px, rgba(0,0,0,.08) 0 8px 16px;
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

    .feed-post .btn-primary:hover {
        transform: translateY(-1px);
        filter: brightness(.98);
        box-shadow: rgba(79,154,116,.36) 0 18px 34px, rgba(0,0,0,.10) 0 10px 20px;
    }

    .feed-post .btn-primary:active {
        transform: translateY(0);
    }

/* Comment send button (the small airplane icon) */
.feed-comments .addReplyForm .btn-primary {
    width: 52px;
    height: 52px;
    padding: 0 !important;
    border-radius: 14px !important;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--eh-brand-dark), var(--eh-brand)) !important;
    box-shadow: rgba(79,154,116,.30) 0 14px 28px, rgba(0,0,0,.08) 0 8px 16px;
}

    .feed-comments .addReplyForm .btn-primary i {
        font-size: 18px;
    }

/* ------------------------------- Support group -------------------------------------- */

.sgd-hero {
    padding: 16px 18px 14px;
    margin-bottom: 14px;
}

.sgd-hero-min {
    position: relative;
}

.sgd-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.sgd-hero-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Forum button */
.sgd-forum-btn {
    border-radius: 999px;
    padding: 10px 14px;
    background: var(--surface-main);
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}

    .sgd-forum-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 18px 40px rgba(0,0,0,.12);
    }

.sgd-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 5rem;
    text-decoration: none;
    background: var(--surface-main);
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
    transition: transform .15s ease, box-shadow .15s ease;
    color: inherit;
    white-space: nowrap;
    height: fit-content;
}

    .sgd-back:hover {
        transform: translateY(-1px);
        box-shadow: 0 18px 40px rgba(0,0,0,.12);
    }

/*  IMPORTANT: allow dropdowns/panels to render above cards */
.sgd-card {
    border-radius: 22px;
    overflow: visible; /* not hidden */
    position: relative;
}

.sgd-card-body {
    padding: 16px;
    position: relative;
    isolation: isolate; /* clean stacking context */
}

/* Header (title + count + add) */
.sgd-members-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    position: relative;
    z-index: 3; /* small, enough */
}

.sgd-members-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sgd-group-name {
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: .01em;
    line-height: 1.1;
}

.sgd-count-pill {
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 800;
    font-size: .9rem;
    background: rgba(111,175,138,.18);
    border: 1px solid rgba(111,175,138,.25);
}

.sgd-members-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Search */
.sgd-search-wrap {
    position: relative;
    min-width: 240px;
}

.sgd-search-wrap-hero {
    width: min(350px, 62vw);
}

.sgd-search {
    border-radius: 5rem;
    padding: 11px 54px 11px 14px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.sgd-filter-dd {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
}

.sgd-filter-btn {
    width: 38px;
    height: 38px;
    border-radius: 5rem;
    border: none;
    background: var(--surface-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

/*  Menus above cards (still small values) */
.sgd-filter-menu {
    min-width: 300px;
    border-radius: 18px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    z-index: 50;
}

.sgd-filter-title {
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .82rem;
    opacity: .8;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Info */
.sgd-info-btn {
    width: 44px;
    height: 44px;
    border-radius: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    background: var(--surface-soft);
}

.sgd-info-menu {
    width: 310px;
    border-radius: 18px;
    box-shadow: 0 22px 56px rgba(0,0,0,.14);
    z-index: 50;
}

/* Add member */
.sgd-addwrap {
    position: relative;
}

.sgd-addbtn {
    background: var(--surface-soft);
    border-radius: 5rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    color: var(--text-primary);
    font-size: 18px;
}

.sgd-addpanel {
    position: absolute;
    right: 0;
    top: 52px;
    width: 300px;
    border-radius: 18px;
    background: var(--surface-soft);
    box-shadow: 0 22px 56px rgba(0,0,0,.14);
    z-index: 50;
    overflow: hidden;
    transform: translateY(-6px) scale(.98);
    opacity: 0;
    pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
}

    .sgd-addpanel.is-open {
        transform: translateY(0) scale(1);
        opacity: 1;
        pointer-events: auto;
    }

.sgd-addhead {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    background: var(--surface-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sgd-addtitle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
    font-size: .82rem;
    opacity: .9;
}

.sgd-addclose {
    width: 36px;
    height: 36px;
    border-radius: 5rem;
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(255,255,255,.95);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sgd-addbody {
    padding: 12px 14px 14px;
}

.sgd-select {
    border-radius: 5rem;
    padding: 10px 12px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    margin-bottom: 1rem;
}

.sgd-btn {
    border-radius: 5rem;
    padding: 7px 10px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: none;
    background: var(--brand-main);
    color: var(--surface-soft);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

/* Cards stay below */
#membersCards,
#membersCards .col-md-6 {
    position: relative;
    z-index: 1;
}

.sgm-card {
    background: var(--surface-soft);
    border-radius: 18px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    padding: 14px;
    height: 100%;
    transition: transform .15s ease, box-shadow .15s ease;
    position: relative;
    z-index: 1;
}

    .sgm-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 20px 44px rgba(0,0,0,.10);
    }

.sgm-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sgm-avatar {
    width: 42px;
    height: 42px;
    border-radius: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    background: rgba(186,230,203,.55);
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
    flex: 0 0 auto;
}

.sgm-main {
    flex: 1;
    min-width: 0;
}

.sgm-name {
    font-weight: 900;
    line-height: 1.2;
    margin-top: 2px;
}

.sgm-email {
    margin-top: 6px;
    font-size: .92rem;
    opacity: .78;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

    .sgm-email span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }

.sgm-remove {
    border-radius: 5rem;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(220,53,69,.25);
    background: rgba(220,53,69,.06);
    color: #b02a37;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .12s ease, background .12s ease;
    flex: 0 0 auto;
}

    .sgm-remove:hover {
        transform: translateY(-1px);
        background: rgba(220,53,69,.10);
    }

.sgm-meta {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sgm-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .92rem;
    opacity: .85;
    white-space: nowrap;
}

.sgd-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.sgd-pages {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 576px) {
    .sgd-hero-top {
        flex-direction: column;
        align-items: stretch;
    }

    .sgd-back-left {
        width: 100%;
        justify-content: center;
    }

    .sgd-forum-btn {
        width: 100%;
        justify-content: center;
    }

    .sgd-search-wrap-hero {
        width: 100%;
    }

    .sgd-members-head {
        flex-direction: column;
        align-items: stretch;
    }

    .sgd-members-right {
        justify-content: space-between;
    }

    .sgd-addpanel {
        width: 92vw;
        right: -8px;
    }

    .sgd-info-menu {
        width: 92vw;
    }
}

@media (max-width: 576px) {

    /* HERO: stack nicely */
    .sgd-hero-top {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    /* Make hero tools wrap to new line */
    .sgd-hero-tools {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto; /* search + info */
        gap: 10px;
        align-items: center;
    }

    /* Back becomes full width */
    .sgd-back-left {
        width: 100%;
        justify-content: center;
    }

    /* Forum becomes full width like a button */
    .sgd-forum-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 14px;
    }

    /* Search takes full width */
    .sgd-search-wrap-hero {
        width: 100%;
        min-width: 0;
    }

    .sgd-search {
        width: 100%;
    }

    /* Info button stays on the right column */
    .sgd-info-btn {
        width: 46px;
        height: 46px;
        justify-self: end;
    }

    /* Members header: title+count on one line, add below/right */
    .sgd-members-head {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        align-items: center;
    }

    .sgd-members-left {
        min-width: 0;
    }

    .sgd-members-right {
        justify-content: flex-end;
    }

    /* Add button aligns neatly */
    .sgd-addbtn {
        width: 46px;
        height: 46px;
    }

    /* Dropdown panels should fit phone width */
    .sgd-filter-menu,
    .sgd-info-menu {
        width: min(92vw, 360px);
    }

    .sgd-addpanel {
        width: min(92vw, 360px);
        right: 0;
    }
}




/* ------------------------------ Chat —------------------------------ */

:root {
    --eh-ink: #2F4156;
    --eh-ink-2: rgba(47,65,86,.72);
    --eh-ink-3: rgba(47,65,86,.55);
    --eh-glass: rgba(255,255,255,.72);
    --eh-glass-2: rgba(255,255,255,.58);
    --eh-glass-3: rgba(255,255,255,.42);
    --eh-border: rgba(47,65,86,.10);
    --eh-shadow: 0 18px 60px rgba(31,52,76,.12);
    /* keep this for now; easy to remove later */
    --eh-accent: rgba(111,175,138,.22);
    --eh-accent-border: rgba(111,175,138,.35);
}

.chat-page {
    padding: 14px 0 26px;
}

/* The main layout */
.chat-shell {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 18px;
    /* IMPORTANT: real height so internal scroll works */
    height: calc(100vh - 170px);
    min-height: 520px;
}

/* Panels should feel like your card system */
.chat-side,
.chat-main {
    border-radius: 26px;
    overflow: hidden;
    background: var(--eh-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: var(--eh-shadow);
    /* IMPORTANT: allow children to shrink and scroll */
    min-height: 0;
}

/* Head strips (subtle) */
.chat-side-head,
.chat-head {
    background: rgba(255,255,255,.55);
    border-bottom: 1px solid var(--eh-border);
}

/* LEFT HEADER */
.chat-side-head {
    padding: 14px 16px;
}

.chat-side-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .82rem;
    color: var(--eh-ink);
}

.chat-side-sub {
    margin-top: 6px;
    font-size: .92rem;
    color: var(--eh-ink-3);
}

/* LEFT BODY */
.chat-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.chat-side-form {
    padding: 14px;
    /* IMPORTANT: let list take remaining space and scroll */
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.chat-side-search {
    position: relative;
    margin-bottom: 12px;
}

    .chat-side-search i {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(47,65,86,.45);
    }

    .chat-side-search input {
        width: 100%;
        border-radius: 999px;
        padding: 11px 14px 11px 40px;
        background: rgba(255,255,255,.78);
        border: 1px solid rgba(47,65,86,.12);
        color: var(--eh-ink);
    }

        .chat-side-search input::placeholder {
            color: rgba(47,65,86,.45);
        }

        .chat-side-search input:focus {
            outline: none;
            border-color: rgba(47,65,86,.18);
            box-shadow: 0 0 0 3px rgba(47,65,86,.06);
        }

/* User list */
.chat-userlist {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* IMPORTANT: this scrolls INSIDE the panel now */
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding-right: 6px;
}

    .chat-userlist::-webkit-scrollbar {
        width: 10px;
    }

    .chat-userlist::-webkit-scrollbar-thumb {
        background: rgba(47,65,86,.14);
        border-radius: 999px;
    }

.chat-user {
    width: 100%;
    text-align: left;
    border-radius: 22px;
    padding: 12px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(47,65,86,.10);
    background: rgba(255,255,255,.62);
    color: var(--eh-ink);
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

    .chat-user:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.78);
        border-color: rgba(47,65,86,.14);
    }

    .chat-user.is-active {
        background: rgba(255,255,255,.82);
        border-color: rgba(47,65,86,.16);
        box-shadow: 0 12px 34px rgba(31,52,76,.10);
    }

.chat-avatar {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: var(--eh-ink);
    background: rgba(200,217,230,.40);
    border: 1px solid rgba(47,65,86,.10);
    flex: 0 0 auto;
}

.chat-user-main {
    flex: 1;
    min-width: 0;
}

.chat-user-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.chat-user-name {
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-user-sub {
    margin-top: 4px;
    font-size: .9rem;
    color: var(--eh-ink-3);
}

.chat-user-arrow {
    opacity: .35;
    color: var(--eh-ink);
}

/* GA pill using your svg */
.chat-ga-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .02em;
    background: rgba(255,255,255,.75);
    border: 1px solid rgba(47,65,86,.12);
    color: var(--eh-ink);
    white-space: nowrap;
}

.chat-ga-ico {
    width: 16px;
    height: 16px;
    display: block;
    filter: saturate(.85) contrast(1.05);
}

/* RIGHT HEADER */
.chat-head {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.chat-head-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.chat-head-avatar {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: var(--eh-ink);
    background: rgba(200,217,230,.42);
    border: 1px solid rgba(47,65,86,.10);
    flex: 0 0 auto;
}

.chat-head-meta {
    min-width: 0;
}

.chat-head-name {
    font-weight: 900;
    color: var(--eh-ink);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.chat-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Message search to match your top toolbars */
.chat-msg-search {
    position: relative;
    width: min(380px, 46vw);
}

    .chat-msg-search i {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(47,65,86,.45);
    }

    .chat-msg-search input {
        width: 100%;
        border-radius: 999px;
        padding: 11px 46px 11px 40px;
        background: rgba(255,255,255,.78);
        border: 1px solid rgba(47,65,86,.12);
        color: var(--eh-ink);
    }

        .chat-msg-search input::placeholder {
            color: rgba(47,65,86,.45);
        }

        .chat-msg-search input:focus {
            outline: none;
            border-color: rgba(47,65,86,.18);
            box-shadow: 0 0 0 3px rgba(47,65,86,.06);
        }

.chat-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(47,65,86,.10);
    background: rgba(255,255,255,.78);
    color: rgba(47,65,86,.75);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Chat body */
.chat-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Messages */
.chat-box {
    flex: 1;
    min-height: 0; /* IMPORTANT */
    padding: 18px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

    .chat-box::-webkit-scrollbar {
        width: 10px;
    }

    .chat-box::-webkit-scrollbar-thumb {
        background: rgba(47,65,86,.14);
        border-radius: 999px;
    }

.chat-row {
    display: flex;
    margin-bottom: 12px;
}

    .chat-row.is-mine {
        justify-content: flex-end;
    }

    .chat-row.is-theirs {
        justify-content: flex-start;
    }

.chat-bubble {
    max-width: min(640px, 85%);
    border-radius: 18px;
    padding: 10px 12px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(47,65,86,.10);
    box-shadow: 0 10px 26px rgba(31,52,76,.10);
}

.chat-row.is-mine .chat-bubble {
    background: var(--eh-accent);
    border-color: var(--eh-accent-border);
}

.chat-text {
    color: var(--eh-ink);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.35;
}

.chat-meta {
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: .82rem;
    color: var(--eh-ink-3);
}

.chat-actions {
    display: inline-flex;
    gap: 6px;
}

.chat-mini-btn {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid rgba(47,65,86,.10);
    background: rgba(255,255,255,.78);
    color: rgba(47,65,86,.80);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .12s ease, background .12s ease;
}

    .chat-mini-btn:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.92);
    }

    .chat-mini-btn.danger {
        border-color: rgba(158,42,43,.20);
        background: rgba(158,42,43,.10);
        color: rgba(120,18,18,.92);
    }

/* Composer */
.chat-compose {
    border-top: 1px solid var(--eh-border);
    background: rgba(255,255,255,.55);
    padding: 12px 12px 10px;
}

.chat-compose-inner {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.chat-input {
    width: 100%;
    min-height: 46px;
    max-height: 140px;
    resize: none;
    border-radius: 999px;
    padding: 12px 14px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(47,65,86,.12);
    color: var(--eh-ink);
}

    .chat-input::placeholder {
        color: rgba(47,65,86,.45);
    }

    .chat-input:focus {
        outline: none;
        border-color: rgba(47,65,86,.18);
        box-shadow: 0 0 0 3px rgba(47,65,86,.06);
    }

.chat-send {
    width: 50px;
    height: 50px;
    border-radius: 18px;
    border: 1px solid rgba(47,65,86,.12);
    background: rgba(255,255,255,.82);
    color: rgba(47,65,86,.85);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 26px rgba(31,52,76,.10);
    transition: transform .12s ease, background .12s ease;
}

    .chat-send:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.92);
    }

.chat-compose-hint {
    margin-top: 6px;
    font-size: .82rem;
    color: var(--eh-ink-3);
    padding-left: 2px;
}

/* Empty state */
.chat-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.chat-empty-card {
    width: min(560px, 100%);
    border-radius: 26px;
    padding: 24px;
    text-align: center;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(47,65,86,.10);
    box-shadow: 0 18px 46px rgba(31,52,76,.12);
}

.chat-empty-ico {
    width: 60px;
    height: 60px;
    margin: 0 auto 12px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(200,217,230,.40);
    border: 1px solid rgba(47,65,86,.10);
    font-size: 1.4rem;
    color: var(--eh-ink);
}

.chat-empty-title {
    font-weight: 900;
    font-size: 1.15rem;
    color: var(--eh-ink);
}

.chat-empty-sub {
    margin-top: 8px;
    color: var(--eh-ink-3);
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
    .chat-shell {
        grid-template-columns: 1fr;
        height: auto;
        min-height: auto;
    }

    .chat-userlist {
        max-height: 260px;
    }

    .chat-main {
        min-height: calc(100vh - 360px);
    }

    .chat-msg-search {
        width: min(520px, 72vw);
    }
}

@media (max-width: 576px) {
    .chat-page {
        padding: 10px 0 18px;
    }

    .chat-shell {
        gap: 12px;
    }

    .chat-side, .chat-main {
        border-radius: 22px;
    }

    .chat-side-head, .chat-head {
        padding: 12px;
    }

    .chat-box {
        padding: 12px;
    }

    .chat-bubble {
        max-width: 92%;
    }

    .chat-msg-search {
        width: 62vw;
    }

    .chat-head-actions {
        gap: 8px;
    }

    .chat-send {
        width: 46px;
        height: 46px;
    }
}


/* ---------------------------------- Forms ---------------------------- */

/* =========================
   EchoForm Design Variables
   ========================= */
:root {
    --echoform-brand: #6FAF8A;
    --echoform-brand2: #4F9A74;
    --echoform-ink: #2F4156;
    --echoform-muted: #6b7280;
    --echoform-stroke: rgba(47,65,86,.12);
    --echoform-shadow: 0 18px 55px rgba(0,0,0,.12);
    --echoform-radius: 1rem;
}

/* =========================
   Page wrapper spacing
   ========================= */
.echoform-page {
    padding: 32px 16px;
}

.echoform-shell {
    max-width: 1000px;
    margin: 0 auto;
}

/* =========================
   2-column layout (left preview + right form)
   ========================= */
.echoform-two {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 18px;
    align-items: stretch;
}

/* =========================
   Base cards (left + right panels)
   ========================= */
.echoform-visualCard,
.echoform-formCard {
    overflow: hidden;
    box-shadow: rgba(0,0,0,.10) 0px 10px 15px -3px, rgba(0,0,0,.05) 0px 4px 6px -2px;
    border-radius: 1rem;
}

.echoform-formCard {
    padding: 10px 60px 10px;
}

/* =========================
   LEFT hero image panel
   ========================= */
.echoform-visualHero {
    position: relative;
    height: 100%;
    width: 100%;
    background: url('/images/waves.png') center no-repeat;
    background-size: cover;
}

/* =========================
   Back button on hero (top-left)
   ========================= */
.echoform-backOnImage {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 6;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.24);
    border: 1px solid rgba(255,255,255,.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--echoform-ink);
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(0,0,0,.14);
    transition: transform .12s ease, background .12s ease;
}

    .echoform-backOnImage:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.32);
    }

/* =========================
   Glass overlay container (Contents)
   ========================= */
.echoform-pdfOverlay {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 2;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 10px 26px rgba(0,0,0,.12);
}

/* =========================
   Contents header row (title + nav buttons)
   ========================= */
.echoform-rowHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.echoform-rowTitle {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(47,65,86,.92);
}

/* =========================
   Carousel nav buttons (Prev/Next)
   ========================= */
.echoform-deckControls {
    display: flex;
    gap: 8px;
    margin-left: auto;
    flex: 0 0 auto;
}

.echoform-deckBtn {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.18);
    color: rgba(47,65,86,.92);
    display: grid;
    place-items: center;
    box-shadow: 0 10px 22px rgba(0,0,0,.10);
    transition: transform .12s ease, background .12s ease;
}

    .echoform-deckBtn:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.28);
    }

/* =======================================================================
   CONTENTS "DECK" => NORMAL CAROUSEL (NO STACK)
   - Only ONE card visible (active)
   - Card is centered, solid background
   - Buttons already handled by your JS
   ======================================================================= */

/* Carousel viewport (stable preview area) */
.echoform-deckWrap {
    position: relative;
    height: 280px; /* visible + comfortable */
    overflow: hidden; /* keep clean edges */
    display: grid;
    place-items: center; /* center the active card */
}

/* Canvas (JS inserts card into this) */
.echoform-deckStack {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center; /* center card inside */
}

/* Empty state inside carousel */
.echoform-deckEmpty {
    height: 100%;
    width: 100%;
    display: grid;
    place-items: center;
    color: rgba(47,65,86,.78);
}

/* The active carousel card */
.echoform-deckCard {
    position: relative; /* no absolute stacking */
    width: min(520px, 100%); /* centered max width */
    height: auto;
    max-height: 100%;
    border-radius: 18px;
    background: var(--surface-main); /* solid (no bleed-through) */
    padding: 10px;
    overflow: hidden; /* fixes “not curved” corners */
    cursor: pointer;
}

/* Ensure any old layer transforms NEVER apply */
.echoform-deckCard {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Card top row (filename + actions) */
.echoform-deckTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.echoform-deckMeta {
    min-width: 0;
}

.echoform-deckName {
    font-size: .9rem;
    font-weight: 900;
    color: rgba(47,65,86,.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.echoform-deckSub {
    margin-top: 2px;
    font-size: .78rem;
    color: rgba(47,65,86,.68);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Action buttons container */
.echoform-deckActions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

/* Action icon buttons (solid so they stay visible on video) */
.echoform-deckIconBtn {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(47,65,86,.12);
    background: #fff;
    color: rgba(47,65,86,.92);
    box-shadow: 0 10px 20px rgba(0,0,0,.08);
}

    .echoform-deckIconBtn:hover {
        background: #fff;
    }

.echoform-deckIconBtnDanger {
    border: 1px solid rgba(220,53,69,.25);
    color: #dc3545;
}

/* Preview container (rounding fix) */
.echoform-deckPreview {
    border-radius: 16px;
    overflow: hidden; /* fixes square corners */
    border: 1px solid rgba(47,65,86,.10);
    background: #f6f8fb;
    height: 200px; /*  controlled preview height */
}

/* Make media fill the preview box */
.echoform-deckImg,
.echoform-deckVid {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* PDF tile fills preview height */
.echoform-deckPdfTile {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
}

.echoform-deckPdfIcon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(111,175,138,.18);
    border: 1px solid rgba(111,175,138,.30);
    color: rgba(47,65,86,.9);
    font-size: 1.35rem;
}

.echoform-deckPdfText {
    min-width: 0;
}

.echoform-deckPdfTitle {
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .78rem;
    color: rgba(47,65,86,.86);
}

.echoform-deckPdfName {
    margin-top: 6px;
    font-weight: 800;
    color: rgba(47,65,86,.88);
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================
   RIGHT panel header (title row)
   ========================= */
.echoform-formHead {
    padding: 20px 24px;
    border-bottom: 1px solid var(--echoform-stroke);
}

.echoform-formHeadRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.echoform-formTitle {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--echoform-ink);
    display: flex;
    align-items: center;
    gap: 10px;
}

.echoform-countBadge {
    margin-left: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    color: rgba(47,65,86,.85);
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(47,65,86,.12);
}

/* =========================
   Info dropdown button + menu (FIX)
   ========================= */

.echoform-info-btn {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(47,65,86,.14);
    background: rgba(255,255,255,.65);
    color: var(--echoform-ink);
    box-shadow: 0 10px 22px rgba(0,0,0,.08);
    transition: transform .12s ease, background .12s ease;
    padding: 0;
    line-height: 1;
}

    /* remove bootstrap caret if it ever appears */
    .echoform-info-btn.dropdown-toggle::after {
        display: none;
    }

    .echoform-info-btn:focus {
        outline: none;
        box-shadow: 0 0 0 4px rgba(111,175,138,.22), 0 10px 22px rgba(0,0,0,.08);
    }


    .echoform-info-btn:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.85);
    }

.echoform-info-menu {
    width: min(360px, calc(100vw - 40px));
    border-radius: 16px;
    border: 1px solid rgba(47,65,86,.10);
    box-shadow: 0 18px 45px rgba(0,0,0,.14);
}

    .echoform-info-menu i {
        color: rgba(47,65,86,.85);
        margin-top: 2px;
    }

/* =========================
   Form fields (labels + inputs)
   ========================= */
.echoform-formBody {
    padding: 18px;
    display: grid;
}

.echoform-field {
    padding: 10px;
}

.echoform-label {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.echoform-input,
.echoform-textarea,
.echoform-file {
    border-radius: 10px;
    background: var(--surface-soft);
    box-shadow: rgba(0,0,0,.06) 0px 2px 4px 0px inset;
    padding: 10px 20px;
}

.echoform-textarea {
    min-height: 90px;
    resize: vertical;
}

.echoform-hint {
    color: var(--echoform-muted);
    font-size: .85rem;
    margin-top: 8px;
}

/* =========================
   Bottom actions (back + save)
   ========================= */
.echoform-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
    border-top: 1px solid var(--echoform-stroke);
}

.echoform-btnBack {
    border-radius: 14px;
    border: 1px solid var(--echoform-stroke);
    background: #fff;
    padding: .7rem .95rem;
    color: var(--echoform-ink);
}

.echoform-btnSave {
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg, var(--echoform-brand), var(--echoform-brand2));
    color: #fff;
    padding: .75rem 1.2rem;
    font-weight: 800;
}

/* =========================
   Modal (PDF preview)
   ========================= */
.echoform-modalContent {
    border-radius: 18px;
    overflow: hidden;
}

.echoform-modalFrame {
    width: 100%;
    height: min(74vh, 720px);
    border: 0;
    display: block;
    background: #fff;
}

/* =========================
   Link input row (input + icon button)
   ========================= */
.echoform-linkRow {
    display: grid;
    grid-template-columns: 1fr 44px;
    gap: 10px;
    align-items: center;
}

.echoform-linkBtn {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(47,65,86,.14);
    background: rgba(255,255,255,.75);
    color: rgba(47,65,86,.92);
    display: grid;
    place-items: center;
    box-shadow: 0 10px 22px rgba(0,0,0,.08);
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

    .echoform-linkBtn:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.92);
        border-color: rgba(111,175,138,.35);
    }

    .echoform-linkBtn:active {
        transform: translateY(0);
    }

    .echoform-linkBtn:focus {
        outline: none;
        box-shadow: 0 0 0 4px rgba(111,175,138,.22), 0 10px 22px rgba(0,0,0,.08);
    }

/* =========================
   Select to match inputs
   ========================= */
.echoform-select {
    border-radius: 5px; /* matches your pill look */
    background: var(--surface-soft);
    box-shadow: rgba(0,0,0,.06) 0px 2px 4px 0px inset;
    padding: 12px 18px;
    border: 1px solid rgba(47,65,86,.12);
}

    .echoform-select:focus {
        border-color: rgba(111,175,138,.45);
        box-shadow: 0 0 0 4px rgba(111,175,138,.22), rgba(0,0,0,.06) 0px 2px 4px 0px inset;
    }

/* =========================
   Back + Save buttons: consistent sizing
   ========================= */
.echoform-btnBack,
.echoform-btnSave {
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.echoform-btnBack {
    width: 52px; /* icon-only button */
    padding: 0;
}

.echoform-btnSave {
    padding: 0 22px;
}


/* =======================================================================
   RESPONSIVE (TABLET + MOBILE) — SQUARED CONTENTS + BOTTOM DOCK
   ======================================================================= */

/* Tablet & down: stack columns cleanly */
@media (max-width: 992px) {

    /* Layout -> 1 column */
    .echoform-two {
        grid-template-columns: 1fr;
        align-items: start;
    }

    /* Tighten right padding */
    .echoform-formCard {
        padding: 2px;
    }

    /* HERO: keep it reasonable (no tall poster) */
    .echoform-visualHero {
        min-height: 460px; /* enough for back btn + dock */
        height: auto;
    }

    /* Contents overlay: keep it docked at bottom */
    .echoform-pdfOverlay {
        left: 12px;
        right: 12px;
        bottom: 12px; /*  stays at bottom */
        padding: 12px;
    }

    /* Carousel viewport: compact / squarer */
    .echoform-deckWrap {
        height: 280px; /*  less tall than 350 */
        overflow: hidden;
        display: grid;
        place-items: end center; /*  “start from bottom” feel */
        align-content: end; /*  pin content to bottom */
        padding-bottom: 2px;
    }

    /* Card uses more width but doesn't stretch tall */
    .echoform-deckCard {
        width: min(640px, 100%);
        height: auto; /*  important (no height:100%) */
    }

    /* Preview box is controlled (square-ish) */
    .echoform-deckPreview {
        height: 185px; /*  compact */
    }

    /* Media fills preview box */
    .echoform-deckImg,
    .echoform-deckVid {
        height: 100%;
        width: 100%;
        object-fit: cover;
        display: block;
    }

    .echoform-deckPdfTile {
        height: 100%;
    }
}


/* Small mobile: compact + bottom dock + squared cards */
@media (max-width: 520px) {

    /* HERO: reduce height massively */
    .echoform-visualHero {
        min-height: 420px; /*  was 560 */
        height: auto;
    }

    /* Dock overlay stays at bottom, not floating too big */
    .echoform-pdfOverlay {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 12px;
        border-radius: 18px;
    }

    /* Contents viewport: compact and bottom-aligned */
    .echoform-deckWrap {
        height: 240px; /*  was 420 */
        display: grid;
        place-items: end center; /*  bottom */
        align-content: end;
    }

    /* Card full width, not tall */
    .echoform-deckCard {
        width: 100%;
        height: auto; /*  keep it squarer */
        border-radius: 18px;
    }

    /* Slightly smaller top row spacing */
    .echoform-deckTop {
        margin-bottom: 8px;
    }

    /* Buttons: still tappable but not huge */
    .echoform-deckBtn {
        width: 34px;
        height: 34px;
        border-radius: 12px;
    }

    .echoform-deckIconBtn {
        width: 38px;
        height: 38px;
        border-radius: 13px;
    }

    /* Filename width */
    .echoform-deckName {
        max-width: 155px;
    }

    /* Preview height: compact (square vibe) */
    .echoform-deckPreview {
        height: 165px; /*  was 210/220 */
    }

    .echoform-deckImg,
    .echoform-deckVid {
        height: 100%;
        width: 100%;
        object-fit: cover;
        display: block;
    }

    .echoform-deckPdfTile {
        height: 100%;
    }
}
/* -------------------------------- Private Notes ---------------------------- */
/* =========================
       Private Notes (pn-*)
       ========================= */

.pn-page {
    padding: 10px 0 28px;
}

.pn-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Card */
.pn-card {
    border-radius: 18px;
    border: 1px solid rgba(47,65,86,.10);
    background: #fff;
    box-shadow: 0 18px 55px rgba(0,0,0,.10);
}

.pn-card-body {
    padding: 18px;
}

/* Header */
.pn-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.pn-head-left {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.pn-back-btn,
.pn-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(47,65,86,.12);
    background: rgba(255,255,255,.70);
    color: #2F4156;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

    .pn-back-btn:hover,
    .pn-icon-btn:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.92);
        box-shadow: 0 10px 30px rgba(31,52,76,.10);
    }

.pn-card-title {
    font-weight: 900;
    color: #2F4156;
    font-size: 1.1rem;
}

.pn-card-sub {
    color: rgba(47,65,86,.70);
    font-size: .92rem;
}

.pn-head-right {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* Save */
.pn-save-btn {
    height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(79,154,116,.35);
    background: rgba(111,175,138,.18);
    color: #2F4156;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

    .pn-save-btn:hover {
        transform: translateY(-1px);
        background: rgba(111,175,138,.26);
        box-shadow: 0 12px 30px rgba(31,52,76,.10);
    }

/* Info menu */
.pn-info-menu {
    min-width: 320px;
    border-radius: 16px;
    border: 1px solid rgba(47,65,86,.12);
    background: rgba(255,255,255,.95);
    box-shadow: 0 18px 60px rgba(31,52,76,.14);
}

.pn-info-title {
    font-weight: 900;
    color: #2F4156;
}

.pn-info-text {
    color: rgba(47,65,86,.78);
    line-height: 1.45;
    font-size: .95rem;
}

/* Divider */
.pn-divider {
    border: 0;
    height: 1px;
    background: rgba(47,65,86,.10);
    margin: 14px 0 16px;
}

/* Fields */
.pn-field {
    margin-bottom: 16px;
}

.pn-label {
    font-weight: 800;
    color: #2F4156;
    margin-bottom: 8px;
    display: inline-block;
}

.pn-select,
.pn-textarea {
    border: 1px solid rgba(47,65,86,.12);
    background: rgba(255,255,255,.92);
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.pn-select {
    border-radius: 10px;
}

.pn-textarea {
    border-radius: 14px;
}

/* Tag + User row */
.pn-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

    .pn-row.user-hidden {
        grid-template-columns: 1fr;
    }

/* TinyMCE */
.tox.tox-tinymce {
    border-radius: 14px !important;
    border: 1px solid rgba(47,65,86,.12) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.06) !important;
}

/* Mobile */
@media (max-width: 768px) {
    .pn-row {
        grid-template-columns: 1fr;
    }

    .pn-card-head {
        flex-direction: column;
    }

    .pn-head-right {
        justify-content: flex-start;
    }
}

/* Mobile improvements */
@media (max-width: 768px) {

    /*  reduce outer gutters so card feels full width */
    .pn-shell {
        padding: 0 8px; /* was 16px */
    }

    /*  reduce inner padding so form feels larger */
    .pn-card-body {
        padding: 12px; /* was 18px */
    }

    /*  keep header stacked but not cramped */
    .pn-card-head {
        flex-direction: column;
        gap: 10px;
    }

    .pn-head-right {
        justify-content: flex-start;
        gap: 8px;
    }

    /* Optional: slightly smaller buttons to save space */
    .pn-back-btn,
    .pn-icon-btn {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .pn-save-btn {
        height: 40px;
        border-radius: 12px;
        padding: 0 12px;
    }

    /* Optional: dropdown width so it doesn't overflow */
    .pn-info-menu {
        min-width: min(320px, 92vw);
    }
}


/* -------------------------------------- Chat UI ---------------------------- */

.eh-chatpage {
    padding: 14px 0 26px;
}

.eh-chatwrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

/* KEY: fixed height so ONLY chatbox scrolls, not whole page feeling "tall" */
.eh-chatgrid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 18px;
    height: calc(100vh - 210px); /* tweak if your header/footer differs */
    min-height: 560px;
}

.eh-card {
    background: var(--surface-main);
    border-radius: 1rem;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    min-height: 0; /* IMPORTANT for internal scrolling */
}

/* ---------- Sidebar ---------- */
.eh-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.eh-sidehead {
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-soft);
}

.eh-sidetitle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    color: var(--neutral-main);
    letter-spacing: .2px;
}

.eh-sidehint {
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: 12.5px;
}

/* scrollable user list */
.eh-userlist {
    padding: 10px;
    overflow: auto;
    min-height: 0;
    flex: 1 1 auto;
}

.eh-useritem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 14px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: .18s ease;
    color: var(--text-primary);
}

    .eh-useritem:hover {
        background: var(--brand-soft);
        border-color: rgba(143,182,217,.35);
    }

    .eh-useritem.is-active {
        background: var(--neutral-light);
        border-color: rgba(143,182,217,.55);
        box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    }

.eh-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(143,182,217,.85), rgba(109,151,191,.65));
    display: grid;
    place-items: center;
    color: white;
    font-weight: 800;
    flex: 0 0 auto;
    box-shadow: 0 10px 22px rgba(31,52,76,.10);
}

.eh-usertext {
    min-width: 0;
}

.eh-username {
    font-weight: 700;
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eh-usersub {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Header top row */
.eh-sideTop {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Title + icon button row */
.eh-sideTitleWrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Small icon button (glass) */
.eh-iconBtn {
    border: 1px solid var(--border-soft);
    background: rgba(255,255,255,.72);
    border-radius: 12px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: .18s ease;
    color: var(--neutral-main);
    box-shadow: 0 10px 22px rgba(31,52,76,.08);
}

    .eh-iconBtn:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(31,52,76,.12);
    }

/* Inline search that replaces the title */
.eh-sideSearchInline {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .eh-sideSearchInline input {
        width: 100%;
        height: 44px;
        border-radius: 999px;
        border: 1px solid var(--border-soft);
        padding: 10px 14px 10px 40px;
        outline: none;
        background: rgba(255,255,255,.90);
        color: var(--text-primary);
        box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
    }

        .eh-sideSearchInline input:focus {
            border-color: rgba(143,182,217,.65);
            box-shadow: 0 0 0 3px rgba(143,182,217,.18);
        }

    .eh-sideSearchInline .bi-search {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-secondary);
        font-size: 14px;
        pointer-events: none;
    }

/* Disabled icon button look */
.eh-iconBtn:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ---------- Chat panel ---------- */
.eh-chat {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ---------- Chat header (name left, icon right) ---------- */
.eh-chathead {
    padding: 14px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-soft);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.eh-chatHeadRow {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.eh-chatwho {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

.eh-chatwho-title {
    font-weight: 700;
    color: var(--neutral-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.eh-chatHeadActions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ---------- Message search (well-positioned) ---------- */
.eh-msgSearchInline {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .eh-msgSearchInline input {
        width: 100%;
        height: 44px;
        border-radius: 999px;
        border: 1px solid var(--border-soft);
        padding: 10px 14px 10px 40px; /* left padding for icon */
        outline: none;
        background: rgba(255,255,255,.90);
        color: var(--text-primary);
        box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
    }

        .eh-msgSearchInline input:focus {
            border-color: rgba(143,182,217,.65);
            box-shadow: 0 0 0 3px rgba(143,182,217,.18);
        }

    .eh-msgSearchInline .bi-search {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-secondary);
        font-size: 14px;
        pointer-events: none;
    }

    /* Make the close button stay aligned on the right */
    .eh-msgSearchInline #closeMsgSearchBtn {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        flex: 0 0 auto;
    }

/* KEY: message view scrolls */
.eh-chatbox {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 14px;
    background: radial-gradient(900px 240px at 10% -10%, rgba(143,182,217,.22), transparent 55%), radial-gradient(800px 200px at 90% 0%, rgba(109,151,191,.18), transparent 60%), rgba(244,248,252,.55);
}

.eh-empty {
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--text-secondary);
    text-align: center;
    padding: 28px;
}

.eh-bubbleRow {
    display: flex;
    margin-bottom: 10px;
}

    .eh-bubbleRow.mine {
        justify-content: flex-end;
    }

    .eh-bubbleRow.theirs {
        justify-content: flex-start;
    }

.eh-bubble {
    max-width: min(560px, 88%);
    padding: 10px 12px;
    border-radius: 15px;
    background: var(--surface-main);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    position: relative;
    overflow: hidden;
}

    .eh-bubble.mine {
        background: var(--surface-soft);
    }

.eh-bubbleText {
    margin: 0;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.95rem;
    line-height: 1.35rem;
}

.eh-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--text-secondary);
    justify-content: space-between;
}

.eh-actions {
    display: inline-flex;
    gap: 6px;
}

.eh-miniBtn {
    border: 1px solid var(--border-soft);
    background: var(--surface-main);
    border-radius: 5rem;
    padding: 6px 9px;
    font-size: 12px;
    cursor: pointer;
    transition: .18s ease;
    color: var(--neutral-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 30px;
    min-height: 30px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

    .eh-miniBtn:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 20px rgba(31,52,76,.10);
    }

    .eh-miniBtn.warn {
        background: var(--surface-main);
    }

    .eh-miniBtn.danger {
        background: var(--surface-main);
    }

/* ---------- Composer (expands) ---------- */
.eh-compose {
    padding: 12px;
    border-top: 1px solid var(--border-soft);
    background: rgba(255,255,255,.72);
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.eh-textarea {
    flex: 1 1 auto;
    min-height: 44px;
    max-height: 160px; /* grows until this, then scrolls */
    overflow-y: auto;
    resize: none;
    border-radius: 16px;
    border: none;
    padding: 10px 12px;
    outline: none;
    background: rgba(255,255,255,.90);
    color: var(--text-primary);
}

    .eh-textarea:focus {
        border-color: rgba(143,182,217,.65);
        box-shadow: 0 0 0 3px rgba(143,182,217,.18);
    }

.eh-sendBtn {
    border: 0;
    border-radius: 5rem;
    padding: 10px 16px;
    font-weight: 800;
    color: var(--surface-main);
    background: linear-gradient(135deg, var(--brand-main), var(--brand-dark));
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    cursor: pointer;
    transition: .18s ease;
    min-width: 90px;
}

    .eh-sendBtn:hover {
        transform: translateY(-1px);
    }

    .eh-sendBtn:disabled {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
    }

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .eh-chatgrid {
        height: auto;
        min-height: auto;
        grid-template-columns: 1fr;
    }

    .eh-userlist {
        max-height: 240px;
    }

    .eh-chatbox {
        max-height: 55vh;
    }

    .eh-chathead {
        flex-direction: column;
        align-items: stretch;
    }

    .eh-chatwho-title {
        max-width: 100%;
    }
}

@media (max-width: 420px) {
    .eh-sendBtn {
        min-width: 92px;
        padding: 10px 12px;
    }

    .eh-avatar {
        width: 34px;
        height: 34px;
    }

    .eh-bubble {
        max-width: 92%;
    }
}



/* ====== VARIABLES ====== */
:root {
    --friend-primary: #4f46e5;
    --friend-primary-dark: #3730a3;
    --friend-primary-soft: rgba(79, 70, 229, 0.1);
    --friend-surface: #ffffff;
    --friend-surface-alt: #f8fafc;
    --friend-border: #e2e8f0;
    --friend-text: #1e293b;
    --friend-text-light: #64748b;
    --friend-success: #10b981;
    --friend-danger: #ef4444;
    --friend-warning: #f59e0b;
    --friend-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --friend-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* ====== TOOLBAR ====== */
.friend-toolbar {
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 20;
}

.friend-search-wrap {
    position: relative;
    width: min(520px, 100%);
    margin-left: auto;
}

.friend-search {
    width: 100%;
    padding: 0.95rem 1.40rem !important;
    border-radius: 2rem;
    border: none;
    background: var(--friend-surface);
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

    .friend-search:focus {
        border-color: var(--friend-primary);
        box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
        outline: none;
        background: var(--friend-surface);
    }

/* ====== TABS ====== */
.friend-tabs {
    border-bottom: 2px solid var(--friend-border);
    margin-bottom: 2rem;
    display: flex;
    gap: 0.5rem;
    padding: 0 0.5rem;
}

.friend-tab {
    padding: 0.75rem 1.5rem;
    border: none;
    background: none;
    color: var(--brand-dark);
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 0.75rem 0.75rem 0 0;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .friend-tab:hover {
        color: var(--brand-dark);
        background: var(--surface-soft);
    }

    .friend-tab.active {
        color: var(--brand-dark);
        background: var(--surface-soft);
        border-bottom: 3px solid var(--brand-main);
    }

.friend-tab-badge {
    background: var(--brand-dark);
    color: white;
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
    min-width: 1.5rem;
    text-align: center;
}

/* ====== CARDS CONTAINER ====== */
.friend-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    padding: 1rem 0;
}

/* Badge on the IMAGE, floating above the overlay card */
.friend-badge-onimage {
    position: absolute;
    right: 1rem; /* align with overlay left */
    top: 7.5rem; /* sits above overlay (tweak if needed) */
    z-index: 3;
    padding: 0.28rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: .2px;
    background: var(--surface-main);
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
}


/* ====== CARD STYLING (UPDATED) ====== */
.friend-card {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
    transition: all .25s ease;
    height: 300px; /*  shorter card */
    min-height: 300px;
}

    .friend-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--friend-shadow-lg);
        border-color: var(--friend-primary);
    }

/*  FULL CARD background image */
.friend-card-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

    .friend-card-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 1;
        transform: scale(1.02);
    }

    /* soft gradient for readability */
    .friend-card-bg::after {
        content: "";
        position: absolute;
        inset: 0;
    }

/*  Bottom details panel sits on top of background */
.friend-card-overlay {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 26px rgba(0,0,0,.12);
    border-radius: 1rem;
    padding: 14px 14px 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.10);
}

/*  Avatar now INSIDE details card */
.friend-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.friend-avatar {
    width: 54px;
    height: 54px;
    border-radius: 1rem;
    background: var(--surface-main);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: var(--friend-primary);
    letter-spacing: .5px;
    flex: 0 0 auto;
    text-transform: uppercase;
}

.friend-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}


.friend-name {
    font-size: .85rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-top: 10px;
    line-height: 1.2;
    white-space: normal;
    overflow: visible;
}
.friend-status {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--friend-text-light);
    margin: 0;
}

/* OPTIONAL username (NOT email) */
.friend-username {
    color: var(--friend-text-light);
    font-size: .86rem;
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Relationship badge */
.friend-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: auto;
    white-space: nowrap;
}

.badge-friends {
    background: rgba(16, 185, 129, 0.85);
    color: var(--surface-main);
}

.badge-pending {
    background: rgba(245, 158, 11, 0.85);
    color: var(--warning-text);
}

.badge-blocked {
    background: rgba(239, 68, 68, 0.85);
    color: var(--surface-main);
}

.badge-none {
    background: rgba(100, 116, 139, 0.85);
    color: var(--text-primary);
}

/* Action buttons */
.friend-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-top: 0.65rem;
}

.friend-btn {
    padding: 7.5px;
    border: none;
    border-radius: 2rem;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    line-height: 1;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.friend-btn-primary {
    background: var(--friend-primary);
    color: white;
}

    .friend-btn-primary:hover {
        background: var(--friend-primary-dark);
        transform: translateY(-2px);
    }

.friend-btn-outline {
    background: rgba(255,255,255,0.52);
    color: var(--text-primary);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

    .friend-btn-outline:hover {
        transform: translateY(-2px);
        color: var(--brand-dark);
    }

.friend-btn-danger {
    background: rgba(239, 68, 68, 0.52);
    color: white;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

    .friend-btn-danger:hover {
        background: rgba(239, 68, 68, 0.72);
        color: white;
        transform: translateY(-2px);
    }

.friend-btn-success {
    background: rgba(16, 185, 129, 0.52);
    color: var(--friend-success);
}

    .friend-btn-success:hover {
        background: var(--friend-success);
        color: white;
        transform: translateY(-2px);
    }

/* ====== PAGINATION ====== */
.friend-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-top: 3rem;
    padding: 1rem;
}

.friend-pages {
    display: flex;
    gap: 0.5rem;
}

.friend-page-btn {
    width: 40px;
    height: 40px;
    border-radius: 0.75rem;
    border: 2px solid var(--friend-border);
    background: var(--friend-surface);
    color: var(--friend-text);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .friend-page-btn:hover {
        border-color: var(--friend-primary);
        color: var(--friend-primary);
        transform: translateY(-2px);
    }

    .friend-page-btn.active {
        background: var(--friend-primary);
        color: white;
        border-color: var(--friend-primary);
    }

.friend-page-nav {
    width: 40px;
    height: 40px;
    border-radius: 0.75rem;
    border: 2px solid var(--friend-border);
    background: var(--friend-surface);
    color: var(--friend-text);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .friend-page-nav:hover:not(:disabled) {
        border-color: var(--friend-primary);
        color: var(--friend-primary);
        transform: translateY(-2px);
    }

    .friend-page-nav:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ====== FILTER DROPDOWN ====== */
.friend-filter-dd {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.friend-filter-btn {
    width: 40px;
    height: 40px;
    border-radius: 5rem;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    background: var(--surface-soft);
    display: grid;
    place-items: center;
    color: var(--friend-text);
    transition: all 0.2s ease;
}

    .friend-filter-btn:hover {
        border-color: var(--friend-primary);
        color: var(--friend-primary);
        transform: translateY(-2px);
    }

.friend-filter-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: 280px;
    background: var(--friend-surface);
    border-radius: 1rem;
    border: 1px solid var(--friend-border);
    box-shadow: var(--friend-shadow-lg);
    padding: 1.25rem;
    z-index: 1000;
}

.friend-filter-title {
    font-weight: 800;
    color: var(--friend-text);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
}

/* ====== EMPTY STATE ====== */
.friend-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
}

.friend-empty-icon {
    font-size: 4rem;
    color: var(--friend-border);
    margin-bottom: 1.5rem;
}

.friend-empty-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--friend-text);
    margin-bottom: 0.5rem;
}

.friend-empty-text {
    color: var(--friend-text-light);
    max-width: 400px;
    margin: 0 auto;
}

/* ====== RESPONSIVE ====== */
@media (max-width: 768px) {
    .friend-cards-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding:1.5rem;
    }

    .friend-search-wrap {
        width: 100%;
        margin: 1rem 0;
    }

    .friend-tabs {
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }

    .friend-tab {
        white-space: nowrap;
        padding: 0.75rem 1rem;
    }

    .friend-card {
        height: 300px;
        min-height: 300px;
    }

    .friend-card-overlay {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 12px;
    }

    .friend-avatar {
        width: 48px;
        height: 48px;
    }
}




    /* -------------------------------------- Mobile Responsiveness ---------------------------- */
    @media (max-width: 900px) {
        /* ---------- DataTables controls (top area) ---------- */
        .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter {
            float: none !important;
            text-align: left !important;
            width: 100% !important;
            margin: 0 0 12px 0 !important;
        }

            /* Make select + search full width and stacked */
            .dataTables_wrapper .dataTables_length select {
                width: 100% !important;
                max-width: 100% !important;
                height: 44px;
                border-radius: 12px;
                border: 1px solid rgba(47,65,86,.14);
                padding: 8px 12px;
                background: var(--surface-main);
            }

            .dataTables_wrapper .dataTables_filter label {
                width: 100%;
                display: block;
            }

            .dataTables_wrapper .dataTables_filter input {
                width: 100% !important;
                max-width: 100% !important;
                height: 44px;
                border-radius: 12px;
                border: 1px solid rgba(47,65,86,.14);
                padding: 8px 12px;
                outline: none;
                background: var(--surface-main);
            }

        /* ---------- Card container spacing ---------- */
        .um-surface {
            padding: 12px !important;
            border-radius: 18px !important;
        }

        /* ---------- Turn rows into premium cards ---------- */
        table.dataTable.um-table thead {
            display: none !important;
        }

        table.dataTable.um-table,
        table.dataTable.um-table tbody,
        table.dataTable.um-table tr,
        table.dataTable.um-table td {
            display: block !important;
            width: 100% !important;
        }

            table.dataTable.um-table tbody tr {
                background: rgba(255,255,255,.95) !important;
                border: 1px solid rgba(47,65,86,.10);
                border-radius: 18px;
                box-shadow: 0 12px 30px rgba(0,0,0,.06);
                padding: 14px 14px 12px;
                margin: 12px 0;
                overflow: hidden;
            }

            /* Each field row */
            table.dataTable.um-table tbody td {
                padding: 12px 0 !important;
                border: 0 !important;
            }

                /* Divider between fields */
                table.dataTable.um-table tbody td + td {
                    border-top: 1px solid rgba(47,65,86,.08) !important;
                }

                /* Labels */
                table.dataTable.um-table tbody td::before {
                    content: attr(data-label);
                    display: block;
                    font-size: .72rem;
                    font-weight: 900;
                    letter-spacing: .08em;
                    text-transform: uppercase;
                    color: rgba(95,111,120,.95);
                    margin-bottom: 6px;
                }

            /* ---------- Fix the broken word wrap (Profe ssional) ---------- */
            .um-name,
            .um-email,
            table.dataTable.um-table tbody td {
                word-break: normal !important;
                overflow-wrap: anywhere !important; /* breaks long emails nicely */
                hyphens: auto;
            }

        /* Make name premium + prevent ugly mid-word breaks */
        .um-name {
            font-size: 1.08rem;
            font-weight: 950;
            letter-spacing: .01em;
            line-height: 1.25;
            word-break: keep-all !important; /* avoids “Profe ssional” */
        }

        /* Email styling (readable but not heavy) */
        .um-email {
            font-size: .96rem;
            color: rgba(95,111,120,.95);
            line-height: 1.25;
        }

        /* Badges: a bit bigger for touch / readability */
        .um-badge {
            font-size: .82rem;
            padding: .42rem .7rem;
            border-radius: 5rem;
        }

        /* ---------- Actions area: clean button bar ---------- */
        table.dataTable.um-table tbody td.dt-actions-cell,
        table.dataTable.um-table tbody td.dt-details-cell {
            border-top: 1px solid rgba(47,65,86,.10) !important;
            padding-top: 14px !important;
            margin-top: 2px;
            display: inline-block !important;
            width: 50% !important;
            vertical-align: top;
        }

            /* Hide labels for action cells */
            table.dataTable.um-table tbody td.dt-actions-cell::before,
            table.dataTable.um-table tbody td.dt-details-cell::before {
                display: none !important;
            }

            /* Buttons: full width, equal height, premium corners */
            table.dataTable.um-table tbody td.dt-actions-cell .um-btn,
            table.dataTable.um-table tbody td.dt-details-cell .um-view-btn {
                width: 100% !important;
                height: 44px;
                border-radius: 14px;
                font-weight: 900;
            }

        /* Make your info button centered and nice */
        .um-view-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(47,65,86,.12);
        }

        /* ---------- Pagination / info area polish ---------- */
        .dataTables_wrapper .dataTables_info {
            float: none !important;
            text-align: center !important;
            padding-top: 10px !important;
            color: rgba(95,111,120,.95);
            font-weight: 700;
        }

        .dataTables_wrapper .dataTables_paginate {
            float: none !important;
            text-align: center !important;
            padding-top: 6px !important;
        }

            .dataTables_wrapper .dataTables_paginate .paginate_button {
                border-radius: 12px !important;
                padding: 6px 10px !important;
                margin: 0 3px !important;
            }

        /* remove hover row effects on mobile */
        table.dataTable.um-table tbody tr:hover td {
            background: transparent !important;
            color: inherit !important;
        }
    }

    /* -----------------------------------------=======
       MOBILE UI (tiny circles + count badge)
       Add this at the END of your CSS
       -----------------------------------------======= */

    @media (max-width: 768px) {
        .appt-surface {
            padding: .75rem .75rem;
        }

        #calendar {
            padding: 12px;
            border-radius: 16px;
        }

        .fc .fc-header-toolbar {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
            margin-bottom: 10px;
        }

        .fc .fc-toolbar-chunk {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            width: 100%;
        }

        .fc .fc-toolbar-title {
            width: 100%;
            text-align: center;
            font-size: 1.05rem;
            letter-spacing: .08em;
            margin: 0;
        }

        .fc .fc-button {
            padding: 7px 10px;
            border-radius: 12px;
            font-size: .9rem;
        }

        /* ===== MONTH VIEW ONLY: circle dates + count badge ===== */

        .fc-dayGridMonth-view.fc-theme-standard td,
        .fc-dayGridMonth-view.fc-theme-standard th,
        .fc-dayGridMonth-view .fc-scrollgrid,
        .fc-dayGridMonth-view .fc-scrollgrid-section > table {
            border: none !important;
        }

        .fc-dayGridMonth-view .fc-daygrid-body {
            padding: 6px;
        }

        .fc-dayGridMonth-view .fc-col-header-cell {
            font-size: .78rem;
            letter-spacing: .18em;
        }

        .fc-dayGridMonth-view .fc-daygrid-day {
            padding: 2px !important;
            background: transparent !important;
        }

        .fc-dayGridMonth-view .fc-daygrid-day-frame {
            position: relative;
            background: transparent !important;
            box-shadow: none !important;
            border-radius: 0 !important;
            padding: 0 !important;
            overflow: visible !important;
            min-height: 56px;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            cursor: pointer;
        }

        /* hide event pills (we show ONLY the badge count) */
        .fc-dayGridMonth-view .fc-daygrid-day-events {
            display: none !important;
        }

        .fc-dayGridMonth-view .fc-daygrid-day-top {
            justify-content: center;
            width: 100%;
            margin-top: 6px;
        }

        .fc-dayGridMonth-view .fc-daygrid-day-number {
            width: 34px;
            height: 34px;
            display: grid;
            place-items: center;
            padding: 0 !important;
            border-radius: 5rem;
            font-weight: 800;
            font-size: .92rem;
            color: var(--brand-dark);
            background: var(--surface-main);
            border: 1px solid var(--border-soft);
            box-shadow: rgba(0,0,0,.08) 0 6px 16px;
        }

        .fc-dayGridMonth-view .fc-day-today .fc-daygrid-day-number {
            background: var(--brand-soft);
            border-color: var(--brand-main);
        }

        .fc-dayGridMonth-view .fc-day-other .fc-daygrid-day-number {
            opacity: .45;
            box-shadow: none;
        }

        .fc-dayGridMonth-view .m-appt-badge {
            position: absolute;
            top: 4px;
            right: 10px;
            min-width: 18px;
            height: 18px;
            padding: 0 5px;
            border-radius: 5rem;
            display: grid;
            place-items: center;
            font-size: .72rem;
            font-weight: 800;
            background: var(--brand-main);
            color: #fff;
            box-shadow: rgba(0,0,0,.15) 0 6px 14px;
            pointer-events: none;
        }

        .fc-timeGridWeek-view .fc-scroller-harness,
        .fc-timeGridDay-view .fc-scroller-harness {
            overflow-x: auto !important;
        }

        .fc-timeGridWeek-view .fc-timegrid-body,
        .fc-timeGridDay-view .fc-timegrid-body {
            min-width: 740px;
        }

        .fc .fc-timegrid-axis-cushion,
        .fc .fc-timegrid-slot-label-cushion {
            font-size: .8rem;
        }

        .modal-dialog.modal-lg {
            max-width: 96vw;
            margin: .75rem auto;
        }
    }

    @media (max-width: 420px) {
        .fc .fc-button {
            padding: 6px 9px;
            font-size: .85rem;
        }

        .fc-dayGridMonth-view .fc-daygrid-day-number {
            width: 30px;
            height: 30px;
            font-size: .88rem;
        }

        .fc-dayGridMonth-view .m-appt-badge {
            top: 3px;
            right: 8px;
            min-width: 17px;
            height: 17px;
            font-size: .7rem;
        }
    }

    /* Day List Modal styles (mobile) */
    .day-list-wrap {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .day-list-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 12px;
        border: 1px solid var(--border-soft);
        border-radius: 14px;
        background: var(--surface-main);
        box-shadow: rgba(0,0,0,.06) 0 8px 18px;
        cursor: pointer;
        transition: transform .12s ease, box-shadow .12s ease;
    }

        .day-list-item:hover {
            transform: translateY(-1px);
            box-shadow: rgba(0,0,0,.10) 0 10px 22px;
        }

        .day-list-item .meta {
            font-size: .85rem;
            color: var(--text-secondary);
            margin-top: 2px;
        }

    .day-list-empty {
        padding: 14px;
        border-radius: 14px;
        border: 1px dashed var(--border-soft);
        background: var(--surface-soft);
        color: var(--text-secondary);
    }
}