/* SM8 Marketing Manager — custom components layered on the Mazer theme.
   Layout, cards, buttons, forms, tables come from /themes/compiled/css/app.css
   (the same theme the Rails addons use). Only app-specific pieces live here. */

:root {
  --facebook: #1877F2;
  --instagram: #E4405F;
  --linkedin: #0A66C2;
  --twitter: #000000;
}

/* ── Card shims (app.js emits .card-title / .card-subtitle inside .card) ───── */
.card > .card-header { border-bottom: 1px solid #eef0f3; }
.card .card-title { font-size: 1.05rem; font-weight: 600; margin: 0; }
.card .card-subtitle { font-size: .82rem; color: #6c757d; margin-top: 2px; }
.card { margin-bottom: 1.5rem; }
.card > .card-header,
.card > .card-body { padding: 1.25rem; }
.card > .card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
/* app.js often puts content straight in .card without .card-body */
.card > .social-grid,
.card > .stats-grid,
.card > .post-list,
.card > .photos-grid,
.card > .recommendations-grid,
.card > .tabs { padding: 1.25rem; }

/* Legacy button aliases still emitted by app.js */
.btn-ghost { background: transparent; border: 1px solid transparent; color: #6c757d; }
.btn-ghost:hover { background: #f2f4f7; color: #435ebe; }
.btn-outline { background: transparent; border: 1px solid #435ebe; color: #435ebe; }

/* ── Stat cards ────────────────────────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card { background: #fff; border-radius: .5rem; padding: 1.25rem; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #6c757d; font-weight: 600; }
.stat-value { font-size: 1.7rem; font-weight: 700; color: #25396f; line-height: 1.2; margin-top: 4px; }

/* ── Social account cards ──────────────────────────────────────────────────── */
.social-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.social-card { border: 1px solid #eef0f3; border-radius: .5rem; padding: 1.25rem; text-align: center; background: #fff; transition: box-shadow .15s, border-color .15s; }
.social-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.social-card.connected { border-color: #5ddab4; background: #f4fffb; }
.platform-icon { width: 44px; height: 44px; border-radius: .6rem; display: flex; align-items: center; justify-content: center; margin: 0 auto .6rem; color: #fff; font-weight: 700; font-size: 1.1rem; }
.platform-icon.facebook  { background: var(--facebook); }
.platform-icon.instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.platform-icon.linkedin  { background: var(--linkedin); }
.platform-icon.twitter   { background: var(--twitter); }
.platform-name { font-weight: 600; color: #25396f; }
.platform-status { font-size: .8rem; color: #6c757d; margin: 2px 0 6px; }
.platform-user { font-size: .78rem; color: #6c757d; margin-bottom: .75rem; }
.platform-row { display: flex; gap: 6px; align-items: center; }
.platform-badge { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; color: #fff; font-size: 10px; font-weight: 700; }
.platform-badge.facebook  { background: var(--facebook); }
.platform-badge.instagram { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
.platform-badge.linkedin  { background: var(--linkedin); }
.platform-badge.twitter   { background: var(--twitter); }

/* ── Platform pickers in the modal ─────────────────────────────────────────── */
.platform-checkboxes { display: flex; flex-wrap: wrap; gap: .5rem; }
.platform-check { display: flex; align-items: center; gap: 6px; border: 1px solid #dee2e6; border-radius: .4rem; padding: .45rem .7rem; cursor: pointer; font-size: .85rem; user-select: none; }
.platform-check.checked { border-color: #435ebe; background: #eef1fb; }
.platform-check input { display: none; }

/* ── Posts list ────────────────────────────────────────────────────────────── */
.post-list { display: flex; flex-direction: column; gap: .75rem; }
.post-item { display: flex; gap: .9rem; padding: .9rem; border: 1px solid #eef0f3; border-radius: .5rem; background: #fff; }
.post-thumb { width: 56px; height: 56px; border-radius: .4rem; object-fit: cover; flex-shrink: 0; background: #f2f4f7; }
.post-caption-text { font-size: .88rem; color: #25396f; line-height: 1.45; }
.post-meta { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-top: .35rem; }
.post-time { font-size: .76rem; color: #6c757d; }
.post-platforms { display: flex; gap: 4px; }
.post-actions { display: flex; gap: 6px; align-items: flex-start; }

/* Status badges */
.status-badge { font-size: .7rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; text-transform: capitalize; }
.status-badge.draft     { background: #eef0f3; color: #6c757d; }
.status-badge.scheduled { background: #fff3cd; color: #9a6b00; }
.status-badge.published { background: #d8f6ec; color: #17806a; }
.status-badge.failed    { background: #fde2e4; color: #b02a37; }

/* ── Recommendations ───────────────────────────────────────────────────────── */
.recommendations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.recommendation-card { border: 1px solid #eef0f3; border-top: 3px solid #435ebe; border-radius: .5rem; padding: 1rem; background: #fff; }
.rec-category { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #435ebe; }
.rec-caption { font-size: .85rem; color: #25396f; line-height: 1.5; margin: .5rem 0; }
.rec-image-hint { font-size: .76rem; color: #6c757d; font-style: italic; background: #f8f9fa; border-radius: .3rem; padding: .4rem .6rem; }
.rec-footer { display: flex; justify-content: space-between; align-items: center; margin-top: .75rem; }

/* ── Job photos ────────────────────────────────────────────────────────────── */
.photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .75rem; }
.photo-card { position: relative; border-radius: .5rem; overflow: hidden; cursor: pointer; aspect-ratio: 1; background: #f2f4f7; }
.photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-overlay { position: absolute; inset: 0; background: rgba(67,94,190,.75); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; font-size: .8rem; font-weight: 600; }
.photo-card:hover .photo-overlay { opacity: 1; }
.photo-label { font-size: .7rem; color: #6c757d; padding: .3rem; text-align: center; }

/* ── Tabs ──────────────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid #eef0f3; margin-bottom: 1rem; }
.tab { padding: .6rem 1rem; font-size: .87rem; color: #6c757d; cursor: pointer; border-bottom: 2px solid transparent; }
.tab.active { color: #435ebe; border-bottom-color: #435ebe; font-weight: 600; }

/* ── Analytics ─────────────────────────────────────────────────────────────── */
.analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.chart-card { background: #fff; border-radius: .5rem; padding: 1.25rem; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.growth-indicator { font-size: .78rem; font-weight: 600; }
.growth-indicator.positive { color: #17806a; }
.growth-indicator.negative { color: #b02a37; }

/* ── Empty / loading states ────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 3rem 1rem; color: #6c757d; }
.empty-state svg { opacity: .35; margin-bottom: .75rem; }
.loading-overlay { display: flex; align-items: center; justify-content: center; padding: 3rem; }
.spinner { width: 30px; height: 30px; border: 3px solid #eef0f3; border-top-color: #435ebe; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Modal (custom overlay, not Bootstrap's JS modal) ──────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 1055; padding: 1rem; }
.modal-card { background: #fff; border-radius: .6rem; width: 100%; max-width: 620px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.modal-card-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid #eef0f3; }
.modal-card-body { padding: 1.25rem; overflow-y: auto; }
.modal-card-footer { display: flex; justify-content: flex-end; gap: .5rem; padding: 1rem 1.25rem; border-top: 1px solid #eef0f3; }

/* ── Connect screen ────────────────────────────────────────────────────────── */
.connect-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #f2f7ff; padding: 1rem; z-index: 1050; }
.connect-card { background: #fff; border-radius: .6rem; padding: 2.5rem; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.1); }
.connect-card .logo { font-size: 2.6rem; color: #435ebe; margin-bottom: .5rem; }

/* ── Toasts ────────────────────────────────────────────────────────────────── */
.toast-container { position: fixed; bottom: 1.25rem; right: 1.25rem; display: flex; flex-direction: column; gap: .5rem; z-index: 1060; }
.toast { display: flex; align-items: center; gap: .5rem; background: #fff; border-left: 4px solid #435ebe; border-radius: .4rem; padding: .75rem 1rem; box-shadow: 0 4px 16px rgba(0,0,0,.14); font-size: .85rem; min-width: 260px; animation: toastIn .2s ease-out; }
.toast.success { border-left-color: #17806a; }
.toast.error   { border-left-color: #b02a37; }
.toast.warning { border-left-color: #cc9a06; }
.toast.info    { border-left-color: #435ebe; }
@keyframes toastIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Recommended: job photo picker strip ───────────────────────────────────── */
.rec-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: .6rem; }
.rec-photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .35rem; cursor: pointer;
             border: 2px solid transparent; background: #f2f4f7; transition: border-color .12s, transform .12s; }
.rec-photo:hover { transform: translateY(-1px); }
.rec-photo.selected { border-color: #435ebe; }

/* Brand glyphs (Bootstrap Icons) sit slightly better with explicit sizing */
.platform-icon i { font-size: 1.35rem; line-height: 1; }
.platform-badge i { font-size: 11px; line-height: 1; }