/* Social media (the add-on): its screens, the Social media section in Software settings and the menu badge.
   Uses the tokens from app.css (--cp-*). */

/* ---------- Networks and states ---------- */
.soc-pf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: #fff;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1;
    background: #475569;
    user-select: none;
}
.soc-pf.sm { width: auto; min-width: 21px; height: 16px; padding: 0 .22rem; border-radius: 5px; font-size: .56rem; }
.soc-pf.lg { width: 36px; height: 36px; border-radius: 10px; font-size: .7rem; }
.soc-pf-fb { background: #1e40af; }
.soc-pf-ig { background: #be185d; }
.soc-pf-gbp { background: #9a3412; }
.soc-pf-tt { background: #111827; }
.soc-pf.muted { background: var(--cp-subtle); }

.soc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.soc-status {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .08rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
    background: var(--cp-fill);
    color: var(--cp-text-2);
}
.soc-status i { font-size: .78rem; }
.soc-status-sched { background: var(--cp-primary-50); color: var(--cp-primary-text); }
.soc-status-needs { background: var(--cp-warning-100); color: var(--cp-warning-text); }
.soc-status-posted { background: var(--cp-success-50); color: var(--cp-success-text); }
.soc-status-wont { background: var(--cp-fill); color: var(--cp-muted); }
.soc-status-failed { background: var(--cp-danger-50); color: var(--cp-danger-text); }

.soc-text-warn { color: var(--cp-warning-text); }

.soc-note {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    padding: .6rem .75rem;
    border-radius: 10px;
    background: var(--cp-surface-2);
    color: var(--cp-muted);
    font-size: .86rem;
}
.soc-note > i { margin-top: .1rem; }
.soc-note.warn { background: var(--cp-warning-50); color: var(--cp-warning-text); }

.soc-label {
    display: block;
    margin-bottom: .5rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cp-muted);
}
.soc-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.soc-label-row .soc-label { flex-shrink: 0; }

/* ---------- Menu ---------- */
.shell-nav-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .38rem;
    border-radius: 999px;
    background: var(--cp-warning);
    color: #1c1400;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
}
@media (min-width: 992px) {
    html.nav-collapsed .shell-nav-badge { position: absolute; top: 3px; right: 3px; min-width: 1.05rem; height: 1.05rem; font-size: .6rem; padding: 0 .25rem; }
}

/* ---------- Tabs ---------- */
.soc-tabs { display: flex; align-items: center; gap: .25rem; border-bottom: 1px solid var(--cp-border); margin-bottom: 1rem; overflow-x: auto; scrollbar-width: none; }
.soc-tabs::-webkit-scrollbar { display: none; }
.soc-tab {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .6rem .9rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--cp-muted);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.soc-tab:hover { color: var(--cp-text); }
.soc-tab.active { color: var(--cp-primary-text); border-bottom-color: var(--cp-primary); }

/* ---------- Overview ---------- */
.soc-accounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.soc-account { display: flex; align-items: center; gap: .75rem; padding: .8rem .9rem; min-width: 0; }
.soc-account.attention { background: var(--cp-warning-50); border-color: var(--cp-warning-200); }
.soc-account-name { font-weight: 700; font-size: .95rem; }
.soc-account-sub { font-size: .78rem; color: var(--cp-muted); }
.soc-account-state { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700; text-decoration: none; }
.soc-account-state.ok { color: var(--cp-success-text); }
.soc-account-state.warn { color: var(--cp-warning-text); text-decoration: underline; }
.soc-account-state.bad { color: var(--cp-danger-text); text-decoration: underline; }
.soc-account-empty { grid-column: 1 / -1; }
.soc-account-empty-icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--cp-primary-50); color: var(--cp-primary); flex-shrink: 0; }

.soc-overview { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1rem; align-items: start; }
.soc-overview-main, .soc-overview-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
@media (max-width: 991.98px) {
    .soc-overview { grid-template-columns: minmax(0, 1fr); }
}

.soc-card { padding: 1rem 1.1rem; }
.soc-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.soc-card-title { display: flex; align-items: center; gap: .5rem; font-size: 1.02rem; font-weight: 700; margin: 0 0 .6rem; }
.soc-card-title i { color: var(--cp-primary); }
.soc-card-lead { color: var(--cp-muted); font-size: .88rem; margin: -.2rem 0 .8rem; }

