/* public/assets/css/posts.css
   KHMER HRMS — Social Feed (M07) UX/UI Cleanup Pass
   Season: S17 patch — Posts, Comments & Social Feed
   Reference: Master Reference §13, Master List §4 (Premium UI)

   WHY THIS FILE EXISTS:
   app/Views/posts/index.php built its composer fields as bare
   <label>/<textarea>/<select>/<input> tags inside .form-row divs
   without the .form-group wrapper class that app.css keys its input
   styling off of (".form-group input, .form-group select,
   .form-group textarea"). Result: every composer field rendered as
   plain unstyled browser chrome. That markup bug is fixed directly in
   the view (fields now wrapped in .form-group like every other form
   in the app). This file adds the additional, purpose-built composer
   chrome (avatar header, dashed upload zone, toolbar) on top of the
   existing design system — every color/spacing value below is one of
   the existing CSS variables from themes.css/app.css, so Day/Night
   mode and the 5 color themes work automatically. No new colors, no
   CDN assets. */

/* ── Page header icon (feed + trash) ─────────────────────────────── */
.page-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--primary);
    margin-right: 8px;
    vertical-align: -3px;
}
.page-header-icon svg { width: 100%; height: 100%; }

/* ── Composer card ─────────────────────────────────────────────── */
.post-composer { padding: var(--space-3); }

.composer-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.composer-head .avatar-photo,
.composer-head .avatar-initial { flex-shrink: 0; }

.composer-textarea {
    width: 100%;
    resize: vertical;
    min-height: 52px;
    padding: 13px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--text);
    font-size: 0.98rem;
    line-height: 1.5;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.composer-textarea::placeholder { color: var(--text-muted); }
.composer-textarea:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}

/* ── Meta fields grid ─────────────────────────────────────────── */
.composer-meta {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border);
}
.composer-meta-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
}
@media (min-width: 768px) {
    .composer-meta-grid { grid-template-columns: 1.4fr 1fr 1fr; align-items: end; }
    .composer-meta-grid.has-target { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
.composer-meta .form-group { margin-bottom: 0; }

/* ── Photo upload zone ────────────────────────────────────────── */
.composer-upload {
    margin-top: var(--space-2);
}
.composer-upload-zone {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.composer-upload-zone:hover,
.composer-upload-zone:focus-within {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 5%, var(--surface));
}
.composer-upload-zone svg {
    width: 20px; height: 20px; flex-shrink: 0; color: var(--primary);
}
.composer-upload-zone-text { font-size: 0.85rem; color: var(--text); }
.composer-upload-zone-text small { display: block; color: var(--text-muted); font-size: 0.75rem; margin-top: 1px; }
.composer-upload-zone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.post-image-remove-item label { color: var(--text-muted); }

/* ── Toolbar footer ───────────────────────────────────────────── */
.composer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border);
}
.composer-pin-row { display: flex; align-items: center; gap: 10px; }
.composer-pin-row label:not(.switch) {
    font-size: 0.85rem;
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.composer-pin-row label:not(.switch) svg { width: 14px; height: 14px; color: var(--text-muted); }

/* ── Filter panel ─────────────────────────────────────────────── */
.posts-filter-row { align-items: center; }
.posts-filter-row .checkbox-row { margin: 0; align-items: center; }
.posts-filter-row .checkbox-row input { margin-top: 0; }

/* One-row filter (Type select · My posts only · Filter / Clear).
   Why it used to take two rows: the shared filter-responsive.css makes
   `.filter-bar > .filter-form` fill 100% of the row and stretches every
   <select> to flex:1, so the select swallowed the whole line and pushed
   the Filter / Clear buttons underneath. Here the select gets a compact
   fixed-ish width and the field group only takes the width it needs, so
   everything sits on one line — and still wraps by itself (never clips)
   if the screen is genuinely too narrow. Selectors are deliberately more
   specific than the shared rules so no !important is needed. Plain
   flexbox + gap only: works on every current browser/device. Phones
   (<768px) keep the shared stacked layout untouched. */
@media (min-width: 768px) {
    .filter-panel .posts-filter-row.filter-bar {
        display: flex;
        flex-wrap: wrap;                 /* safety net for very narrow desktop windows */
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        min-height: 0;
    }
    .filter-panel .posts-filter-row.filter-bar > .filter-form {
        flex: 0 1 auto;                  /* was 1 1 100% */
        width: auto;
        min-width: 0;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
    }
    .filter-panel .posts-filter-row.filter-bar > .filter-form > select {
        flex: 0 0 200px;                 /* was flex: 1 1 180px (stretched) */
        width: 200px;
        min-width: 150px;
        max-width: 100%;
    }
    .filter-panel .posts-filter-row .checkbox-row {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .filter-panel .posts-filter-row.filter-bar > .filter-panel-actions {
        margin-left: 0;                  /* sit right beside the fields (same as Locations) */
        flex: 0 0 auto;
        overflow: visible;
    }
}

/* ── Feed card polish ─────────────────────────────────────────── */
.post-card { transition: box-shadow 0.2s ease, transform 0.2s ease; }
.post-card:hover { box-shadow: var(--shadow-ambient), 0 6px 18px color-mix(in srgb, var(--primary) 8%, transparent); }

.post-card-header .avatar-photo,
.post-card-header .avatar-initial { width: 42px; height: 42px; }
.post-card-header .avatar-initial { font-size: 1.05rem; }

/* ── FIX: Empty feed illustration & parent container override ── */
/* បង្ខំ Container ដែលក្តោប empty-state ឲ្យរត់ពេញ 100% ដែរ */
*:has(> .empty-state) {
    width: 100% !important;
    max-width: 100% !important;
    grid-column: 1 / -1 !important;
    flex: 1 1 100% !important;
}

.empty-state {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 40px 20px !important;
    box-sizing: border-box !important;
}

.empty-state svg {
    width: 46px;
    height: 46px;
    color: var(--text-muted);
    opacity: 0.55;
    margin-bottom: 10px;
}
.empty-state p { margin: 0; font-size: 0.92rem; }

/* ── Comment composer ─────────────────────────────────────────── */
.comment-composer {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: var(--space-3);
}
.comment-composer .avatar-photo,
.comment-composer .avatar-initial { flex-shrink: 0; }
.comment-composer-body { flex: 1; }
.comment-composer textarea {
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--radius, 10px);
    border: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--text);
    font-size: 0.9rem;
    resize: vertical;
    min-height: 40px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.comment-composer textarea:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}
