/* ============================================
   COMPONENTS - Clean Modern SaaS Theme
   File: styles/components.css
   Version: 5.0 (BS3 Compatible)

   ALL classes prefixed with jpl-
   Clean, minimal, Stripe/Clerk inspired
   ============================================ */


/* ==========================================
   BUTTONS
   ========================================== */
.jpl-btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--jpl-font-primary);
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    border-radius: var(--jpl-radius-md);
    cursor: pointer;
    -webkit-transition: all var(--jpl-transition-base);
    transition: all var(--jpl-transition-base);
    position: relative;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none;
    border: 1px solid transparent;
    outline: none;
}

.jpl-btn:hover,
.jpl-btn:focus {
    text-decoration: none;
    outline: none;
}

/* Sizes */
.jpl-btn-xs { padding: 4px 10px; font-size: 0.75rem; height: 28px; }
.jpl-btn-sm { padding: 6px 12px; font-size: 0.8125rem; height: 34px; }
.jpl-btn-md { padding: 8px 16px; font-size: 0.875rem; height: 38px; }
.jpl-btn-lg { padding: 8px 18px; font-size: 0.875rem; height: 42px; }
.jpl-btn-xl { padding: 10px 20px; font-size: 0.9375rem; height: 46px; }

/* Primary — solid purple */
.jpl-btn-primary {
    background: var(--jpl-brand-600);
    color: #fff;
    border-color: var(--jpl-brand-600);
}

.jpl-btn-primary:hover,
.jpl-btn-primary:focus {
    background: var(--jpl-brand-700);
    border-color: var(--jpl-brand-700);
    color: #fff;
    -webkit-box-shadow: var(--jpl-shadow-brand-sm);
    box-shadow: var(--jpl-shadow-brand-sm);
}

.jpl-btn-primary:active {
    background: var(--jpl-brand-800);
    -webkit-box-shadow: none;
    box-shadow: none;
}

.jpl-btn-primary:disabled,
.jpl-btn-primary.disabled {
    background: var(--jpl-brand-200);
    border-color: var(--jpl-brand-200);
    cursor: not-allowed;
    pointer-events: none;
}

/* Secondary — outlined */
.jpl-btn-secondary {
    background: #fff;
    color: var(--jpl-gray-700);
    border-color: var(--jpl-gray-200);
}

.jpl-btn-secondary:hover,
.jpl-btn-secondary:focus {
    background: var(--jpl-gray-50);
    border-color: var(--jpl-gray-300);
    color: var(--jpl-gray-800);
}

/* Danger */
.jpl-btn-danger {
    background: var(--jpl-error-600);
    color: #fff;
    border-color: var(--jpl-error-600);
}

.jpl-btn-danger:hover,
.jpl-btn-danger:focus {
    background: var(--jpl-error-700);
    border-color: var(--jpl-error-700);
    color: #fff;
}

/* Success */
.jpl-btn-success {
    background: var(--jpl-success-600);
    color: #fff;
    border-color: var(--jpl-success-600);
}

.jpl-btn-success:hover,
.jpl-btn-success:focus {
    background: var(--jpl-success-700);
    border-color: var(--jpl-success-700);
    color: #fff;
}

/* Ghost — transparent */
.jpl-btn-ghost {
    background: transparent;
    color: var(--jpl-gray-600);
    border-color: transparent;
}

.jpl-btn-ghost:hover,
.jpl-btn-ghost:focus {
    background: var(--jpl-gray-50);
    color: var(--jpl-gray-700);
}

/* Link */
.jpl-btn-link {
    background: transparent;
    color: var(--jpl-brand-600);
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
    height: auto;
}

.jpl-btn-link:hover,
.jpl-btn-link:focus {
    color: var(--jpl-brand-700);
}

/* Social */
.jpl-btn-social {
    background: #fff;
    color: var(--jpl-gray-700);
    border: 1px solid var(--jpl-gray-200);
    width: 100%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 0.75rem;
    border-radius: var(--jpl-radius-md);
    font-weight: 500;
    font-size: 0.875rem;
    font-family: var(--jpl-font-primary);
    padding: 10px 18px;
    height: 42px;
    -webkit-transition: all var(--jpl-transition-base);
    transition: all var(--jpl-transition-base);
    cursor: pointer;
    text-decoration: none;
    outline: none;
}

