/* ═══════════════════════════════════════════════════════════════
   Ads Builder — full-screen editor shell + platform device frames
   Loaded only in ads/templates/builder.blade.php and ads/creatives/
   builder.blade.php. Extends builder.css (shared with email / forms).
   ═══════════════════════════════════════════════════════════════ */

/* Ads canvas — wider than form canvas, centered */
.ads-canvas-area {
    background: var(--color-bg-subtle, #f3f4f6);
    min-height: calc(100vh - 64px);
    padding: var(--space-8) var(--space-6);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
}

/* Platform device frame — holds the BuilderJS iframe with a chrome */
.ads-device-frame {
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: max-width 0.3s ease;
    width: 100%;
    max-width: 560px;  /* desktop default */
}
.ads-device-frame[data-device="tablet"] {
    max-width: 440px;
}
.ads-device-frame[data-device="mobile"] {
    max-width: 340px;
}

.ads-device-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-subtle, #f9fafb);
    border-bottom: 1px solid var(--color-border);
}
.ads-device-dots {
    display: inline-flex;
    gap: var(--space-1-5);
}
.ads-device-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e5e7eb;
}
.ads-device-dots .dot.orange {
    background: #fbbf24;
}
.ads-device-dots .dot.green {
    background: #10b981;
}
.ads-device-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-weight: var(--weight-medium);
}

