/* =============================================================
   PharmaDoc Survey — Public / Frontend Styles
   ============================================================= */

:root {
    --pds-primary:  #4e73df;
    --pds-success:  #1cc88a;
    --pds-warning:  #f6c23e;
    --pds-danger:   #e74a3b;
    --pds-info:     #36b9cc;
    --pds-dark:     #1a1a2e;
    --pds-gray:     #6c757d;
    --pds-light:    #f8f9fc;
    --pds-border:   #e3e6f0;
    --pds-radius:   10px;
    --pds-shadow:   0 4px 16px rgba(0,0,0,.09);
}

/* ── Portal wrapper ──────────────────────────────────────────── */
.pds-portal {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 16px 60px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--pds-dark);
}

/* ── Portal header ───────────────────────────────────────────── */
.pds-portal-header {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, #1a1a2e 0%, #4e73df 100%);
    color: #fff;
    border-radius: var(--pds-radius);
    padding: 24px 28px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.pds-portal-avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    flex-shrink: 0;
}

.pds-portal-info { flex: 1; }
.pds-portal-info h2 { margin: 0 0 4px; font-size: 22px; }
.pds-portal-info p  { margin: 0; opacity: .85; font-size: 14px; }

.pds-portal-stats {
    display: flex;
    gap: 24px;
    margin-left: auto;
}

.pds-mini-stat { text-align: center; }
.pds-mini-stat-val { font-size: 22px; font-weight: 800; }
.pds-mini-stat-lbl { font-size: 11px; opacity: .8; text-transform: uppercase; letter-spacing: .5px; }

/* ── Tabs ────────────────────────────────────────────────────── */
.pds-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--pds-border);
    margin-bottom: 24px;
}

.pds-tab-btn {
    padding: 10px 22px;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--pds-gray);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s;
}

.pds-tab-btn:hover    { color: var(--pds-primary); }
.pds-tab-btn.pds-tab-active { color: var(--pds-primary); border-bottom-color: var(--pds-primary); }

/* ── Survey Cards ────────────────────────────────────────────── */
.pds-survey-cards { display: grid; gap: 18px; margin-bottom: 32px; }

.pds-survey-card {
    background: #fff;
    border-radius: var(--pds-radius);
    box-shadow: var(--pds-shadow);
    border: 1px solid var(--pds-border);
    overflow: hidden;
    transition: box-shadow .2s;
}

.pds-survey-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.13); }
.pds-survey-pending  { border-left: 4px solid var(--pds-primary); }
.pds-survey-completed{ border-left: 4px solid var(--pds-success); }
.pds-survey-expired  { border-left: 4px solid var(--pds-gray); }

.pds-survey-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--pds-border);
}

.pds-survey-card-header h4 { margin: 0; font-size: 16px; font-weight: 700; }

.pds-survey-card-body  { padding: 16px 20px; }
.pds-survey-card-footer { padding: 12px 20px; background: var(--pds-light); display: flex; gap: 10px; align-items: center; }

.pds-survey-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--pds-gray); margin-top: 10px; }
.pds-survey-meta code { background: #f1f5f9; border: 1px solid #e2e8f0; padding: 2px 8px; border-radius: 4px; font-size: 14px; letter-spacing: 2px; color: var(--pds-primary); font-weight: 700; }

.pds-completed-badge { color: var(--pds-success); font-weight: 700; }

/* ── KPI Row ─────────────────────────────────────────────────── */
.pds-survey-kpi-row {
    display: flex;
    gap: 20px;
    margin: 12px 0;
    flex-wrap: wrap;
}

.pds-kpi { text-align: center; }
.pds-kpi-val { display: block; font-size: 22px; font-weight: 800; color: var(--pds-dark); }
.pds-kpi-lbl { display: block; font-size: 11px; color: var(--pds-gray); text-transform: uppercase; letter-spacing: .4px; }

/* ── Progress bar ────────────────────────────────────────────── */
.pds-progress-bar-wrap {
    background: var(--pds-border);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
    margin: 8px 0;
}

.pds-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--pds-primary), var(--pds-info));
    border-radius: 999px;
    transition: width .4s ease;
}

/* ── Access code box ─────────────────────────────────────────── */
.pds-access-code-box {
    background: linear-gradient(135deg, #f8f9fc 0%, #e8f0ff 100%);
    border: 2px dashed var(--pds-primary);
    border-radius: var(--pds-radius);
    padding: 28px;
    text-align: center;
    margin-top: 32px;
}

.pds-access-code-box h3 { margin-top: 0; font-size: 18px; }

.pds-code-entry-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 16px;
}

.pds-code-entry-row input {
    padding: 12px 18px;
    border: 2px solid var(--pds-border);
    border-radius: 6px;
    font-size: 18px;
    letter-spacing: 3px;
    text-transform: uppercase;
    width: 260px;
    text-align: center;
    font-weight: 700;
    transition: border-color .15s;
}

.pds-code-entry-row input:focus { border-color: var(--pds-primary); outline: none; box-shadow: 0 0 0 3px rgba(78,115,223,.15); }

