/**
 * GPR Core - Common UI Components
 *
 * Reusable component styles for all GPR plugins
 */

/* ========================================
   Buttons
   ======================================== */

.gpr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gpr-spacing-sm, 8px);
    padding: 10px 16px;
    border: none;
    border-radius: var(--gpr-radius-md, 4px);
    font-family: var(--gpr-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: var(--gpr-font-base, 14px);
    font-weight: var(--gpr-font-semibold, 600);
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--gpr-transition, 0.2s ease);
    user-select: none;
}

.gpr-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.gpr-btn:focus {
    outline: 2px solid var(--gpr-primary, #007AFF);
    outline-offset: 2px;
}

/* Button Sizes */
.gpr-btn--small {
    padding: 6px 12px;
    font-size: var(--gpr-font-sm, 13px);
}

.gpr-btn--large {
    padding: 12px 24px;
    font-size: var(--gpr-font-md, 16px);
}

/* Button Variants */
.gpr-btn--primary {
    background: var(--gpr-primary, #007AFF);
    color: var(--gpr-bg, #ffffff);
}

.gpr-btn--primary:hover:not(:disabled) {
    background: var(--gpr-primary-dark, #005ecb);
    color: var(--gpr-bg, #ffffff);
}

.gpr-btn--secondary {
    background: var(--gpr-bg-gray, #f6f7f7);
    color: var(--gpr-text, #1d2327);
    border: 1px solid var(--gpr-border, #c3c4c7);
}

.gpr-btn--secondary:hover:not(:disabled) {
    background: var(--gpr-border-lighter, #f0f0f1);
    color: var(--gpr-text, #1d2327);
}

.gpr-btn--danger {
    background: transparent;
    color: var(--gpr-danger, #d63638);
    border: 1px solid var(--gpr-danger, #d63638);
}

.gpr-btn--danger:hover:not(:disabled) {
    background: var(--gpr-danger, #d63638);
    color: var(--gpr-bg, #ffffff);
}

.gpr-btn--success {
    background: var(--gpr-success, #00a32a);
    color: var(--gpr-bg, #ffffff);
}

.gpr-btn--success:hover:not(:disabled) {
    background: #008a20;
    color: var(--gpr-bg, #ffffff);
}

.gpr-btn--add {
    background: var(--gpr-btn-add-bg, #00a32a);
    color: var(--gpr-bg, #ffffff);
}

.gpr-btn--add:hover:not(:disabled) {
    background: var(--gpr-btn-add-hover, #008a20);
    color: var(--gpr-bg, #ffffff);
}

.gpr-btn--edit {
    background: var(--gpr-primary, #007AFF);
    color: var(--gpr-bg, #ffffff);
    border: none;
}

.gpr-btn--edit:hover:not(:disabled) {
    background: var(--gpr-primary-dark, #005ecb);
    color: var(--gpr-bg, #ffffff);
}

.gpr-btn--link {
    background: transparent;
    color: var(--gpr-primary, #007AFF);
    border: none;
    padding: 8px 12px;
}

.gpr-btn--link:hover:not(:disabled) {
    color: var(--gpr-primary-dark, #005ecb);
    text-decoration: underline;
}

/* Button Loading State */
.gpr-btn.is-loading {
    position: relative;
    color: transparent;
}

.gpr-btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: var(--gpr-radius-full, 9999px);
    animation: gpr-btn-spinner 0.6s linear infinite;
}

.gpr-btn--primary.is-loading::after,
.gpr-btn--success.is-loading::after,
.gpr-btn--danger.is-loading:hover::after {
    border-color: var(--gpr-bg, #ffffff);
    border-top-color: transparent;
}

@keyframes gpr-btn-spinner {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   Form Controls
   ======================================== */

.gpr-input,
.gpr-textarea,
.gpr-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--gpr-border, #c3c4c7);
    border-radius: var(--gpr-radius-md, 4px);
    background: var(--gpr-bg, #ffffff);
    color: var(--gpr-text, #1d2327);
    font-family: var(--gpr-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: var(--gpr-font-base, 14px);
    line-height: 1.5;
    transition: var(--gpr-transition, 0.2s ease);
}

.gpr-input:focus,
.gpr-textarea:focus,
.gpr-select:focus {
    border-color: var(--gpr-primary, #007AFF);
    outline: none;
    box-shadow: 0 0 0 1px var(--gpr-primary, #007AFF);
}

.gpr-input:disabled,
.gpr-textarea:disabled,
.gpr-select:disabled {
    background: var(--gpr-bg-gray, #f6f7f7);
    color: var(--gpr-text-lighter, #787c82);
    cursor: not-allowed;
}

.gpr-textarea {
    resize: vertical;
    min-height: 80px;
}

/* ========================================
   Form Groups
   ======================================== */

.gpr-form-group {
    margin-bottom: var(--gpr-spacing-lg, 16px);
}

.gpr-form-group label {
    display: block;
    margin-bottom: var(--gpr-spacing-sm, 8px);
    font-weight: var(--gpr-font-medium, 500);
    color: var(--gpr-text, #1d2327);
    font-size: var(--gpr-font-base, 14px);
}

.gpr-form-group .gpr-required {
    color: var(--gpr-danger, #d63638);
    margin-left: 2px;
}

.gpr-form-help {
    display: block;
    margin-top: var(--gpr-spacing-xs, 4px);
    font-size: var(--gpr-font-sm, 13px);
    color: var(--gpr-text-light, #50575e);
}

.gpr-form-error {
    display: block;
    margin-top: var(--gpr-spacing-xs, 4px);
    font-size: var(--gpr-font-sm, 13px);
    color: var(--gpr-danger, #d63638);
}

/* ========================================
   Status Badges
   ======================================== */

.gpr-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--gpr-spacing-xs, 4px);
    padding: 4px 10px;
    border-radius: var(--gpr-radius-xl, 12px);
    font-size: var(--gpr-font-xs, 12px);
    font-weight: var(--gpr-font-semibold, 600);
    white-space: nowrap;
}

.gpr-badge--success {
    background: var(--gpr-success-light, #e6f4ea);
    color: var(--gpr-success, #00a32a);
}

.gpr-badge--danger {
    background: var(--gpr-danger-light, #fce8e8);
    color: var(--gpr-danger, #d63638);
}

.gpr-badge--warning {
    background: var(--gpr-warning-light, #fef7e6);
    color: var(--gpr-warning, #dba617);
}

.gpr-badge--info {
    background: var(--gpr-info-light, #e5f2fb);
    color: var(--gpr-info, #2271b1);
}

.gpr-badge--neutral {
    background: var(--gpr-border-lighter, #f0f0f1);
    color: var(--gpr-text-light, #50575e);
}

/* ========================================
   Cards
   ======================================== */

.gpr-card {
    background: var(--gpr-bg, #ffffff);
    border: 1px solid var(--gpr-border-light, #dcdcde);
    border-radius: var(--gpr-radius-lg, 8px);
    box-shadow: var(--gpr-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}

.gpr-card-header {
    padding: var(--gpr-spacing-lg, 16px) var(--gpr-spacing-xl, 20px);
    border-bottom: 1px solid var(--gpr-border-light, #dcdcde);
}

.gpr-card-title {
    margin: 0;
    font-size: var(--gpr-font-lg, 18px);
    font-weight: var(--gpr-font-semibold, 600);
    color: var(--gpr-text, #1d2327);
}

.gpr-card-body {
    padding: var(--gpr-spacing-xl, 20px);
}

.gpr-card-footer {
    padding: var(--gpr-spacing-lg, 16px) var(--gpr-spacing-xl, 20px);
    border-top: 1px solid var(--gpr-border-light, #dcdcde);
    background: var(--gpr-bg-gray, #f6f7f7);
}

/* ========================================
   Notices/Alerts
   ======================================== */

.gpr-notice {
    padding: var(--gpr-spacing-lg, 16px) var(--gpr-spacing-xl, 20px);
    border-radius: var(--gpr-radius-md, 4px);
    font-size: var(--gpr-font-base, 14px);
    line-height: 1.5;
}

.gpr-notice--success {
    background: var(--gpr-success-light, #e6f4ea);
    border: 1px solid var(--gpr-success, #00a32a);
    color: var(--gpr-success, #00a32a);
}

.gpr-notice--error {
    background: var(--gpr-danger-light, #fce8e8);
    border: 1px solid var(--gpr-danger, #d63638);
    color: var(--gpr-danger, #d63638);
}

.gpr-notice--warning {
    background: var(--gpr-warning-light, #fef7e6);
    border: 1px solid var(--gpr-warning, #dba617);
    color: var(--gpr-warning, #dba617);
}

.gpr-notice--info {
    background: var(--gpr-info-light, #e5f2fb);
    border: 1px solid var(--gpr-info, #2271b1);
    color: var(--gpr-info, #2271b1);
}

.gpr-notice p {
    margin: 0;
}

/* ========================================
   Loading States
   ======================================== */

.gpr-loading {
    opacity: 0.6;
    pointer-events: none;
}

.gpr-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--gpr-border-light, #dcdcde);
    border-top-color: var(--gpr-primary, #007AFF);
    border-radius: var(--gpr-radius-full, 9999px);
    animation: gpr-spin 0.6s linear infinite;
}

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