.comment-composer .form-actions { margin-top: 8px; }

.comment-reply-form textarea {
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--text);
    font-size: 0.85rem;
    resize: vertical;
}
.comment-reply-form textarea:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}

/* ── Mobile tightening ────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .post-composer { padding: var(--space-2); }
    .composer-head { gap: 8px; }
    .composer-toolbar { flex-direction: column; align-items: stretch; }
    .composer-toolbar .btn { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════
   Social Feed — refined layout (all sizes) + polished mobile view
   ══════════════════════════════════════════════════════════════ */

/* Stat pills: label + count */
.posts-stats .stat-pill-label::after { content: ':'; margin-right: 2px; }
.posts-stats .stat-pill svg { width: 16px; height: 16px; color: var(--primary); flex-shrink: 0; }

/* Post card structure (replaces old inline styles) */
.post-card { margin-bottom: var(--space-3); }
.post-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.post-head-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.post-head-meta { min-width: 0; }
.post-author { display: block; line-height: 1.3; overflow-wrap: anywhere; }
.post-sub { font-size: .78rem; display: flex; flex-wrap: wrap; gap: 0 4px; margin-top: 1px; }
.post-head-badges { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.post-title { margin: var(--space-2) 0 4px; }
.post-content { overflow-wrap: anywhere; }
.post-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--space-1) var(--space-2);
    margin-top: var(--space-2); padding-top: var(--space-2);
    border-top: 1px solid var(--border);
}
.post-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.post-actions-tools { display: flex; align-items: center; gap: 6px; }
.post-actions-tools form { margin: 0; }
.post-comment-btn { white-space: nowrap; }
.composer-more-btn { display: none; }
.composer-more-count {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--primary); color: #fff; font-size: .7rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    /* Header: title left, recycle-bin as compact icon button */
    .page-header.posts-header { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: var(--space-2); }
    .posts-header h1 { font-size: 1.3rem; display: flex; align-items: center; gap: 2px; }
    .posts-header .text-muted { font-size: .82rem; margin: 2px 0 0; line-height: 1.45; }
    .posts-header .btn { flex-shrink: 0; padding: 8px 10px; }
    .posts-header .btn span { display: none; }

    /* Stats: three equal tiles */
    .posts-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: var(--space-2); }
    .posts-stats .stat-pill {
        flex-direction: column; justify-content: center; text-align: center;
        gap: 2px; padding: 10px 6px; border-radius: var(--radius);
    }
    .posts-stats .stat-pill svg { order: -2; width: 18px; height: 18px; }
    .posts-stats .stat-pill-count { order: -1; font-size: 1.25rem; line-height: 1.2; }
    .posts-stats .stat-pill-label { font-size: .72rem; color: var(--text-muted); line-height: 1.3; }
    .posts-stats .stat-pill-label::after { content: none; }

    /* Composer: compact, extra fields collapse behind a button */
    .post-composer { border-radius: var(--radius); margin-bottom: var(--space-2) !important; }
    .composer-textarea { min-height: 64px; font-size: .95rem; }
    .post-composer:not(.is-open) .composer-meta { display: none; }
    .composer-meta { margin-top: var(--space-2); }
    .composer-toolbar {
        display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
        flex-direction: unset; align-items: stretch;
        border-top: 0; padding-top: 0; margin-top: var(--space-2);
    }
    .composer-toolbar .composer-pin-row { grid-column: 1 / -1; order: 3; justify-content: flex-start; }
    .composer-toolbar .composer-pin-row:empty { display: none; }
    .composer-more-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; order: 1; min-height: 42px; }
    .composer-more-btn svg { width: 18px; height: 18px; }
    .composer-publish { order: 2; }
    .composer-publish .btn { width: 100%; min-height: 42px; justify-content: center; }

    /* Filter panel a little tighter */
    .filter-panel { padding: var(--space-2); }

    /* Feed cards */
    .post-card { padding: var(--space-2); border-radius: var(--radius); margin-bottom: var(--space-2); }
    .post-head { flex-wrap: wrap; gap: 8px; }
    .post-head-user { flex: 1 1 100%; }
    .post-head-badges { order: 2; }
    .post-title { font-size: 1.05rem; line-height: 1.4; }
    .post-content { font-size: .95rem; line-height: 1.65; }
    .post-images { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

    /* Footer: reactions on one full-width row, actions on the next */
    .post-card-footer { flex-direction: column; align-items: stretch; gap: 10px; }
    .post-reactions { display: flex; flex-wrap: nowrap; gap: 6px; width: 100%; }
    .post-reactions .reaction-btn {
        flex: 1 1 0; min-width: 0; min-height: 38px;
        justify-content: center; gap: 4px; padding-inline: 4px; white-space: nowrap;
    }
    .post-actions { justify-content: space-between; flex-wrap: nowrap; gap: 8px; }
    .post-actions .post-comment-btn { min-height: 38px; }
    .post-actions-tools { gap: 8px; }
    .post-actions-tools .btn { min-width: 38px; min-height: 38px; justify-content: center; }

    /* Pagination footer */
    .table-footer { flex-wrap: wrap; gap: 10px; }
}