/* ── Code gate (take-survey page) ───────────────────────────── */
.pds-code-gate {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pds-code-gate-inner { text-align: center; max-width: 480px; }
.pds-gate-icon { font-size: 64px; margin-bottom: 16px; }

.pds-code-input {
    width: 100%;
    padding: 14px 20px;
    border: 2px solid var(--pds-border);
    border-radius: 8px;
    font-size: 20px;
    letter-spacing: 4px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 14px;
    box-sizing: border-box;
    transition: border-color .15s;
}

.pds-code-input:focus { border-color: var(--pds-primary); outline: none; box-shadow: 0 0 0 4px rgba(78,115,223,.15); }

/* ── Survey form ─────────────────────────────────────────────── */
.pds-survey-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #4e73df 100%);
    color: #fff;
    padding: 28px 32px;
    border-radius: var(--pds-radius) var(--pds-radius) 0 0;
    margin-bottom: 0;
}

.pds-survey-header h2 { margin: 0 0 6px; font-size: 24px; }
.pds-survey-desc { opacity: .85; margin: 0 0 14px; }
.pds-survey-meta-bar { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; opacity: .9; margin-bottom: 14px; }

.pds-question-block {
    background: #fff;
    border: 1px solid var(--pds-border);
    border-top: none;
    padding: 24px 28px;
}

.pds-question-block:last-of-type { border-radius: 0 0 var(--pds-radius) var(--pds-radius); }

