/*
 * Prosper OS shared design system.
 * Canonical visual source for plugin, modules, theme-facing shortcodes, and admin screens.
 */

@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap");

:root {
    --prosper-font-family: "Sora", "Segoe UI", Arial, sans-serif;
    --prosper-color-text: #0b0c0d;
    --prosper-color-muted: #5b6167;
    --prosper-color-surface: #ffffff;
    --prosper-color-surface-soft: #f3f4f5;
    --prosper-color-border: #d8dde2;
    --prosper-color-accent: #0088d0;
    --prosper-color-accent-strong: #006fb0;
    --prosper-color-accent-soft: #e6f4ff;
    --prosper-wave-loop-size: 320px;
    --prosper-wave-duration: 7.2s;
    --prosper-wave-phase-offset: -2.4s;
    --prosper-wave-gradient: repeating-linear-gradient(
        120deg,
        #00619a 0px,
        #0078bd 64px,
        #0088d0 128px,
        #27a8e6 192px,
        #0088d0 256px,
        #00619a 320px
    );
    --prosper-wave-gradient-strong: repeating-linear-gradient(
        120deg,
        #005286 0px,
        #006aa8 64px,
        #007cbe 128px,
        #1895d0 192px,
        #007cbe 256px,
        #005286 320px
    );
    --prosper-color-success: #1f7a64;
    --prosper-color-success-soft: #e7f4ef;
    --prosper-color-warning: #b56a0a;
    --prosper-color-warning-soft: #fff4e5;
    --prosper-color-danger: #a53a2a;
    --prosper-color-danger-soft: #fdeceb;
    --prosper-color-info: #0088d0;
    --prosper-color-info-soft: #e6f4ff;
    --prosper-space-1: 4px;
    --prosper-space-2: 8px;
    --prosper-space-3: 12px;
    --prosper-space-4: 16px;
    --prosper-space-5: 24px;
}

@keyframes prosper-wave-flow {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: var(--prosper-wave-loop-size) 0;
    }
}

html,
body,
.wp-admin,
.wp-admin #wpwrap {
    font-family: var(--prosper-font-family);
    color: var(--prosper-color-text);
}

*,
*::before,
*::after {
    border-radius: 0;
}

.site-header,
.site-header::after,
.site-header .wrap {
    background-color: var(--prosper-color-surface) !important;
    background-image: none !important;
    animation: none !important;
}

a {
    color: var(--prosper-color-accent);
}

a:hover,
a:focus {
    color: var(--prosper-color-accent-strong);
}

button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.button,
.btn,
.propdesk-button,
.wl-button,
.nlim-tasks-button,
.bessy-product-pill,
.bessy-dagplanner-viewbtn {
    appearance: none;
    border: 1px solid var(--prosper-color-accent);
    background-color: var(--prosper-color-accent);
    background-image: var(--prosper-wave-gradient);
    background-size: var(--prosper-wave-loop-size) 100%;
    background-repeat: repeat;
    animation: prosper-wave-flow var(--prosper-wave-duration) linear infinite;
    animation-delay: var(--prosper-wave-phase-offset);
    color: #fff;
    font-family: var(--prosper-font-family);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
    min-height: 38px;
    padding: 0 var(--prosper-space-4);
    cursor: pointer;
    box-shadow: none;
    transition: border-color 160ms ease, color 160ms ease;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.button:hover,
.btn:hover,
.propdesk-button:hover,
.wl-button:hover,
.nlim-tasks-button:hover,
.bessy-product-pill:hover,
.bessy-dagplanner-viewbtn:hover {
    background-color: var(--prosper-color-accent-strong);
    background-image: var(--prosper-wave-gradient-strong);
    border-color: var(--prosper-color-accent-strong);
    color: #fff;
}

.button.secondary,
.btn.secondary,
.button.button-secondary,
.propdesk-button.ghost,
.wl-button.ghost {
    background: var(--prosper-color-surface);
    background-image: none;
    border-color: var(--prosper-color-accent);
    color: var(--prosper-color-accent);
    animation: none;
}

.button.button-primary,
.bessy-dagplanner-viewbtn.is-active,
.bessy-product-pill.is-selected {
    background-color: var(--prosper-color-accent);
    background-image: var(--prosper-wave-gradient);
    background-size: var(--prosper-wave-loop-size) 100%;
    background-repeat: repeat;
    border-color: var(--prosper-color-accent);
    color: #fff;
    animation: prosper-wave-flow var(--prosper-wave-duration) linear infinite;
    animation-delay: var(--prosper-wave-phase-offset);
}

.propdesk-page.active,
.wl-page.active {
    background: var(--prosper-color-accent);
    border-color: var(--prosper-color-accent);
    color: #fff;
    animation: none;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select,
.nlim-legend-search,
.nlim-tasks-date {
    width: 100%;
    border: 1px solid var(--prosper-color-border);
    background: var(--prosper-color-surface);
    color: var(--prosper-color-text);
    font-family: var(--prosper-font-family);
    font-size: 14px;
    line-height: 1.4;
    padding: var(--prosper-space-2) var(--prosper-space-3);
    box-shadow: none;
}

input:focus,
select:focus,
textarea:focus,
button:focus,
.button:focus {
    outline: 2px solid var(--prosper-color-accent);
    outline-offset: 2px;
    box-shadow: none;
}

:where(
    .content-card,
    .csv-api-card,
    .propdesk-card,
    .propdesk-section,
    .wl-card,
    .wl-panel,
    .bessy-user-list-shell,
    .bessy-user-summary-card,
    .bessy-duration-card,
    .bessy-appointments-card,
    .bessy-dagplanner-day,
    .bessy-bag-entry,
    .bessy-bag-pause,
    .nlim-legend-inner,
    .nlim-legend-list
) {
    background: var(--prosper-color-surface);
    border: 1px solid var(--prosper-color-border);
    box-shadow: none;
    padding: var(--prosper-space-4);
}

.propdesk-card,
.wl-card {
    margin-bottom: var(--prosper-space-3);
}

.propdesk-hero,
.portal-hero,
.wl-panel::before,
.propdesk-hero::before,
.site-main::before,
.primary-menu::before,
.primary-menu::after {
    background: var(--prosper-color-surface);
    animation: none;
    box-shadow: none;
}

.propdesk-hero,
.portal-hero,
.wl-panel {
    border: 1px solid var(--prosper-color-border);
    box-shadow: none;
}

.propdesk-badge,
.wl-badge,
.csv-api-compare-badge,
.wl-compare-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border: 1px solid var(--prosper-color-accent);
    background: var(--prosper-color-accent-soft);
    color: var(--prosper-color-accent);
    padding: 0 var(--prosper-space-2);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    animation: none;
    cursor: default;
}

.propdesk-page,
.wl-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border: 1px solid var(--prosper-color-border);
    color: var(--prosper-color-text);
    background: var(--prosper-color-surface);
    padding: 0 var(--prosper-space-3);
    text-decoration: none;
}

