/*
 * Posto+ interface refinements.
 *
 * Keep selectors scoped to a single Mixpost component so upstream interface
 * changes do not leak into unrelated forms or buttons.
 */

/*
 * Floating Vue is used by all compact menus (account picker, calendar card
 * actions, version actions, etc.).  The upstream combination of a translucent
 * surface, backdrop blur and a 150 ms opacity transition briefly exposes an
 * oversized "glass" panel while Popper is still resolving its position.
 * Menus must appear as a stable, opaque layer in their final position.
 */
.v-popper--theme-dropdown.v-popper__popper,
.v-popper--theme-dropdown.v-popper__popper > .v-popper__wrapper,
.v-popper--theme-dropdown.v-popper__popper .v-popper__inner {
    transition: none !important;
}

.v-popper--theme-dropdown.v-popper__popper--hidden {
    visibility: hidden !important;
    opacity: 0 !important;
}

.v-popper--theme-dropdown.v-popper__popper--shown {
    visibility: visible !important;
    opacity: 1 !important;
}

.v-popper--theme-dropdown.v-popper__popper .v-popper__inner {
    background: var(--color-surface, #fff) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/*
 * AI Assistant prompt: only nudge the paper-plane/stop glyph to the visual
 * centre of its button.
 */
.v-popper__popper [class~="w-[480px]"] .relative:has(> textarea.resize-none) > button[class*="absolute"] svg {
    transform: translateY(4px);
}

/*
 * Mixpost renders Template Manager and Hashtag Manager as full DialogModal
 * windows, but renders the AI Assistant as a 480px Floating Vue dropdown.
 * Present only that specific dropdown as a modal without changing its Vue
 * component, events, generated content, or API behaviour.
 */
.v-popper__popper.v-popper__popper--shown:has([class~="w-[480px]"]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: grid !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 1rem !important;
    place-items: center !important;
    transform: none !important;
    pointer-events: auto !important;
}

.v-popper__popper.v-popper__popper--shown:has([class~="w-[480px]"]) > .v-popper__backdrop {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    width: 100vw !important;
    height: 100dvh !important;
    background: rgb(0 0 0 / 60%) !important;
}

.v-popper__popper.v-popper__popper--shown:has([class~="w-[480px]"]) > .v-popper__wrapper {
    position: relative !important;
    z-index: 1 !important;
    width: min(48rem, calc(100vw - 2rem)) !important;
    max-width: none !important;
    max-height: calc(100dvh - 2rem) !important;
    transform: none !important;
}

.v-popper__popper.v-popper__popper--shown:has([class~="w-[480px]"]) .v-popper__inner {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - 2rem) !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 20px 45px rgb(0 0 0 / 22%) !important;
}

.v-popper__popper.v-popper__popper--shown:has([class~="w-[480px]"]) .v-popper__arrow-container {
    display: none !important;
}

.v-popper__popper.v-popper__popper--shown:has([class~="w-[480px]"]) [class~="w-[480px]"] {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - 2rem) !important;
    overflow: hidden !important;
}

.v-popper__popper [class~="w-[480px]"] > .overflow-y-auto {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 7rem) !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary-200) transparent;
}

.v-popper__popper [class~="w-[480px]"] > .overflow-y-auto::-webkit-scrollbar {
    width: 6px;
}

.v-popper__popper [class~="w-[480px]"] > .overflow-y-auto::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--color-primary-200);
}

.v-popper__popper [class~="w-[480px]"] > .overflow-y-auto::-webkit-scrollbar-track {
    background: transparent;
}

@media (max-width: 640px) {
    .v-popper__popper.v-popper__popper--shown:has([class~="w-[480px]"]) {
        padding: 0.75rem !important;
    }

    .v-popper__popper.v-popper__popper--shown:has([class~="w-[480px]"]) > .v-popper__wrapper {
        width: calc(100vw - 1.5rem) !important;
        max-height: calc(100dvh - 1.5rem) !important;
    }

    .v-popper__popper.v-popper__popper--shown:has([class~="w-[480px]"]) .v-popper__inner,
    .v-popper__popper.v-popper__popper--shown:has([class~="w-[480px]"]) [class~="w-[480px]"] {
        max-height: calc(100dvh - 1.5rem) !important;
    }

    .v-popper__popper [class~="w-[480px]"] > .overflow-y-auto {
        max-height: calc(100dvh - 6.5rem) !important;
    }
}

/* Public authentication pages. The original forms and actions stay intact. */

