/* Social Hub: engagement, insights and post-publish actions */
.module-tabs { overflow-x: auto; scrollbar-width: none; }
.module-tabs::-webkit-scrollbar { display: none; }
.module-tabs > button { flex: 0 0 auto; }
.social-extension-panel { padding: 0 30px 44px; color: #202521; }
.social-subtabs { display: flex; gap: 8px; padding: 18px 0 8px; }
.social-subtabs button { min-height: 34px; padding: 0 15px; border: 0; border-radius: 9px; background: #f2f3f1; color: #81867e; cursor: pointer; font: inherit; font-size: 12px; font-weight: 750; }
.social-subtabs button.is-active { background: #edf6e7; color: #68a24a; }
.social-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 8px 0 16px; border-bottom: 1px solid rgba(25,32,26,.09); }
.social-page-head h2 { margin: 3px 0 4px; font-size: 25px; letter-spacing: -.045em; }
.social-page-head p { margin: 0; color: rgba(32,37,33,.55); font-size: 12px; }
.social-page-head .primary-btn, .social-page-head .ghost-btn { width: auto; min-height: 38px; }
.social-page-head .primary-btn { background: #81c463; color: #fff; }
.social-head-actions { display: flex; align-items: center; gap: 9px; }
.social-head-actions > span { color: rgba(32,37,33,.46); font-size: 11px; }
.social-head-select, .social-filter-selects select { min-height: 38px; padding: 0 34px 0 13px; border: 1px solid rgba(25,32,26,.1); border-radius: 10px; background: #fff; color: #333a34; font: inherit; font-size: 12px; }
.engagement-summary-row { display: grid; grid-template-columns: 155px 155px minmax(280px, 1fr); gap: 10px; margin: 12px 0; }
.engagement-summary-row article, .engagement-summary-row label { display: flex; align-items: center; min-height: 60px; padding: 0 16px; border: 1px solid rgba(25,32,26,.09); border-radius: 13px; background: #fff; box-shadow: 0 5px 18px rgba(25,32,26,.03); }
.engagement-summary-row article > span { display: grid; width: 30px; height: 30px; margin-right: 10px; border-radius: 9px; background: #eff6eb; color: #6ba14e; place-items: center; }
.engagement-summary-row article strong { margin-right: 6px; font-size: 24px; }
.engagement-summary-row article small { color: rgba(32,37,33,.48); }
.engagement-summary-row label span { color: rgba(32,37,33,.4); font-size: 20px; }
.engagement-summary-row input { flex: 1; min-width: 0; margin-left: 10px; border: 0; outline: 0; font: inherit; }
.engagement-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; padding: 8px; border: 1px solid rgba(25,32,26,.07); border-radius: 12px; background: #f8faf7; }
.social-filter-pills, .social-filter-selects { display: flex; align-items: center; gap: 7px; }
.social-filter-pills button { min-height: 31px; padding: 0 13px; border: 0; border-radius: 9px; background: #f0f1ef; color: rgba(32,37,33,.55); cursor: pointer; font: inherit; font-size: 11px; }
.social-filter-pills button.is-active { background: #eaf5e3; color: #67a348; box-shadow: inset 0 0 0 1px rgba(103,163,72,.12); }
.engagement-workbench { display: grid; grid-template-columns: minmax(310px, .78fr) minmax(430px, 1.22fr); min-height: 470px; border: 1px solid rgba(25,32,26,.1); border-radius: 14px; background: #fff; overflow: hidden; }
.engagement-queue { border-right: 1px solid rgba(25,32,26,.08); }
.engagement-queue > header { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; padding: 15px 17px 12px; border-bottom: 1px solid rgba(25,32,26,.08); }
.engagement-queue > header span { grid-column: 1 / -1; color: rgba(32,37,33,.45); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.engagement-queue > header strong { font-size: 14px; }
.engagement-queue > header small { color: #6ea751; font-size: 10px; }
.engagement-item { position: relative; display: grid; grid-template-columns: 38px 1fr auto; width: 100%; gap: 10px; padding: 15px 14px; border: 0; border-bottom: 1px solid rgba(25,32,26,.07); background: #fff; color: inherit; cursor: pointer; text-align: left; }
.engagement-item::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: transparent; content: ""; }
.engagement-item.is-active { background: #f0f8eb; }
.engagement-item.is-active::before { background: #81c463; }
.engagement-item > b, .engagement-person > b { display: grid; width: 36px; height: 36px; border-radius: 50%; background: #dfeeda; color: #4f743e; font-size: 12px; place-items: center; }
.engagement-item > span { min-width: 0; }
.engagement-item strong, .engagement-item small, .engagement-item em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.engagement-item strong { font-size: 12px; }
.engagement-item small { margin-top: 5px; font-size: 11px; }
.engagement-item em { margin-top: 8px; color: rgba(32,37,33,.47); font-size: 9px; font-style: normal; }
.engagement-item time { color: rgba(32,37,33,.38); font-size: 9px; }
.engagement-detail { display: flex; min-width: 0; flex-direction: column; }
.engagement-detail > header { display: flex; align-items: center; justify-content: space-between; padding: 14px 17px; border-bottom: 1px solid rgba(25,32,26,.08); }
.engagement-person { display: flex; align-items: center; gap: 10px; }
.engagement-person span strong, .engagement-person span small { display: block; }
.engagement-person span strong { font-size: 13px; }
.engagement-person span small { margin-top: 3px; color: rgba(32,37,33,.43); font-size: 10px; }
.engagement-detail > header > button { border: 0; background: transparent; cursor: pointer; color: rgba(32,37,33,.5); }
.engagement-thread { flex: 1; padding: 20px; background: #fbfcfa; }
.engagement-thread > span { display: block; color: rgba(32,37,33,.42); font-size: 10px; text-align: center; }
.engagement-thread > p { width: fit-content; max-width: 70%; margin: 18px 0; padding: 10px 14px; border-radius: 6px 16px 16px 16px; background: #eef5e9; font-size: 13px; }
.engagement-thread aside { padding: 11px 13px; border-left: 3px solid #9bc77d; background: #f4f8f1; }
.engagement-thread aside strong, .engagement-thread aside span { display: block; font-size: 10px; }
.engagement-thread aside span { margin-top: 4px; color: rgba(32,37,33,.55); }
.reply-composer { margin: 14px; border: 1px solid rgba(25,32,26,.11); border-radius: 13px; overflow: hidden; }
.reply-composer > header, .reply-composer > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; }
.reply-composer > header { border-bottom: 1px solid rgba(25,32,26,.07); }
.reply-composer > header strong { color: #668e51; font-size: 11px; }
.reply-composer button { border: 0; background: transparent; color: rgba(32,37,33,.55); cursor: pointer; font: inherit; font-size: 10px; }
.reply-composer textarea { display: block; width: 100%; min-height: 86px; padding: 12px; border: 0; resize: vertical; outline: 0; font: inherit; font-size: 12px; }
.reply-composer > footer { border-top: 1px solid rgba(25,32,26,.07); }
.reply-composer > footer .primary-btn { min-height: 32px; padding: 0 14px; color: #fff; }
.engagement-detail-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 14px 14px; }
.engagement-detail-actions button { min-height: 31px; padding: 0 12px; border: 1px solid rgba(25,32,26,.1); border-radius: 9px; background: #fff; cursor: pointer; font: inherit; font-size: 10px; }
.social-metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 14px 0; border: 1px solid rgba(25,32,26,.09); border-radius: 13px; background: #fff; overflow: hidden; }
.social-metric-grid article { padding: 17px; border-right: 1px solid rgba(25,32,26,.07); }
.social-metric-grid article:last-child { border-right: 0; }
.social-metric-grid article span, .social-metric-grid article strong, .social-metric-grid article small { display: block; }
.social-metric-grid article span { color: rgba(32,37,33,.47); font-size: 10px; }
.social-metric-grid article strong { margin: 8px 0 4px; font-size: 25px; }
.social-metric-grid article small { color: #6d9d54; font-size: 9px; }
.social-two-column { display: grid; grid-template-columns: 1.3fr .7fr; gap: 13px; }
.social-card { padding: 17px; border: 1px solid rgba(25,32,26,.09); border-radius: 14px; background: #fff; }
.social-card > header span { color: rgba(32,37,33,.42); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.social-card > header h3 { margin: 4px 0 0; font-size: 14px; }
.mini-bar-chart { display: flex; align-items: end; height: 180px; gap: 8%; padding: 24px 16px 0; border-bottom: 1px solid rgba(25,32,26,.08); }
.mini-bar-chart i { flex: 1; height: var(--h); min-height: 10px; border-radius: 5px 5px 0 0; background: linear-gradient(#9bd27b,#dcefd1); }
.platform-progress { display: grid; gap: 17px; margin-top: 23px; }
.platform-progress p { position: relative; display: flex; justify-content: space-between; margin: 0; padding-bottom: 10px; font-size: 11px; }
.platform-progress i { position: absolute; right: 0; bottom: 0; left: 0; height: 5px; border-radius: 999px; background: #edf0ec; overflow: hidden; }
.platform-progress i::after { display: block; width: var(--w); height: 100%; border-radius: inherit; background: #8cc66b; content: ""; }
.insight-signal-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; margin-top: 14px; }
.insight-signal-grid article, .opportunity-section article { padding: 18px; border: 1px solid rgba(25,32,26,.09); border-radius: 14px; background: #fff; }
.insight-signal-grid article > span { display: inline-flex; padding: 5px 8px; border-radius: 999px; background: #edf6e7; color: #6d9f55; font-size: 9px; font-weight: 750; }
.insight-signal-grid article > strong { display: block; margin: 16px 0 8px; font-size: 16px; line-height: 1.45; }
.insight-signal-grid article > p { min-height: 54px; margin: 0; color: rgba(32,37,33,.57); font-size: 11px; line-height: 1.7; }
.insight-signal-grid footer { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 13px; border-top: 1px solid rgba(25,32,26,.07); }
.insight-signal-grid footer em { color: rgba(32,37,33,.42); font-size: 9px; font-style: normal; }
.insight-signal-grid footer button, .opportunity-section article button { border: 0; background: transparent; color: #65964d; cursor: pointer; font: inherit; font-size: 10px; font-weight: 750; }
.trend-query-card { display: grid; grid-template-columns: 1fr auto auto; gap: 9px; margin-top: 14px; padding: 7px; border: 1px solid rgba(25,32,26,.11); background: #fff; }
.trend-query-card label { display: flex; align-items: center; gap: 9px; padding: 0 10px; }
.trend-query-card label span { color: #658f4f; font-size: 22px; }
.trend-query-card input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 13px; font-weight: 700; }
.trend-query-card .ghost-btn, .trend-query-card .primary-btn { width: auto; min-height: 40px; }
.trend-filters { display: flex; align-items: center; gap: 6px; padding: 11px 0; }
.trend-filters span { margin: 0 3px 0 8px; color: rgba(32,37,33,.45); font-size: 9px; }
.trend-filters button { min-height: 27px; padding: 0 9px; border: 1px solid rgba(25,32,26,.09); border-radius: 8px; background: #fff; color: rgba(32,37,33,.6); cursor: pointer; font: inherit; font-size: 9px; }
.trend-filters button.is-active { border-color: #bfdd9d; background: #eff8df; color: #567742; }
.trend-grid { grid-template-columns: 1.15fr .85fr; }
.trend-map > div { position: relative; height: 265px; margin-top: 14px; border-radius: 10px; background: radial-gradient(circle at 50% 50%,rgba(176,214,140,.18),transparent 60%),#172217; overflow: hidden; }
.trend-map > div::before, .trend-map > div::after { position: absolute; inset: 15%; border: 1px solid rgba(194,233,163,.14); border-radius: 50%; content: ""; }
.trend-map > div::after { inset: 32%; }
.trend-map > div button { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); transform: translate(-50%,-50%); border: 1px solid rgba(208,241,184,.34); border-radius: 50%; background: rgba(167,216,126,.2); color: #eaf8df; cursor: pointer; font: inherit; font-size: 9px; }
.trend-map > div button b { font-size: 10px; }
.trend-posts ol { display: grid; gap: 0; margin: 12px 0 0; padding: 0; list-style: none; }
.trend-posts li { display: grid; grid-template-columns: 25px 1fr auto; gap: 9px; padding: 13px 0; border-bottom: 1px solid rgba(25,32,26,.07); }
.trend-posts li > b { color: #89b970; font-size: 11px; }
.trend-posts li span em, .trend-posts li span strong { display: block; }
.trend-posts li span em { margin-bottom: 5px; color: rgba(32,37,33,.4); font-size: 8px; font-style: normal; }
.trend-posts li span strong { font-size: 10px; line-height: 1.45; }
.trend-posts li small { color: rgba(32,37,33,.45); font-size: 8px; }
.opportunity-section { margin-top: 14px; }
.opportunity-section > header span { color: #67944f; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.opportunity-section > header h3 { margin: 4px 0; font-size: 17px; }
.opportunity-section > header p { margin: 0; color: rgba(32,37,33,.48); font-size: 10px; }
.opportunity-section > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; margin-top: 10px; }
.opportunity-section article em { color: #6a9c52; font-size: 9px; font-style: normal; font-weight: 800; }
.opportunity-section article strong { display: block; min-height: 46px; margin: 9px 0 5px; font-size: 12px; line-height: 1.45; }
.opportunity-section article p { min-height: 35px; margin: 0 0 10px; color: rgba(32,37,33,.5); font-size: 9px; line-height: 1.55; }
.post-action-notice { display: flex; align-items: center; gap: 9px; padding: 11px 0; color: rgba(32,37,33,.48); font-size: 10px; }
.post-action-notice b { display: grid; width: 23px; height: 23px; border-radius: 50%; background: #171b18; color: #fff; place-items: center; }
.post-action-filters { margin-bottom: 11px; }
.post-action-filters button span { margin-left: 5px; color: rgba(32,37,33,.35); }
.post-action-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.post-action-list article { padding: 18px; border: 1px solid rgba(25,32,26,.09); border-radius: 14px; background: #fff; }
.post-action-list article header, .post-action-list article footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rule-status { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: 9px; font-weight: 750; }
.rule-status.active { background: #eaf6e2; color: #5f9745; }
.rule-status.paused { background: #f2f2f0; color: #777b75; }
.post-action-list time { color: rgba(32,37,33,.4); font-size: 9px; }
.post-action-list h3 { margin: 16px 0 6px; font-size: 16px; }
.post-action-list p { min-height: 34px; margin: 0; color: rgba(32,37,33,.52); font-size: 10px; line-height: 1.55; }
.post-action-list footer { margin-top: 17px; padding-top: 13px; border-top: 1px solid rgba(25,32,26,.07); }
.post-action-list footer span { color: rgba(32,37,33,.5); font-size: 9px; }
.post-action-list footer button, .execution-table button { min-height: 28px; padding: 0 10px; border: 1px solid rgba(25,32,26,.1); border-radius: 8px; background: #fff; cursor: pointer; font: inherit; font-size: 9px; }
.execution-table { border: 1px solid rgba(25,32,26,.09); border-radius: 13px; background: #fff; overflow: hidden; }
.execution-table > header, .execution-table > article { display: grid; grid-template-columns: 115px 1.3fr 1.2fr 80px 55px; align-items: center; gap: 12px; padding: 13px 16px; }
.execution-table > header { background: #f7f8f6; color: rgba(32,37,33,.42); font-size: 9px; }
.execution-table > article { border-top: 1px solid rgba(25,32,26,.07); font-size: 10px; }
.execution-table time, .execution-table > article > span { color: rgba(32,37,33,.48); }
.execution-table em { width: fit-content; padding: 4px 8px; border-radius: 999px; font-size: 9px; font-style: normal; }
.execution-table em.success { background: #eaf6e2; color: #5f9745; }
.execution-table em.failed { background: #fff0ed; color: #c15e50; }
.social-rule-modal[hidden] { display: none !important; }
.social-rule-modal { position: fixed; inset: 0; z-index: 10100; display: grid; padding: 28px; place-items: center; }
.social-rule-backdrop { position: absolute; inset: 0; background: rgba(17,21,18,.38); backdrop-filter: blur(5px); }
.social-rule-dialog { position: relative; z-index: 1; width: min(760px,calc(100vw - 56px)); max-height: calc(100vh - 56px); padding: 26px 30px; border-radius: 22px; background: #fff; box-shadow: 0 28px 80px rgba(16,22,17,.22); overflow: auto; }
.social-rule-close { position: absolute; top: 14px; right: 15px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: #f4f5f3; cursor: pointer; font-size: 20px; }
.social-rule-dialog > header { display: flex; align-items: center; gap: 13px; padding-bottom: 20px; border-bottom: 1px solid rgba(25,32,26,.08); }
.social-rule-icon { display: grid; width: 44px; height: 44px; border-radius: 13px; background: #eef7e8; color: #69a14e; place-items: center; }
.social-rule-dialog > header h2 { margin: 4px 0; font-size: 22px; }
.social-rule-dialog > header p { margin: 0; color: rgba(32,37,33,.5); font-size: 10px; }
.social-rule-steps > section { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 17px 0; border-bottom: 1px solid rgba(25,32,26,.07); }
.social-rule-steps > section > b { display: grid; width: 24px; height: 24px; border-radius: 8px; background: #eef7e8; color: #68a04d; font-size: 10px; place-items: center; }
.social-rule-steps h3 { margin: 2px 0 3px; font-size: 13px; }
.social-rule-steps p { margin: 0 0 11px; color: rgba(32,37,33,.46); font-size: 9px; }
.social-rule-fields { display: grid; grid-template-columns: 1fr 1.7fr; gap: 10px; }
.social-rule-steps label span { display: block; margin-bottom: 5px; color: rgba(32,37,33,.58); font-size: 9px; font-weight: 700; }
.social-rule-steps select, .social-rule-steps input { width: 100%; min-height: 38px; padding: 0 11px; border: 1px solid rgba(25,32,26,.1); border-radius: 9px; background: #fff; font: inherit; font-size: 10px; }
.social-rule-preview { margin-top: 15px; padding: 13px 15px; border-radius: 12px; background: #f5f8f2; }
.social-rule-preview span { color: rgba(32,37,33,.44); font-size: 9px; }
.social-rule-preview p { margin: 6px 0 0; font-size: 11px; }
.social-rule-preview b { color: #66964f; }
.social-rule-dialog > footer { display: flex; justify-content: flex-end; gap: 9px; padding-top: 17px; }
.social-rule-dialog > footer button { width: auto; min-width: 96px; }

@media (max-width: 980px) {
  .engagement-workbench, .social-two-column, .trend-grid { grid-template-columns: 1fr; }
  .engagement-queue { border-right: 0; border-bottom: 1px solid rgba(25,32,26,.08); }
  .insight-signal-grid, .opportunity-section > div { grid-template-columns: 1fr; }
  .social-metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}