* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #f5f7fb; color: #1f2937; }
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar { background: #1f2937; color: #f9fafb; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; }
.topbar h1 { margin: 0; font-size: 18px; font-weight: 600; }
.topbar .user { font-size: 13px; opacity: 0.85; }
.topbar a { color: #93c5fd; margin-left: 16px; font-size: 13px; }

.container { max-width: 1100px; margin: 0 auto; padding: 24px; }

.upload-zone {
    background: white;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    margin-bottom: 24px;
}
.upload-zone p { margin: 6px 0; color: #64748b; }
.upload-zone input[type=file] { margin-top: 12px; }
.upload-zone .accepted { font-size: 12px; color: #94a3b8; }

.file-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 20px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.file-card h2 { margin: 0 0 4px 0; font-size: 16px; }
.file-card .file-sub { color: #64748b; font-size: 13px; margin-bottom: 16px; }

.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 24px; margin-bottom: 16px; font-size: 13px; }
.meta-grid .label { color: #64748b; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.meta-grid .value { font-weight: 500; }

.shop-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.shop-row .badge { padding: 4px 10px; border-radius: 12px; font-size: 12px; background: #dbeafe; color: #1d4ed8; font-weight: 600; }
.shop-row .badge.unknown { background: #fee2e2; color: #b91c1c; }
.shop-row select { padding: 6px 8px; border-radius: 6px; border: 1px solid #cbd5e1; }
.shop-row button { background: #1d4ed8; color: white; border: 0; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 500; }
.shop-row button:hover { background: #1e40af; }
.shop-row button:disabled { background: #94a3b8; cursor: not-allowed; }

table.movements { width: 100%; border-collapse: collapse; font-size: 12px; }
table.movements th, table.movements td { padding: 6px 8px; border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: top; }
table.movements th { background: #f1f5f9; color: #475569; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
table.movements .amount { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
table.movements .credit { color: #15803d; }
table.movements .debit { color: #b91c1c; }
table.movements .tag { display: inline-block; padding: 2px 6px; border-radius: 4px; background: #e0e7ff; color: #3730a3; font-size: 10px; font-weight: 600; }
table.movements .tag.wld { background: #fef3c7; color: #92400e; }
table.movements .tag.bc { background: #dcfce7; color: #15803d; }
table.movements .tag.ceral { background: #e0f2fe; color: #0369a1; }
table.movements .tag.cash { background: #ede9fe; color: #5b21b6; }
table.movements .tag.supplier { background: #fee2e2; color: #991b1b; }
table.movements .tag.todo { background: #fef9c3; color: #854d0e; }
table.movements .tag.skip { background: #f1f5f9; color: #64748b; }
table.movements .info { color: #475569; font-size: 11px; max-width: 360px; word-break: break-word; }

.error-list { background: #fef2f2; border-left: 4px solid #dc2626; padding: 12px 16px; border-radius: 6px; color: #991b1b; margin-bottom: 16px; }

/* CSV preview (mimics the accounting software grid) */
table.csv-preview { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; background: white; border: 1px solid #cbd5e1; border-radius: 6px; overflow: hidden; }
table.csv-preview th, table.csv-preview td { padding: 8px 10px; border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: middle; white-space: nowrap; }
table.csv-preview thead th { background: #475569; color: #f8fafc; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid #334155; }
table.csv-preview tbody tr:nth-child(even) { background: #f8fafc; }
table.csv-preview tbody tr:hover { background: #eef2ff; }
table.csv-preview .amount { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: #0f172a; }
table.csv-preview .center { text-align: center; }
table.csv-preview .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; color: #334155; }
table.csv-preview .muted { color: #64748b; font-size: 11px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
table.csv-preview .tiers { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 600; color: #0f172a; }
table.csv-preview .sign { font-weight: 700; font-size: 14px; }
table.csv-preview .sign.pos { color: #15803d; }
table.csv-preview .sign.neg { color: #b91c1c; }
table.csv-preview tr.row-supplier { background: #fef2f2 !important; }
table.csv-preview tr.row-supplier:hover { background: #fee2e2 !important; }
table.csv-preview tr.row-todo { background: #fefce8 !important; }
table.csv-preview tr.row-todo:hover { background: #fef9c3 !important; }
table.csv-preview tr.row-todo .tiers { color: #854d0e; }
.type-pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.type-pill.type-a { background: #dbeafe; color: #1e3a8a; }
.type-pill.type-b { background: #fde68a; color: #78350f; }
.type-pill.type-c { background: #dcfce7; color: #14532d; }

/* Login */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, #1e3a8a, #3b82f6); }
.login-card { background: white; padding: 32px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); width: 360px; max-width: 90vw; }
.login-card h1 { margin: 0 0 4px 0; font-size: 22px; }
.login-card .muted { color: #64748b; font-size: 13px; margin-bottom: 20px; }
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #475569; }
.login-form input { padding: 10px 12px; border-radius: 6px; border: 1px solid #cbd5e1; font-size: 14px; }
.login-form button { background: #1d4ed8; color: white; border: 0; padding: 10px 16px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; margin-top: 4px; }
.login-form button:hover { background: #1e40af; }
.login-form .error { background: #fee2e2; color: #b91c1c; padding: 8px 12px; border-radius: 6px; font-size: 13px; }

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: 0.5rem; }