/* GuestApp.css - Publishing dashboard styles */
/* Uses design tokens exclusively */

/* Tile expandable panels */
.guest-app-tiles {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2) 0;
}

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

.publish-status-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-layer-4);
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-xl);
}

.publish-status-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.publish-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* =============================================
   VERSION HISTORY (expandable)
   ============================================= */

.version-history-controls {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
}

.publish-version-select {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    font: inherit;
    border: var(--border-width-1) solid var(--border-default);
    border-radius: var(--border-radius-md);
    background: var(--bg-layer-4);
    color: var(--text-body);
    min-width: 220px;
}

/* =============================================
   PUBLISH NOTE DIALOG
   ============================================= */

.publish-note-input {
    width: 100%;
    font: inherit;
    font-size: var(--text-sm);
    padding: var(--space-2);
    border: var(--border-width-1) solid var(--border-default);
    border-radius: var(--border-radius-md);
    background: var(--bg-layer-4);
    color: var(--text-body);
    resize: vertical;
}

/* =============================================
   CHANGE SUMMARY (in publish controls)
   ============================================= */

.change-summary {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--border-radius-md);
}

.change-summary--clean {
    color: var(--color-success);
}

.change-summary--pending {
    color: var(--color-warning);
}

.change-summary--new {
    color: var(--color-info);
}

/* =============================================
   SECTION DIFF (inside expanded tiles)
   ============================================= */

.ga-section-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}

.ga-section-diff {
    padding: var(--space-2) var(--space-3);
    background: var(--bg-layer-4);
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-md);
}

.ga-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
}

.ga-section-label {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.ga-diff-clean,
.ga-diff-new {
    font-size: var(--text-xs);
    color: var(--text-muted);
    padding: var(--space-1) 0;
}

/* =============================================
   DIFF ITEMS (individual changes)
   ============================================= */

.ga-diff-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-top: var(--space-1);
    border-top: var(--border-width-1) solid var(--border-subtle);
}

.ga-diff-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    font-size: var(--text-xs);
}

.ga-diff-item-name {
    color: var(--text-body);
}

.ga-diff-item--removed .ga-diff-item-name {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* =============================================
   PHONE PREVIEW OVERLAY
   ============================================= */

.guest-app-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guest-app-preview-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 1;
    background: none;
    border: none;
    padding: 0;
}

.guest-app-phone-frame {
    width: 390px;
    background: #1a1a1a;
    border-radius: 40px;
    padding: 12px;
    box-shadow:
        0 0 0 2px #333,
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px #2a2a2a;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.guest-app-phone-notch {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.guest-app-phone-notch::after {
    content: '';
    width: 80px;
    height: 6px;
    background: #333;
    border-radius: 3px;
}

.guest-app-phone-screen {
    width: 100%;
    height: 667px;
    border-radius: 4px;
    overflow: hidden;
    background: #000;
}

.guest-app-phone-screen iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: #000;
}

.guest-app-phone-nav-bar {
    width: 100%;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guest-app-phone-nav-bar::after {
    content: '';
    width: 100px;
    height: 4px;
    background: #555;
    border-radius: 2px;
}