/* ============================================================
   BillPro — Design System & Core Styles
   Giao diện tiếng Việt, phong cách fintech hiện đại.
   Font: Be Vietnam Pro | Palette: Indigo/Slate
   ============================================================ */

:root {
    --primary: #4f46e5;
    --primary-600: #4f46e5;
    --primary-700: #4338ca;
    --primary-500: #6366f1;
    --violet: #7c3aed;
    --ring: rgba(99, 102, 241, 0.16);

    --success: #059669;
    --success-soft: #d1fae5;
    --danger: #dc2626;
    --danger-soft: #fee2e2;
    --warning: #d97706;

    --bg: #f1f4f9;
    --surface: #ffffff;
    --border: #e5e9f2;
    --border-strong: #d4daea;

    --text-1: #0f172a;
    --text-2: #475569;
    --text-3: #94a3b8;

    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 9px;

    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 32px -18px rgba(15, 23, 42, 0.18);
    --shadow-pop: 0 4px 12px -2px rgba(79, 70, 229, 0.35);
    --grad-primary: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    --grad-success: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-1);
    background:
        radial-gradient(1100px 520px at 85% -10%, rgba(124, 58, 237, 0.09), transparent 60%),
        radial-gradient(900px 480px at -10% 8%, rgba(79, 70, 229, 0.09), transparent 55%),
        var(--bg);
    min-height: 100vh;
}

img { max-width: 100%; }

.hidden { display: none !important; }

/* ------------------------------------------------ Topbar / user */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: none;          /* auth-gate.js bật lên khi đã đăng nhập */
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 22px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
    font-size: 18px;
    color: var(--text-1);
    text-decoration: none;
    letter-spacing: -0.2px;
}

.topbar-brand i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--grad-primary);
    color: #fff;
    font-size: 18px;
    box-shadow: var(--shadow-pop);
}

.brand-accent {
    background: var(--grad-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-admin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-700);
    background: #eef2ff;
    border: 1px solid #dbe2ff;
    text-decoration: none;
    transition: all 0.18s ease;
}

.topbar-admin:hover {
    background: #e2e7ff;
    transform: translateY(-1px);
}

.user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 14px 5px 6px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.user-avatar {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--grad-primary);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

.user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.user-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-1);
}

.role-badge {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.role-admin { color: var(--violet); }
.role-user { color: var(--text-3); }

.topbar-logout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
}

.topbar-logout:hover {
    color: var(--danger);
    border-color: #f3c1c1;
    background: #fff5f5;
}

/* ---------------------------------------------------- Container */
.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 20px 64px;
}

/* ------------------------------------------------------- Header */
.header {
    text-align: center;
    margin-bottom: 26px;
}

.header h1 {
    font-size: clamp(22px, 3.4vw, 30px);
    font-weight: 800;
    letter-spacing: -0.4px;
    color: var(--text-1);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.header h1 i {
    color: var(--primary);
}

.header p {
    margin-top: 6px;
    color: var(--text-2);
    font-size: 14.5px;
}

/* --------------------------------------------------------- Card */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-card);
}

.card h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--text-1);
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.card h2 i {
    color: var(--primary);
    font-size: 19px;
}

/* ------------------------------------------------- Form layout */
.content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.form-content-section { min-width: 0; }

.preview-section {
    position: sticky;
    top: 78px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.form-content { min-width: 0; }

/* ------------------------------------------------- Form fields */
.form-group { margin-bottom: 16px; }

.form-group label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 7px;
}

.form-group label i {
    color: var(--primary-500);
    font-size: 15px;
}

.form-control {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--text-1);
    background: #fbfcfe;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.form-control::placeholder { color: var(--text-3); }

.form-control:focus {
    border-color: var(--primary-500);
    background: #fff;
    box-shadow: 0 0 0 4px var(--ring);
}

.form-control:disabled,
.form-control[readonly] {
    background: #f4f6fa;
    color: var(--text-3);
    cursor: not-allowed;
}

select.form-control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

textarea.form-control {
    height: auto;
    min-height: 88px;
    padding: 11px 14px;
    resize: vertical;
    line-height: 1.55;
}