.soc-waiting { background: var(--cp-warning-50); border: 1px solid var(--cp-warning-200); border-radius: var(--cp-radius); }
.soc-waiting .soc-card-title { color: var(--cp-warning-text); }
.soc-waiting-item { padding: .6rem 0; border-top: 1px solid var(--cp-warning-200); }
.soc-waiting-item:first-of-type { border-top: 0; padding-top: 0; }
.soc-waiting-top { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; margin-bottom: .25rem; }
.soc-waiting-top .small { margin-left: .2rem; }
.soc-waiting-text { display: block; color: var(--cp-text); font-weight: 500; text-decoration: none; margin-bottom: .45rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-waiting-text:hover { text-decoration: underline; }
.soc-waiting-foot { display: flex; align-items: center; gap: .5rem; }
.soc-waiting-foot > .small { flex: 1; min-width: 0; }

.soc-starts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 575.98px) {
    .soc-starts { grid-template-columns: minmax(0, 1fr); }
}
.soc-start {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem .85rem;
    border: 1px solid var(--cp-border);
    border-radius: 12px;
    color: var(--cp-text);
    text-decoration: none;
    background: var(--cp-surface);
}
.soc-start:hover { border-color: var(--cp-primary); background: var(--cp-primary-50); color: var(--cp-text); }
.soc-start > .min-w-0 { flex: 1; }
.soc-start-icon { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; background: var(--cp-fill); color: var(--cp-text-2); }
.soc-start-title { display: block; font-weight: 700; }
.soc-start-hint { display: block; font-size: .8rem; color: var(--cp-muted); }
.soc-start-go { color: var(--cp-muted); }
.soc-kind-newarrival { background: var(--cp-success-50); color: var(--cp-success-text); }
.soc-kind-bestseller { background: var(--cp-primary-50); color: var(--cp-primary-text); }
.soc-kind-slowmover { background: var(--cp-orange-50); color: var(--cp-orange-text); }
.soc-kind-repairspecial { background: var(--cp-primary-50); color: var(--cp-primary-text); }
.soc-kind-billpayments { background: var(--cp-pink-50); color: var(--cp-pink-text); }
.soc-kind-activation { background: var(--cp-cyan-50); color: var(--cp-cyan-text); }

.soc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 1rem 0 .75rem; }
.soc-tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
@media (max-width: 575.98px) {
    .soc-tiles { gap: .4rem; }
    .soc-tile { padding: .5rem .55rem; }
    .soc-tile-label { font-size: .68rem; line-height: 1.2; }
    .soc-tile-value { font-size: 1.15rem; }
}
.soc-tile { padding: .7rem .8rem; border-radius: 12px; background: var(--cp-surface-2); }
.soc-tile-label { font-size: .78rem; font-weight: 700; color: var(--cp-muted); }
.soc-tile-value { font-size: 1.45rem; font-weight: 800; line-height: 1.2; }
.soc-tile.warn .soc-tile-value { color: var(--cp-warning-text); }
.soc-month-split { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .75rem; font-size: .85rem; font-weight: 600; }
.soc-month-split > span { display: inline-flex; align-items: center; gap: .3rem; }

