/**
 * PR-SCANIA — Styles Scan IA
 * Analyse intelligente de documents
 */

:root {
    --sia-primary: #1260A8;
    --sia-accent: #7C3AED;
    --sia-dark: #0D1B2A;
    --sia-surface: #F4F7FA;
    --sia-border: #E8E8E8;
    --sia-text: #1A1A1A;
    --sia-text-sec: #666;
    --sia-success: #0F8A4F;
    --sia-error: #CC2936;
    --sia-radius: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Calibri', Arial, sans-serif; background: var(--sia-surface); color: var(--sia-text); min-height: 100vh; }

.sia-header { background: linear-gradient(135deg, var(--sia-accent) 0%, #6D28D9 100%); color: white; padding: 24px 20px 20px; text-align: center; }
.sia-header-logo { width: 48px; height: 48px; margin-bottom: 8px; }
.sia-header-title { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.sia-header-sub { font-size: 13px; opacity: 0.85; }

.sia-container { max-width: 600px; margin: 0 auto; padding: 20px; }

.sia-card { background: white; border: 1px solid var(--sia-border); border-radius: var(--sia-radius); padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.sia-card-title { font-size: 16px; font-weight: 700; color: var(--sia-dark); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.sia-card-title svg { width: 20px; height: 20px; color: var(--sia-accent); flex-shrink: 0; }

/* Upload zone multi-fichiers */
.sia-upload-zone { border: 2px dashed var(--sia-border); border-radius: var(--sia-radius); padding: 32px 20px; text-align: center; cursor: pointer; transition: all 0.2s; }
.sia-upload-zone:hover { border-color: var(--sia-accent); background: rgba(124, 58, 237, 0.03); }
.sia-upload-icon { width: 48px; height: 48px; color: var(--sia-border); margin: 0 auto 12px; }
.sia-upload-text { font-size: 15px; color: var(--sia-text-sec); margin-bottom: 4px; }
.sia-upload-hint { font-size: 12px; color: #aaa; }

/* Files list */
.sia-files-list { margin-top: 16px; }
.sia-file-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--sia-surface); border-radius: 8px; margin-bottom: 6px; }
.sia-file-icon { width: 32px; height: 32px; border-radius: 6px; background: rgba(124,58,237,0.1); color: var(--sia-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sia-file-name { font-size: 13px; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sia-file-size { font-size: 11px; color: var(--sia-text-sec); }
.sia-file-remove { width: 24px; height: 24px; border: none; border-radius: 50%; background: rgba(204,41,54,0.1); color: var(--sia-error); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; }

.sia-file-count { text-align: center; font-size: 13px; color: var(--sia-text-sec); margin-top: 12px; }

/* Analyse progress */
.sia-progress { margin-bottom: 16px; }
.sia-progress-bar { height: 6px; background: var(--sia-border); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.sia-progress-fill { height: 100%; background: linear-gradient(90deg, var(--sia-accent), #A78BFA); border-radius: 3px; transition: width 0.4s; width: 0%; }
.sia-progress-text { font-size: 13px; color: var(--sia-text-sec); text-align: center; }

/* Results */
.sia-result-item { border: 1px solid var(--sia-border); border-radius: 10px; padding: 14px; margin-bottom: 10px; transition: border-color 0.2s; }
.sia-result-item:hover { border-color: var(--sia-accent); }

.sia-result-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sia-result-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; }
.sia-result-name { font-size: 14px; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sia-result-badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 10px; text-transform: uppercase; }

.sia-result-details { padding-left: 46px; }
.sia-result-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.sia-result-label { color: var(--sia-text-sec); }
.sia-result-value { font-weight: 600; color: var(--sia-text); }

.sia-result-action { margin-top: 8px; padding: 8px 12px; background: rgba(124,58,237,0.06); border-radius: 8px; font-size: 12px; color: var(--sia-accent); display: flex; align-items: center; gap: 6px; }
.sia-result-action svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Category colors */
.sia-cat-admin { background: rgba(37,99,235,0.1); color: #2563EB; }
.sia-cat-scolaire { background: rgba(234,179,8,0.1); color: #CA8A04; }
.sia-cat-pro { background: rgba(5,150,105,0.1); color: #059669; }
.sia-cat-perso { background: rgba(156,163,175,0.1); color: #6B7280; }
.sia-cat-photo { background: rgba(236,72,153,0.1); color: #EC4899; }
.sia-cat-finance { background: rgba(220,38,38,0.1); color: #DC2626; }

.sia-badge-admin { background: rgba(37,99,235,0.1); color: #2563EB; }
.sia-badge-scolaire { background: rgba(234,179,8,0.1); color: #CA8A04; }
.sia-badge-pro { background: rgba(5,150,105,0.1); color: #059669; }
.sia-badge-perso { background: rgba(156,163,175,0.1); color: #6B7280; }
.sia-badge-photo { background: rgba(236,72,153,0.1); color: #EC4899; }
.sia-badge-finance { background: rgba(220,38,38,0.1); color: #DC2626; }

/* Summary */
.sia-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.sia-summary-item { background: white; border: 1px solid var(--sia-border); border-radius: 10px; padding: 14px; text-align: center; }
.sia-summary-value { font-size: 24px; font-weight: 700; color: var(--sia-accent); }
.sia-summary-label { font-size: 11px; color: var(--sia-text-sec); margin-top: 2px; }

/* Buttons */
.sia-btn { width: 100%; padding: 14px 24px; border: none; border-radius: var(--sia-radius); font-family: 'Calibri', Arial, sans-serif; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.sia-btn-primary { background: var(--sia-accent); color: white; }
.sia-btn-primary:hover { background: #6D28D9; }
.sia-btn-primary:disabled { background: #9CA3AF; cursor: not-allowed; }
.sia-btn-secondary { background: white; color: var(--sia-text-sec); border: 1px solid var(--sia-border); }
.sia-btn-outline { background: white; color: var(--sia-accent); border: 1px solid var(--sia-accent); }
.sia-btn-row { display: flex; gap: 12px; margin-top: 20px; }
.sia-btn-row .sia-btn { flex: 1; }

/* Pages */
.sia-page { display: none; }
.sia-page.active { display: block; }

/* Footer */
.sia-footer { text-align: center; padding: 20px; font-size: 12px; color: #999; }
.sia-footer a { color: var(--sia-accent); text-decoration: none; }

/* Notification */
.sia-notification { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-100px); padding: 12px 24px; border-radius: 10px; font-size: 14px; font-weight: 600; z-index: 9999; transition: transform 0.3s; max-width: 90%; }
.sia-notification.show { transform: translateX(-50%) translateY(0); }
.sia-notification.success { background: var(--sia-success); color: white; }
.sia-notification.error { background: var(--sia-error); color: white; }

@media (max-width: 480px) {
    .sia-container { padding: 16px; }
    .sia-card { padding: 16px; }
    .sia-summary { grid-template-columns: repeat(2, 1fr); }
    .sia-btn-row { flex-direction: column; }
}