/* ==========================================================================
   LEDIA CLOUD — SOCIAL PUBLISHING
   ========================================================================== */

.socials-page {
    --social-border: rgba(255, 255, 255, 0.085);
    --social-border-soft: rgba(255, 255, 255, 0.055);
    --social-panel: rgba(15, 16, 18, 0.82);
    --social-panel-2: rgba(20, 21, 24, 0.78);
    --social-hover: rgba(255, 255, 255, 0.04);
    --social-selected: rgba(244, 181, 84, 0.09);
    --social-brand: var(--brand, #f4b554);

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    box-sizing: border-box;
}

.socials-page,
.socials-page * {
    box-sizing: border-box;
}

/* ==========================================================================
   SHELL
   ========================================================================== */

.socials-shell {
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    gap: 11px;

    overflow: hidden;
}

/* ==========================================================================
   INTELLIGENCE HEADER
   ========================================================================== */

.socials-console-header {
    flex: 0 0 auto;

    min-width: 0;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 28px;

    padding: 2px 3px 0;
}

.socials-heading-group {
    min-width: 0;
}

.socials-kicker,
.socials-page .eyebrow {
    margin: 0 0 6px;

    color: var(--muted-2);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.socials-title-row {
    display: flex;
    align-items: center;

    gap: 12px;

    min-width: 0;
}

.socials-title {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    line-height: 1;

    font-weight: 720;

    letter-spacing: -0.035em;
}

.socials-subtitle {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 11px;
    line-height: 1.45;
}

/* ==========================================================================
   OPERATIONAL STATUS
   ========================================================================== */

.socials-health {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    flex: 0 0 auto;

    padding: 6px 10px;

    border: 1px solid rgba(82, 211, 142, 0.15);
    border-radius: 999px;

    background: rgba(82, 211, 142, 0.045);

    color: #a8cdb6;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.socials-health-dot {
    width: 6px;
    height: 6px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #54d98c;

    box-shadow:
        0 0 10px rgba(84, 217, 140, 0.45);
}

/* ==========================================================================
   CHANNEL SUMMARY
   ========================================================================== */

.socials-channel-summary {
    display: flex;
    align-items: center;

    gap: 15px;

    flex: 0 0 auto;

    padding: 0 3px 2px 0;
}

.socials-summary-item {
    display: flex;
    align-items: baseline;

    gap: 7px;

    white-space: nowrap;
}

.socials-summary-item strong {
    color: var(--text);

    font-size: 14px;
    font-weight: 700;
}

.socials-summary-item span {
    color: var(--muted);

    font-size: 9px;
}

.socials-summary-divider {
    width: 1px;
    height: 22px;

    background: var(--social-border);
}

/* ==========================================================================
   CONTROL BAR
   ========================================================================== */

.socials-control-bar {
    flex: 0 0 auto;

    display: grid;
    grid-template-columns: auto minmax(320px, 1fr);

    align-items: center;

    gap: 12px;

    min-width: 0;
}

/* ==========================================================================
   CHANNEL NAVIGATION
   ========================================================================== */

.socials-subnav {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    padding: 4px;

    border: 1px solid var(--social-border);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.018);
}

.social-tab-btn {
    appearance: none;

    min-height: 34px;

    padding: 8px 17px;

    border: 0;
    border-radius: 10px;

    background: transparent;

    color: var(--muted);

    font: inherit;
    font-size: 11px;
    font-weight: 650;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background 150ms ease,
        color 150ms ease,
        box-shadow 150ms ease,
        transform 150ms ease;
}

.social-tab-btn:hover {
    color: var(--text);

    background: var(--social-hover);
}

.social-tab-btn.active {
    color: #1a1206;

    background: var(--social-brand);

    box-shadow:
        0 7px 24px rgba(244, 181, 84, 0.14);
}

.social-tab-btn:active {
    transform: translateY(1px);
}

/* ==========================================================================
   SEARCH
   ========================================================================== */

.socials-toolbar {
    min-width: 0;
}

.socials-search-shell {
    position: relative;

    width: 100%;
    min-width: 0;
}

.socials-search-icon {
    position: absolute;

    left: 14px;
    top: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    transform: translateY(-50%);

    color: var(--muted-2);

    pointer-events: none;
}

.socials-search-input,
.social-input {
    appearance: none;

    width: 100%;

    border: 1px solid var(--social-border);
    outline: none;

    background: rgba(255, 255, 255, 0.025);

    color: var(--text);

    font: inherit;

    transition:
        border-color 150ms ease,
        background 150ms ease,
        box-shadow 150ms ease;
}

.socials-search-input {
    height: 42px;

    padding: 0 15px 0 41px;

    border-radius: 13px;

    font-size: 11px;
}

.socials-search-input::placeholder,
.social-input::placeholder {
    color: var(--muted-2);
}

.socials-search-input:focus,
.social-input:focus {
    border-color: rgba(244, 181, 84, 0.32);

    background: rgba(255, 255, 255, 0.035);

    box-shadow:
        0 0 0 3px rgba(244, 181, 84, 0.045);
}

/* ==========================================================================
   PLATFORM WORKSPACE
   ========================================================================== */

.socials-platform-mount {
    flex: 1 1 auto;

    width: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    border: 1px solid var(--social-border);
    border-radius: 22px;

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.016),
            rgba(255, 255, 255, 0.004)),
        rgba(10, 11, 12, 0.7);
}