/* ---------- Post rows ---------- */
.soc-rows { display: flex; flex-direction: column; }
.soc-rows.card-surface { overflow: hidden; }
.soc-row { display: flex; align-items: center; gap: .5rem; border-top: 1px solid var(--cp-divider); }
.soc-rows > .soc-row:first-child { border-top: 0; }
.soc-rows.card-surface > .soc-row { padding-right: .8rem; }
.soc-row-link { flex: 1; min-width: 0; display: flex; gap: .8rem; align-items: flex-start; padding: .65rem .2rem; color: var(--cp-text); text-decoration: none; }
.soc-rows.card-surface .soc-row-link { padding: .7rem .9rem; }
.soc-row-link:hover { color: var(--cp-text); }
.soc-row-link:hover .soc-row-text { text-decoration: underline; }
.soc-row-when { width: 78px; flex-shrink: 0; display: flex; flex-direction: column; line-height: 1.25; }
.soc-row-day { font-weight: 700; font-size: .85rem; }
.soc-row-time { font-size: .78rem; color: var(--cp-muted); }
.soc-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.soc-row-top { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.soc-row-kind { font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--cp-muted); margin-left: .2rem; }
.soc-row-text { font-weight: 500; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.soc-row-meta { font-size: .78rem; color: var(--cp-muted); }
.soc-row-note { font-size: .8rem; color: var(--cp-muted); }
.soc-row-note.warn { color: var(--cp-warning-text); }
.soc-row-actions { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.soc-rows.compact .soc-row-link { padding: .55rem 0; }
.soc-row-wont .soc-row-text { text-decoration: line-through; color: var(--cp-muted); }

.soc-section { margin-bottom: 1.5rem; }
.soc-section-title { font-size: 1rem; font-weight: 700; margin: 0 0 .6rem; display: flex; align-items: center; gap: .25rem; }

/* ---------- Calendar ---------- */
.soc-cal-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: .6rem; }
.soc-cal-nav { display: flex; align-items: center; gap: .4rem; margin-right: auto; }
.soc-cal-nav .btn-light { border: 1px solid var(--cp-border); }
.soc-cal-title { font-size: 1.2rem; font-weight: 800; margin: 0 .35rem; white-space: nowrap; }

.soc-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.soc-chip {
    padding: .3rem .75rem;
    border: 1px solid var(--cp-border);
    border-radius: 999px;
    background: var(--cp-surface);
    color: var(--cp-text);
    font-size: .85rem;
    font-weight: 500;
}
.soc-chip:hover { border-color: var(--cp-border-strong); }
.soc-chip.active { border-color: var(--cp-primary); background: var(--cp-primary-50); color: var(--cp-primary-text); font-weight: 700; }

.soc-seg { display: inline-flex; padding: .2rem; border-radius: 10px; background: var(--cp-fill); }
.soc-seg > button { border: 0; background: transparent; padding: .3rem .8rem; border-radius: 8px; font-size: .85rem; font-weight: 600; color: var(--cp-muted); }
.soc-seg > button.active { background: var(--cp-surface); color: var(--cp-text); box-shadow: var(--cp-shadow-sm); }

.soc-cal-sub { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem 1rem; font-size: .85rem; color: var(--cp-muted); margin-bottom: .75rem; }
.soc-legend { display: flex; flex-wrap: wrap; gap: .75rem; }
.soc-legend > span { display: inline-flex; align-items: center; gap: .35rem; }
.soc-key { display: inline-block; width: 13px; height: 13px; border-radius: 4px; border: 1px solid; }
.soc-key.sched { background: var(--cp-primary-50); border-color: var(--cp-primary-200); }
.soc-key.posted { background: var(--cp-success-50); border-color: var(--cp-success-200); }
.soc-key.needs { background: var(--cp-warning-50); border-color: var(--cp-warning-200); }
.soc-key.wont { background: var(--cp-fill); border-color: var(--cp-border-strong); }
.soc-key.free { background: transparent; border: 1px dashed var(--cp-subtle); }

.soc-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: hidden; }
.soc-week-col { border-left: 1px solid var(--cp-border); min-width: 0; display: flex; flex-direction: column; }
.soc-week-col:first-child { border-left: 0; }
.soc-week-head { display: flex; flex-direction: column; padding: .6rem .7rem .5rem; border-bottom: 1px solid var(--cp-border); }
.soc-week-dow { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cp-muted); }
.soc-week-num { font-size: 1.3rem; font-weight: 800; line-height: 1.15; }
.soc-week-col.today .soc-week-head { background: var(--cp-primary-50); }
.soc-week-col.today .soc-week-dow, .soc-week-col.today .soc-week-num { color: var(--cp-primary-text); }
.soc-week-col.past { background: var(--cp-surface-2); }
.soc-week-body { flex: 1; display: flex; flex-direction: column; gap: .45rem; padding: .5rem; min-height: 340px; }
.soc-week-empty { font-size: .78rem; color: var(--cp-subtle); text-align: center; padding-top: .5rem; }

.soc-cal-post {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .45rem .5rem;
    border: 1px solid var(--cp-primary-200);
    border-radius: 10px;
    background: var(--cp-primary-50);
    color: var(--cp-text);
    text-decoration: none;
    font-size: .8rem;
    min-width: 0;
}
.soc-cal-post:hover { box-shadow: var(--cp-shadow); color: var(--cp-text); }
.soc-cal-top { display: flex; align-items: center; justify-content: space-between; gap: .25rem; }
.soc-cal-badges { display: flex; flex-wrap: wrap; gap: 2px; min-width: 0; }
.soc-cal-time { font-weight: 700; color: var(--cp-primary-text); white-space: nowrap; font-size: .76rem; }
.soc-cal-text { font-weight: 700; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-word; }
.soc-cal-note { font-size: .74rem; font-weight: 700; color: var(--cp-warning-text); }
.soc-cal-needs { background: var(--cp-warning-50); border-color: var(--cp-warning-200); }
.soc-cal-needs .soc-cal-time { color: var(--cp-warning-text); }
.soc-cal-posted { background: var(--cp-success-50); border-color: var(--cp-success-200); }
.soc-cal-posted .soc-cal-time, .soc-cal-posted .soc-cal-note { color: var(--cp-success-text); }
.soc-cal-failed { background: var(--cp-danger-50); border-color: var(--cp-danger-200); }
.soc-cal-failed .soc-cal-time, .soc-cal-failed .soc-cal-note { color: var(--cp-danger-text); }
.soc-cal-wont { background: var(--cp-surface-2); border-color: var(--cp-border); }
.soc-cal-wont .soc-cal-text { text-decoration: line-through; color: var(--cp-muted); }
.soc-cal-wont .soc-cal-time, .soc-cal-wont .soc-cal-note { color: var(--cp-muted); font-weight: 600; }
.soc-cal-draft { background: var(--cp-surface); border-color: var(--cp-border); }