/* trạng thái lỗi (JS thêm .is-invalid) */
.form-control.is-invalid {
    border-color: var(--danger) !important;
    background: #fffafa;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.10) !important;
    animation: shake 0.28s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* radio / checkbox bên trong form (nếu có) */
.form-group input[type="radio"],
.form-group input[type="checkbox"] {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
    margin-right: 6px;
}

/* ------------------------------------------------------ Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    height: 46px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0.1px;
    border: 1.5px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.18s ease;
    user-select: none;
}

.btn i { font-size: 17px; }

.btn:disabled,
.btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--ring);
}

.btn-block { display: flex; width: 100%; }

.btn-primary {
    color: #fff;
    background: var(--grad-primary);
    box-shadow: var(--shadow-pop);
}

.btn-primary:hover:not(:disabled) {
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -4px rgba(79, 70, 229, 0.45);
}

.btn-success {
    color: #fff;
    background: var(--grad-success);
    box-shadow: 0 4px 12px -2px rgba(5, 150, 105, 0.35);
}

.btn-success:hover:not(:disabled) {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.btn-secondary {
    color: var(--text-2);
    background: var(--surface);
    border-color: var(--border-strong);
}

.btn-secondary:hover:not(:disabled) {
    border-color: var(--primary-500);
    color: var(--primary-700);
    background: #f8f9ff;
}

.btn-default {
    color: var(--text-2);
    background: #eef1f7;
}

.btn-default:hover:not(:disabled) {
    background: #e3e8f2;
    color: var(--text-1);
}

/* nút tải xuống do JS tạo */
.download-btn { margin-top: 12px; }

/* ---------------------------------------------- Preview / result */
.preview-container {
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background:
        linear-gradient(180deg, #fafbfe 0%, #f6f8fc 100%);
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    overflow: hidden;
}

.preview-placeholder {
    text-align: center;
    color: var(--text-3);
    padding: 30px 16px;
}

.preview-placeholder i {
    font-size: 52px !important;
    margin: 0 auto 14px;
    color: #c3cad9;
    display: block;
}

.preview-placeholder p {
    font-size: 14px;
    max-width: 260px;
    margin: 0 auto;
}

.preview-image {
    max-width: 100%;
    max-height: 640px;
    width: auto;
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 28px -12px rgba(15, 23, 42, 0.35);
    background: #fff;
}

.result-section {
    border-color: #bfe8d9;
    background: linear-gradient(180deg, #ffffff 0%, #f4fdf9 100%);
    animation: fadeUp 0.35s ease;
}

.result-section h2 i { color: var(--success); }

.result-image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: #fff;
    box-shadow: 0 6px 20px -10px rgba(15, 23, 42, 0.25);
}

/* ------------------------------------------------------ Loading */
.loading {
    text-align: center;
    padding: 26px 16px;
    color: var(--text-2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.loading-spinner {
    width: 42px;
    height: 42px;
    margin: 0 auto 12px;
    border-radius: 50%;
    border: 4px solid #e2e7f3;
    border-top-color: var(--primary);
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading p { font-size: 14px; font-weight: 600; }

/* ------------------------------------------------- Alert (toast) */
.alert {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    max-width: min(560px, calc(100vw - 32px));
    padding: 13px 20px 13px 18px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-1);
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--border);
    box-shadow: 0 14px 40px -12px rgba(15, 23, 42, 0.35);
    animation: toastIn 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.alert::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 4px;
    background: var(--primary);
}

.alert-success::before { background: var(--success); }
.alert-error::before { background: var(--danger); }

.alert-success { border-color: #bfe8d9; color: #065f46; }
.alert-error { border-color: #f3c1c1; color: #991b1b; }

@keyframes toastIn {
    from { opacity: 0; transform: translate(-50%, -14px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------------------------------------------------- Utilities */
.mt-1 { margin-top: 6px; }
.mt-2 { margin-top: 10px; }
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 22px; }
.mt-5 { margin-top: 30px; }
.mb-1 { margin-bottom: 6px; }
.mb-2 { margin-bottom: 10px; }
.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 22px; }
.mb-5 { margin-bottom: 30px; }

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }

/* --------------------------------------------------- Animations */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.form-content-section,
.preview-section {
    animation: fadeUp 0.3s ease;
}

/* --------------------------------------------------- Responsive */
@media (max-width: 1024px) {
    .content {
        grid-template-columns: 1fr;
    }
    .preview-section {
        position: static;
    }
}

@media (max-width: 640px) {
    .container { padding: 18px 12px 48px; }
    .card { padding: 18px 16px; border-radius: 15px; }
    .topbar { padding: 9px 12px; }
    .topbar-logout span { display: none; }
    .topbar-admin { padding: 7px 10px; }
    .btn { height: 44px; }
}

@media print {
    .topbar, .btn, .loading, .alert { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none; }
}