/* smr-base.css — shared layout and UI primitives for SMR WordPress plugins
 * Last reviewed against Site Editor: 2026-04
 * Enqueued by smr-base plugin; all custom plugins declare it as a stylesheet dependency.
 *
 * All var() calls include a concrete fallback so this file renders correctly
 * in the WP admin, where theme preset custom properties are not loaded.
 * Fallback values are derived from global-styles.css (Site Editor export).
 *
 * Breakpoints (not WP presets — standardized here for all SMR plugins):
 *   768px  — grid collapses to single column, form-row stacks
 *   1024px — grid-3 collapses to grid-2
 */

/* ==========================================================================
   Layout — flex
   ========================================================================== */

.smr-base-flex-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--40, 30px);
    align-items: center;
}

.smr-base-flex-row--center  { justify-content: center; }
.smr-base-flex-row--between { justify-content: space-between; }

.smr-base-flex-col {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--30, 20px);
}

/* ==========================================================================
   Layout — grid
   ========================================================================== */

.smr-base-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--wp--preset--spacing--40, 30px);
}

.smr-base-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wp--preset--spacing--40, 30px);
}

@media (max-width: 1024px) {
    .smr-base-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .smr-base-grid-2,
    .smr-base-grid-3 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Card
   ========================================================================== */

.smr-base-card {
    background: var(--wp--preset--color--base, #ffffff);
    border: 1px solid var(--wp--preset--color--gray-lite, #d9d9d9);
    border-radius: 4px;
    padding: var(--wp--preset--spacing--40, 30px);
}

.smr-base-card--raised {
    box-shadow: var(--wp--preset--shadow--natural, 6px 6px 9px rgba(0, 0, 0, 0.2));
}

/* ==========================================================================
   Form row — input growing, action fixed
   ========================================================================== */

.smr-base-form-row {
    display: flex;
    gap: var(--wp--preset--spacing--20, 10px);
    align-items: center;
    flex-wrap: wrap;
}

.smr-base-form-row__input  { flex: 1 1 auto; min-width: 0; }
.smr-base-form-row__action { flex: 0 0 auto; }

@media (max-width: 768px) {
    .smr-base-form-row { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   Button — standalone; does not use wp-block-button classes
   ========================================================================== */

.smr-base-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    font-weight: 600;
    line-height: 1;
    padding: 0.65em 1.25em;
    white-space: nowrap;
    transition: filter 0.15s ease, background 0.15s ease;
    text-decoration: none;
}

.smr-base-btn--primary {
    background: var(--wp--preset--color--accent-1, #002868);
    color: var(--wp--preset--color--base, #ffffff);
}
.smr-base-btn--primary:hover {
    filter: brightness(1.25);
    color: var(--wp--preset--color--base, #ffffff);
}

.smr-base-btn--secondary {
    background: var(--wp--preset--color--gray-lite, #d9d9d9);
    color: var(--wp--preset--color--contrast, #111111);
}
.smr-base-btn--secondary:hover {
    background: var(--wp--preset--color--gray-medium, #8f8f8f);
    color: var(--wp--preset--color--base, #ffffff);
}

.smr-base-btn--danger {
    background: var(--wp--preset--color--accent-4, #bf0a30);
    color: var(--wp--preset--color--base, #ffffff);
}
.smr-base-btn--danger:hover {
    filter: brightness(1.15);
    color: var(--wp--preset--color--base, #ffffff);
}

.smr-base-btn:disabled,
.smr-base-btn[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    filter: none;
}

/* ==========================================================================
   Notice / Alert
   ========================================================================== */

.smr-base-notice {
    padding: 0.75em 1em;
    border-left: 4px solid var(--wp--preset--color--gray-medium, #8f8f8f);
    background: var(--wp--preset--color--gray-lightest, #eeeeee);
    color: var(--wp--preset--color--contrast, #111111);
    border-radius: 0 3px 3px 0;
    font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.smr-base-notice--success {
    border-left-color: var(--wp--preset--color--accent-5, #17ce5c);
    background: var(--wp--preset--color--accent-5-lite, #eaf8e6);
}
.smr-base-notice--error {
    border-left-color: var(--wp--preset--color--accent-4, #bf0a30);
    background: var(--wp--preset--color--accent-4-lite, #f8e6ea);
}
.smr-base-notice--warning {
    border-left-color: var(--wp--preset--color--accent-2, #ce5c17);
    background: var(--wp--preset--color--accent-2-lite, #faeee7);
}
.smr-base-notice--info {
    border-left-color: var(--wp--preset--color--accent-1, #002868);
    background: var(--wp--preset--color--accent-1-lite, #e5e9ef);
}

/* ==========================================================================
   Status badge — small pill for entity status display
   ========================================================================== */

.smr-base-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: var(--wp--preset--font-size--tiny, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.6;
}

.smr-base-status-badge--neutral {
    background: var(--wp--preset--color--gray-lightest, #eeeeee);
    color: var(--wp--preset--color--gray-dark, #6f6f6f);
}
.smr-base-status-badge--info {
    background: var(--wp--preset--color--accent-1-lite, #e5e9ef);
    color: var(--wp--preset--color--accent-1, #002868);
}
.smr-base-status-badge--success {
    background: var(--wp--preset--color--accent-5-lite, #eaf8e6);
    color: var(--wp--preset--color--contrast, #111111);
}
.smr-base-status-badge--warning {
    background: var(--wp--preset--color--accent-3-lite, #fdfbe4);
    color: var(--wp--preset--color--accent-2, #ce5c17);
}
.smr-base-status-badge--complete {
    background: var(--wp--preset--color--gray-lite, #d9d9d9);
    color: var(--wp--preset--color--gray-dark, #6f6f6f);
}

/* ==========================================================================
   Loading state
   ========================================================================== */

.smr-base-loading {
    color: var(--wp--preset--color--gray-medium, #8f8f8f);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    padding: var(--wp--preset--spacing--20, 10px) 0;
}

/* ==========================================================================
   Modal overlay
   ========================================================================== */

.smr-base-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10000;
}

.smr-base-modal[hidden] { display: none; }

.smr-base-modal-content {
    background: var(--wp--preset--color--base, #ffffff);
    border-radius: 4px;
    width: 90%;
    max-width: 680px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--wp--preset--shadow--deep, 12px 12px 50px rgba(0, 0, 0, 0.4));
}

.smr-base-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--wp--preset--spacing--20, 10px) var(--wp--preset--spacing--30, 20px);
    background: var(--wp--preset--color--gray-lightest, #eeeeee);
    border-bottom: 1px solid var(--wp--preset--color--gray-lite, #d9d9d9);
    flex: 0 0 auto;
}

.smr-base-modal-header h2,
.smr-base-modal-header h3 {
    margin: 0;
    font-size: 1rem;
}

.smr-base-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    line-height: 1;
    padding: 4px 8px;
    color: var(--wp--preset--color--contrast);
    opacity: 0.6;
}
.smr-base-modal-close:hover { opacity: 1; }

.smr-base-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--wp--preset--spacing--30, 20px);
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--20, 10px);
}

.smr-base-modal-footer {
    display: flex;
    gap: var(--wp--preset--spacing--20, 10px);
    justify-content: flex-end;
    padding: var(--wp--preset--spacing--20, 10px) var(--wp--preset--spacing--30, 20px);
    border-top: 1px solid var(--wp--preset--color--gray-lite, #d9d9d9);
    background: var(--wp--preset--color--gray-lightest, #eeeeee);
    flex: 0 0 auto;
}

@media (prefers-reduced-motion: no-preference) {
    .smr-base-modal { animation: smr-base-fade-in 0.15s ease; }
}

@keyframes smr-base-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ==========================================================================
   Error block utilities
   Used by dependent plugins for admin-authored error content in the page editor.
   See docs in smr-base/js/frontend.js — window.smrBase.showErrorBlock().
   ========================================================================== */

/* Hidden by default; JS removes this class to reveal the block on error. */
.smr-base-error-hidden { display: none; }