/* assets/style.css */

:root {
    --bg: #f3f4f8;
    --bg-card: #ffffff;
    --border: #d6d9e0;
    --border-subtle: #e2e5ee;
    --accent: #1f5ad7;
    --accent-dark: #1747a8;
    --accent-soft: #e5edff;
    --accent-soft-border: #c3d4ff;
    --text: #1f2933;
    --text-muted: #6b7280;
    --error: #c0392b;
    --success: #27ae60;
    --shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.08);
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at top left, #e5edff 0, #f3f4f8 40%, #f9fafb 100%);
    color: var(--text);
}

/* Shell layout */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }

/* Top bar */
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.9rem 1.75rem; background: #020617; color: #f9fafb;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.5); position: sticky; top: 0; z-index: 50;
}
.topbar-left { display: flex; align-items: center; gap: 0.9rem; }
.brand-logo {
    width: 32px; height: 32px; border-radius: 999px;
    background: linear-gradient(135deg, #60a5fa, #1d4ed8);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.9rem; box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.6);
}
.topbar-text { display: flex; flex-direction: column; gap: 0.15rem; }
.topbar-title { font-weight: 600; font-size: 0.98rem; }
.topbar-subtitle { font-size: 0.8rem; color: #cbd5f5; }
.topbar-right { display: flex; align-items: center; gap: 0.5rem; }

/* Badge */
.badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.75rem; }
.badge-live { background: rgba(34, 197, 94, 0.15); color: #bbf7d0; border: 1px solid rgba(22, 163, 74, 0.5); }

/* Main layout */
.main-layout { flex: 1; padding: 1.5rem 1.75rem 2rem; max-width: 1240px; width: 100%; margin: 0 auto; }

/* Cards */
.card {
    background: var(--bg-card); border-radius: 1rem; padding: 1.3rem 1.4rem;
    border: 1px solid var(--border-subtle); box-shadow: 0 14px 35px rgba(15, 23, 42, 0.04); margin-bottom: 1.2rem;
}
.card-header-info { margin-bottom: 1.4rem; }
.card-header-info h1 { margin: 0 0 0.35rem; font-size: 1.35rem; }
.card-header-info p { margin: 0; font-size: 0.9rem; }
.card-submit h2 { margin-top: 0; }

/* Card header row */
.card-header-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }

/* Summary pill */
.summary-pill {
    background: var(--accent-soft); border-radius: 999px; padding: 0.4rem 0.9rem;
    border: 1px solid var(--accent-soft-border); display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8rem;
}
.summary-label { color: var(--text-muted); }
.summary-value { font-weight: 600; font-size: 0.95rem; }

/* Two-column layout */
.layout-two-columns { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr); gap: 1.2rem; }
.column { min-width: 0; }

/* Grid */
.grid { display: grid; gap: 0.9rem; margin-bottom: 0.9rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* Form */
.form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.form-group label { font-size: 0.85rem; font-weight: 500; }
.form-group input, .form-group select, .form-group textarea {
    padding: 0.48rem 0.6rem; border-radius: 0.55rem; border: 1px solid var(--border);
    font-size: 0.9rem; outline: none; transition: border-color .15s ease, box-shadow .15s ease; background: #f9fafb;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--accent); box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18); background: #ffffff;
}
.form-group textarea { resize: vertical; }
.form-group small { font-size: 0.78rem; color: var(--text-muted); }

/* Required star */
.req { color: #e11d48; }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid transparent;
    font-size: 0.85rem; cursor: pointer; text-decoration: none; white-space: nowrap; font-weight: 500;
}
.btn-primary { background: var(--accent); color: #ffffff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-secondary { background: #f9fafb; color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: #eef1f7; }
.btn-success { background: var(--success); color: #ffffff; }
.btn-success:hover { background: #219150; }
.btn-link { background: none; border: none; color: var(--accent); padding: 0.1rem 0.2rem; }
.btn-link:hover { text-decoration: underline; }
.btn-small { font-size: 0.78rem; }

/* Disabled button state */
.btn:disabled,
.btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(20%);
}

/* Mode toggle */
.mode-toggle { display: inline-flex; background: #f3f4ff; border-radius: 999px; padding: 0.18rem; border: 1px solid #d0d4ff; }
.mode-toggle-btn {
    border: none; background: transparent; padding: 0.25rem 0.8rem; border-radius: 999px; font-size: 0.8rem; cursor: pointer; color: var(--text-muted);
}
.mode-toggle-btn.active { background: #ffffff; color: var(--accent); box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15); }

/* Camera / scan modes */
.scan-mode-section { margin-top: 0.9rem; }
.camera-info { margin-bottom: 0.6rem; }
.camera-wrapper { border-radius: 0.75rem; border: 1px dashed #cbd5f5; padding: 0.75rem; background: #f9fafb; }
.camera-view { min-height: 220px; border-radius: 0.6rem; overflow: hidden; }

/* Hide helper */
.hidden { display: none; }

/* Table */
.table-wrapper { margin-top: 0.5rem; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
thead { background: #f3f4ff; }
th, td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border-subtle); text-align: left; }
th { font-weight: 600; }
.no-items-hint { margin-top: 0.4rem; }

/* Misc */
.muted { color: var(--text-muted); font-size: 0.85rem; }
.muted.small { font-size: 0.78rem; }
.form-actions { margin-top: 0.8rem; display: flex; justify-content: flex-end; }

/* Messages */
.message {
    margin-top: 0.6rem; font-size: 0.85rem; padding: 0.45rem 0.65rem; border-radius: 0.55rem; border: 1px solid transparent;
}
.message-success { border-color: var(--success); background: #e8f9f0; color: #1e8449; }
.message-error { border-color: var(--error); background: #fdecea; color: #c0392b; }

/* Footer */
.footer { padding: 0.7rem 1.75rem 1rem; font-size: 0.78rem; color: var(--text-muted); text-align: right; }

/* Responsive */
@media (max-width: 900px) { .layout-two-columns { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
    .topbar { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
    .card { padding: 1.1rem 1.1rem; }
    .main-layout { padding-inline: 1rem; }
}