/* Human-readable provider errors. Raw API responses stay collapsed for support. */
.posto-provider-error {
    display: grid;
    gap: 0.35rem;
    min-width: min(100%, 18rem);
    white-space: normal;
}

.posto-provider-error + .posto-provider-error {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgb(239 68 68 / 20%);
}

.posto-provider-error__title {
    color: rgb(153 27 27);
    font-size: 0.95rem;
    line-height: 1.35;
}

.posto-provider-error p {
    margin: 0;
    color: rgb(87 83 78);
    line-height: 1.45;
}

.posto-provider-error__action {
    font-weight: 600;
}

.posto-provider-error__details {
    margin-top: 0.25rem;
    color: rgb(87 83 78);
}

.posto-provider-error__details summary {
    width: max-content;
    cursor: pointer;
    color: rgb(68 64 60);
    font-weight: 600;
}

.posto-provider-error__reference {
    margin-top: 0.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
}

.posto-provider-error__details pre {
    max-width: 100%;
    max-height: 14rem;
    margin: 0.5rem 0 0;
    padding: 0.75rem;
    overflow: auto;
    border: 1px solid rgb(214 211 209);
    border-radius: 0.5rem;
    background: rgb(250 250 249);
    color: rgb(68 64 60);
    font: 0.72rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Accounts health overview and per-account state. */
.posto-account-health {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    border: 1px solid rgb(226 232 214);
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgb(249 251 245), rgb(255 255 255));
}

.posto-account-health__heading h2 {
    margin: 0;
    color: rgb(28 47 12);
    font-size: 1.05rem;
    font-weight: 700;
}

.posto-account-health__heading p {
    margin: 0.25rem 0 0;
    color: rgb(87 83 78);
    font-size: 0.875rem;
}

.posto-account-health__summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.posto-account-health__metric {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.65rem;
    border-radius: 999px;
    background: rgb(245 245 244);
    color: rgb(68 64 60);
    font-size: 0.78rem;
}

.posto-account-health__metric strong {
    font-size: 0.95rem;
}

.posto-account-health__metric--healthy {
    background: rgb(236 253 245);
    color: rgb(6 95 70);
}

.posto-account-health__metric--attention {
    background: rgb(255 247 237);
    color: rgb(154 52 18);
}

.posto-account-health__metric--disconnected {
    background: rgb(254 242 242);
    color: rgb(153 27 27);
}

.posto-account-card {
    position: relative;
}

.posto-account-card > .p-base.grow > .h-full {
    transform: translateY(1rem);
}

.posto-account-status {
    position: absolute;
    z-index: 3;
    top: 0.75rem;
    left: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: calc(100% - 4rem);
    padding: 0.3rem 0.55rem;
    border: 1px solid rgb(231 229 228);
    border-radius: 999px;
    background: rgb(255 255 255 / 94%);
    box-shadow: 0 1px 3px rgb(15 23 42 / 10%);
    cursor: help;
    text-align: left;
}

.posto-account-status strong {
    min-width: 0;
    overflow: hidden;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.posto-account-status__dot {
    flex: 0 0 auto;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: currentColor;
}

.posto-account-tooltip {
    position: fixed;
    z-index: 10000;
    width: max-content;
    max-width: min(18rem, calc(100vw - 1rem));
    padding: 0.55rem 0.7rem;
    border-radius: 0.5rem;
    background: rgb(28 25 23 / 96%);
    box-shadow: 0 8px 24px rgb(15 23 42 / 18%);
    color: white;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.2rem);
    transition: opacity 90ms ease, transform 90ms ease;
}

.posto-account-tooltip--visible {
    opacity: 1;
    transform: translateY(0);
}

.posto-account-status--healthy { color: rgb(6 95 70); }
.posto-account-status--attention,
.posto-account-status--token_expiring,
.posto-account-status--service_disabled { color: rgb(154 52 18); }
.posto-account-status--disconnected { color: rgb(153 27 27); }

/* Calendar
   -------------------------------------------------------------------------- */
.posto-calendar-toolbar,
.posto-calendar-weekdays {
    position: sticky !important;
    background: white;
}

.posto-calendar-toolbar {
    z-index: 22;
    top: 0;
    box-shadow: 0 1px 0 rgb(226 232 240);
}

.posto-calendar-weekdays {
    z-index: 21;
    top: var(--posto-calendar-toolbar-height, 4.5rem);
    box-shadow: 0 1px 0 rgb(226 232 240);
}

