/* ═══════════════════════════════════════════════════════════════
   FORMS.CSS — Shared styles for all MPF form pages
   Extracted from form-depot, form-formation, form-plainte,
   form-rapport, form-test, form-promotion, declaration-absence
   ═══════════════════════════════════════════════════════════════ */

/* ─── User Info Bar ─── */
.user-info-bar {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.8rem 1rem;
    background: rgba(0, 170, 255, 0.04);
    border: 1px solid rgba(0, 170, 255, 0.15);
    border-radius: 4px; margin-bottom: 1.5rem;
    font-family: 'Share Tech Mono', monospace; font-size: 0.8rem;
}
.user-info-bar .user-avatar {
    width: 42px; height: 42px;
    background: rgba(0, 170, 255, 0.15);
    border: 1px solid var(--accent-cyan); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Orbitron', sans-serif; font-size: 0.85rem;
    color: var(--accent-cyan); font-weight: 700; flex-shrink: 0;
}
.user-info-bar .user-details { flex: 1; }
.user-info-bar .user-matricule {
    font-family: 'Orbitron', sans-serif; font-size: 0.82rem;
    color: var(--accent-cyan); font-weight: 700;
}
.user-info-bar .user-status {
    font-size: 0.68rem; padding: 0.15rem 0.5rem; border-radius: 2px;
    background: rgba(0, 200, 80, 0.1); border: 1px solid rgba(0, 200, 80, 0.3); color: #00cc55;
}

