/* SnappySocials — app-specific styles.
   All shared UI (buttons, cards, forms, nav, badges, stat cards, etc.) is in style.css,
   copied from the SolStack master at deploy time. Only add SnappySocials-unique styles here. */

/* Post-status badges */
.badge-draft     { background: var(--text2);   color: #ffffff; }
.badge-queued    { background: var(--accent);   color: #ffffff; }
.badge-rendering { background: var(--warning);  color: #ffffff; }
.badge-posted    { background: var(--accent2);  color: #ffffff; }
.badge-failed    { background: var(--danger);   color: #ffffff; }
.badge-preview   { background: #7c5cff;         color: #ffffff; }

/* Top-align the two header columns so a wrapped role label (e.g. GLOBAL / ADMIN) sits level with the
   org name on line 1, rather than vertically centred. (Shared #header is align-items:center.) */
#header { align-items: flex-start; }

/* Mobile: lay action buttons out as a 2-up grid instead of one bold full-width stack (or overflowing
   off-screen — the shared .btn-row is display:flex with no wrap). #share-btn spans the full width at
   the bottom. Two buttons per row, e.g. BACK+EDIT, PUBLISH+DELETE, then SHARE full-width. */
@media (max-width: 600px) {
    .btn-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        align-items: stretch;
    }
    /* Action-button forms use display:contents (master standard), so the BUTTON is the grid item. */
    .btn-row > *,
    .btn-row form > .btn { width: 100%; }
    .btn-row #share-btn { grid-column: 1 / -1; }
}

/* Media upload zone (used from Phase 2) */
.media-zone {
    border: 2px dashed var(--border);
    border-radius: 16px;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 12px 0;
    color: var(--text2);
    font-size: 0.85rem;
    transition: border-color 0.2s;
}
.media-zone:hover { border-color: var(--accent); }
.media-zone.has-media { border-style: solid; border-color: var(--accent); }
.media-zone img, .media-zone video { max-width: 100%; border-radius: 14px; }