/**
 * ITSWEBER CMS – Admin Component Styles
 *
 * Unified styles for all admin form components.
 * Uses design tokens from tokens.css.
 */

/* ── Section Separator & Heading ── */
.admin-section-hr {
    margin: var(--space-lg) 0;
    border: none;
    border-top: 1px solid var(--border-primary);
}

.admin-section-heading {
    margin: 0 0 var(--space-sm);
    font-size: var(--font-size-small);
    font-weight: var(--p-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
}

.admin-section-heading-hint {
    font-weight: var(--p-font-normal);
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted);
}

/* ── Field Grid (for presentation config dropdowns) ── */
.admin-field-grid {
    display: grid;
    gap: var(--space-sm) var(--space-lg);
}

.admin-field-grid--2col { grid-template-columns: 1fr 1fr; }
.admin-field-grid--3col { grid-template-columns: 1fr 1fr 1fr; }
.admin-field-grid--4col { grid-template-columns: 1fr 1fr 1fr 1fr; }
.admin-field-grid--5col { grid-template-columns: repeat(5, 1fr); }

.admin-field-grid > .form-group { margin: 0; }

@media (max-width: 640px) {
    .admin-field-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .admin-field-grid { grid-template-columns: 1fr; }
}

/* ── Unified Form Label ── */
.form-label {
    display: block;
    font-size: var(--font-size-small);
    font-weight: var(--p-font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--p-space-1);
}

/* ── Unified Form Hint (replaces .form-hint, .form-help, inline <small>) ── */
.form-hint {
    display: block;
    font-size: var(--font-size-caption);
    color: var(--text-muted);
    margin-top: var(--p-space-1);
    line-height: var(--p-leading-normal);
}

/* ── Media Picker (unified) ── */
.admin-media-picker {
    position: relative;
}

.admin-media-picker-row {
    display: flex;
    gap: var(--space-xs);
    align-items: start;
}

.admin-media-picker-input {
    flex: 1;
}

.admin-media-picker-preview {
    margin-top: var(--space-xs);
}

.admin-media-picker-preview img {
    max-width: 120px;
    max-height: 80px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-primary);
    object-fit: cover;
}

/* ── Repeatable Item Card (unified) ── */
.admin-item-card {
    background: var(--item-card-bg);
    border: var(--item-card-border);
    border-radius: var(--item-card-radius);
    padding: var(--item-card-padding);
    margin-bottom: var(--space-sm);
}

.admin-item-card-header {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    margin-bottom: var(--space-sm);
}

.admin-item-card-label {
    flex: 1;
    font-size: var(--font-size-body);
    font-weight: var(--p-font-semibold);
}

.admin-item-card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

.admin-item-card-body > .form-group {
    margin: 0;
}

.admin-item-card-body > .form-group.full-width {
    grid-column: 1 / -1;
}

/* ── Section Media Picker (inline field) ── */
.section-media-field-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.section-media-field-wrap .section-media-input {
    flex: 1;
    min-width: 150px;
}
.section-media-preview {
    width: 100%;
    margin-top: 0.5rem;
}
.section-media-preview img {
    max-width: 200px;
    max-height: 120px;
    object-fit: cover;
    border-radius: var(--item-card-radius, 6px);
    border: 1px solid var(--comp-card-border, #e2e8f0);
}

/* ── Item Move Buttons ── */
.item-move-buttons {
    display: flex;
    gap: var(--p-space-1);
}

/* ── Remove Button (unified) ── */
.admin-item-remove {
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTENT HEADER – Page-level header with icon, title, actions
   ══��════════════════════════════════════════════════════════════════════════ */

.content-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}

.content-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    color: var(--p-white);
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--interactive-primary) 0%, var(--interactive-primary-hover) 100%);
    box-shadow: 0 2px 8px rgba(14, 116, 144, 0.25);
}

.content-header-title-group {
    min-width: 0;
}

.content-header-subtitle {
    font-size: var(--font-size-small);
    color: var(--text-tertiary);
    font-weight: var(--p-font-normal);
    margin-top: var(--p-space-0_5);
}

/* ══════════════════════════════���════════════════════════════════════════════
   FILTER BAR – Enhanced search/filter styling
   ════���════════════���═════════════════════════════════════════════════════════ */

.filter-bar {
    margin-bottom: var(--space-lg);
}

.filter-bar input:focus,
.filter-bar select:focus {
    border-color: var(--field-border-focus);
    box-shadow: var(--field-focus-ring);
    outline: none;
}

/* ══��═════════════════════════════════════════════════════════════��══════════
   EMPTY STATE – Centered placeholder for empty lists
   ═════════════════��═════════════════════════════════════════════════════════ */