.soc-cal-free {
    display: flex;
    flex-direction: column;
    padding: .4rem .5rem;
    border: 1px dashed var(--cp-subtle);
    border-radius: 10px;
    color: var(--cp-muted);
    font-size: .76rem;
    text-decoration: none;
}
.soc-cal-free strong { color: var(--cp-primary); }
a.soc-cal-free:hover { border-color: var(--cp-primary); background: var(--cp-primary-50); color: var(--cp-muted); }

@media (max-width: 991.98px) {
    .soc-week { grid-template-columns: minmax(0, 1fr); }
    .soc-week-col { border-left: 0; border-top: 1px solid var(--cp-border); flex-direction: row; }
    .soc-week-col:first-child { border-top: 0; }
    .soc-week-head { width: 64px; flex-shrink: 0; border-bottom: 0; border-right: 1px solid var(--cp-border); align-items: center; justify-content: flex-start; }
    .soc-week-body { min-height: 0; min-width: 0; }
    .soc-week-empty { text-align: left; padding-top: .15rem; }
}

.soc-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: hidden; }
.soc-month-dow { padding: .45rem .5rem; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cp-muted); border-bottom: 1px solid var(--cp-border); }
.soc-month-cell { min-height: 118px; padding: .35rem .4rem; border-bottom: 1px solid var(--cp-divider); border-left: 1px solid var(--cp-divider); display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.soc-month-cell:nth-child(7n + 1) { border-left: 0; }
.soc-month-cell.out { background: var(--cp-surface-2); }
.soc-month-cell.out .soc-month-num { color: var(--cp-subtle); }
.soc-month-cell.today { background: var(--cp-primary-50); }
.soc-month-num { align-self: flex-start; border: 0; background: transparent; padding: 0 .2rem; border-radius: 6px; font-weight: 800; font-size: .85rem; color: var(--cp-text); }
.soc-month-num:hover { background: var(--cp-fill); }
.soc-month-cell.today .soc-month-num { color: var(--cp-primary-text); }
.soc-month-post { display: flex; gap: .3rem; align-items: baseline; padding: .12rem .35rem; border-radius: 6px; font-size: .74rem; font-weight: 600; text-decoration: none; color: var(--cp-text); border: 1px solid transparent; min-width: 0; }
.soc-month-post.soc-cal-post { flex-direction: row; }
.soc-month-time { color: var(--cp-muted); font-weight: 700; flex-shrink: 0; }
.soc-month-more, .soc-month-free { border: 0; background: transparent; padding: 0 .35rem; font-size: .72rem; font-weight: 700; color: var(--cp-primary); text-align: left; text-decoration: none; }
.soc-month-free { color: var(--cp-muted); }
@media (max-width: 575.98px) {
    .soc-month-cell { min-height: 72px; padding: .25rem; }
    .soc-month-time { display: none; }
    .soc-month-post { font-size: .66rem; padding: .08rem .2rem; }
}

.soc-list-day { margin-bottom: 1rem; }
.soc-list-date { font-size: .95rem; font-weight: 700; margin: 0 0 .4rem; }
.soc-list-date.today { color: var(--cp-primary-text); }

/* ---------- Software settings: Social media ---------- */
.soc-set-switchrow { display: flex; gap: .85rem; align-items: flex-start; }
.soc-set-switchrow .form-check { padding-left: 0; }
.soc-set-switchrow .form-check-input { width: 2.7em; height: 1.45em; margin: .05rem 0 0; float: none; cursor: pointer; }
.soc-set-switch-title { font-weight: 700; font-size: 1.02rem; cursor: pointer; display: inline-flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.soc-pill { display: inline-block; padding: .08rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 700; background: var(--cp-fill); color: var(--cp-text-2); }
.soc-pill.on { background: var(--cp-success-100); color: var(--cp-success-text); }

.soc-set-accounts { margin-top: 1rem; overflow: hidden; }
.soc-set-accounts-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem 1.2rem .7rem; border-bottom: 1px solid var(--cp-divider); }
.soc-set-accounts-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; padding: .8rem 1.2rem; border-top: 1px solid var(--cp-divider); }
.soc-set-empty { padding: .9rem 1.2rem; color: var(--cp-muted); font-size: .9rem; }
.soc-set-accounts .set-row { padding: .75rem 1.2rem; }
.soc-acct-row.attention { background: var(--cp-warning-50); }