/*
   LinkedIn/X currently return an internal element using the same
   socials-platform-mount ID. Keep it neutral so it doesn't create
   a second framed workspace.
*/

.socials-platform-mount>#socials-platform-mount {
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    overflow: hidden;
}

/* ==========================================================================
   PLATFORM GRID
   ========================================================================== */

.socials-platform-shell {
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    display: grid;

    grid-template-columns:
        minmax(240px, 0.68fr) minmax(650px, 2.32fr);

    overflow: hidden;
}

/* ==========================================================================
   REMOVE OLD GENERIC CARD TREATMENT
   ========================================================================== */

.socials-page .card.socials-composer-card,
.socials-page .card.socials-manager-card {
    margin: 0;

    border: 0;
    border-radius: 0;

    box-shadow: none;
}

/* ==========================================================================
   COMPOSER
   ========================================================================== */

.socials-composer-card {
    min-width: 0;
    min-height: 0;

    padding: 19px !important;

    border-right:
        1px solid var(--social-border) !important;

    background:
        rgba(255, 255, 255, 0.008) !important;

    overflow-y: auto;
    overflow-x: hidden;
}

.socials-composer-card h2 {
    margin: 0 0 7px !important;

    color: var(--text);

    font-size: 17px;
    font-weight: 680;

    letter-spacing: -0.02em;
}

.socials-composer-card p {
    margin: 0 0 17px !important;

    color: var(--muted);

    font-size: 10px;
    line-height: 1.55;
}

/* ==========================================================================
   COMPOSER FORM
   ========================================================================== */

.social-form-grid {
    display: grid;

    gap: 9px;
}

.social-input {
    min-height: 41px;

    padding: 10px 12px;

    border-radius: 11px;

    font-size: 11px;
}

textarea.social-input {
    line-height: 1.55;
}

.social-primary-btn {
    appearance: none;

    width: 100%;
    min-height: 41px;

    padding: 10px 14px;

    border: 0;
    border-radius: 11px;

    background: var(--social-brand);

    color: #1a1206;

    font: inherit;
    font-size: 11px;
    font-weight: 750;

    cursor: pointer;

    transition:
        transform 150ms ease,
        filter 150ms ease,
        box-shadow 150ms ease;
}

.social-primary-btn:hover {
    filter: brightness(1.04);

    box-shadow:
        0 7px 24px rgba(244, 181, 84, 0.12);
}

.social-primary-btn:active {
    transform: translateY(1px);
}

.social-feedback {
    min-height: 17px;

    margin-top: 9px;

    color: var(--muted);

    font-size: 10px;
}

/* ==========================================================================
   MANAGER
   ========================================================================== */

.socials-manager-card {
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    padding: 13px !important;

    background: transparent !important;

    overflow: hidden;
}

.socials-stats-row {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 8px;
}

.social-stat-pill {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    min-height: 29px;

    padding: 5px 9px;

    border: 1px solid var(--social-border);
    border-radius: 9px;

    background: rgba(255, 255, 255, 0.018);

    color: var(--muted);

    font-size: 9px;
}

.social-stat-pill strong {
    color: var(--text);

    font-size: 11px;
}

/* ==========================================================================
   QUEUE FILTERS
   ========================================================================== */

.socials-manager-card [data-queue-filter-group],
.socials-manager-card .social-queue-filter-group,
.socials-manager-card .queue-filter-group {
    display: flex;
    align-items: center;

    gap: 5px;
}

.socials-manager-card [data-queue-filter],
.socials-manager-card .social-queue-filter-btn,
.socials-manager-card .queue-filter-btn {
    appearance: none;

    min-height: 31px;

    padding: 7px 12px;

    border: 1px solid transparent;
    border-radius: 10px;

    background: transparent;

    color: var(--muted);

    font: inherit;
    font-size: 10px;
    font-weight: 650;

    cursor: pointer;
}

