/* Job Alert Modal & Empty State Cards */
/* ============================================================================
   CUSTOMIZATION VARIABLES - Edit these to customize the modal
   ============================================================================ */
:root {
    /* Modal Title - "Create Job Alert" */
    --alert-modal-title: 'Create Job Alert';
    --alert-modal-title-size: 1.3375rem;
    --alert-modal-title-weight: 400;
    --alert-modal-title-padding-bottom: 13px; /* Space below title */
    
    /* Modal Subtitle - "Get notified about jobs..." */
    --alert-modal-subtitle: 'Get notified about jobs that match your preferences';
    --alert-modal-subtitle-size: 0.9375rem;
    --alert-modal-subtitle-weight: 400;
    
    /* Success Message Title */
    --alert-success-title: 'Alert Created!';
    --alert-success-title-size: 1.875rem;
    --alert-success-title-weight: 400;
    --alert-success-title-padding-bottom: 8px;
    
    /* Success Message Text */
    --alert-success-text: "You'll receive notifications when jobs matching your criteria are posted.";
    --alert-success-text-size: 0.9375rem;
    --alert-success-text-weight: 400;
}

.empty-state-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;margin-top:20px}
@media (min-width:1025px){.job-board-split .empty-state-cards{grid-column:2;margin-top:-66px}}
@media (max-width:1024px){.empty-state-cards{grid-template-columns:1fr;gap:40px;margin-top:20px}}
.empty-state-card{background:var(--color-background);border:2px solid var(--color-border);border-radius:var(--radius-lg);padding:34px;text-align:center;cursor:pointer;transition:.2s;position:relative}
.empty-state-card:hover{border-color:#9ca3af;box-shadow:0 4px 12px rgba(0,0,0,.08);transform:translateY(-2px)}
.empty-state-card-icon{width:64px;height:64px;margin:0 auto 16px;color:var(--color-gray-300);stroke-width:1.5}
.empty-state-card h3{font-size:var(--text-xl);font-weight:500;color:var(--color-text-secondary);margin:0 0 8px 0;font-family:var(--font-display)}
.empty-state-card p{font-size:var(--text-sm);color:var(--color-text-tertiary);margin:0;line-height:var(--leading-normal)}
#createAlertCardDetails .empty-state-card-icon,#createAlertCardList .empty-state-card-icon{color:#C69A07}
#uploadResumeCardDetails .empty-state-card-icon,#uploadResumeCardList .empty-state-card-icon{color:#235383}

/* Modal Overlay and Content */
.alert-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .2s}
.alert-modal-content{background:#fff;border-radius:16px;width:100%;max-width:600px;max-height:90vh;overflow:hidden;position:relative;box-shadow:0 20px 50px rgba(0,0,0,.3);animation:slideUp .3s}

/* Fixed Close Button (X) */
.alert-modal-close{
    position:absolute;
    top:12px;
    right:12px;
    width:40px;
    height:40px;
    border-radius:50%;
    background:rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.2);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:100;
    color:#fff;
    transition:all .2s;
    padding:0;
    flex-shrink:0;
}
.alert-modal-close:hover{
    background:rgba(255,255,255,.25);
    border-color:rgba(255,255,255,.4);
    transform:scale(1.05);
}
.alert-modal-close svg{
    width:18px;
    height:18px;
    stroke-width:2.5;
    display:block;
    margin:auto;
}

/* Modal Header */
.alert-modal-header{background:linear-gradient(135deg,#235383 0%,#336ba8 100%);color:#fff;padding:32px 24px 32px 24px;padding-right:70px;position:relative;overflow:hidden}
.alert-modal-header::before{content:"";position:absolute;width:400px;height:400px;background:rgba(255,255,255,.15);border-radius:50%;filter:blur(80px);top:-150px;right:-100px;pointer-events:none}
.alert-modal-header h2{
    font-size:var(--alert-modal-title-size) !important;
    font-weight:var(--alert-modal-title-weight) !important;
    margin:0 0 var(--alert-modal-title-padding-bottom) 0 !important;
    position:relative;
    z-index:1;
}
.alert-modal-header p{
    color:rgba(255,255,255,.9);
    margin:0;
    position:relative;
    z-index:1;
    font-size:var(--alert-modal-subtitle-size) !important;
    font-weight:var(--alert-modal-subtitle-weight) !important;
}

/* Modal Body */
.alert-modal-body{padding:24px;max-height:calc(90vh - 280px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--color-gray-300) var(--color-gray-50)}
.alert-modal-body::-webkit-scrollbar{width:8px}
.alert-modal-body::-webkit-scrollbar-track{background:var(--color-gray-50)}
.alert-modal-body::-webkit-scrollbar-thumb{background:var(--color-gray-300);border-radius:4px}

/* Form Elements */
.alert-form-group{margin-bottom:20px}
.alert-form-label{display:block;font-size:.875rem;font-weight:400;color:#374151;margin-bottom:6px}
.alert-form-input,.alert-form-select{width:100%;padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px;font-size:.9375rem;font-family:inherit;transition:border-color .2s;background-color:#fff;appearance:none}
.alert-form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px;padding-right:36px}
.alert-form-input:focus,.alert-form-select:focus{outline:none;border-color:#235383;box-shadow:0 0 0 3px rgba(35,83,131,.1)}
.alert-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.alert-form-row{grid-template-columns:1fr}}

/* Modal Footer */
.alert-modal-footer{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:24px;border-top:1px solid #f3f4f6}
.alert-btn-secondary{padding:14px 20px;border:1px solid #e5e7eb;background:#fff;border-radius:10px;font-size:.9375rem;font-weight:400;cursor:pointer;transition:background .2s;width:100%;text-align:center}
.alert-btn-secondary:hover{background:#f9fafb}
.alert-btn-primary{padding:14px 24px;background:#235383;color:#fff;border:none;border-radius:10px;font-size:.9375rem;font-weight:400;cursor:pointer;transition:background .2s;width:100%;text-align:center}
.alert-btn-primary:hover:not(:disabled){background:#1a3f62}
.alert-btn-primary:disabled{opacity:.6;cursor:not-allowed}

/* Success Screen */
.alert-success-screen{text-align:center;padding:60px 40px}
.alert-success-icon{width:80px;height:80px;color:#235383;margin:0 auto 16px}
.alert-success-screen h2{
    font-size:var(--alert-success-title-size) !important;
    font-weight:var(--alert-success-title-weight) !important;
    color:#235383;
    margin:0 0 var(--alert-success-title-padding-bottom) 0 !important;
}
.alert-success-screen p{
    color:#235383;
    margin:0;
    font-size:var(--alert-success-text-size) !important;
    font-weight:var(--alert-success-text-weight) !important;
}

/* Error Message */
.alert-error-message{padding:12px;background:#fee2e2;border:1px solid #fca5a5;border-radius:8px;color:#dc2626;margin-bottom:20px;font-size:.875rem}