/**
 * CCM United - Frontend Stylesheet
 *
 * Styles for all CCM frontend components:
 *   - Profile cards
 *   - Directory search form and results
 *   - Messaging layout (sent/received alignment)
 *   - Report modal
 *
 * @package    CodeLinden_Toolkit
 * @subpackage CodeLinden_Toolkit/features/ccm-membership
 * @since      1.0.0
 * @version    1.0.4
 */

/* =========================================================
   CSS Custom Properties
   ========================================================= */

:root {
    --ccm-primary:      #1a73e8;
    --ccm-primary-dark: #1558b0;
    --ccm-sent-bg:      #1a73e8;
    --ccm-sent-text:    #ffffff;
    --ccm-recv-bg:      #f1f3f4;
    --ccm-recv-text:    #202124;
    --ccm-border:       #e0e0e0;
    --ccm-radius:       8px;
    --ccm-shadow:       0 2px 8px rgba(0,0,0,.08);
    --ccm-font:         inherit;
}

/* =========================================================
   Utility buttons
   ========================================================= */

.ccm-btn {
    display: inline-block;
    padding: 8px 18px;
    border-radius: var(--ccm-radius);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: background 0.2s ease;
}

.ccm-btn--message   { background: var(--ccm-primary); color: #fff; }
.ccm-btn--message:hover { background: var(--ccm-primary-dark); color: #fff; }
.ccm-btn--report    { background: transparent; color: #d93025; border: 1px solid #d93025; }
.ccm-btn--report:hover { background: #d93025; color: #fff; }
.ccm-btn--search    { background: var(--ccm-primary); color: #fff; }
.ccm-btn--send      { background: var(--ccm-primary); color: #fff; width: 100%; }
.ccm-btn--link      { background: transparent; color: var(--ccm-primary); padding: 4px 0; }
.ccm-btn--small     { padding: 4px 10px; font-size: 0.8rem; }

/* =========================================================
   Profile Card
   ========================================================= */

/* Elementor widget: CCM Profile Card (Loop Grid item template) */
.profile-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ccm-border);
    border-radius: var(--ccm-radius);
    box-shadow: var(--ccm-shadow);
    background: #fff;
    overflow: hidden;
    max-width: 100%;
}

.profile-card__banner {
    width: 100%;
    max-height: 140px;
    overflow: hidden;
    background: #e8eaed;
    line-height: 0;
}

.profile-card__banner img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

.profile-card__body {
    display: flex;
    gap: 16px;
    padding: 16px 20px 20px;
    align-items: flex-start;
}

.profile-card__picture {
    flex-shrink: 0;
}

.profile-card__picture img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.profile-card__info {
    flex: 1;
    min-width: 0;
}

.profile-card__name {
    margin: 0 0 4px;
    font-size: 1.1rem;
}

.profile-card__name a {
    color: inherit;
    text-decoration: none;
}

.profile-card__name a:hover {
    color: var(--ccm-primary);
}

.profile-card__church,
.profile-card__location {
    margin: 2px 0;
    font-size: 0.85rem;
    color: #666;
}

.profile-card__bio {
    margin: 8px 0;
    font-size: 0.9rem;
}

.profile-card__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

.profile-card__category-tag {
    background: #e8f0fe;
    color: var(--ccm-primary);
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 20px;
}

.profile-card__actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.ccm-profile-card {
    display: flex;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--ccm-border);
    border-radius: var(--ccm-radius);
    box-shadow: var(--ccm-shadow);
    background: #fff;
}

.ccm-profile-card__picture img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.ccm-profile-card__name {
    margin: 0 0 4px;
    font-size: 1.1rem;
}

.ccm-profile-card__name a { color: inherit; text-decoration: none; }
.ccm-profile-card__name a:hover { color: var(--ccm-primary); }

.ccm-profile-card__church,
.ccm-profile-card__location {
    margin: 2px 0;
    font-size: 0.85rem;
    color: #666;
}

.ccm-profile-card__bio { margin: 8px 0; font-size: 0.9rem; }

.ccm-profile-card__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

.ccm-profile-card__category-tag {
    background: #e8f0fe;
    color: var(--ccm-primary);
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 20px;
}

.ccm-profile-card__actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

/* =========================================================
   Directory Search
   ========================================================= */

.ccm-directory-search__fields {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.ccm-input {
    padding: 10px 14px;
    border: 1px solid var(--ccm-border);
    border-radius: var(--ccm-radius);
    font-size: 0.9rem;
    flex: 1;
    min-width: 160px;
}

.ccm-directory-search__results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.ccm-search-placeholder { color: #888; text-align: center; padding: 40px 0; }

/* =========================================================
   Messaging Layout
   ========================================================= */

.ccm-messaging-layout {
    display: flex;
    height: 600px;
    border: 1px solid var(--ccm-border);
    border-radius: var(--ccm-radius);
    overflow: hidden;
    box-shadow: var(--ccm-shadow);
}

/* Sidebar: chat list */
.ccm-messaging-layout__sidebar {
    width: 280px;
    flex-shrink: 0;
    border-right: 1px solid var(--ccm-border);
    overflow-y: auto;
    background: #fafafa;
}

.ccm-messaging-layout__sidebar-title {
    padding: 16px;
    margin: 0;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--ccm-border);
}

/* Individual chat list item */
.ccm-chat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ccm-border);
    cursor: pointer;
    transition: background 0.15s;
}

.ccm-chat-item:hover, .ccm-chat-item--active { background: #e8f0fe; }

.ccm-chat-item__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.ccm-chat-item__name { font-weight: 600; font-size: 0.9rem; }
.ccm-chat-item__preview { font-size: 0.8rem; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }

.ccm-chat-item__badge {
    margin-left: auto;
    background: var(--ccm-primary);
    color: #fff;
    border-radius: 50%;
    font-size: 0.7rem;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Thread area */
.ccm-messaging-layout__thread {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ccm-messaging-banner {
    flex-shrink: 0;
}

.ccm-messaging-layout__thread-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ccm-border);
    font-weight: 600;
    background: #fff;
}

a.ccm-thread-participant {
    color: inherit;
    font-weight: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

a.ccm-thread-participant:hover {
    color: var(--ccm-accent, #2271b1);
}

a.ccm-thread-participant--nolink,
a.ccm-thread-participant--nolink:hover {
    color: inherit;
    text-decoration: none;
    cursor: default;
}

.ccm-messaging-layout__messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Individual messages ── */

.ccm-message {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.9rem;
    line-height: 1.4;
    word-break: break-word;
}

/* Sent by the current user — right-aligned, blue */
.ccm-message--sent {
    align-self: flex-end;
    background: var(--ccm-sent-bg);
    color: var(--ccm-sent-text);
    border-bottom-right-radius: 4px;
}

/* Received from another user — left-aligned, grey */
.ccm-message--received {
    align-self: flex-start;
    background: var(--ccm-recv-bg);
    color: var(--ccm-recv-text);
    border-bottom-left-radius: 4px;
}

/* Ensure edit-form inline danger messages use a valid eicons glyph. */
.ccm-edit-profile-email-check .elementor-message.elementor-message-danger::before,
.ccm-edit-account-email-check .elementor-message.elementor-message-danger::before {
    content: "\e900" !important; /* eicon-warning in current Elementor build */
    font-family: eicons !important;
    font-style: normal;
    font-weight: 400;
    display: inline-block;
    margin-inline-end: 5px;
    vertical-align: top;
}

/* Admin / moderator notice — centered, distinct */
.ccm-message--admin {
    align-self: center;
    max-width: 90%;
    background: #f0f0f1;
    color: #1d2327;
    border: 1px solid #c3c4c7;
    border-radius: 8px;
    text-align: left;
}

.ccm-message__participants {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.85;
    margin-bottom: 6px;
    line-height: 1.3;
}

.ccm-message__time {
    font-size: 0.7rem;
    opacity: 0.65;
    display: block;
    margin-top: 4px;
    text-align: right;
}

/* Input area */
.ccm-messaging-layout__input {
    padding: 12px 16px;
    border-top: 1px solid var(--ccm-border);
    display: flex;
    gap: 10px;
    align-items: flex-end;
    background: #fff;
}

.ccm-messaging-layout__input textarea {
    flex: 1;
    min-width: 0; /* allow flex:1 to shrink correctly beside the send button */
    resize: vertical;
    min-height: 4.5rem;
    padding: 10px;
    border: 1px solid var(--ccm-border);
    border-radius: var(--ccm-radius);
    font-size: 0.9rem;
    font-family: var(--ccm-font);
}

/* .ccm-btn--send is width:100% for the message thread widget only — not in a flex row */
.ccm-messaging-layout__input .ccm-btn--send {
    width: auto;
    flex-shrink: 0;
    align-self: flex-end;
}

/* =========================================================
   Report Modal
   ========================================================= */

.ccm-report-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.ccm-report-modal--open { display: flex; }

.ccm-report-modal__box {
    background: #fff;
    border-radius: var(--ccm-radius);
    padding: 28px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 4px 24px rgba(0,0,0,.15);
}

.ccm-report-modal__title { margin: 0 0 16px; font-size: 1.1rem; }

.ccm-report-modal select,
.ccm-report-modal textarea {
    width: 100%;
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid var(--ccm-border);
    border-radius: var(--ccm-radius);
    font-size: 0.9rem;
    font-family: var(--ccm-font);
    box-sizing: border-box;
}

.ccm-report-modal__actions { display: flex; gap: 10px; justify-content: flex-end; }

/* =========================================================
   Loading state
   ========================================================= */

.ccm-loading { color: #888; font-size: 0.9rem; text-align: center; padding: 20px; }

/* =========================================================
   Profile category terms (dynamic tag div mode)
   ========================================================= */

.ccm-profile-category-terms-inline {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    vertical-align: middle;
}

.ccm-profile-category-term {
    flex: 0 0 auto;
    max-width: 100%;
    box-sizing: border-box;
    padding: 2px 15px 3px 15px;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #2E138E;
    border-radius: 50px 50px 50px 50px;
    text-align: center;
}

/* =========================================================
   Profile: display-only skill filter ([ccm_profile_skill_filters])
   ========================================================= */

.ccm-skill-filter-panel {
    box-sizing: border-box;
    width: 100%;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.ccm-skill-filter-panel__head {
    box-sizing: border-box;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    line-height: 1.3;
    color: #1e1e1e;
    margin: 0;
    padding: 12px 14px;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
}

.ccm-skill-filter-panel__body {
    box-sizing: border-box;
    display: block !important;
    margin: 0;
    padding: 0 0 6px;
    background: #fff;
}

.ccm-skill-group {
    display: block;
    width: 100%;
    padding: 10px;
}

.ccm-skill-group--filter {
    break-inside: avoid;
    margin: 0;
    border: 0;
    border-radius: 0;
    width: 100%;
    display: block;
    box-sizing: border-box;
}

.ccm-skill-group.ccm-skill-group--filter.ccm-skill-group--divider {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.ccm-skill-group--divider {
    border-bottom: 1px solid #e8e8e8;
}

.ccm-skill-group--form {
    break-inside: avoid;
    margin-bottom: 15px;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    overflow: hidden;
}

.ccm-skill-parent-wrapper {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
}

.ccm-skill-parent-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
}

.ccm-skill-option {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100%;
    box-sizing: border-box;
}

.ccm-skill-option--root {
    cursor: pointer !important;
    font-weight: 600;
    font-size: 15px;
    padding: 12px;
}

.ccm-skill-option--parent {
    margin: 0;
}

.ccm-skill-option--child {
    cursor: pointer !important;
    font-size: 14px;
    font-weight: 400;
}

.ccm-skill-checkbox--root {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
}

.ccm-skill-checkbox--child {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
}

.ccm-accordion-panel {
    display: block;
    padding-bottom: 12px;
}

.ccm-skill-children-wrapper {
    padding-left: var(--ccm-skill-indent, 0);
    display: flex !important;
    flex-direction: column !important;
    gap: 6px;
}

.ccm-skill-filter-panel__body > .ccm-skill-group {
    flex: 0 0 100%;
}

.ccm-skill-picker--profile-display input[type="checkbox"]:disabled {
    opacity: 1;
    cursor: default;
}

.ccm-skill-picker--profile-display .ccm-skill-checkbox.ccm-skill-checkbox--root,
.ccm-skill-picker--profile-display .ccm-skill-checkbox.ccm-skill-checkbox--child {
    display: none !important;
}

.ccm-skill-picker--profile-display .elementor-field-option {
    cursor: default;
}

/* =========================================================
   Profile → directory skill links ([ccm_profile_skill_links])
   ========================================================= */

.ccm-profile-skill-links--tree {
    max-width: 100%;
}

.ccm-skill-tree-link {
    color: inherit;
    text-decoration: none;
    font: inherit;
    border: 0;
    padding: 0;
    background: transparent;
}

.ccm-skill-tree-link:hover,
.ccm-skill-tree-link:focus {
    color: inherit;
    text-decoration: underline;
}

.ccm-profile-skill-links__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ccm-profile-skill-links__item {
    margin: 0 0 6px;
}

.ccm-profile-skill-links--chips .ccm-profile-skill-links__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ccm-profile-skill-links--chips .ccm-profile-skill-links__item {
    margin: 0;
}

.ccm-profile-skill-link {
    display: inline-block;
    text-decoration: none;
    color: #6262E8;
    font-weight: 600;
    border: 1px solid var(--ccm-border);
    border-radius: var(--ccm-radius);
    padding: 6px 12px;
    background: #fff;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ccm-profile-skill-link:hover {
    background: #f8f9fa;
    border-color: #6262E8;
    color: #6262E8;
}

/* Hide message widget when profile message URL is empty (own profile case). */
.ccm-msg-btn:has(a.elementor-button:not([href])),
.ccm-msg-btn:has(a.elementor-button[href=""]),
.ccm-msg-btn:has(a.elementor-button[href="#"]) {
    display: none !important;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 640px) {
    .ccm-messaging-layout { flex-direction: column; height: auto; }
    .ccm-messaging-layout__sidebar { width: 100%; max-height: 200px; border-right: none; border-bottom: 1px solid var(--ccm-border); }
    .ccm-messaging-layout__messages { min-height: 300px; }
    .ccm-profile-card { flex-direction: column; }
    .ccm-directory-search__fields { flex-direction: column; }
}