.admin-empty-state {
    text-align: center;
    padding: var(--space-2xl) var(--space-xl);
    color: var(--text-muted);
}

.admin-empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: var(--surface-secondary);
    color: var(--text-muted);
    margin-bottom: var(--space-md);
}

.admin-empty-state-title {
    font-size: var(--font-size-heading-sm);
    font-weight: var(--p-font-semibold);
    color: var(--text-secondary);
    margin: 0 0 var(--p-space-1);
}

.admin-empty-state-text {
    font-size: var(--font-size-body);
    color: var(--text-muted);
    margin: 0 0 var(--space-md);
}

.admin-empty-state-text a {
    color: var(--text-link);
    text-decoration: none;
    font-weight: var(--p-font-medium);
}

.admin-empty-state-text a:hover {
    text-decoration: underline;
}

/* ═══════════════════════���═══════════════════════════════════════════════════
   NOTE BOX – Informational hint box
   ═══════════════════��═════════════════════════════��═════════════════════════ */

.admin-note {
    padding: var(--space-sm) var(--space-md);
    background: var(--surface-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-caption);
    color: var(--text-secondary);
    max-width: 700px;
    margin-top: var(--space-lg);
}

.admin-note strong {
    font-weight: var(--p-font-semibold);
}

/* ═══════════════════════════════��════════════════════════��══════════════════
   INLINE EDIT ROW – Table inline edit forms (menus, etc.)
   ══════════════��════════════════════════════════════════════════════════════ */

.edit-inline-row td {
    padding: var(--space-md);
    background: var(--surface-secondary);
}

.inline-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto auto auto;
    gap: var(--space-sm);
    align-items: end;
}

.inline-edit-grid .form-group {
    margin: 0;
}

.inline-edit-actions {
    display: flex;
    gap: var(--p-space-2);
    padding-top: 1.4rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MENU SECTION HEADER
   ═══════════════════════════════════════════════════════════════════════════ */

.menu-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.menu-section-header h4 {
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MENU PREVIEW BAR
   ═══════════════════════════════════════════════════════════════════════════ */

.menu-preview {
    padding: var(--space-sm) var(--space-md);
    background: var(--surface-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-md);
}

.menu-preview-label {
    font-size: var(--font-size-caption);
    font-weight: var(--p-font-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--p-space-2);
}

.menu-preview-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--p-space-1);
}

.menu-preview-link {
    display: inline-block;
    padding: var(--p-space-1_5) var(--space-sm);
    background: var(--surface-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--p-radius-xs);
    font-size: var(--font-size-small);
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
}

.menu-preview-hidden-count {
    font-size: var(--font-size-caption);
    color: var(--text-muted);
    margin-left: var(--p-space-1);
}

/* ════════════════════════════���══════════════════════════════════════════════
   ADD ITEM FORM – Expandable form panel
   ════════════════════════════════════════════════���══════════════════════════ */

.add-item-panel {
    background: var(--surface-secondary);
    padding: var(--space-md);
    border-radius: var(--radius-sm);
}

.add-item-panel h5 {
    margin: 0 0 var(--space-sm);
    font-size: var(--font-size-body);
    font-weight: var(--p-font-semibold);
}

.add-item-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto auto auto;
    gap: var(--space-sm);
    align-items: end;
}

.add-item-grid .form-group {
    margin: 0;
}

.quick-fill-bar {
    margin-top: var(--space-sm);
    font-size: var(--font-size-small);
    color: var(--text-secondary);
}

/* ═════════════════════════��═════════════════════════════════════════════════
   DRAG HANDLE
   ════════════════════════════════════════════════════���══════════════════════ */

.drag-handle {
    color: var(--text-muted);
    cursor: grab;
}

.drag-handle:active {
    cursor: grabbing;
}

/* ═══════════════════════════���═══════════════════════════════════════════════
   DISABLED BUTTON – Consistently styled non-interactive button
   ══════════════════��════════════════════════════════════════════════════════ */

.btn-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════��═══════════════════
   RESPONSIVE: Inline edit & add grids
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .inline-edit-grid,
    .add-item-grid {
        grid-template-columns: 1fr 1fr;
    }
    .inline-edit-actions,
    .add-item-grid > div:last-child {
        grid-column: 1 / -1;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPINNER – Reusable CSS-only loading spinner
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes iw-spin {
    to { transform: rotate(360deg); }
}

.iw-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2.5px solid var(--border-primary);
    border-top-color: var(--interactive-primary);
    border-radius: 50%;
    animation: iw-spin 0.6s linear infinite;
    flex-shrink: 0;
}

