:root {
    --brand: #4f46e5;
    --brand-dark: #3730a3;
    --sidebar-bg: #111827;
    --sidebar-text: #cbd5e1;
    --page-bg: #f4f6fb;
}

body { background: var(--page-bg); font-size: .925rem; }

.app { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar {
    width: 240px; flex-shrink: 0; background: var(--sidebar-bg); color: var(--sidebar-text);
    display: flex; flex-direction: column; padding: 1rem .75rem; position: sticky; top: 0; height: 100vh;
}
.sidebar .brand { font-size: 1.3rem; font-weight: 700; color: #fff; padding: .25rem .75rem 0; }
.sidebar .brand i { color: #818cf8; }
.sidebar .role-chip {
    display: inline-block; margin: .25rem .75rem 1.25rem; font-size: .7rem; letter-spacing: .05em;
    text-transform: uppercase; color: #a5b4fc;
}
.sidebar .nav-item {
    display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .75rem; margin-bottom: 2px;
    color: var(--sidebar-text); text-decoration: none; border-radius: .5rem; border: 0; background: none; text-align: left;
}
.sidebar .nav-item:hover { background: #1f2937; color: #fff; }
.sidebar .nav-item.active { background: var(--brand); color: #fff; }

/* Content */
.content { flex: 1; min-width: 0; padding: 1.25rem 1.75rem 3rem; }
.topbar { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.page-title { font-size: 1.35rem; font-weight: 600; margin: 0; }

.card { border: 0; border-radius: .75rem; box-shadow: 0 1px 3px rgba(16, 24, 40, .08); }
.card-header { background: #fff; border-bottom: 1px solid #eef0f4; font-weight: 600; border-radius: .75rem .75rem 0 0 !important; }

.stat { padding: 1.1rem 1.25rem; }
.stat .label { color: #6b7280; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.stat .value { font-size: 1.6rem; font-weight: 700; }
.stat .icon { width: 44px; height: 44px; border-radius: .6rem; display: grid; place-items: center; font-size: 1.3rem; }

.table { margin-bottom: 0; }
.table th { font-size: .75rem; text-transform: uppercase; color: #6b7280; font-weight: 600; white-space: nowrap; }
.table td { vertical-align: middle; }

.btn-primary { background: var(--brand); border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

.form-section { font-weight: 600; color: var(--brand); margin: 1.25rem 0 .75rem; padding-bottom: .35rem; border-bottom: 1px solid #e5e7eb; }
.form-section:first-child { margin-top: 0; }
.form-label { font-weight: 500; font-size: .85rem; margin-bottom: .25rem; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; }
.key-box { background: #111827; color: #a7f3d0; padding: .75rem 1rem; border-radius: .5rem; word-break: break-all; }
pre.code { background: #111827; color: #e5e7eb; padding: 1rem; border-radius: .5rem; font-size: .8rem; white-space: pre-wrap; }

.step { display: flex; gap: .75rem; align-items: flex-start; }
.step-num {
    width: 28px; height: 28px; border-radius: 50%; background: #e0e7ff; color: var(--brand);
    font-weight: 700; display: grid; place-items: center; flex-shrink: 0;
}
.step.done .step-num { background: #16a34a; color: #fff; }

.btn-link-plain { cursor: pointer; }

/* Login page */
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, #312e81, #4f46e5); padding: 1rem; }
.login-card { width: 100%; max-width: 400px; }

/* Mobile */
@media (max-width: 991px) {
    .sidebar { position: fixed; left: -260px; z-index: 1000; transition: left .2s; }
    .sidebar.open { left: 0; }
    .content { padding: 1rem; }
}

/* Hide the error box when there are no errors */
.validation-summary-valid { display: none; }
.field-validation-error { color: #dc3545; font-size: .8rem; }
.input-validation-error { border-color: #dc3545; }

/* UAT mode banner */
.uat-banner { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; border-radius: .5rem; padding: .5rem .9rem; margin-bottom: 1rem; font-size: .85rem; }
.env-switch .btn { font-weight: 600; }

/* API document */
.doc h3 { font-size: 1.2rem; font-weight: 700; color: var(--brand); margin-bottom: .9rem; }
.doc h5 { font-size: 1rem; font-weight: 600; margin-top: .5rem; }
.api-endpoint { background: #eef2ff; border-radius: .5rem; padding: .5rem .75rem; margin-bottom: .75rem; }
.api-params td, .api-params th { font-size: .82rem; }
.doc-toc a { text-decoration: none; }

/* "Download PDF" = print: only the document, one section per page */
@media print {
    .sidebar, .topbar, .uat-banner, .doc-actions, .doc-nav, .alert-dismissible { display: none !important; }
    body, .app { background: #fff; display: block; }
    .content { padding: 0; }
    .doc { width: 100% !important; max-width: 100% !important; flex: none; }
    .card { box-shadow: none; border: 1px solid #ddd; }
    section.card { break-before: page; }
    pre.code { background: #f5f5f5 !important; color: #111 !important; border: 1px solid #ddd; break-inside: avoid; }
    a { color: inherit; text-decoration: none; }
}

/* Status badges inside flex rows (e.g. merchant activity list): keep their natural size, never stretch */
.d-flex > .badge, .d-flex > span > .badge { flex-shrink: 0; align-self: center; white-space: nowrap; }
.list-group-item.d-flex { gap: .75rem; align-items: center; }