/* ─── Form Groups ─── */
.form-group { margin-bottom: 1.2rem; }
.form-group label {
    display: block; font-family: 'Share Tech Mono', monospace;
    font-size: 0.72rem; color: var(--text-muted);
    letter-spacing: 1px; margin-bottom: 0.3rem;
}
.form-group label .req,
.form-group label .required { color: #ff4444; }
.form-group input, .form-group textarea, .form-group select {
    width: 100%; padding: 0.5rem 0.7rem;
    background: rgba(0, 170, 255, 0.04);
    border: 1px solid rgba(0, 170, 255, 0.2);
    color: var(--text-primary);
    font-family: 'Share Tech Mono', monospace; font-size: 0.82rem;
    outline: none; border-radius: 2px;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    border-color: var(--accent-cyan);
}
.form-group select { cursor: pointer; }
.form-group select option { background: #0a1628; color: var(--text-primary); }
.form-group textarea { resize: vertical; min-height: 60px; }
.form-group .hint {
    font-size: 0.68rem; color: var(--text-muted); margin-top: 0.2rem;
    font-family: 'Share Tech Mono', monospace;
}
.form-group.error input, .form-group.error textarea, .form-group.error select { border-color: #ff4444; }
.form-group .error-msg {
    font-size: 0.7rem; color: #ff4444; margin-top: 0.2rem;
    font-family: 'Share Tech Mono', monospace; display: none;
}
.form-group.error .error-msg { display: block; }

/* ─── Responsive 2-column row ─── */
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 500px) { .row-2 { grid-template-columns: 1fr; } }

/* ─── Form Actions ─── */
.form-actions {
    display: flex; gap: 0.8rem; margin-top: 1.5rem; justify-content: flex-end;
}
.btn-action {
    padding: 0.5rem 1.2rem; font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem; cursor: pointer;
    border: 1px solid rgba(0, 170, 255, 0.4);
    background: rgba(0, 170, 255, 0.1); color: var(--accent-cyan);
    border-radius: 3px; transition: all 0.15s; letter-spacing: 0.5px;
}
.btn-action:hover { background: rgba(0, 170, 255, 0.2); border-color: var(--accent-cyan); }
.btn-action.primary { background: rgba(0, 170, 255, 0.2); border-color: var(--accent-cyan); font-weight: 700; }
.btn-action.primary:hover { background: rgba(0, 170, 255, 0.35); }
.btn-action:disabled { opacity: 0.4; cursor: not-allowed; }

/* ─── Alert Messages ─── */
.alert-msg {
    padding: 0.6rem 1rem; border-radius: 3px; margin-bottom: 1rem;
    font-size: 0.8rem; font-family: 'Share Tech Mono', monospace; display: none;
}
.alert-msg.success { display: block; background: rgba(0, 200, 80, 0.1); border: 1px solid rgba(0, 200, 80, 0.3); color: #00cc55; }
.alert-msg.error { display: block; background: rgba(255, 60, 60, 0.1); border: 1px solid rgba(255, 60, 60, 0.3); color: #ff4444; }

/* ─── Sync Indicator ─── */
.sync-indicator {
    position: fixed; bottom: 1rem; right: 1rem;
    padding: 0.4rem 0.8rem; border-radius: 3px;
    font-family: 'Share Tech Mono', monospace; font-size: 0.72rem;
    z-index: 10001; transition: all 0.3s; pointer-events: none; opacity: 0;
}
.sync-indicator.syncing { opacity: 1; background: rgba(255, 200, 0, 0.15); border: 1px solid rgba(255, 200, 0, 0.4); color: #ffc800; }
.sync-indicator.synced { opacity: 1; background: rgba(0, 200, 80, 0.15); border: 1px solid rgba(0, 200, 80, 0.4); color: #00cc55; }
.sync-indicator.error { opacity: 1; background: rgba(255, 60, 60, 0.15); border: 1px solid rgba(255, 60, 60, 0.4); color: #ff4444; }
.sync-indicator.hidden { opacity: 0; }
@keyframes spin-sync { to { transform: rotate(360deg); } }
.sync-spinner { display: inline-block; animation: spin-sync 1s linear infinite; }

/* ─── Tab Bar (Form tabs) ─── */
.tab-bar { display: flex; gap: 0; margin-bottom: 1.5rem; border-bottom: 2px solid rgba(0, 170, 255, 0.15); }
.tab-btn {
    padding: 0.5rem 1.2rem; font-family: 'Orbitron', sans-serif;
    font-size: 0.72rem; color: var(--text-muted);
    background: transparent; border: none; cursor: pointer;
    letter-spacing: 1px; border-bottom: 2px solid transparent;
    margin-bottom: -2px; transition: all 0.2s;
}
.tab-btn:hover { color: var(--accent-cyan); }
.tab-btn.active { color: var(--accent-cyan); border-bottom-color: var(--accent-cyan); font-weight: 700; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ─── Archives Table ─── */
.archives-table { width: 100%; border-collapse: collapse; font-family: 'Share Tech Mono', monospace; }
.archives-table th {
    text-align: left; padding: 0.5rem 0.4rem;
    color: var(--accent-cyan); font-size: 0.68rem;
    letter-spacing: 1px; border-bottom: 2px solid rgba(0, 170, 255, 0.2);
}
.archives-table td {
    padding: 0.4rem; color: var(--text-primary);
    border-bottom: 1px solid rgba(0, 170, 255, 0.06);
    vertical-align: middle; font-size: 0.78rem;
}
.archives-table tr:hover { background: rgba(0, 170, 255, 0.03); cursor: pointer; }

/* ─── Units Selector (autocomplete dropdown) ─── */
.units-selector { position: relative; }
.units-input-row { display: flex; align-items: center; gap: 0; }
.units-input-row input { flex: 1; border-radius: 2px 0 0 2px !important; }
.units-toggle-btn {
    padding: 0.5rem 0.6rem; background: rgba(0, 170, 255, 0.12);
    border: 1px solid rgba(0, 170, 255, 0.2); border-left: none;
    color: var(--accent-cyan); cursor: pointer;
    font-size: 0.9rem; font-family: 'Share Tech Mono', monospace;
    border-radius: 0 2px 2px 0; transition: background 0.15s, border-color 0.15s;
    display: flex; align-items: center; justify-content: center; min-width: 32px;
}
.units-toggle-btn:hover { background: rgba(0, 170, 255, 0.25); border-color: var(--accent-cyan); }
.units-toggle-btn.active { background: rgba(0, 170, 255, 0.2); border-color: var(--accent-cyan); }
.units-dropdown {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: #0a1628; border: 1px solid rgba(0, 170, 255, 0.3);
    border-top: none; max-height: 200px; overflow-y: auto;
    z-index: 50; border-radius: 0 0 4px 4px;
}
.units-dropdown.open { display: block; }
.units-dropdown-search {
    width: 100%; padding: 0.4rem 0.6rem;
    background: rgba(0, 170, 255, 0.06); border: none;
    border-bottom: 1px solid rgba(0, 170, 255, 0.15);
    color: var(--text-primary); font-family: 'Share Tech Mono', monospace;
    font-size: 0.78rem; outline: none;
}
.units-dropdown-item {
    padding: 0.35rem 0.6rem; font-family: 'Share Tech Mono', monospace;
    font-size: 0.78rem; color: var(--text-primary); cursor: pointer;
    display: flex; align-items: center; gap: 0.5rem; transition: background 0.1s;
}
.units-dropdown-item:hover { background: rgba(0, 170, 255, 0.1); }
.units-dropdown-item.selected { background: rgba(0, 170, 255, 0.15); }
.units-dropdown-item .unit-check {
    width: 14px; height: 14px; border: 1px solid rgba(0, 170, 255, 0.4);
    border-radius: 2px; display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem; color: var(--accent-cyan); flex-shrink: 0;
}
.units-dropdown-item.selected .unit-check { background: rgba(0, 170, 255, 0.2); border-color: var(--accent-cyan); }
.units-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.unit-tag {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.15rem 0.45rem; background: rgba(0, 170, 255, 0.12);
    border: 1px solid rgba(0, 170, 255, 0.25); border-radius: 2px;
    font-family: 'Share Tech Mono', monospace; font-size: 0.72rem; color: var(--accent-cyan);
}
.unit-tag .remove-tag { cursor: pointer; color: #ff6666; font-size: 0.8rem; margin-left: 0.1rem; }

/* ─── Access Denied / Not Approved (form pages) ─── */
#access-denied, #notApproved { display: none; text-align: center; padding: 3rem; }

/* ─── Complaint Form — Red theme override ─── */
.theme-red .user-info-bar {
    background: rgba(231, 76, 60, 0.04);
    border-color: rgba(231, 76, 60, 0.2);
}
.theme-red .user-info-bar .user-avatar {
    background: rgba(231, 76, 60, 0.15);
    border-color: #e74c3c; color: #e74c3c;
}
.theme-red .user-info-bar .user-matricule { color: #e74c3c; }
.theme-red .form-group input,
.theme-red .form-group textarea,
.theme-red .form-group select {
    background: rgba(231, 76, 60, 0.03);
    border-color: rgba(231, 76, 60, 0.2);
}
.theme-red .form-group input:focus,
.theme-red .form-group textarea:focus,
.theme-red .form-group select:focus { border-color: #e74c3c; }
.theme-red .btn-action {
    border-color: rgba(231, 76, 60, 0.4);
    background: rgba(231, 76, 60, 0.1); color: #e74c3c;
}
.theme-red .btn-action:hover { background: rgba(231, 76, 60, 0.2); border-color: #e74c3c; }
.theme-red .btn-action.primary { background: rgba(231, 76, 60, 0.2); border-color: #e74c3c; }
.theme-red .btn-action.primary:hover { background: rgba(231, 76, 60, 0.35); }
.theme-red .units-toggle-btn {
    background: rgba(231, 76, 60, 0.12); border-color: rgba(231, 76, 60, 0.2); color: #e74c3c;
}
.theme-red .units-toggle-btn:hover { background: rgba(231, 76, 60, 0.25); border-color: #e74c3c; }
.theme-red .units-dropdown { border-color: rgba(231, 76, 60, 0.3); }
.theme-red .units-dropdown-item:hover { background: rgba(231, 76, 60, 0.1); }
.theme-red .units-dropdown-item.selected { background: rgba(231, 76, 60, 0.15); }
.theme-red .units-dropdown-item .unit-check { border-color: rgba(231, 76, 60, 0.4); color: #e74c3c; }
.theme-red .units-dropdown-item.selected .unit-check { background: rgba(231, 76, 60, 0.2); border-color: #e74c3c; }
.theme-red .unit-tag { background: rgba(231, 76, 60, 0.12); border-color: rgba(231, 76, 60, 0.25); color: #e74c3c; }

/* ─── Attachment upload (drag-and-drop) ─── */
.attach-zone {
    border: 2px dashed rgba(0, 170, 255, 0.2);
    border-radius: 4px; padding: 1.5rem; text-align: center;
    cursor: pointer; transition: all 0.2s; margin-bottom: 0.8rem;
}
.attach-zone:hover,
.attach-zone.dragover {
    border-color: var(--accent-cyan);
    background: rgba(0, 170, 255, 0.04);
}
.attach-zone .attach-icon { font-size: 1.5rem; margin-bottom: 0.5rem; }
.attach-zone .attach-text {
    font-family: 'Share Tech Mono', monospace; font-size: 0.75rem;
    color: var(--text-muted);
}
.attach-zone .attach-text strong { color: var(--accent-cyan); }
.attach-preview {
    display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem;
}
.attach-preview .preview-item {
    position: relative; width: 80px; height: 80px;
    border: 1px solid rgba(0, 170, 255, 0.2); border-radius: 3px; overflow: hidden;
}
.attach-preview .preview-item img {
    width: 100%; height: 100%; object-fit: cover;
}
.attach-preview .preview-item .remove-attachment {
    position: absolute; top: 2px; right: 2px;
    width: 18px; height: 18px; background: rgba(255, 60, 60, 0.9);
    border: none; border-radius: 50%; color: #fff; font-size: 0.7rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}