.soc-brand-logo { display: flex; align-items: center; gap: .9rem; margin-bottom: .9rem; }
.soc-brand-mark { width: 60px; height: 60px; border-radius: 14px; background: var(--cp-navy); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; color: var(--cp-warning); font-size: 1.4rem; flex-shrink: 0; }
.soc-brand-mark img { max-width: 86%; max-height: 86%; object-fit: contain; }
.soc-colors { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.soc-color { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .6rem .3rem .35rem; border: 1px solid var(--cp-border); border-radius: 10px; cursor: pointer; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; }
.soc-color input[type=color] { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.soc-color input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.soc-color input[type=color]::-webkit-color-swatch { border: 0; border-radius: 6px; }

.soc-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: .25rem; }
.soc-tag {
    display: inline-flex;
    align-items: center;
    padding: .15rem .55rem;
    border: 0;
    border-radius: 999px;
    background: var(--cp-primary-50);
    color: var(--cp-primary-text);
    font-size: .8rem;
    font-weight: 700;
}
button.soc-tag:hover:not(:disabled) { background: var(--cp-primary-100); }
.soc-tag.used, .soc-tag:disabled { background: var(--cp-fill); color: var(--cp-subtle); }

.soc-locked-icon { color: var(--cp-muted); font-size: 1.05rem; width: 2.3em; text-align: center; flex-shrink: 0; }

.soc-queue { margin-bottom: .75rem; }
.soc-queue-row { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--cp-divider); }
.soc-queue-day { font-weight: 500; }
.soc-queue-times { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-width: 0; }
.soc-time-chip { display: inline-flex; align-items: center; gap: .1rem; padding: .12rem .15rem .12rem .6rem; border-radius: 999px; background: var(--cp-primary-50); color: var(--cp-primary-text); font-size: .8rem; font-weight: 700; }
.soc-chip-x { border: 0; background: transparent; color: inherit; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0; opacity: .7; }
.soc-chip-x:hover:not(:disabled) { opacity: 1; background: var(--cp-primary-100); }
.soc-queue-add { display: inline-flex; align-items: center; gap: .35rem; }
.soc-queue-add input { width: 120px; }
.soc-queue-plus { border: 1px solid var(--cp-border); }
.soc-zone { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; }
.soc-zone select { max-width: 280px; }
@media (max-width: 575.98px) {
    .soc-queue-row { grid-template-columns: 76px minmax(0, 1fr) auto; }
}

.soc-people { list-style: none; margin: 0; padding: 0; }
.soc-person { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid var(--cp-divider); }
.soc-person:last-child { border-bottom: 0; }
.soc-person-name { flex: 1; min-width: 0; font-weight: 500; }
.soc-person-select { width: 175px; flex-shrink: 0; }

.soc-choose { display: flex; flex-direction: column; gap: .5rem; }
.soc-choose-item { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .7rem .8rem; border: 1px solid var(--cp-border); border-radius: 12px; background: var(--cp-surface); color: var(--cp-text); }
.soc-choose-item:hover:not(:disabled) { background: var(--cp-surface-2); border-color: var(--cp-border-strong); }
.soc-bullets { padding-left: 1.15rem; }
.soc-bullets li + li { margin-top: .3rem; }

/* ---------- Post screen ---------- */
.soc-compose { max-width: 1500px; margin: 0 auto; padding: 0 1.25rem 2rem; }
.soc-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 -1.25rem;
    padding: .7rem 1.25rem;
    background: var(--cp-surface);
    border-bottom: 1px solid var(--cp-border);
}
.soc-back { flex-shrink: 0; display: inline-flex; align-items: center; }
.soc-bar-title { flex: 1; min-width: 0; }
.soc-bar-h { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.12rem; font-weight: 800; min-width: 0; }
.soc-bar-sub { font-size: .82rem; color: var(--cp-muted); }
.soc-bar-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .45rem; }
.soc-bar-delete { color: var(--cp-danger); }
@media (max-width: 767.98px) {
    .soc-bar { flex-wrap: wrap; }
    .soc-bar-actions { width: 100%; justify-content: stretch; }
    .soc-bar-actions > .btn:not(.btn-icon), .soc-bar-actions > .soc-split { flex: 1 1 auto; }
}

.soc-split { position: relative; display: inline-flex; }
.soc-split-main { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; line-height: 1.15; padding-top: .3rem; padding-bottom: .3rem; border-top-right-radius: 0; border-bottom-right-radius: 0; flex: 1; }
.soc-split-label { font-weight: 700; }
.soc-split-sub { font-size: .72rem; opacity: .88; }
.soc-split-caret { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid rgba(255, 255, 255, .35); padding: 0 .6rem; }
.soc-split-menu { min-width: 270px; }