.jpl-btn-social:hover,
.jpl-btn-social:focus {
    background: var(--jpl-gray-50);
    border-color: var(--jpl-gray-300);
    text-decoration: none;
    color: var(--jpl-gray-700);
}

.jpl-btn-social .jpl-social-icon { width: 20px; height: 20px; -ms-flex-negative: 0; flex-shrink: 0; }

/* Full Width */
.jpl-btn-full { width: 100%; }

/* Icon inside button */
.jpl-btn .jpl-icon { width: 20px; height: 20px; -ms-flex-negative: 0; flex-shrink: 0; }


/* ==========================================
   FORM INPUTS
   ========================================== */
.jpl-form-group {
    margin-bottom: 1.25rem;
}

.jpl-form-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--jpl-gray-700);
    margin-bottom: 0.375rem;
}

.jpl-form-label .jpl-required {
    color: var(--jpl-error-500);
    margin-left: 2px;
}

/* Input */
.jpl-input {
    display: block;
    width: 100%;
    padding: 9px 13px;
    font-size: 0.875rem;
    font-weight: 400;
    font-family: var(--jpl-font-primary);
    color: var(--jpl-gray-900);
    background-color: #fff;
    background-image: none;
    border: 1px solid var(--jpl-gray-200);
    border-radius: var(--jpl-radius-md);
    -webkit-transition: border-color var(--jpl-transition-fast), box-shadow var(--jpl-transition-fast);
    transition: border-color var(--jpl-transition-fast), box-shadow var(--jpl-transition-fast);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    height: 42px;
}

.jpl-input::-webkit-input-placeholder { color: var(--jpl-gray-400); font-weight: 400; }
.jpl-input::-moz-placeholder { color: var(--jpl-gray-400); font-weight: 400; }
.jpl-input:-ms-input-placeholder { color: var(--jpl-gray-400); font-weight: 400; }
.jpl-input::placeholder { color: var(--jpl-gray-400); font-weight: 400; }

.jpl-input:hover {
    border-color: var(--jpl-gray-300);
}

.jpl-input:focus {
    border-color: var(--jpl-brand-400);
    -webkit-box-shadow: var(--jpl-ring-brand);
    box-shadow: var(--jpl-ring-brand);
    outline: none;
}

.jpl-input:disabled {
    background-color: var(--jpl-gray-50);
    color: var(--jpl-gray-500);
    cursor: not-allowed;
    border-color: var(--jpl-gray-200);
}

/* Input Group */
.jpl-input-group { position: relative; }

.jpl-input-icon-left {
    position: absolute;
    left: 13px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--jpl-gray-400);
    pointer-events: none;
    z-index: 4;
}

.jpl-input--icon-left {
    padding-left: 38px;
}

.jpl-input-icon-right {
    position: absolute;
    right: 13px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer;
    color: var(--jpl-gray-400);
    width: 18px;
    height: 18px;
    z-index: 4;
    background: none;
    border: none;
    padding: 0;
    -webkit-transition: color var(--jpl-transition-fast);
    transition: color var(--jpl-transition-fast);
    outline: none;
}

.jpl-input-icon-right:hover { color: var(--jpl-gray-600); }
.jpl-input--icon-right { padding-right: 38px; }

/* Error State */
.jpl-input-error .jpl-input {
    border-color: var(--jpl-error-300);
}

.jpl-input-error .jpl-input:focus {
    border-color: var(--jpl-error-500);
    -webkit-box-shadow: var(--jpl-ring-error);
    box-shadow: var(--jpl-ring-error);
}

.jpl-input-error .jpl-input-icon-left {
    color: var(--jpl-error-500);
}

/* Error Message */
.jpl-form-error {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: var(--jpl-error-600);
}

.jpl-form-error .jpl-error-icon {
    width: 14px;
    height: 14px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

/* Success Message */
.jpl-form-success {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: var(--jpl-success-600);
}

.jpl-form-success svg {
    width: 14px;
    height: 14px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

/* Help Text */
.jpl-form-hint {
    display: block;
    font-size: 0.8125rem;
    color: var(--jpl-gray-500);
    margin-top: 0.375rem;
}

/* Checkbox */
.jpl-checkbox-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.5rem;
}

.jpl-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    accent-color: var(--jpl-brand-600);
}