.socials-manager-card [data-queue-filter].active,
.socials-manager-card .social-queue-filter-btn.active,
.socials-manager-card .queue-filter-btn.active {
    background: var(--social-brand);

    color: #1a1206;
}

/* ==========================================================================
   QUEUE + INSPECTOR
   ========================================================================== */

.socials-workspace-grid {
    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    display: grid;

    grid-template-columns:
        minmax(450px, 1.45fr) minmax(290px, 0.82fr);

    gap: 11px;

    overflow: hidden;
}

.socials-workspace-grid>* {
    min-width: 0;
    min-height: 0;
}

/* ==========================================================================
   SHARED QUEUE SHELL
   ========================================================================== */

.socials-workspace-grid .social-queue-panel,
.socials-workspace-grid .queue-panel,
.socials-workspace-grid .social-queue-shell,
.socials-workspace-grid .queue-shell {
    min-width: 0;
    min-height: 0;

    height: 100%;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid var(--social-border);
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.01);
}

/* ==========================================================================
   QUEUE HEADERS / ROWS
   ========================================================================== */

.socials-workspace-grid .social-queue-head,
.socials-workspace-grid .queue-head {
    flex: 0 0 auto;

    color: var(--muted-2);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.socials-workspace-grid .social-queue-row,
.socials-workspace-grid .queue-row {
    transition:
        background 140ms ease,
        border-color 140ms ease;
}

.socials-workspace-grid .social-queue-row:hover,
.socials-workspace-grid .queue-row:hover {
    background: var(--social-hover);
}

.socials-workspace-grid .social-queue-row.active,
.socials-workspace-grid .social-queue-row.selected,
.socials-workspace-grid .queue-row.active,
.socials-workspace-grid .queue-row.selected {
    background: var(--social-selected);
}

/* ==========================================================================
   QUEUE CELL CONTENT
   ========================================================================== */

.social-queue-id {
    color: var(--muted);

    font-size: 10px;
}

.social-queue-keywords {
    min-width: 0;

    color: var(--text);

    font-size: 10px;
    line-height: 1.4;

    overflow-wrap: anywhere;
}

.social-queue-status {
    font-size: 9px;
}

.social-queue-open {
    display: flex;
    justify-content: flex-end;
}

/* ==========================================================================
   INSPECTOR
   ========================================================================== */

.socials-detail-panel {
    min-width: 0;
    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    border: 1px solid var(--social-border);
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.012);
}

.social-detail-panel-shell {
    min-height: 100%;

    display: flex;
    flex-direction: column;

    gap: 11px;

    padding: 15px;
}

.social-detail-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;

    padding-bottom: 11px;

    border-bottom:
        1px solid var(--social-border-soft);
}

.social-detail-top h3 {
    margin: 0 0 6px !important;

    color: var(--text);

    font-size: 17px;
    font-weight: 700;

    letter-spacing: -0.02em;
}

.social-detail-card {
    padding: 12px;

    border: 1px solid var(--social-border-soft);
    border-radius: 11px;

    background: rgba(255, 255, 255, 0.018);
}

.social-detail-label {
    margin-bottom: 6px;

    color: var(--muted-2);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.social-detail-value {
    color: var(--text);

    font-size: 10px;
    line-height: 1.55;
}

.social-break-word {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* ==========================================================================
   INSPECTOR ACTIONS
   ========================================================================== */

.social-detail-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-top: auto;

    padding-top: 7px;
}

.social-checkbox-row {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: var(--muted);

    font-size: 10px;

    cursor: pointer;
}

.social-checkbox-row input {
    accent-color: var(--social-brand);
}

.social-primary-link-btn,
.social-open-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    transition:
        background 150ms ease,
        border-color 150ms ease,
        filter 150ms ease;
}

.social-primary-link-btn {
    min-height: 33px;

    padding: 7px 11px;

    border-radius: 9px;

    background: var(--social-brand);

    color: #1a1206;

    font-size: 9px;
    font-weight: 750;
}

.social-primary-link-btn:hover {
    filter: brightness(1.04);
}

.social-open-btn {
    padding: 6px 9px;

    border: 1px solid var(--social-border);
    border-radius: 8px;

    background: rgba(255, 255, 255, 0.025);

    color: var(--text);

    font-size: 8px;
    font-weight: 650;
}

.social-open-btn:hover {
    background: var(--social-hover);

    border-color: rgba(255, 255, 255, 0.13);
}