.soc-banner { display: flex; gap: .6rem; align-items: flex-start; margin-top: .75rem; padding: .7rem .9rem; border-radius: 12px; font-size: .9rem; background: var(--cp-primary-50); color: var(--cp-primary-text); }
.soc-banner > i { margin-top: .1rem; }
.soc-banner.warn { background: var(--cp-warning-50); color: var(--cp-warning-text); border: 1px solid var(--cp-warning-200); }
.soc-banner.bad { background: var(--cp-danger-50); color: var(--cp-danger-text); border: 1px solid var(--cp-danger-200); }
.soc-banner.muted { background: var(--cp-fill); color: var(--cp-text-2); }
.soc-banner.review { background: var(--cp-success-50); color: var(--cp-success-text); border: 1px solid var(--cp-success-200); }
.soc-banner-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .5rem; }
.soc-zone-note { margin-top: .5rem; font-size: .8rem; color: var(--cp-muted); }

.soc-compose-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr) 370px; gap: 1.5rem; align-items: start; margin-top: 1.1rem; }
.soc-col-left, .soc-col-main, .soc-col-preview { min-width: 0; }
.soc-col-preview { position: sticky; top: 84px; }
@media (max-width: 1279.98px) {
    .soc-compose-grid { grid-template-columns: 280px minmax(0, 1fr); }
    .soc-col-preview { grid-column: 1 / -1; position: static; max-width: 480px; }
}
@media (max-width: 767.98px) {
    .soc-compose { padding: 0 .75rem 1.5rem; }
    .soc-bar { margin: 0 -.75rem; padding: .6rem .75rem; }
    .soc-compose-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .soc-col-preview { max-width: none; }
}

.soc-panel { margin-bottom: 1.25rem; }

.soc-acct {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .5rem;
    padding: .6rem .7rem;
    border: 1px solid var(--cp-border-strong);
    border-radius: 12px;
    background: var(--cp-surface);
    cursor: pointer;
}
.soc-acct .form-check-input { margin: 0; flex-shrink: 0; }
.soc-acct.on { border-color: var(--cp-primary); background: var(--cp-primary-50); }
.soc-acct.warn .soc-acct-sub { color: var(--cp-warning-text); font-weight: 600; }
.soc-acct > .min-w-0 { display: flex; flex-direction: column; }
.soc-acct-name { display: block; font-weight: 700; font-size: .9rem; }
.soc-acct-sub { display: block; font-size: .76rem; color: var(--cp-muted); }

.soc-item { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .5rem; padding: .6rem; border: 1px solid var(--cp-border); border-radius: 12px; background: var(--cp-surface); }
.soc-item-thumb { width: 44px; height: 44px; border-radius: 10px; background: var(--cp-surface-2); display: inline-flex; align-items: center; justify-content: center; color: var(--cp-subtle); overflow: hidden; flex-shrink: 0; }
.soc-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.soc-item-name { font-weight: 700; font-size: .9rem; line-height: 1.25; }
.soc-item-sub { font-size: .78rem; color: var(--cp-muted); }
.soc-item-price { display: flex; align-items: center; gap: .5rem; margin: .35rem 0 0; }
.soc-item-price > span { font-size: .76rem; color: var(--cp-muted); white-space: nowrap; }
.soc-item-price input { width: 96px; }