.iw-spinner--sm {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

.iw-spinner--lg {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

.iw-spinner--white {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: var(--p-white);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON LOADING STATE – Spinner inside button, disables interaction
   ═══════════════════════════════════════════════════════════════════════════ */

.btn-loading {
    pointer-events: none;
    opacity: 0.75;
    position: relative;
}

.btn-loading .btn-label {
    visibility: hidden;
}

.btn-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: iw-spin 0.6s linear infinite;
}

.btn-secondary.btn-loading::after {
    border-color: rgba(0, 0, 0, 0.1);
    border-top-color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SKELETON SCREEN – Content placeholder with pulse animation
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes iw-skeleton-pulse {
    0%   { opacity: 1; }
    50%  { opacity: 0.4; }
    100% { opacity: 1; }
}

.skeleton {
    background: var(--surface-tertiary);
    border-radius: var(--radius-sm);
    animation: iw-skeleton-pulse 1.8s ease-in-out infinite;
}

.skeleton-text {
    height: 14px;
    margin-bottom: var(--space-xs);
    width: 100%;
}

.skeleton-text:last-child {
    width: 65%;
}

.skeleton-heading {
    height: 22px;
    width: 45%;
    margin-bottom: var(--space-sm);
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
}

.skeleton-thumb {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
}

.skeleton-card {
    padding: var(--card-padding);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
}

.skeleton-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS – Auto-dismissing feedback messages
   ═══════════════════════════════════════════════════════════════════════════ */

.toast-container {
    position: fixed;
    top: calc(var(--topbar-height) + var(--space-md));
    right: var(--space-xl);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    pointer-events: none;
    max-width: 420px;
    width: 100%;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-md);
    pointer-events: auto;
    transform: translateX(110%);
    opacity: 0;
    transition: transform var(--p-duration-slow) var(--p-ease),
                opacity var(--p-duration-slow) var(--p-ease);
}

.toast.toast-visible {
    transform: translateX(0);
    opacity: 1;
}

.toast.toast-exit {
    transform: translateX(110%);
    opacity: 0;
}

.toast-icon {
    flex-shrink: 0;
    margin-top: 1px;
}

.toast-body {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-size: var(--font-size-body);
    font-weight: var(--p-font-semibold);
    color: var(--text-primary);
    line-height: var(--p-leading-snug);
}

.toast-message {
    font-size: var(--font-size-small);
    color: var(--text-secondary);
    margin-top: var(--p-space-0_5);
    line-height: var(--p-leading-normal);
}

.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--p-space-1);
    border-radius: var(--radius-sm);
    line-height: 0;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.toast-close:hover {
    color: var(--text-primary);
    background: var(--surface-secondary);
}

/* Toast type variants */
.toast--success {
    border-left: 3px solid var(--feedback-success);
}
.toast--success .toast-icon { color: var(--feedback-success); }

.toast--error {
    border-left: 3px solid var(--feedback-danger);
}
.toast--error .toast-icon { color: var(--feedback-danger); }

.toast--warning {
    border-left: 3px solid var(--feedback-warning);
}
.toast--warning .toast-icon { color: var(--feedback-warning); }

.toast--info {
    border-left: 3px solid var(--interactive-primary);
}
.toast--info .toast-icon { color: var(--interactive-primary); }

/* ═══════════════════════════════════════════════════════════════════════════
   FLASH-TO-TOAST – Enhanced flash messages (auto-dismiss + animation)
   ═══════════════════════════════════════════════════════════════════════════ */

.alert[data-auto-dismiss] {
    transition: opacity var(--p-duration-slow) var(--p-ease),
                transform var(--p-duration-slow) var(--p-ease),
                max-height var(--p-duration-slow) var(--p-ease),
                margin var(--p-duration-slow) var(--p-ease),
                padding var(--p-duration-slow) var(--p-ease);
}

.alert.alert-dismissing {
    opacity: 0;
    transform: translateY(-8px);
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROGRESS BAR – Determinate progress indicator
   ═══════════════════════════════════════════════════════════════════════════ */

.iw-progress {
    width: 100%;
    height: 6px;
    background: var(--surface-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.iw-progress-bar {
    height: 100%;
    background: linear-gradient(135deg, var(--interactive-primary) 0%, var(--interactive-accent) 100%);
    border-radius: var(--radius-full);
    transition: width var(--p-duration-slow) var(--p-ease);
}

/* Indeterminate variant */
@keyframes iw-progress-indeterminate {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

.iw-progress--indeterminate .iw-progress-bar {
    width: 40%;
    animation: iw-progress-indeterminate 1.5s var(--p-ease) infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE: Toast container mobile
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    .toast-container {
        right: var(--space-sm);
        left: var(--space-sm);
        max-width: none;
    }
}