.pds-q-label {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--pds-dark);
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.pds-q-num-badge {
    background: var(--pds-primary);
    color: #fff;
    width: 26px; height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.pds-required-star { color: var(--pds-danger); margin-left: 2px; }

/* ── Answer types ────────────────────────────────────────────── */
.pds-choice-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1.5px solid var(--pds-border);
    border-radius: 6px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.pds-choice-option:hover { border-color: var(--pds-primary); background: #f0f4ff; }
.pds-choice-option.pds-selected { border-color: var(--pds-primary); background: #e8f0ff; }
.pds-choice-option input[type="radio"],
.pds-choice-option input[type="checkbox"] { margin: 0; }
.pds-choice-option label { margin: 0; cursor: pointer; font-size: 14px; }

.pds-text-answer {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--pds-border);
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    resize: vertical;
    font-family: inherit;
    transition: border-color .15s;
}

.pds-text-answer:focus { border-color: var(--pds-primary); outline: none; box-shadow: 0 0 0 3px rgba(78,115,223,.12); }

/* ── Star rating ─────────────────────────────────────────────── */
.pds-star-rating { display: flex; gap: 6px; flex-wrap: wrap; }

.pds-star {
    font-size: 32px;
    cursor: pointer;
    color: #ddd;
    transition: color .1s, transform .1s;
    line-height: 1;
}

.pds-star:hover,
.pds-star.pds-star-active { color: #f6c23e; transform: scale(1.15); }

/* ── Likert scale ────────────────────────────────────────────── */
.pds-likert { display: flex; gap: 8px; flex-wrap: wrap; }

.pds-likert-option {
    flex: 1; min-width: 80px;
    text-align: center;
    padding: 10px 6px;
    border: 1.5px solid var(--pds-border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all .15s;
}

.pds-likert-option:hover       { border-color: var(--pds-primary); background: #f0f4ff; }
.pds-likert-option.pds-selected { border-color: var(--pds-primary); background: var(--pds-primary); color: #fff; }

/* ── Matrix ──────────────────────────────────────────────────── */
.pds-matrix-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pds-matrix-table th,
.pds-matrix-table td { padding: 10px 12px; border: 1px solid var(--pds-border); text-align: center; }
.pds-matrix-table th { background: var(--pds-light); font-weight: 600; }
.pds-matrix-table td:first-child { text-align: left; font-weight: 500; }

/* ── Alerts ──────────────────────────────────────────────────── */
.pds-alert {
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    margin: 12px 0;
}

.pds-alert-danger  { background: #ffe0de; color: #8b1a14; border: 1px solid #f5c6cb; }
.pds-alert-warning { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.pds-alert-success { background: #d1f7e8; color: #0a5c36; border: 1px solid #c3e6cb; }
.pds-alert-info    { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }

/* ── Document upload ─────────────────────────────────────────── */
.pds-doc-upload-section { margin-bottom: 28px; }
.pds-doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }

.pds-doc-card {
    background: #fff;
    border: 1.5px dashed var(--pds-border);
    border-radius: var(--pds-radius);
    padding: 20px;
}

.pds-doc-card h4 { margin: 0 0 12px; font-size: 14px; }
.pds-doc-card input[type="file"] { display: block; margin-bottom: 10px; font-size: 13px; }

.pds-upload-status { font-size: 12px; margin-top: 6px; }

/* ── Honorarium ──────────────────────────────────────────────── */
.pds-honor-summary { display: flex; gap: 20px; margin-bottom: 20px; }

.pds-honor-stat {
    background: var(--pds-light);
    border-radius: var(--pds-radius);
    padding: 16px 24px;
    text-align: center;
    border: 1px solid var(--pds-border);
    flex: 1;
}

.pds-honor-stat strong { display: block; font-size: 24px; color: var(--pds-dark); }
.pds-honor-stat span   { font-size: 12px; color: var(--pds-gray); text-transform: uppercase; }

/* ── Analytics ───────────────────────────────────────────────── */
.pds-analytics-grid  { display: grid; gap: 24px; }
.pds-analytics-card  { background: #fff; border: 1px solid var(--pds-border); border-radius: var(--pds-radius); padding: 22px; }
.pds-analytics-q     { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--pds-border); }
.pds-analytics-q-text { margin-bottom: 10px; }

.pds-analytics-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 13px;
}

.pds-analytics-label { width: 140px; flex-shrink: 0; }

.pds-analytics-bar-wrap {
    flex: 1;
    background: var(--pds-border);
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
}

.pds-analytics-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--pds-primary), var(--pds-info));
    border-radius: 999px;
    transition: width .4s ease;
}

.pds-analytics-pct { width: 80px; text-align: right; flex-shrink: 0; color: var(--pds-gray); }

/* ── Survey success ──────────────────────────────────────────── */
.pds-success-screen {
    text-align: center;
    padding: 60px 20px;
    max-width: 480px;
    margin: 0 auto;
}

.pds-success-icon { font-size: 72px; margin-bottom: 20px; }
.pds-info-screen .pds-success-icon { font-size: 64px; }

/* ── Survey footer ───────────────────────────────────────────── */
.pds-survey-footer {
    background: #fff;
    border: 1px solid var(--pds-border);
    border-top: none;
    padding: 24px 28px;
    border-radius: 0 0 var(--pds-radius) var(--pds-radius);
    text-align: center;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.pds-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 20px; border-radius: 6px; font-size: 14px; font-weight: 600;
    cursor: pointer; border: none; text-decoration: none;
    transition: opacity .15s, transform .1s;
}

.pds-btn:hover { opacity: .88; transform: translateY(-1px); text-decoration: none; }
.pds-btn-sm  { padding: 6px 13px; font-size: 12px; }
.pds-btn-lg  { padding: 14px 32px; font-size: 16px; }

.pds-btn-primary   { background: var(--pds-primary); color: #fff; }
.pds-btn-success   { background: var(--pds-success); color: #fff; }
.pds-btn-secondary { background: var(--pds-gray);    color: #fff; }
.pds-btn-danger    { background: var(--pds-danger);  color: #fff; }
.pds-btn-info      { background: var(--pds-info);    color: #fff; }

/* ── Badges ──────────────────────────────────────────────────── */
.pds-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.pds-badge-pending   { background: #fff3cd; color: #856404; }
.pds-badge-approved  { background: #d1f7e8; color: #0a5c36; }
.pds-badge-active    { background: #d1f7e8; color: #0a5c36; }
.pds-badge-completed { background: #d1f7e8; color: #0a5c36; }
.pds-badge-paid      { background: #d1f7e8; color: #0a5c36; }
.pds-badge-rejected  { background: #ffe0de; color: #8b1a14; }
.pds-badge-expired   { background: #e2e8f0; color: #475569; }

/* ── Modal ───────────────────────────────────────────────────── */
.pds-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    background: #fff; border-radius: var(--pds-radius); z-index: 10001;
    box-shadow: 0 20px 60px rgba(0,0,0,.3); width: 700px; max-width: 95vw; max-height: 90vh; overflow-y: auto;
}

.pds-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--pds-border); }
.pds-modal-header h3 { margin: 0; }
.pds-modal-body  { padding: 20px 24px; }
.pds-modal-wide  { width: 800px; }

.pds-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 10000; }

/* ── Tables ──────────────────────────────────────────────────── */
.pds-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.pds-table th { background: var(--pds-light); color: var(--pds-gray); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .5px; padding: 10px 12px; border-bottom: 2px solid var(--pds-border); text-align: left; }
.pds-table td { padding: 10px 12px; border-bottom: 1px solid var(--pds-border); }
.pds-table-full { width: 100%; }

/* ── Empty state ─────────────────────────────────────────────── */
.pds-empty-state { text-align: center; padding: 48px 20px; color: var(--pds-gray); }
.pds-empty       { text-align: center; padding: 20px; color: var(--pds-gray); }
.pds-code        { background: #f1f5f9; border: 1px solid #e2e8f0; padding: 2px 8px; border-radius: 4px; font-family: monospace; letter-spacing: 1px; }
.pds-hint        { font-size: 12px; color: var(--pds-gray); margin-top: 4px; }
.pds-hidden      { display: none !important; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
    .pds-portal-header { flex-direction: column; align-items: flex-start; gap: 14px; }
    .pds-portal-stats  { margin-left: 0; }
    .pds-doc-grid      { grid-template-columns: 1fr; }
    .pds-survey-kpi-row { gap: 10px; }
    .pds-code-entry-row { flex-direction: column; }
    .pds-code-entry-row input { width: 100%; }
    .pds-likert { flex-direction: column; }
    .pds-honor-summary { flex-direction: column; }
}