.jpl-checkbox-label {
    font-size: 0.8125rem;
    color: var(--jpl-gray-600);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-bottom: 0;
}

.jpl-checkbox-label a {
    color: var(--jpl-brand-600);
    font-weight: 500;
}


/* ==========================================
   DIVIDER
   ========================================== */
.jpl-divider {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0;
}

.jpl-divider::before,
.jpl-divider::after {
    content: '';
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 1px;
    background: var(--jpl-gray-200);
}

.jpl-divider-text {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--jpl-gray-400);
    white-space: nowrap;
}


/* ==========================================
   MODAL — Clean with subtle shadow
   ========================================== */
.jpl-modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(17, 24, 39, 0.5);
    z-index: 1060;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all var(--jpl-transition-moderate);
    transition: all var(--jpl-transition-moderate);
}

@supports ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
    .jpl-modal-backdrop {
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }
}

.jpl-modal-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
}

.jpl-modal {
    background: #fff;
    border-radius: var(--jpl-radius-xl);
    -webkit-box-shadow: var(--jpl-shadow-xl);
    box-shadow: var(--jpl-shadow-xl);
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-transform: translateY(12px) scale(0.98);
    -ms-transform: translateY(12px) scale(0.98);
    transform: translateY(12px) scale(0.98);
    -webkit-transition: -webkit-transform var(--jpl-transition-moderate);
    transition: transform var(--jpl-transition-moderate);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--jpl-gray-100);
}

.jpl-modal-backdrop.is-visible .jpl-modal {
    -webkit-transform: translateY(0) scale(1);
    -ms-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
}

.jpl-modal__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 1.5rem 0;
}

.jpl-modal__header-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--jpl-radius-lg);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.jpl-modal__header-icon--brand {
    background: var(--jpl-brand-50);
    border: 1px solid var(--jpl-brand-100);
    color: var(--jpl-brand-600);
}

.jpl-modal__header-icon--error {
    background: var(--jpl-error-50);
    border: 1px solid var(--jpl-error-100);
    color: var(--jpl-error-600);
}

.jpl-modal__header-icon--warning {
    background: var(--jpl-warning-50);
    border: 1px solid var(--jpl-warning-100);
    color: var(--jpl-warning-600);
}

.jpl-modal__header-icon svg { width: 22px; height: 22px; }

.jpl-modal__header-content {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0;
}

.jpl-modal__title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--jpl-gray-900);
    line-height: 1.4;
    margin: 0;
}

.jpl-modal__description {
    font-size: 0.8125rem;
    color: var(--jpl-gray-500);
    margin-top: 0.25rem;
    line-height: 1.5;
}

.jpl-modal__close {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    width: 32px;
    height: 32px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: var(--jpl-radius-sm);
    color: var(--jpl-gray-400);
    -webkit-transition: all var(--jpl-transition-fast);
    transition: all var(--jpl-transition-fast);
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    padding: 0;
}

.jpl-modal__close:hover {
    background: var(--jpl-gray-100);
    color: var(--jpl-gray-600);
}

.jpl-modal__close svg { width: 18px; height: 18px; }

.jpl-modal__body {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.jpl-modal__footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.5rem;
}

.jpl-modal__footer .jpl-btn {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}


/* ==========================================
   ALERTS — Clean with left border accent
   ========================================== */
.jpl-alert {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    border-radius: var(--jpl-radius-md);
    border: 1px solid transparent;
    font-size: 0.8125rem;
}

.jpl-alert-content {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0;
}

.jpl-alert-title {
    font-weight: 600;
    margin-bottom: 0.125rem;
    display: block;
}

.jpl-alert-message { line-height: 1.5; }

.jpl-alert-success { background: var(--jpl-success-50); border-color: var(--jpl-success-100); color: var(--jpl-success-700); }
.jpl-alert-error { background: var(--jpl-error-50); border-color: var(--jpl-error-100); color: var(--jpl-error-700); }
.jpl-alert-warning { background: var(--jpl-warning-50); border-color: var(--jpl-warning-100); color: var(--jpl-warning-600); }
.jpl-alert-info { background: var(--jpl-brand-50); border-color: var(--jpl-brand-200); color: var(--jpl-brand-700); }