/* ══ Social Feed — tidier header, stat strip with recycle-bin link, softer composer ══ */
.posts-header { margin-bottom: var(--space-2, 12px); }
.posts-header h1 { display: flex; align-items: center; gap: 10px; }
.posts-header .page-header-icon { width: 36px; height: 36px; margin: 0; border-radius: 10px; flex: 0 0 36px;
    background: color-mix(in srgb, var(--primary, #2563eb) 12%, transparent); }
.posts-header .page-header-icon svg { width: 20px; height: 20px; }

.posts-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: var(--space-3, 16px); }
.posts-stats .stat-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.posts-stats .stat-pill:not(a):hover { box-shadow: 0 2px 8px rgba(15, 23, 42, .06); }

/* Recycle-bin link sits right after the last stat pill, as a quiet action chip */
.posts-stats .posts-trash-link { text-decoration: none; cursor: pointer; color: var(--text-muted, #64748b);
    border-style: dashed; background: transparent; margin-inline-start: 4px; }
.posts-stats .posts-trash-link svg { color: currentColor; }
.posts-stats .posts-trash-link:hover { color: var(--danger, #dc2626); border-color: var(--danger, #dc2626); border-style: solid;
    background: color-mix(in srgb, var(--danger, #dc2626) 8%, transparent); transform: translateY(-1px); }
.posts-stats .posts-trash-link:focus-visible { outline: 2px solid color-mix(in srgb, var(--danger, #dc2626) 45%, transparent); outline-offset: 2px; }
.posts-stats .posts-trash-label { font-weight: 600; font-size: .86rem; }

/* Composer: calmer card, clearer focus */
.post-composer { border-radius: 16px; }
.post-composer .composer-textarea { border-radius: 14px; transition: box-shadow .15s ease, border-color .15s ease; }
.post-composer .composer-textarea:focus { border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #2563eb) 18%, transparent); outline: none; }

@media (max-width: 767.98px) {
    .posts-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .posts-stats .posts-trash-link { grid-column: 1 / -1; justify-content: center; margin-inline-start: 0; }
}

/* ── Composer meta row: Title / Type / Visibility always line up (Khmer + English) ──
   Khmer glyphs have taller line-boxes than Latin, so the text input, the selects and the
   labels used to end up with different heights (and "align-items:end" pushed the title down).
   Fix: same label box, same fixed control height, same font metrics, top-aligned grid. */
.composer-meta-grid { align-items: start !important; }
.composer-meta .form-group { display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; }
.composer-meta .form-group > label { display: flex; align-items: center; min-height: 28px; margin: 0 0 6px; line-height: 1.5; }
.composer-meta .form-group > input[type="text"],
.composer-meta .form-group > select {
    box-sizing: border-box; width: 100%;
    height: 48px; min-height: 48px; max-height: 48px;
    padding-top: 0; padding-bottom: 0; line-height: 46px;
    font-family: inherit; font-size: 0.95rem;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.composer-meta .form-group > select {
    padding-right: 36px;
    background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
}
.composer-meta .form-group > input[type="text"] { line-height: normal; }
@media (max-width: 767.98px) {
    .composer-meta .form-group > input[type="text"],
    .composer-meta .form-group > select { height: 46px; min-height: 46px; max-height: 46px; }
}