/* ============================================================
   FILE: public_html/cij/obsps/assets/css/author.css
   Author Portal — Submission & Account styles
   ============================================================ */

/* ── Author portal body ──────────────────────────────────── */
.author-portal { background: #f0f4f8; }
.author-main   { padding: 1rem 0 4rem; min-height: calc(100vh - 120px); }

/* ── Author cards ────────────────────────────────────────── */
.author-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.author-card-header { padding: .9rem 1.5rem; border-bottom: 1px solid var(--border); background: var(--bg, #f7f9fc); }
.author-card-header h1,
.author-card-header h2,
.author-card-header h3 { font-size: 1rem; color: var(--primary); margin: 0; }
.author-card-header p  { font-size: .82rem; color: var(--text-muted); margin: .25rem 0 0; }
.author-card-body { padding: 1.5rem; }

/* ── Alerts ──────────────────────────────────────────────── */
.author-alert { padding: .85rem 1.1rem; border-radius: var(--radius); margin-bottom: 1rem; font-family: var(--font-ui); font-size: .875rem; }
.alert-ok  { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.alert-err { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.alert-warn{ background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }

/* ── Author form elements ────────────────────────────────── */
.aform-group  { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.1rem; }
.aform-row    { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 1rem; }
.aform-group label { font-family: var(--font-ui); font-size: .82rem; font-weight: 600; color: var(--text-muted); }
.aform-group label.required::after { content: ' *'; color: #c0392b; }
.aform-hint   { font-size: .75rem; color: var(--text-muted); font-family: var(--font-ui); font-weight: 400; }
.aform-group input[type=text],
.aform-group input[type=email],
.aform-group input[type=url],
.aform-group input[type=password],
.aform-group input[type=date],
.aform-group input[type=number],
.aform-group select,
.aform-group textarea {
    width: 100%; padding: .55rem .85rem; border: 1px solid var(--border);
    border-radius: var(--radius); font-family: var(--font-ui); font-size: .9rem;
    color: var(--text); background: #fff; transition: border-color .2s, box-shadow .2s;
}
.aform-group input:focus,
.aform-group select:focus,
.aform-group textarea:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26,58,92,.1);
}
.aform-group textarea { resize: vertical; min-height: 100px; }

/* ── Author buttons ──────────────────────────────────────── */
.abtn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
        padding: .5rem 1.1rem; border-radius: var(--radius); font-family: var(--font-ui);
        font-size: .875rem; font-weight: 600; text-decoration: none; border: none;
        cursor: pointer; transition: all .2s; white-space: nowrap; }
.abtn-primary { background: var(--primary); color: #fff; }
.abtn-primary:hover { background: #2c5282; color: #fff; text-decoration: none; }
.abtn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); }
.abtn-outline:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.abtn-sm { padding: .3rem .75rem; font-size: .78rem; }

/* ── File drop zone ──────────────────────────────────────── */
.file-drop-zone { position: relative; border: 2px dashed var(--border); border-radius: var(--radius); padding: 1.5rem; text-align: center; background: var(--bg, #f7f9fc); transition: border-color .2s; cursor: pointer; }
.file-drop-zone:hover { border-color: var(--primary); }
.file-drop-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.file-drop-label { font-family: var(--font-ui); font-size: .875rem; color: var(--text-muted); pointer-events: none; }

/* ── Password strength ───────────────────────────────────── */
.pw-strength { margin-top: .35rem; }
.pw-bar      { height: 4px; background: var(--border); border-radius: 2px; margin-bottom: .25rem; }
.pw-bar div  { height: 100%; border-radius: 2px; transition: width .3s, background .3s; }
#pw-label    { font-family: var(--font-ui); font-size: .75rem; }

/* ── Steps indicator ─────────────────────────────────────── */
.submit-steps { display: flex; align-items: center; margin-bottom: 2rem; }
.submit-step  { display: flex; align-items: center; gap: .5rem; }
.step-num     { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-size: .8rem; font-weight: 700; }
.step-num.active { background: var(--primary); color: #fff; }
.step-num.done   { background: #16a085; color: #fff; }
.step-num.todo   { background: var(--border); color: var(--text-muted); }
.step-line { flex: 1; height: 2px; background: var(--border); margin: 0 .5rem; min-width: 20px; }

/* ── Submission status badge ─────────────────────────────── */
.status-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .3em .85em; border-radius: 30px; font-family: var(--font-ui); font-size: .75rem; font-weight: 700; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
    .aform-row { grid-template-columns: 1fr; }
    .author-card-body { padding: 1rem; }
    .author-main { padding: .75rem 0 3rem; }
}