/* ==========================================
   SPINNER
   ========================================== */
.jpl-spinner {
    display: inline-block;
    border: 2px solid var(--jpl-gray-200);
    border-top-color: var(--jpl-brand-600);
    border-radius: 50%;
    -webkit-animation: jplSpin 0.6s linear infinite;
    animation: jplSpin 0.6s linear infinite;
}

.jpl-spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.jpl-spinner-md { width: 22px; height: 22px; }
.jpl-spinner-lg { width: 28px; height: 28px; border-width: 2.5px; }
.jpl-spinner-xl { width: 36px; height: 36px; border-width: 3px; }

.jpl-spinner-white {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
}

@-webkit-keyframes jplSpin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes jplSpin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

/* Loading Overlay */
.jpl-loading-overlay {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(255, 255, 255, 0.85);
    z-index: 1060;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 0.875rem;
}

.jpl-loading-text {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--jpl-gray-600);
}


/* ==========================================
   LINKS
   ========================================== */
.jpl-link {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--jpl-brand-600);
    -webkit-transition: color var(--jpl-transition-fast);
    transition: color var(--jpl-transition-fast);
    cursor: pointer;
    text-decoration: none;
}

.jpl-link:hover,
.jpl-link:focus {
    color: var(--jpl-brand-700);
}

.jpl-link-gray { color: var(--jpl-gray-600); }
.jpl-link-gray:hover { color: var(--jpl-gray-700); }


/* ==========================================
   BADGE
   ========================================== */
.jpl-badge {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.25rem;
    padding: 2px 8px;
    font-size: 0.6875rem;
    font-weight: 500;
    border-radius: 100px;
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid transparent;
}

.jpl-badge-brand { background: var(--jpl-brand-50); color: var(--jpl-brand-700); border-color: var(--jpl-brand-200); }
.jpl-badge-success { background: var(--jpl-success-50); color: var(--jpl-success-700); border-color: var(--jpl-success-100); }
.jpl-badge-error { background: var(--jpl-error-50); color: var(--jpl-error-700); border-color: var(--jpl-error-100); }
.jpl-badge-warning { background: var(--jpl-warning-50); color: var(--jpl-warning-600); border-color: var(--jpl-warning-100); }
.jpl-badge-gray { background: var(--jpl-gray-50); color: var(--jpl-gray-700); border-color: var(--jpl-gray-200); }


/* ==========================================
   CARD — Clean with subtle border
   ========================================== */
.jpl-card {
    background: #fff;
    border: 1px solid var(--jpl-gray-200);
    border-radius: var(--jpl-radius-xl);
    overflow: hidden;
}

.jpl-card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--jpl-gray-100);
}

.jpl-card-body { padding: 1.5rem; }

.jpl-card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--jpl-gray-100);
    background: var(--jpl-gray-25);
}

.jpl-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--jpl-gray-900);
    margin: 0;
}


/* ==========================================
   TOAST
   ========================================== */
.jpl-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1080;
    max-width: 380px;
    width: 100%;
    pointer-events: none;
}

.jpl-toast-container .jpl-alert {
    pointer-events: all;
    -webkit-box-shadow: var(--jpl-shadow-lg);
    box-shadow: var(--jpl-shadow-lg);
    margin-bottom: 0.5rem;
    -webkit-animation: jplSlideIn 0.3s ease-out;
    animation: jplSlideIn 0.3s ease-out;
}

@-webkit-keyframes jplSlideIn {
    from { -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; }
    to { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
}
@keyframes jplSlideIn {
    from { -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; }
    to { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
}


/* ==========================================
   TABLE — Clean minimal
   ========================================== */
.jpl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.jpl-table th {
    padding: 0.625rem 1rem;
    font-weight: 500;
    color: var(--jpl-gray-500);
    background: var(--jpl-gray-50);
    border-bottom: 1px solid var(--jpl-gray-200);
    text-align: left;
    white-space: nowrap;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.jpl-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--jpl-gray-100);
    color: var(--jpl-gray-600);
}

.jpl-table tr:last-child td { border-bottom: none; }
.jpl-table tr:hover td { background: var(--jpl-gray-25); }