.propdesk-page.disabled,
.wl-page.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.propdesk-alert,
.wl-notice,
.csv-api-status,
.bessy-notice {
    border: 1px solid var(--prosper-color-info);
    border-left: 4px solid var(--prosper-color-info);
    background: var(--prosper-color-info-soft);
    color: var(--prosper-color-text);
    padding: var(--prosper-space-3);
}

.propdesk-alert-error,
.wl-notice.error,
.status-error,
.status-fatal,
.bessy-notice.is-error {
    border-color: var(--prosper-color-danger);
    color: var(--prosper-color-danger);
    background: var(--prosper-color-danger-soft);
}

.wl-notice.success,
.status-ok,
.status-good,
.bessy-notice.is-success {
    border-color: var(--prosper-color-success);
    color: var(--prosper-color-success);
    background: var(--prosper-color-success-soft);
}

.propdesk-alert-warn,
.status-warning,
.status-warn {
    border-color: var(--prosper-color-warning);
    color: var(--prosper-color-warning);
    background: var(--prosper-color-warning-soft);
}

.status-info {
    border-color: var(--prosper-color-info);
    color: var(--prosper-color-info);
    background: var(--prosper-color-info-soft);
}

.bessy-user-label {
    border: 1px solid var(--prosper-color-success);
    background: var(--prosper-color-success-soft);
    color: var(--prosper-color-success);
    padding: 0 var(--prosper-space-2);
    animation: none;
    cursor: default;
}

.bessy-user-label-sync {
    border-color: var(--prosper-color-info);
    background: var(--prosper-color-info-soft);
    color: var(--prosper-color-info);
    animation: none;
    cursor: default;
}

.bessy-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border: 1px solid var(--prosper-color-border);
    background: var(--prosper-color-surface-soft);
    color: var(--prosper-color-text);
    padding: 0 var(--prosper-space-2);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    animation: none;
    cursor: default;
}

.csv-api-debug,
#bessy-output-body,
#bessy-output,
.nlim-admin-log-output {
    border: 1px solid var(--prosper-color-border);
    background: var(--prosper-color-surface-soft);
    color: var(--prosper-color-text);
    padding: var(--prosper-space-3);
    font-family: "Space Mono", "Courier New", monospace;
    font-size: 12px;
}

table.widefat,
.propdesk-table,
.bessy-table {
    border: 1px solid var(--prosper-color-border);
    border-collapse: collapse;
    background: var(--prosper-color-surface);
}

table.widefat th,
table.widefat td,
.propdesk-table th,
.propdesk-table td,
.bessy-table th,
.bessy-table td {
    border-bottom: 1px solid var(--prosper-color-border);
    padding: var(--prosper-space-2) var(--prosper-space-3);
    color: var(--prosper-color-text);
}

table.widefat th,
.propdesk-table th,
.bessy-table th {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
}

.nlim-map,
.nlim-legend-inner,
.nlim-legend-list,
.nlim-coverage-swatch {
    border: 1px solid var(--prosper-color-border);
    box-shadow: none;
}

.nlim-legend-list {
    background: var(--prosper-color-surface-soft);
}

.prosper-connection-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.prosper-connection-save-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.prosper-connection-test-form {
    display: inline-flex;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}