.posto-calendar-day.posto-calendar-today {
    background-color: rgb(246 249 239) !important;
    background-image: linear-gradient(180deg, rgb(241 247 230) 0%, rgb(249 251 245) 100%) !important;
    box-shadow: inset 0 3px 0 0 rgb(76 110 54 / 46%);
}

.posto-calendar-day > .posto-calendar-day-header > span:first-child {
    width: 2.15rem !important;
    height: 2.15rem !important;
    font-size: 1.08rem !important;
    font-weight: 750 !important;
}

/* Day controls */
.posto-calendar-day > .posto-calendar-create {
    z-index: 3;
    inset: 0.45rem 0.45rem auto auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: 0.45rem !important;
    width: 2.35rem !important;
    height: 2.35rem !important;
    border: 1px solid rgb(62 91 43);
    border-radius: 999px;
    background: rgb(70 105 47);
    box-shadow: 0 2px 7px rgb(15 23 42 / 18%);
    opacity: 0;
    transition: opacity 150ms ease, transform 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.posto-calendar-day:hover > .posto-calendar-create,
.posto-calendar-day > .posto-calendar-create:focus-visible {
    opacity: 1;
}

.posto-calendar-day > .posto-calendar-create:hover,
.posto-calendar-day > .posto-calendar-create:focus-visible {
    background: rgb(58 87 39);
    box-shadow: 0 4px 10px rgb(58 87 39 / 28%);
    transform: scale(1.05);
}

.posto-calendar-day > .posto-calendar-day-header {
    z-index: 2;
    pointer-events: none;
    min-height: 2.5rem;
}

.posto-calendar-day > .posto-calendar-posts {
    z-index: 2;
    pointer-events: none;
}

.posto-calendar-day > .posto-calendar-posts > * {
    pointer-events: auto;
}

.posto-calendar-day > .posto-calendar-create-indicator {
    z-index: 4;
    top: 0.45rem !important;
    right: 0.45rem !important;
    inset-inline-start: auto !important;
    inset-inline-end: 0.45rem !important;
    width: 2.35rem !important;
    height: 2.35rem !important;
    display: grid !important;
    place-items: center;
    margin: 0 !important;
    color: white !important;
    opacity: 0 !important;
    transition-duration: 150ms !important;
}

.posto-calendar-day > .posto-calendar-drop-highlight {
    z-index: 4;
    background: rgb(241 247 230 / 26%) !important;
    outline: 1px dashed rgb(70 105 47 / 76%) !important;
    outline-offset: -2px;
    box-shadow: none;
}

.posto-calendar-day:hover > .posto-calendar-create-indicator,
.posto-calendar-day:has(> .posto-calendar-create:focus-visible) > .posto-calendar-create-indicator {
    opacity: 1 !important;
}

.posto-calendar-day > .posto-calendar-create-indicator svg {
    width: 1.55rem !important;
    height: 1.55rem !important;
}

.posto-calendar-weekday-long { display: none; }
.posto-calendar-weekday-short { display: inline; }

@media (min-width: 768px) {
    .posto-calendar-weekday-long { display: inline; }
    .posto-calendar-weekday-short { display: none; }
}

/* Layout modes. Both scroll as one calendar; individual days never gain their
   own scrollbar. Compact rows grow only after cards reach the 48px hit area. */
.posto-calendar {
    flex: 0 0 auto !important;
    min-height: 100% !important;
}

.posto-calendar .posto-calendar-month {
    flex: 1 0 auto !important;
    min-height: 0 !important;
    padding-bottom: 2rem;
    overflow-y: visible !important;
}

.posto-calendar:not(.posto-calendar--expanded) .posto-calendar-week {
    flex: 1 0 var(--posto-calendar-row-height, 7.875rem) !important;
    min-height: var(--posto-calendar-row-height, 7.875rem) !important;
}

.posto-calendar:not(.posto-calendar--expanded) .posto-calendar-posts {
    display: grid !important;
    grid-template-rows: repeat(var(--posto-calendar-post-count, 1), minmax(3rem, 1fr));
    min-height: 0 !important;
    overflow: visible !important;
}

.posto-calendar:not(.posto-calendar--expanded) .posto-calendar-post-card {
    min-height: 3rem;
    height: 100%;
    overflow: hidden;
}

.posto-calendar--expanded .posto-calendar-week {
    flex: 0 0 var(--posto-calendar-row-height, 7.5rem) !important;
    min-height: var(--posto-calendar-row-height, 7.5rem) !important;
}

/* A full month only needs content-driven row heights when there is content.
   Empty months use the whole available viewport, just like compact mode. */
.posto-calendar--expanded.posto-calendar--empty .posto-calendar-week {
    flex: 1 0 var(--posto-calendar-row-height, 7.5rem) !important;
}

.posto-calendar--expanded .posto-calendar-posts {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    overflow-y: visible !important;
}

.posto-calendar--expanded .posto-calendar-day-count {
    display: none !important;
}

/* Cards */
.posto-calendar-post-card {
    --posto-calendar-status: rgb(100 116 139);
    --posto-calendar-status-soft: rgb(248 250 252);
    min-width: 0;
    contain: layout paint;
    border-top-width: 1px !important;
    border-style: solid !important;
    border-color: rgb(226 232 240) !important;
    background: var(--color-surface, #fff) !important;
}

.posto-calendar-post-card:hover {
    border-color: color-mix(in srgb, var(--posto-calendar-status) 32%, rgb(203 213 225)) !important;
    box-shadow: 0 3px 10px rgb(15 23 42 / 10%) !important;
}

.posto-calendar-post-menu > button:hover,
.posto-calendar-post-menu > button:focus-visible {
    color: rgb(55 85 38) !important;
    background: rgb(241 247 230) !important;
}

.posto-calendar-post-menu > button:focus-visible {
    outline: 2px solid rgb(128 156 105 / 55%) !important;
    outline-offset: -2px;
}

.posto-calendar-post--pending,
.posto-calendar-post--draft,
.posto-calendar-post--private-draft {
    --posto-calendar-status: rgb(100 116 139);
    --posto-calendar-status-soft: rgb(241 245 249);
}
.posto-calendar-post--in-progress {
    --posto-calendar-status: rgb(71 118 184);
    --posto-calendar-status-soft: rgb(239 246 255);
}
.posto-calendar-post--needs-review,
.posto-calendar-post--needs-approval {
    --posto-calendar-status: rgb(168 111 45);
    --posto-calendar-status-soft: rgb(255 247 237);
}
.posto-calendar-post--rework {
    --posto-calendar-status: rgb(185 74 72);
    --posto-calendar-status-soft: rgb(254 242 242);
}
.posto-calendar-post--approved,
.posto-calendar-post--published {
    --posto-calendar-status: rgb(63 122 73);
    --posto-calendar-status-soft: rgb(240 253 244);
}
.posto-calendar-post--scheduled {
    --posto-calendar-status: rgb(71 118 184);
    --posto-calendar-status-soft: rgb(239 246 255);
}
.posto-calendar-post--publishing {
    --posto-calendar-status: rgb(117 98 168);
    --posto-calendar-status-soft: rgb(245 243 255);
}
.posto-calendar-post--failed {
    --posto-calendar-status: rgb(185 74 72);
    --posto-calendar-status-soft: rgb(254 242 242);
}

.posto-calendar-post__body {
    position: relative;
    display: flex;
    flex-direction: column;
}

.posto-calendar-post__content {
    min-height: 0;
}

.posto-calendar-post__statusbar {
    position: relative;
    z-index: 2;
    min-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    padding: 0 0.12rem 0 0.5rem;
    color: rgb(71 85 105);
    background: var(--posto-calendar-status-soft);
    border-bottom: 1px solid color-mix(in srgb, var(--posto-calendar-status) 18%, transparent);
}

.posto-calendar-post__status-divider {
    width: 1px;
    height: 0.9rem;
    flex: 0 0 auto;
    background: color-mix(in srgb, var(--posto-calendar-status) 24%, transparent);
}

.posto-calendar-post__status-icon svg {
    width: 0.875rem !important;
    height: 0.875rem !important;
}

.posto-calendar-post__status-icon {
    min-width: 0;
    white-space: nowrap;
}

.posto-calendar-post__status-icon > div:last-child {
    max-width: 7.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.7rem;
    line-height: 1rem;
}

.posto-calendar-post__time {
    color: rgb(51 65 85) !important;
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1rem;
    white-space: nowrap;
}

.posto-calendar-post__actions {
    flex: 0 0 auto;
}

.posto-calendar-post__actions,
.posto-calendar-post__actions > div,
.posto-calendar-post__actions > div > div {
    height: auto;
    display: flex;
    align-items: center;
}

.posto-calendar-post__actions .v-popper {
    height: auto;
    display: flex;
    align-items: center;
    line-height: 0;
}

.posto-calendar-post-card:hover .posto-calendar-post__actions,
.posto-calendar-post-card:focus-visible .posto-calendar-post__actions,
.posto-calendar-post-card:focus-within .posto-calendar-post__actions {
    opacity: 1;
}

.posto-calendar-post__actions button {
    margin: 0 !important;
    width: 2.25rem;
    height: 1.875rem;
    min-width: 2.25rem;
    min-height: 1.875rem;
    display: inline-grid !important;
    place-items: center;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: rgb(71 85 105) !important;
    background: transparent !important;
    box-shadow: none !important;
    line-height: 1;
    opacity: 0.12;
    transform: scale(0.95);
    transform-origin: center;
    transition: color 140ms ease, opacity 140ms ease, transform 140ms ease;
}

.posto-calendar-post-card:hover .posto-calendar-post__actions button,
.posto-calendar-post-card:focus-visible .posto-calendar-post__actions button,
.posto-calendar-post-card:focus-within .posto-calendar-post__actions button {
    opacity: 0.62;
}

.posto-calendar-post__actions button:hover,
.posto-calendar-post__actions button:focus-visible {
    color: rgb(15 23 42) !important;
    opacity: 1 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.posto-calendar-post__actions .posto-calendar-actions-icon {
    display: block;
    width: 1.425rem !important;
    height: 0.534rem !important;
    flex: none;
}

.posto-media-usage-badge--draft {
    color: rgb(51 65 85) !important;
    background: rgb(248 250 252 / 94%) !important;
    box-shadow: inset 0 0 0 1px rgb(148 163 184 / 48%) !important;
}

.posto-calendar-post--has-media .posto-calendar-post__lead {
    position: relative;
    width: calc(100% + 0.75rem);
    height: 5.75rem;
    margin: -0.24rem -0.25rem 0.35rem -0.5rem;
    overflow: hidden;
    border-radius: calc(var(--radius-default, 0.5rem) - 1px) calc(var(--radius-default, 0.5rem) - 1px) 0 0;
}

.posto-calendar-post__media,
.posto-calendar-post__media > figure,
.posto-calendar-post__media > figure > div {
    width: 100% !important;
    height: 100% !important;
}

.posto-calendar-post__media img,
.posto-calendar-post__media video {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;
    object-fit: cover !important;
}

.posto-calendar-post__media > .absolute.inset-0 {
    opacity: 0 !important;
    border-radius: 0 !important;
}

.posto-calendar-post__media:hover > .absolute.inset-0,
.posto-calendar-post__media:focus-visible > .absolute.inset-0 {
    opacity: 1 !important;
}

.posto-calendar-post__accounts {
    margin-top: 0.2rem !important;
    margin-bottom: 0.25rem;
}

.posto-calendar-post__footer {
    min-width: 0;
}

.posto-calendar-post__tags {
    min-width: 0;
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 0.2rem;
}

.posto-calendar-post__tag-dot {
    width: 0.55rem;
    height: 0.55rem;
    flex: 0 0 auto;
    border: 1px solid rgb(255 255 255 / 90%);
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgb(15 23 42 / 14%);
}

.posto-calendar-post__tag-more {
    color: rgb(100 116 139);
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1;
}

.posto-calendar-post__excerpt {
    margin-top: 0 !important;
}

/* Compact card densities */
.posto-calendar:not(.posto-calendar--expanded) .posto-calendar-day--double .posto-calendar-post__lead {
    height: 3.25rem;
}

.posto-calendar:not(.posto-calendar--expanded) .posto-calendar-day--double .posto-calendar-post__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 1;
}

.posto-calendar:not(.posto-calendar--expanded) .posto-calendar-day--dense .posto-calendar-post__footer,
.posto-calendar:not(.posto-calendar--expanded) .posto-calendar-day--dense .posto-calendar-post__excerpt {
    display: none !important;
}

.posto-calendar:not(.posto-calendar--expanded) .posto-calendar-day--dense .posto-calendar-post__content {
    flex: 1 1 auto;
    padding-bottom: 0.15rem !important;
}

.posto-calendar:not(.posto-calendar--expanded) .posto-calendar-day--dense .posto-calendar-post--has-media .posto-calendar-post__content {
    padding: 0 !important;
}

.posto-calendar:not(.posto-calendar--expanded) .posto-calendar-day--dense .posto-calendar-post--has-media .posto-calendar-post__lead {
    width: 100%;
    height: 100%;
    min-height: 1.45rem;
    margin: -0.18rem 0 0 !important;
    border-radius: 0 0 calc(var(--radius-default, 0.5rem) - 1px) calc(var(--radius-default, 0.5rem) - 1px);
}

.posto-calendar-status-legend {
    position: fixed;
    z-index: 24;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.75rem;
    padding: 0.4rem 0.75rem;
    border-top: 1px solid rgb(226 232 240);
    background: rgb(255 255 255 / 94%);
    box-shadow: 0 -2px 8px rgb(15 23 42 / 8%);
    backdrop-filter: blur(8px);
    color: rgb(71 85 105);
    font-size: 0.72rem;
}

.posto-calendar-status-legend__group {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.8rem;
}

.posto-calendar-status-legend__separator {
    align-self: stretch;
    width: 1px;
    min-height: 1.25rem;
    background: rgb(203 213 225);
}

.posto-calendar-status-legend__item > div:last-child {
    font-size: 0.72rem;
    font-weight: 500;
}

.posto-calendar-mobile-status {
    transform: scale(0.78);
    transform-origin: center;
    margin: -0.1rem;
}

/* Weekend context stays deliberately quiet: enough to scan a month without competing with
   post statuses, selected days or drag targets. The same token is shared by every calendar view. */
.posto-calendar-day--weekend,
.posto-calendar-day--holiday,
.posto-calendar-weekday--weekend,
.posto-calendar-weekday--holiday {
    background-color: color-mix(in srgb, var(--color-fg-neutral-primary, #243020) 4%, var(--color-canvas, #fff));
}

.posto-calendar-weekday--weekend,
.posto-calendar-weekday--holiday {
    color: var(--color-fg-neutral-primary);
}

.posto-calendar-legend-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 999px;
    background: rgb(100 116 139);
}

.posto-calendar-legend-dot--scheduled { background: rgb(71 118 184); }
.posto-calendar-legend-dot--publishing { background: rgb(117 98 168); }
.posto-calendar-legend-dot--published { background: rgb(63 122 73); }
.posto-calendar-legend-dot--needs-approval { background: rgb(168 111 45); }
.posto-calendar-legend-dot--failed { background: rgb(185 74 72); }

@media (max-width: 767px) {
    .posto-calendar-status-legend {
        position: static;
        justify-content: flex-start;
        padding-inline: 0.5rem;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .posto-calendar-status-legend__group {
        flex-wrap: nowrap;
        white-space: nowrap;
    }
}

/* Calendar composer: reuse the real Mixpost editor in a same-origin frame.
   There is one form and one set of publishing logic; the calendar merely
   keeps its context behind it. */
body.posto-calendar-composer-open {
    overflow: hidden !important;
}

.posto-calendar-composer {
    position: fixed;
    z-index: 10020;
    inset: 0;
    display: flex;
    justify-content: flex-end;
    padding: 0;
    background: rgb(15 23 42 / 22%);
}

.posto-calendar-composer__panel {
    display: flex;
    width: calc(100vw - clamp(20rem, 22vw, 28rem));
    height: 100dvh;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-left: 1px solid var(--color-border, rgb(226 232 240));
    border-radius: 0;
    background: var(--color-canvas, white);
    box-shadow: -18px 0 55px rgb(15 23 42 / 24%);
    animation: posto-calendar-composer-enter 180ms ease-out;
}

@keyframes posto-calendar-composer-enter {
    from { transform: translateX(1.5rem); opacity: 0.75; }
    to { transform: translateX(0); opacity: 1; }
}

.posto-calendar-composer__header {
    display: flex;
    min-height: 3.25rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0.8rem 0.65rem 1rem;
    border-bottom: 1px solid var(--color-border, rgb(226 232 240));
    background: var(--color-surface, white);
}

.posto-calendar-composer__header strong {
    font-size: 1rem;
}

.posto-calendar-composer__close {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    place-items: center;
    border: 1px solid var(--color-border, rgb(226 232 240));
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.posto-calendar-composer__close:hover,
.posto-calendar-composer__close:focus-visible {
    border-color: var(--color-primary-400, rgb(74 120 35));
    background: var(--color-primary-50, rgb(241 247 230));
    outline: none;
}

.posto-calendar-composer__frame {
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    border: 0;
    background: var(--color-canvas, white);
}

body.posto-calendar-composer-frame #app > .flex > aside,
body.posto-calendar-composer-frame #app > .flex > main > nav {
    display: none !important;
}

body.posto-calendar-composer-frame #app > .flex > main {
    width: 100% !important;
}

@media (max-width: 1199px) {
    .posto-calendar-composer__panel {
        width: calc(100vw - clamp(4rem, 18vw, 14rem));
    }
}

@media (max-width: 767px) {
    .posto-calendar-composer {
        padding: 0;
    }

    .posto-calendar-composer__panel {
        width: 100vw;
        height: 100dvh;
        border: 0;
        border-radius: 0;
    }
}

/* Keep the workspace navigation and a useful slice of the current page visible
   behind every desktop composer. The native Vue drawer and framed entry points
   intentionally share the same width rule. */
@media (min-width: 768px) {
    .posto-native-composer-panel {
        inset-block: 0.5rem !important;
        inset-inline-start: auto !important;
        inset-inline-end: 0.5rem !important;
        height: auto !important;
        border: 1px solid var(--color-border, rgb(226 232 240)) !important;
        border-radius: 0.75rem !important;
    }

    .posto-native-composer-panel,
    .posto-calendar-composer__panel {
        width: calc(100vw - clamp(20rem, 22vw, 28rem)) !important;
        max-width: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .posto-calendar-composer__panel {
        animation: none;
    }
}

/* Compact summary of Mixpost's own composer validation state. */
.posto-composer-readiness {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-right: auto;
    padding: 0.4rem 0.65rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1;
    white-space: nowrap;
}

.posto-composer-readiness__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: currentColor;
}

.posto-composer-readiness--ready {
    border-color: rgb(167 243 208);
    background: rgb(236 253 245);
    color: rgb(6 95 70);
}

.posto-composer-readiness--blocked {
    border-color: rgb(254 215 170);
    background: rgb(255 247 237);
    color: rgb(154 52 18);
}

@media (max-width: 640px) {
    .posto-composer-readiness {
        max-width: 7.5rem;
        padding-inline: 0.5rem;
    }

    .posto-composer-readiness strong {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 768px) {
    .posto-account-health {
        align-items: flex-start;
        flex-direction: column;
    }

    .posto-account-health__summary {
        justify-content: flex-start;
    }
}

body.posto-auth #app > div[scroll-region] {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    min-height: 100dvh !important;
    height: auto !important;
    padding: clamp(2rem, 5vw, 5rem) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #f8faf5 !important;
}

body.posto-auth .posto-auth-shell {
    position: relative;
    z-index: 1;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    width: min(100%, 35rem) !important;
    max-width: 35rem !important;
    height: min(43rem, calc(100dvh - 4rem));
    margin: auto !important;
    padding-right: 0;
}

body.posto-auth .posto-auth-logo {
    width: 100%;
    justify-content: flex-start !important;
    margin-bottom: 2rem !important;
}

body.posto-auth .posto-auth-content,
body.posto-auth .posto-auth-content form {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/*
 * Authentication form contract: every public auth flow owns one card. Some upstream pages put
 * their actions inside Panel (login), while others render them as a sibling (registration). The
 * form is therefore the stable card boundary; route-specific markup can no longer split the
 * primary action and account switch away from the form surface.
 */
body.posto-auth form {
    overflow: hidden;
    border: 1px solid rgb(37 72 21 / 13%);
    border-radius: .5rem;
    background: var(--color-surface, #fff);
    box-shadow: 0 1.5rem 4rem rgb(34 61 22 / 10%);
}

body.posto-auth form > div:first-child {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Enterprise registration renders this action row after Panel. Keep it in the shared card. */
body.posto-auth form > div:last-child:not(:first-child) {
    min-height: 4.75rem;
    margin-top: 0 !important;
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid var(--color-border, rgb(37 72 21 / 10%));
}

body.posto-auth form > div:last-child:not(:first-child) > a {
    text-align: right;
}

body.posto-auth form input:focus {
    box-shadow: 0 0 0 3px rgb(106 157 50 / 18%);
}

.posto-auth-visual {
    position: fixed;
    z-index: 0;
    inset: 0 0 0 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(3rem, 6vw, 7rem);
    overflow: hidden;
    color: #f7fbea;
    background:
        radial-gradient(ellipse at 15% 5%, rgb(154 201 91 / 18%), transparent 38%),
        radial-gradient(ellipse at 90% 100%, rgb(126 177 56 / 16%), transparent 42%),
        linear-gradient(145deg, #173512 0%, #234c19 58%, #315f20 100%);
}

.posto-auth-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .15;
    background-image:
        linear-gradient(rgb(255 255 255 / 16%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 16%) 1px, transparent 1px);
    background-size: 4rem 4rem;
    mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}

.posto-auth-visual__content {
    position: relative;
    width: min(100%, 39rem);
}

.posto-auth-visual__eyebrow {
    margin-bottom: 1rem;
    color: #c7e59b;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
}

.posto-auth-visual h2 {
    max-width: 34rem;
    margin: 0;
    color: #fff;
    font-size: clamp(2.2rem, 3.2vw, 4.25rem);
    font-weight: 650;
    letter-spacing: -.045em;
    line-height: 1.02;
}

.posto-auth-visual__content > p {
    max-width: 34rem;
    margin: 1.4rem 0 2.5rem;
    color: rgb(240 248 228 / 74%);
    font-size: clamp(1rem, 1.2vw, 1.18rem);
    line-height: 1.65;
}

.posto-auth-preview {
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: 1.35rem;
    background: rgb(255 255 255 / 8%);
    box-shadow: 0 2rem 5rem rgb(5 22 3 / 28%);
    backdrop-filter: blur(18px);
}

.posto-auth-preview__topbar {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-height: 3.25rem;
    padding: 0 1.2rem;
    border-bottom: 1px solid rgb(255 255 255 / 11%);
}

.posto-auth-preview__topbar > span {
    width: .48rem;
    height: .48rem;
    border-radius: 999px;
    background: rgb(218 238 190 / 36%);
}

.posto-auth-preview__topbar strong {
    margin-left: auto;
    color: rgb(241 249 230 / 70%);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.posto-auth-preview__body {
    position: relative;
    display: grid;
    gap: .8rem;
    padding: 1.3rem;
}

.posto-auth-preview__rail {
    position: absolute;
    top: 1.3rem;
    bottom: 1.3rem;
    left: 4.7rem;
    width: 1px;
    background: rgb(222 239 196 / 18%);
}

.posto-auth-preview__item {
    position: relative;
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

.posto-auth-preview__time {
    color: rgb(233 244 216 / 55%);
    font-size: .73rem;
    font-variant-numeric: tabular-nums;
}

.posto-auth-preview__card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .8rem;
    align-items: center;
    min-height: 4.6rem;
    padding: .85rem 1rem;
    border: 1px solid rgb(255 255 255 / 9%);
    border-radius: .9rem;
    background: rgb(255 255 255 / 9%);
}

.posto-auth-preview__network {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: .55rem;
    color: #214116;
    background: #d9edb8;
    font-size: .78rem;
    font-style: normal;
    font-weight: 800;
}

.posto-auth-preview__network--ig { background: #f3d9cc; }
.posto-auth-preview__network--threads { background: #e9e9e4; }

.posto-auth-preview__card b,
.posto-auth-preview__card small {
    display: block;
}

.posto-auth-preview__card b {
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
}

.posto-auth-preview__card small {
    margin-top: .2rem;
    overflow: hidden;
    color: rgb(239 247 227 / 57%);
    font-size: .73rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.posto-auth-preview__card em {
    padding: .3rem .52rem;
    border-radius: 999px;
    color: #d9efb6;
    background: rgb(180 226 112 / 12%);
    font-size: .65rem;
    font-style: normal;
    font-weight: 600;
}

.posto-auth-preview__item--muted { opacity: .58; }

@media (max-width: 900px) {
    body.posto-auth #app > div[scroll-region] {
        display: flex !important;
        align-items: flex-start;
        justify-content: center;
        padding: 2rem 1rem !important;
        background:
            radial-gradient(circle at 100% 0%, rgb(189 224 105 / 22%), transparent 28rem),
            #f7f9f2 !important;
    }

    .posto-auth-visual {
        display: none;
    }

    body.posto-auth .posto-auth-shell {
        width: min(100%, 38rem) !important;
        height: auto;
        padding-right: 0;
    }
}

@media (max-width: 520px) {
    body.posto-auth form > div:last-child:not(:first-child) {
        align-items: stretch !important;
        flex-direction: column;
        gap: .75rem;
    }

    body.posto-auth form > div:last-child:not(:first-child) > a,
    body.posto-auth form > div:last-child:not(:first-child) > button,
    body.posto-auth form > div:last-child:not(:first-child) > [role="button"] {
        justify-content: center;
        width: 100%;
        min-height: 2.75rem;
        text-align: center;
    }
}