.social-danger-btn {
    appearance: none;

    padding: 7px 9px;

    border: 1px solid rgba(241, 96, 93, 0.24);
    border-radius: 8px;

    background: rgba(241, 96, 93, 0.075);

    color: var(--negative, #f1605d);

    font: inherit;
    font-size: 9px;
    font-weight: 650;

    cursor: pointer;

    transition:
        background 150ms ease,
        border-color 150ms ease;
}

.social-danger-btn:hover {
    background: rgba(241, 96, 93, 0.12);

    border-color: rgba(241, 96, 93, 0.34);
}

/* ==========================================================================
   EMPTY / PLACEHOLDER STATES
   ========================================================================== */

.socials-detail-empty,
.socials-module-empty,
.socials-placeholder-card {
    width: 100%;
    height: 100%;

    min-height: 180px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    color: var(--muted);

    font-size: 10px;
}

.socials-placeholder-card {
    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;
}

.socials-placeholder-title {
    margin: 0 0 8px;

    color: var(--text);

    font-size: 17px;
}

.socials-placeholder-copy,
.socials-module-empty-copy {
    max-width: 320px;

    margin: 0;

    text-align: center;

    color: var(--muted);

    font-size: 10px;
    line-height: 1.5;
}

.socials-module-empty-copy h3 {
    margin: 0 0 8px;

    color: var(--text);
}

/* ==========================================================================
   STATUS BAR
   ========================================================================== */

.socials-statusbar {
    flex: 0 0 auto;

    min-height: 23px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding: 0 4px;

    color: var(--muted-2);

    font-size: 8px;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.socials-status-left,
.socials-status-right {
    display: flex;
    align-items: center;

    gap: 9px;
}

.socials-status-left strong,
.socials-status-right strong {
    color: var(--muted);
}

.socials-status-dot {
    width: 6px;
    height: 6px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #54d98c;

    box-shadow:
        0 0 9px rgba(84, 217, 140, 0.42);
}

.socials-status-online {
    color: rgba(84, 217, 140, 0.72);
}

.socials-status-separator {
    width: 1px;
    height: 12px;

    background: var(--social-border);
}

/* ==========================================================================
   X COMPOSER
   ========================================================================== */

.socials-platform-mount[data-active-social-platform="x"] textarea.social-input {
    min-height: 150px !important;
    max-height: 220px;

    resize: vertical;
}

/* ==========================================================================
   YOUTUBE
   ========================================================================== */

/*
   YouTube keeps its existing module functionality.
   These generic rules make its root participate in the bounded workspace.
*/

.socials-platform-mount[data-active-social-platform="youtube"]>* {
    min-width: 0;
    min-height: 0;
}

.socials-platform-mount[data-active-social-platform="youtube"] {
    overflow: auto;
}

/* ==========================================================================
   SCROLLBARS
   ========================================================================== */

.socials-page * {
    scrollbar-width: thin;

    scrollbar-color:
        rgba(255, 255, 255, 0.11) transparent;
}

.socials-page *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.socials-page *::-webkit-scrollbar-track {
    background: transparent;
}

.socials-page *::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.11);
}

/* ==========================================================================
   RESPONSIVE — PRESERVE CONSOLE LAYOUT
   ========================================================================== */

@media (max-width: 1100px) {

    .socials-platform-mount {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .socials-platform-shell {
        min-width: 900px;
    }

    .socials-summary-item span {
        display: none;
    }
}

/* ==========================================================================
   SMALL VIEWPORT
   ========================================================================== */

@media (max-width: 760px) {

    .socials-console-header {
        align-items: center;
    }

    .socials-channel-summary {
        display: none;
    }

    .socials-control-bar {
        grid-template-columns:
            auto minmax(260px, 1fr);

        min-width: 620px;
    }

    .socials-shell {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .socials-platform-mount {
        min-width: 900px;
    }

    .socials-statusbar {
        min-width: 900px;
    }
}

/* ==========================================================================
   SHORT LAPTOP VIEWPORTS
   ========================================================================== */

@media (max-height: 820px) {

    .socials-shell {
        gap: 8px;
    }

    .socials-kicker,
    .socials-page .eyebrow {
        margin-bottom: 4px;
    }

    .socials-title {
        font-size: 24px;
    }

    .socials-subtitle {
        margin-top: 5px;
    }

    .socials-search-input {
        height: 38px;
    }

    .social-tab-btn {
        min-height: 31px;

        padding-top: 6px;
        padding-bottom: 6px;
    }

    .socials-composer-card {
        padding: 16px !important;
    }

    .socials-manager-card {
        padding: 11px !important;
    }

    .socials-statusbar {
        min-height: 20px;
    }
}