.soc-picker { position: relative; }
.soc-picker-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin: .25rem 0 0; padding: .25rem; list-style: none; background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: 12px; box-shadow: var(--cp-shadow-lg); max-height: 320px; overflow-y: auto; }
.soc-picker-list > li { display: flex; align-items: center; gap: .55rem; padding: .4rem .5rem; border-radius: 8px; cursor: pointer; }
.soc-picker-list > li.active { background: var(--cp-primary-50); }
.soc-picker-list > li.soc-picker-empty { cursor: default; color: var(--cp-muted); font-size: .85rem; }
.soc-picker-thumb { width: 34px; height: 34px; border-radius: 8px; background: var(--cp-surface-2); display: inline-flex; align-items: center; justify-content: center; color: var(--cp-subtle); overflow: hidden; flex-shrink: 0; }
.soc-picker-thumb img { width: 100%; height: 100%; object-fit: cover; }
.soc-picker-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.soc-picker-name { font-weight: 600; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-picker-sub { font-size: .72rem; color: var(--cp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-picker-side { display: flex; flex-direction: column; align-items: flex-end; font-size: .8rem; flex-shrink: 0; }

.soc-required { border-color: var(--cp-warning); background-color: var(--cp-warning-50); }
.soc-checks-group { margin: .7rem 0 .3rem; }
.soc-checks-group .form-check { margin-bottom: .3rem; }
.soc-consent { margin-top: .6rem; color: var(--cp-muted); }

.soc-kinds { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }
.soc-kind { padding: .35rem .85rem; border: 1px solid var(--cp-border-strong); border-radius: 999px; background: var(--cp-surface); color: var(--cp-text); font-size: .88rem; }
.soc-kind:hover { border-color: var(--cp-primary); }
.soc-kind.active { border-color: var(--cp-primary); background: var(--cp-primary-50); color: var(--cp-primary-text); font-weight: 700; }

.soc-text-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: .45rem; }
.soc-ai { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.soc-ai-write { font-weight: 700; }
.soc-ai-write i { color: var(--cp-violet-text); }
.soc-ai-tone { width: auto; }
.soc-textarea { font-size: .98rem; line-height: 1.5; min-height: 170px; resize: vertical; }
.soc-text-foot { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin-top: .35rem; font-size: .8rem; }
.soc-ai-note { color: var(--cp-violet-text); font-size: .8rem; }
.soc-count { color: var(--cp-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.soc-count.over { color: var(--cp-danger); font-weight: 700; }
.soc-signoff { display: flex; align-items: center; gap: .45rem; margin-top: .35rem; font-size: .82rem; color: var(--cp-muted); }
.soc-signoff > .min-w-0 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-perchannel { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-top: .6rem; font-size: .82rem; color: var(--cp-muted); }
.soc-override { margin-top: .6rem; }
.soc-override-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .25rem; font-size: .82rem; font-weight: 700; }

.soc-media { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .4rem; }
.soc-media-tile {
    position: relative;
    width: 132px;
    height: 132px;
    border: 1px solid var(--cp-border);
    border-radius: 12px;
    background: var(--cp-surface-2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: 0;
}
.soc-media-tile > img, .soc-media-tile > video { width: 100%; height: 100%; object-fit: cover; }
.soc-media-tile.first { border: 2px solid var(--cp-primary); }
.soc-media-x { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(15, 23, 42, .66); color: #fff; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.soc-media-x:hover { background: rgba(15, 23, 42, .85); }
.soc-media-first, .soc-media-lead { position: absolute; left: 5px; bottom: 5px; padding: .05rem .45rem; border-radius: 999px; font-size: .68rem; font-weight: 700; border: 0; }
.soc-media-first { background: var(--cp-primary-fill); color: #fff; }
.soc-media-lead { background: rgba(var(--cp-surface-rgb), .92); color: var(--cp-text); }
.soc-media-kind { position: absolute; top: 5px; left: 5px; padding: 0 .35rem; border-radius: 6px; background: rgba(15, 23, 42, .66); color: #fff; font-size: .75rem; }
.soc-media-tile.suggest { border: 1px dashed var(--cp-primary); cursor: pointer; }
.soc-media-tile.suggest > img { opacity: .55; }
.soc-media-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: .3rem .4rem; background: rgba(var(--cp-surface-rgb), .92); color: var(--cp-primary-text); font-size: .72rem; font-weight: 700; text-align: center; }
.soc-media-tile.upload { border: 1px dashed var(--cp-border-strong); color: var(--cp-primary-text); font-size: .8rem; font-weight: 700; text-align: center; padding: .6rem; cursor: pointer; background: var(--cp-surface); }
.soc-media-tile.upload > i { font-size: 1.35rem; }
.soc-media-tile.upload:hover { border-color: var(--cp-primary); background: var(--cp-primary-50); }
.soc-media-tile.upload.busy { cursor: progress; }

.soc-checks-box { padding: .85rem 1rem; border-radius: 12px; background: var(--cp-surface-2); border: 1px solid var(--cp-border); }
.soc-checks-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.soc-check-list { list-style: none; margin: 0; padding: 0; }
.soc-check { display: flex; gap: .55rem; align-items: flex-start; padding: .22rem 0; font-size: .88rem; }
.soc-check > i { margin-top: .12rem; flex-shrink: 0; }
.soc-check.ok > i { color: var(--cp-success); }
.soc-check.warn > i { color: var(--cp-warning-text); }
.soc-check.error > i { color: var(--cp-danger); }
.soc-check.error { color: var(--cp-danger-text); }

.soc-pv-tabs { display: flex; gap: .15rem; border-bottom: 1px solid var(--cp-border); }
.soc-pv-tab { padding: .45rem .75rem; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--cp-muted); font-weight: 700; font-size: .9rem; }
.soc-pv-tab.active { color: var(--cp-primary-text); border-bottom-color: var(--cp-primary); }

.soc-preview { margin-top: .8rem; border: 1px solid var(--cp-border); border-radius: 14px; background: var(--cp-surface); box-shadow: var(--cp-shadow-sm); overflow: hidden; font-size: .88rem; }
.soc-pv-head { display: flex; align-items: center; gap: .55rem; padding: .65rem .8rem; }
.soc-pv-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--cp-navy); color: var(--cp-warning); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .72rem; flex-shrink: 0; }
.soc-pv-name { display: block; font-weight: 700; font-size: .86rem; }
.soc-pv-sub { display: block; font-size: .72rem; color: var(--cp-muted); }
.soc-pv-media { background: var(--cp-navy); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.soc-pv-media > img, .soc-pv-media > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.soc-pv-media.square { aspect-ratio: 1 / 1; }
.soc-pv-media.wide { aspect-ratio: 4 / 3; }
.soc-pv-media.tall { aspect-ratio: 9 / 16; width: 96px; border-radius: 10px; flex-shrink: 0; }
.soc-pv-nomedia { color: var(--cp-subtle); font-size: .8rem; padding: 1rem; text-align: center; }
.soc-pv-text { padding: .65rem .8rem; white-space: pre-line; overflow-wrap: anywhere; }
.soc-pv-text[class*="clamp-"] { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.soc-pv-text.clamp-3 { -webkit-line-clamp: 3; }
.soc-pv-text.clamp-4 { -webkit-line-clamp: 4; }
.soc-pv-text.clamp-5 { -webkit-line-clamp: 5; }
.soc-pv-text.clamp-6 { -webkit-line-clamp: 6; }
.soc-pv-tiktok .soc-pv-text { padding: .2rem 0 0; }
.soc-pv-actions { display: flex; justify-content: space-around; padding: .5rem; border-top: 1px solid var(--cp-divider); color: var(--cp-muted); font-size: .8rem; font-weight: 600; }
.soc-pv-kicker { padding: .7rem .8rem 0; font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--cp-muted); }
.soc-preview-gbp .soc-pv-media { margin-top: .5rem; }
.soc-pv-button { display: inline-flex; align-items: center; gap: .35rem; margin: 0 .8rem .8rem; padding: .3rem .8rem; border: 1px solid var(--cp-border-strong); border-radius: 999px; color: var(--cp-primary-text); font-weight: 700; font-size: .82rem; }
.soc-pv-tiktok { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .8rem .8rem; }

.soc-target { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .5rem; padding: .6rem .7rem; border: 1px solid var(--cp-border); border-left-width: 4px; border-radius: 12px; background: var(--cp-surface); }
.soc-target-published { border-left-color: var(--cp-success); }
.soc-target-failed { border-left-color: var(--cp-danger); }
.soc-readonly-text { white-space: pre-line; overflow-wrap: anywhere; padding: .8rem .9rem; border: 1px solid var(--cp-border); border-radius: 12px; background: var(--cp-surface); }

/* ---------- Pick a time ---------- */
.soc-slot-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.soc-slot-chip { padding: .25rem .65rem; border: 1px solid var(--cp-border-strong); border-radius: 999px; background: var(--cp-surface); font-size: .82rem; }
.soc-slot-chip:hover { border-color: var(--cp-primary); }
.soc-slot-chip.active { border-color: var(--cp-primary); background: var(--cp-primary-50); color: var(--cp-primary-text); font-weight: 700; }

/* ---------- Back from a network's sign-in ---------- */
.soc-connected { max-width: 560px; }
.soc-connected-card { padding: 2rem 1.5rem; text-align: center; margin-top: 1.5rem; }
.soc-connected-icon { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.soc-connected-icon.ok { background: var(--cp-success-100); color: var(--cp-success-text); }
.soc-connected-icon.bad { background: var(--cp-danger-100); color: var(--cp-danger-text); }
.soc-locked .set-help { margin-left: 0; }

@media (max-width: 767.98px) {
    /* Approving on a phone: what goes out comes first. */
    .soc-compose-grid.reviewing .soc-col-preview { order: -1; }
}
@media (max-width: 575.98px) {
    .soc-cal-nav { flex-wrap: wrap; width: 100%; }
    .soc-cal-title { font-size: 1.02rem; margin: 0 .2rem; }
}
@media (max-width: 575.98px) {
    /* The accounts as a compact two-column strip on phones. */
    .soc-accounts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .soc-account { padding: .6rem; gap: .5rem; }
    .soc-account .soc-pf.lg { width: 30px; height: 30px; font-size: .62rem; }
    .soc-account-name { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .soc-account-sub { display: none; }
    .soc-account-state { font-size: .72rem; }
}