.ads-device-content {
    padding: 0;
    background: #fff;
    min-height: 300px;
}
.ads-device-content > div {
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   Ads Preview Frame — used on template/creative preview pages
   ═══════════════════════════════════════════════════════════════ */
.mc-ads-preview-frame {
    padding: var(--space-6);
    background: var(--color-bg-subtle);
    display: flex;
    justify-content: center;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.mc-ads-preview-image {
    max-width: 480px;
    max-height: 480px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Mockup — rendered when no thumbnail saved */
.mc-ads-preview-mockup {
    width: 100%;
    max-width: 420px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.mc-ads-preview-mockup-image {
    width: 100%;
    aspect-ratio: 1.91 / 1;
    background: var(--color-bg-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.mc-ads-preview-mockup-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mc-ads-preview-mockup-image-empty .material-symbols-rounded {
    font-size: 64px;
    color: var(--color-text-muted);
    opacity: 0.4;
}
.mc-ads-preview-mockup-body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.mc-ads-preview-mockup-headline {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1.3;
}
.mc-ads-preview-mockup-primary {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}
.mc-ads-preview-mockup-cta {
    align-self: flex-start;
    padding: var(--space-2) var(--space-4);
    background: var(--color-teal);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    cursor: pointer;
    margin-top: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════════
   Ad template preview popup — rendered inside McPopup modal body.
   Layout: header (title + badges) → frame (mockup or thumbnail) →
   metadata grid → action row. Fits naturally into the popup "lg" width.
   ═══════════════════════════════════════════════════════════════ */
.mc-ads-preview-popup {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.mc-ads-preview-popup-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.mc-ads-preview-popup-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1.3;
}
.mc-ads-preview-popup-badges {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.mc-ads-preview-popup-frame {
    padding: var(--space-5);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 280px;
}
.mc-ads-preview-popup-frame .mc-ads-preview-image {
    width: 280px;
    max-width: 100%;
    aspect-ratio: 9 / 10;
    border-radius: var(--radius-md);
    background: var(--illust-bg);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
}
.mc-ads-preview-popup-frame .mc-ads-preview-image > svg,
.mc-ads-preview-popup-frame .mc-ads-preview-image > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}
.mc-ads-preview-popup-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
    padding: var(--space-3) 0;
    margin: 0;
    border-top: 1px solid var(--color-border);
}
.mc-ads-preview-popup-meta > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mc-ads-preview-popup-meta dt {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    font-weight: var(--weight-semibold);
    margin: 0;
}
.mc-ads-preview-popup-meta dd {
    font-size: var(--text-sm);
    color: var(--color-text);
    font-weight: var(--weight-medium);
    margin: 0;
}
.mc-ads-preview-popup-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}
@media (max-width: 640px) {
    .mc-ads-preview-popup-frame {
        padding: var(--space-3);
        min-height: 200px;
    }
    .mc-ads-preview-popup-actions {
        flex-direction: column-reverse;
    }
    .mc-ads-preview-popup-actions > .mc-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Creative preview card — used on campaign overview page
   (small summary card with thumb + metadata + edit button)
   ═══════════════════════════════════════════════════════════════ */
.mc-creative-preview-card {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-card-bg);
}
.mc-creative-preview-card-thumb {
    flex-shrink: 0;
    width: 140px;
    aspect-ratio: 1 / 1;
    background: var(--color-bg-muted);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mc-creative-preview-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mc-creative-preview-card-thumb .material-symbols-rounded {
    font-size: 40px;
    color: var(--color-text-muted);
    opacity: 0.4;
}
.mc-creative-preview-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.mc-creative-preview-card-headline {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.mc-creative-preview-card-text {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.mc-creative-preview-card-meta {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: auto;
}
.mc-creative-preview-card-actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
    align-items: flex-start;
}

/* ═══════════════════════════════════════════════════════════════
   mc-choice-card --ads variant (creative picker on /ads/creatives/create)
   Cards have a fixed 9:10 thumb box that inlines the shipped SVG so CSS
   custom properties cascade (same pattern as the templates listing).
   Cards stretch to equal height via flex column + label margin-top:auto,
   so a 4-col grid looks uniform regardless of template name length.
   ═══════════════════════════════════════════════════════════════ */
.mc-choice-grid--ads {
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
}
@media (max-width: 1023px) {
    .mc-choice-grid--ads { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .mc-choice-grid--ads { grid-template-columns: repeat(2, 1fr); }
}

.mc-choice-card--ads {
    padding: 0;
    overflow: hidden;
    gap: 0;
    align-items: stretch;
    text-align: left;
}
.mc-choice-card--ads .mc-choice-card-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 10;
    background: var(--illust-bg);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
}
.mc-choice-card--ads .mc-choice-card-thumb > svg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}
.mc-choice-card--ads .mc-choice-card-thumb > .material-symbols-rounded {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    color: var(--illust-stroke);
    opacity: 0.55;
}
.mc-choice-card-thumb--blank {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        repeating-linear-gradient(45deg,
            var(--illust-bg),
            var(--illust-bg) 10px,
            var(--color-card-bg) 10px,
            var(--color-card-bg) 20px);
}
.mc-choice-card-thumb--blank > .material-symbols-rounded {
    position: relative !important;
    font-size: 52px !important;
    color: var(--color-teal) !important;
    opacity: 1 !important;
    background: var(--color-card-bg);
    border-radius: 50%;
    padding: var(--space-2);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}

.mc-choice-card--ads .mc-choice-card-label {
    display: block;
    padding: var(--space-3) var(--space-3) 2px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-choice-card--ads .mc-choice-card-desc {
    display: block;
    padding: 0 var(--space-3) var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.4;
    margin-top: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Legacy: older non-ads create pages may still pass an <img> */
.mc-choice-card-image {
    width: 100%;
    max-width: 160px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: var(--space-2);
}
.mc-choice-card-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
   Ad Template card — per-format aspect ratio, light overlay,
   thumbnail rendering, card chrome
   ═══════════════════════════════════════════════════════════════ */

/* mc-card-table padding fix: the listing container was eating its own
   spacing because McList renders directly inside it. Give the content
   wrapper explicit padding so cards don't touch the card-table edge. */
.mc-card-table > #ads-templates-listing,
.mc-card-table > [data-mc-list] {
    padding: var(--space-5);
}
@media (max-width: 767px) {
    .mc-card-table > #ads-templates-listing,
    .mc-card-table > [data-mc-list] {
        padding: var(--space-3);
    }
}

/* Uniform 9:10 aspect ratio across ALL formats so the grid is visually
   consistent with the email templates listing. The format cue lives INSIDE
   the SVG (phone outline for stories, browser frame for feeds, etc.) and
   in the badge row under the card. The data-format attribute is kept for
   filtering + audit hooks, but no longer affects the thumb aspect ratio. */
.mc-template-card--ad .mc-template-thumb {
    aspect-ratio: 9 / 10;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: var(--illust-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Inlined SVG thumbnails — the <svg> is a direct child of .mc-template-thumb
   (via file_get_contents in the blade partial) so CSS custom properties
   cascade into the SVG elements. Fit by contain so letterboxing fills with
   the muted --illust-bg. */
.mc-template-card--ad .mc-template-thumb > svg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}
/* Fallback for any remaining <img> thumbnails */
.mc-template-card--ad .mc-template-thumb > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* Light overlay — buttons pop against the thumbnail */
.mc-template-card--ad .mc-template-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    opacity: 0;
    transition: opacity 0.18s ease-out;
    pointer-events: none;
}
[data-theme="dark"] .mc-template-card--ad .mc-template-overlay {
    background: rgba(11, 15, 25, 0.72);
}
.mc-template-card--ad:hover .mc-template-overlay,
.mc-template-card--ad:focus-within .mc-template-overlay {
    opacity: 1;
    pointer-events: auto;
}
.mc-template-card--ad .mc-template-overlay .mc-btn {
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.22);
    transform: translateY(6px);
    transition: transform 0.18s ease-out;
}
.mc-template-card--ad:hover .mc-template-overlay .mc-btn {
    transform: translateY(0);
}

/* Top-right badges strip (Featured, Mine, etc.) */
.mc-template-card--ad .mc-template-actions {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: flex;
    gap: var(--space-1);
    pointer-events: none;
    z-index: 1;
}
.mc-template-card--ad .mc-template-actions .mc-badge {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

/* Card body */
.mc-template-card--ad .mc-template-info {
    padding: var(--space-3) var(--space-3) var(--space-4);
}
.mc-template-card--ad .mc-template-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-template-card--ad .mc-template-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

/* Inline-SVG placeholder (if no thumbnail_url): theme-aware muted box */
.mc-template-card--ad .mc-template-thumb-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
}
.mc-template-card--ad .mc-template-thumb-placeholder .material-symbols-rounded {
    font-size: 40px;
    opacity: 0.35;
}

/* Legacy .mc-template-overlay fallback for non-ad cards — keep existing behavior */
.mc-template-thumb { position: relative; }
.mc-template-card:not(.mc-template-card--ad):not(.mc-template-card--creative):hover .mc-template-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════════
   Ad Creative card \u2014 grid view mini ad preview
   ═══════════════════════════════════════════════════════════════ */

.mc-template-card--creative .mc-template-thumb {
    aspect-ratio: 9 / 10;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: var(--illust-bg);
}

/* Mini ad preview rendered from the creative's flat fields (image_url,
   headline, primary_text, call_to_action). Layout mirrors what a real
   Facebook/Instagram feed ad looks like inside the card slot.

   LAYOUT CONTRACT:
   - The parent .mc-template-thumb is a 9:10 box (fixed ratio).
   - Inside, a CSS grid splits the card into two FIXED rows:
       hero  = 62% of height  (image area, cropped with object-fit: cover)
       body  = 38% of height  (headline + primary text + CTA pill)
   - Both rows have overflow:hidden so content never pushes the layout.
     Headline/body text use -webkit-line-clamp so long copy truncates
     cleanly instead of stretching the row.
   - Result: every card is pixel-identical regardless of text length,
     and the hero image is cropped to the SAME crop box every time
     (no "hơi lệch"). No responsive hacks — pure aspect + grid. */
.mc-creative-preview {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: 62% 38%;
    background: var(--color-card-bg);
}

.mc-creative-preview-hero {
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
    background: var(--illust-bg);
}
.mc-creative-preview-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.4s cubic-bezier(.2, .6, .2, 1);
    will-change: transform;
}
/* Hover lift: subtle zoom on hero image — the "hiệu ứng đẹp" */
.mc-template-card--creative:hover .mc-creative-preview-hero img {
    transform: scale(1.045);
}

.mc-creative-preview-hero-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--illust-stroke);
}
.mc-creative-preview-hero-empty .material-symbols-rounded {
    font-size: 42px;
    opacity: 0.6;
}

.mc-creative-preview-type-chip {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px var(--space-2);
    background: rgba(17, 24, 39, 0.72);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1;
}
.mc-creative-preview-type-chip .material-symbols-rounded {
    font-size: 12px;
}

.mc-creative-preview-body {
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--color-border);
    background: var(--color-card-bg);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mc-creative-preview-headline {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.mc-creative-preview-text {
    font-size: 10px;
    color: var(--color-text-muted);
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.mc-creative-preview-cta {
    align-self: flex-start;
    margin-top: auto;
    padding: 3px var(--space-3);
    background: var(--color-text);
    color: var(--color-card-bg);
    font-size: 10px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-transform: capitalize;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Overlay (same light frosted glass as ad templates) */
.mc-template-card--creative .mc-template-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    opacity: 0;
    transition: opacity 0.18s ease-out;
    pointer-events: none;
}
[data-theme="dark"] .mc-template-card--creative .mc-template-overlay {
    background: rgba(11, 15, 25, 0.72);
}
.mc-template-card--creative:hover .mc-template-overlay {
    opacity: 1;
    pointer-events: auto;
}

.mc-template-card--creative .mc-template-info {
    padding: var(--space-3) var(--space-3) var(--space-4);
}
.mc-template-card--creative .mc-template-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-template-card--creative .mc-template-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
}
.mc-creative-meta-time {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-left: auto;
}

/* Table view (list mode) thumb cell */
.mc-ads-table-thumb {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-hover-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.mc-ads-table-thumb img,
.mc-ads-table-thumb svg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}
.mc-ads-table-thumb[data-format="story"],
.mc-ads-table-thumb[data-format="video"] {
    width: 40px;
    height: 56px; /* 9:16 miniature for list view */
}
.mc-ads-table-thumb[data-format="feed"] {
    width: 72px;
    height: 38px; /* 1.91:1 miniature */
}
.mc-ads-table-thumb .material-symbols-rounded {
    font-size: 22px;
    color: var(--color-text-muted);
    opacity: 0.5;
}
.mc-ads-table-name {
    font-weight: 600;
    color: var(--color-text);
}

/* Mobile: disable the builder with a friendly message */
@media (max-width: 767px) {
    .ads-canvas-area {
        padding: var(--space-4);
    }
    .builder-sidebar,
    .global-sidebar {
        display: none;
    }
}