/* Socials - custom styles layered on Tailwind */

.card {
  background: #fff;
  border-radius: 0.9rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  overflow: hidden;
}
/* Padded card body. `.card-pad` was used in ~40 places but never actually
   defined, so its content sat flush against the card's rounded corners (and
   `overflow:hidden` clipped anything near the radius — most visibly the step
   numbers in the studios' "1 · Source" headings, which lost their top-left
   corner). Views that wanted different spacing were overriding it inline with
   style="padding:…", which still wins over this rule. */
.card-pad {
  padding: 20px 22px;
}
@media (max-width: 560px) {
  /* Tighter gutters on phones so the content column keeps its width. */
  .card-pad { padding: 16px; }
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  font-weight: 600;
  background: #f8fafc;
  border-bottom: 1px solid #eef2f7;
  text-align: left;
  color: #0f172a;
}
.card-head .chev {
  transition: transform .15s ease;
  color: #94a3b8;
}
.card-head.open .chev { transform: rotate(180deg); }
.card-body { padding: 1rem; }
.card-body.hidden-body { display: none; }
.hidden-body { display: none; }

.btn-primary {
  background: #2563eb;
  color: #fff;
  padding: .55rem 1rem;
  border-radius: .6rem;
  font-weight: 600;
  transition: background .15s, opacity .15s;
}
.btn-primary:hover:not(:disabled) { background: #1d4ed8; }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; }

.btn-secondary {
  background: #fff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  padding: .5rem .9rem;
  border-radius: .6rem;
  font-weight: 500;
  transition: background .15s;
}
.btn-secondary:hover:not(:disabled) { background: #f1f5f9; }
.btn-secondary:disabled { opacity: .45; }

.btn-mini {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
  padding: .35rem .6rem;
  border-radius: .5rem;
  font-size: .8rem;
  font-weight: 600;
  transition: background .15s;
  cursor: pointer;
  white-space: nowrap;
}
.btn-mini:hover { background: #e2e8f0; }

/* pill button for the "Photos Watermark" entry point */
.pill-btn {
  font-size: .76rem; font-weight: 700; padding: .4rem .95rem; border-radius: 9999px;
  border: 1px solid #c7d2fe; background: #eef2ff; color: #4338ca; cursor: pointer;
  transition: all .15s; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.pill-btn:hover { background: #e0e7ff; border-color: #a5b4fc; }

.fmt-btn {
  width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #e2e8f0; border-radius: .5rem; background: #fff;
  color: #0f172a; font-size: .95rem;
}
.fmt-btn:hover { background: #eef2ff; }
.fmt-btn.active { background: #dbeafe; border-color: #93c5fd; }

.platform-toggle {
  display: flex; align-items: center;
  border: 1px solid #e2e8f0; border-radius: .6rem;
  padding: .6rem .75rem; background: #fff; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.platform-toggle:hover { border-color: #c7d2fe; }
.platform-toggle.on { background: #eef2ff; border-color: #a5b4fc; }

.drop-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .25rem; text-align: center;
  border: 2px dashed #cbd5e1; border-radius: .9rem;
  padding: 1.5rem 1rem; color: #475569;
}
.drop-zone:hover { border-color: #93c5fd; background: #f8fafc; cursor: pointer; }
.drop-zone.dragover { border-color: #2563eb; background: #eff6ff; }

/* The shared drag-and-drop "over" affordance (static/dnd.js). Every zone it
   wires — a label, a studio canvas, the Media Library body — gets this while a
   file hovers, so a drop target always looks like one. */
.dnd-over {
  outline: 3px dashed var(--brand-500, #4f46e5);
  outline-offset: -3px;
  background-color: rgba(79, 70, 229, .06);
}

.log-box {
  background: #0f172a; color: #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .75rem; line-height: 1.5;
  border-radius: .6rem; padding: .75rem;
  height: 12rem; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
}
.log-box .ok-line { color: #34d399; }
.log-box .err-line { color: #f87171; }

.attach-chip {
  display: flex; align-items: center; gap: .5rem;
  border: 1px solid #e2e8f0; border-radius: .6rem; padding: .5rem .75rem; background: #f8fafc;
}
.attach-chip .kind-badge {
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  padding: .15rem .4rem; border-radius: .35rem; background: #dbeafe; color: #1e40af;
}

.bulk-row {
  border: 1px solid #e2e8f0; border-radius: .6rem; padding: .6rem; background: #fafafa;
}
.bulk-row .row-status { font-size: .7rem; font-weight: 600; }
.bulk-row .row-status.ok { color: #059669; }
.bulk-row .row-status.fail { color: #dc2626; }
.bulk-row .row-status.pending { color: #94a3b8; }

@media (min-width: 640px) {
  .log-box { height: 14rem; }
}

/* composer placeholder */
#message:empty::before {
  content: attr(data-placeholder);
  color: #94a3b8;
  pointer-events: none;
}
.inp-c {
  width: 100%; border: 1px solid #e2e8f0; border-radius: .5rem; padding: .45rem .6rem;
  font-size: .9rem;
}
.inp-c:focus { outline: none; border-color: #93c5fd; ring: 2px; }

/* ---- tabs ---- */
.tabs { display: flex; gap: .35rem; background: #f1f5f9; padding: .3rem; border-radius: .7rem; }
.tab {
  flex: 1; padding: .5rem .75rem; border-radius: .5rem; font-weight: 600;
  color: #64748b; background: transparent; border: none; cursor: pointer;
  transition: background .15s, color .15s;
}
.tab.active { background: #fff; color: #1e40af; box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.tab-panel { display: block; }
.tab-panel.hidden { display: none; }

/* ---- account cards ---- */
.account-card {
  display: flex; align-items: center; gap: .6rem;
  border: 1px solid #e2e8f0; border-radius: .7rem; padding: .6rem .75rem; background: #fafafa;
}
.account-card .acc-badge {
  font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  padding: .15rem .45rem; border-radius: .35rem; white-space: nowrap;
}
.badge-telegram { background: #dbeafe; color: #1e40af; }
.badge-bale { background: #ede9fe; color: #6d28d9; }
.badge-eitaa { background: #ffe4e6; color: #be123c; }
.badge-rubika { background: #ccfbf1; color: #0f766e; }
.badge-youtube { background: #fee2e2; color: #b91c1c; }
.badge-aparat { background: #cffafe; color: #0e7490; }
.badge-wordpress { background: #e0eef6; color: #155e75; }
.badge-soroush { background: #dbeafe; color: #1b74bc; }

/* ---- schedule fields ---- */
.schedule-field {
  display: flex; align-items: center; gap: .6rem;
  border: 1px solid #e2e8f0; border-radius: .75rem; padding: .6rem .75rem; background: #fff;
}
.schedule-field .sf-icon { font-size: 1.4rem; }
.schedule-field .sf-label { display: block; font-size: .7rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; }
.sf-input {
  border: none; outline: none; font-size: 1rem; font-weight: 600; color: #0f172a;
  background: transparent; width: 100%;
}
.schedule-field:focus-within { border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(59,130,246,.12); }

/* account toggle rows in Send-to */
.acc-toggle {
  display: flex; align-items: center; gap: .6rem;
  border: 1px solid #e2e8f0; border-radius: .6rem; padding: .55rem .75rem;
  background: #fff; cursor: pointer; transition: background .15s, border-color .15s;
}
.acc-toggle:hover { border-color: #c7d2fe; }
.acc-toggle.on { background: #eef2ff; border-color: #a5b4fc; }
.acc-toggle .sig-dot { font-size: .8rem; }

/* scheduled item countdown */
.sched-item { border: 1px solid #e2e8f0; border-radius: .7rem; padding: .6rem .75rem; background: #fafafa; }
.sched-countdown { font-size: .8rem; font-weight: 600; color: #1d4ed8; font-variant-numeric: tabular-nums; }

/* halo pill segmented control (watermark type: text / logo / both) */
.halo-pills {
  display: flex; gap: .35rem; padding: .25rem; border-radius: 9999px;
  background: #eef2ff; border: 1px solid #c7d2fe; width: fit-content;
}
.halo-pill {
  font-size: .76rem; font-weight: 700; padding: .35rem 1rem; border-radius: 9999px;
  border: none; background: transparent; color: #6366f1; cursor: pointer;
  transition: all .15s; white-space: nowrap;
}
.halo-pill:hover { color: #4338ca; }
.halo-pill.active {
  background: #6366f1; color: #fff; box-shadow: 0 2px 8px rgba(99,102,241,.45);
}

/* watermark position grid */
.position-cell {
  height: 2.1rem; border: 1px solid #cbd5e1; border-radius: .5rem; cursor: pointer;
  color: #475569; font-weight: 600; background: #fff; transition: all .12s;
}
.position-cell:hover { border-color: #93c5fd; }
.position-cell.active { background: #2563eb; border-color: #2563eb; color: #fff; }

/* bulk watermark thumbnail gallery */
.wm-thumb {
  position: relative; border: 2px solid #e2e8f0; border-radius: .6rem; overflow: hidden;
  background: #f8fafc; cursor: pointer; transition: all .12s;
}
.wm-thumb:hover { border-color: #93c5fd; }
.wm-thumb.marked { border-color: #ef4444; opacity: .55; }
/* thumbnail image box - shows the ENTIRE image (no cropping) via object-contain */
.wm-thumb-img {
  aspect-ratio: 1 / 1; width: 100%; height: 100px; display: flex; align-items: center;
  justify-content: center; background: #f1f5f9; padding: .15rem;
}
.wm-thumb-img img { display: block; }
.wm-thumb-name {
  font-size: .58rem; color: #475569; padding: .15rem .3rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; line-height: 1.1;
}
.wm-thumb-x {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 9999px;
  background: #ef4444; color: #fff; font-size: .7rem; line-height: 1; display: flex;
  align-items: center; justify-content: center; cursor: pointer; border: none;
}
.wm-thumb.marked::after {
  content: "✕ remove"; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; background: rgba(239,68,68,.35); color: #fff;
  font-size: .7rem; font-weight: 700;
}

/* synced colour control: swatch + hex text + native picker */
.color-control { display: flex; align-items: center; gap: .5rem; width: 100%; }
.color-control .color-swatch {
  width: 2rem; height: 2rem; border-radius: .45rem; border: 1px solid #cbd5e1;
  cursor: pointer; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
  transition: transform .1s;
}
.color-control .color-swatch:hover { transform: scale(1.05); }
.color-control .color-hex {
  flex: 1; min-width: 0; border: 1px solid #e2e8f0; border-radius: .5rem;
  padding: .45rem .55rem; font-size: .85rem; font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.color-control .color-hex:focus { outline: none; border-color: #93c5fd; }
.color-control .color-native {
  width: 2.4rem; height: 2rem; border: 1px solid #e2e8f0; border-radius: .45rem;
  padding: 0; background: transparent; cursor: pointer; flex-shrink: 0;
}
.color-control .color-native::-webkit-color-swatch-wrapper { padding: 2px; }
.color-control .color-native::-webkit-color-swatch { border-radius: .3rem; border: none; }
.color-control .color-native::-moz-color-swatch { border-radius: .3rem; border: none; }

/* server-side folder browser overlay (stacks above the watermark modal) */
.dir-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.dir-card {
  background: #fff; width: 100%; max-width: 22rem; border-radius: 1rem;
  padding: 1.1rem; max-height: 80vh; overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

/* ---- "Deletes in N days" — the retention badge on every media list/card ----
   Written by window.SSDelInHtml (shell.js) and used by the Video/Audio/Text
   Studio and Video Maker lists. Retention is a plan feature, so the date a row
   disappears is information the user needs, not decoration — hence bold red in
   every surface rather than each studio inventing its own shade. */
.ss-del-in {
  color: #e11d48;
  font-weight: 800;
  font-size: 11.5px;
  white-space: nowrap;
}

/* ---- Phone: accounts rows wrap, media cards go 2-up ----------------------
   The Accounts page and the Media Library are the two densest screens on a
   phone, and both were laid out with INLINE flex/grid values (shell.js) that a
   desktop-sized width happened to fit. At 360px the account row kept Test /
   Edit / ✕ on the same line as the name and squeezed them until the labels
   clipped, and the media grid's 160px minimum plus its action strip forced one
   enormous card per row. These rules are scoped to phones and use `!important`
   ONLY because the values they override live in inline `style` attributes. */
@media (max-width: 640px) {
  /* Accounts: the name gets its own line and the action pills sit under it,
     left-aligned and free to wrap — never clipped, never off-screen. */
  .acc-row { flex-wrap: wrap !important; row-gap: 8px !important; }
  .acc-row .acc-info {
    flex: 1 1 calc(100% - 60px) !important;
    min-width: 0 !important;
  }
  .acc-row .acc-actions {
    width: 100% !important;
    flex: 1 1 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .acc-row .acc-actions > .btn,
  .acc-row .acc-actions > button.btn,
  .acc-row .acc-actions > a.btn {
    flex: 0 0 auto !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    /* A <button> centres its own text, but the View page / Edit portfolio /
       Followers pills can be <a> elements — those default to left-aligned.
       Make every action pill centre its wording, whatever element it is. */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Media Library card view: exactly two cards per row, at any phone width.
     `minmax(0,1fr)` (not `auto-fill,minmax(160px,…)`) is what lets a card be
     NARROWER than its own action strip's min-content width. */
  .media-grid-library {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .media-grid-library .media-tile { min-width: 0 !important; }
  .media-grid-library .media-tile > img[data-dblview] { height: 84px !important; }
  .media-grid-library .media-tile > div[data-play-tile] { height: 84px !important; }
  .media-grid-library .media-tile > div[data-play-tile] > img { height: 84px !important; }
  .media-grid-library .media-tile-actions {
    top: 4px !important;
    right: 4px !important;
    gap: 3px !important;
  }
  .media-grid-library .media-tile-actions > button {
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
  }
}