/* ─── Brand font ─────────────────────────────────────────────────────────── */

@font-face {
    font-family: 'NormalBrand';
    src: url('brand/normal-font.ttf') format('truetype');
    font-display: swap;
}

/* ─── Design tokens (Normal RPA dark theme, matching the RPA Dashboard) ──── */

:root, [data-bs-theme="dark"] {
    /* Gray-blue palette sampled from the RPA Dashboard: page #0e1117, surfaces #1d2229 */
    --psb-bg: #0e1117;
    --psb-card-bg: #1d2229;
    --psb-card-bg-hover: #232a33;
    --psb-border: #2c343f;
    --psb-text: #f4f5f7;
    --psb-text-muted: #99a1ad;

    --psb-accent: #2dd4bf;
    --psb-accent-hover: #14b8a6;
    --psb-accent-dim: rgba(45, 212, 191, 0.12);

    --psb-success: #4ade80;
    --psb-warning: #fbbf24;
    --psb-danger: #f87171;
    --psb-info: #2dd4bf;

    --psb-sidebar-bg: #1d2229;
    --psb-sidebar-hover: #242c35;
    --psb-sidebar-active: #2b343f;
    --psb-sidebar-text: #99a1ad;
    --psb-sidebar-text-active: #f4f5f7;

    --psb-radius: 0.625rem;
    --psb-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);

    --bs-body-bg: #0e1117;
    --bs-body-color: #f4f5f7;
    --bs-border-color: #2c343f;
}

/* Global ~20% scale-down: everything is rem-based, so shrink the root size. */
html { font-size: 13px; }

html, body {
    font-family: 'Inter', 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: var(--psb-bg);
    color: var(--psb-text);
}

h1 {
    font-family: 'NormalBrand', 'Segoe UI', sans-serif;
    font-size: 1.625rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    margin-bottom: 1rem;
}
h5, h6 { font-weight: 600; }

a, .btn-link { color: var(--psb-accent); text-decoration: none; }
a:hover { color: var(--psb-accent-hover); }

h1:focus { outline: none; }

.content { padding-top: 1.1rem; }

.text-muted { color: var(--psb-text-muted) !important; }

/* ─── Bootstrap re-skin (dark) ───────────────────────────────────────────── */

.btn { border-radius: 0.5rem; font-weight: 500; }

.btn-primary {
    background-color: var(--psb-accent);
    border-color: var(--psb-accent);
    color: #06211d;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--psb-accent-hover) !important;
    border-color: var(--psb-accent-hover) !important;
    color: #06211d !important;
}
.btn-primary:disabled {
    background-color: var(--psb-accent);
    border-color: var(--psb-accent);
    color: #06211d;
    opacity: 0.5;
}

.btn-outline-secondary {
    color: var(--psb-text-muted);
    border-color: var(--psb-border);
}
.btn-outline-secondary:hover {
    background-color: var(--psb-card-bg-hover);
    border-color: var(--psb-text-muted);
    color: var(--psb-text);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem var(--psb-accent-dim);
}

.card {
    border: 1px solid var(--psb-border);
    border-radius: var(--psb-radius);
    box-shadow: var(--psb-shadow);
    background: var(--psb-card-bg);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--psb-border);
    font-weight: 600;
    padding: 0.875rem 1.25rem;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: #151a21;
    --bs-table-striped-color: var(--psb-text);
    --bs-table-hover-bg: var(--psb-card-bg-hover);
    --bs-table-hover-color: var(--psb-text);
    border-color: var(--psb-border);
    color: var(--psb-text);
}
.table thead th {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--psb-text-muted);
    border-bottom: 1px solid var(--psb-border);
}
.table td { border-color: var(--psb-border); }

.form-control, .form-select {
    border-radius: 0.5rem;
    background-color: #161b22;
    border-color: var(--psb-border);
    color: var(--psb-text);
}
.form-control:focus, .form-select:focus {
    background-color: #161b22;
    border-color: var(--psb-accent);
    color: var(--psb-text);
    box-shadow: 0 0 0 0.2rem var(--psb-accent-dim);
}
.form-control::placeholder { color: #6f7886; }
.input-group-text {
    background-color: #232a33;
    border-color: var(--psb-border);
    color: var(--psb-text-muted);
}
.form-text { color: var(--psb-text-muted); }

/* Bootstrap 5.3 handles the dark base itself via data-bs-theme="dark" on <html>.
   These rules stay to bind components to the --psb-* brand tokens rather than
   Bootstrap's generic dark palette. */

.form-select {
    /* same chevron as Bootstrap's, recolored from #343a40 to a light gray */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a8a8b0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.form-control:disabled, .form-control[readonly] {
    background-color: #1d2229;
    color: var(--psb-text-muted);
}

.form-check-input {
    background-color: #161b22;
    border-color: #4d5765;
}
.form-check-input:checked {
    background-color: var(--psb-accent);
    border-color: var(--psb-accent);
}
.form-check-input:checked[type=checkbox] {
    /* Bootstrap's checkmark recolored from white to dark for contrast on teal */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2306211d' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.list-group-item {
    background-color: transparent;
    color: var(--psb-text);
    border-color: var(--psb-border);
}

.nav-tabs { border-bottom: 1px solid var(--psb-border); }
.nav-tabs .nav-link {
    color: var(--psb-text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-weight: 500;
    margin-bottom: -1px;
}
.nav-tabs .nav-link:hover { color: var(--psb-text); border-color: transparent transparent var(--psb-border); }
.nav-tabs .nav-link.active {
    color: var(--psb-accent);
    background: transparent;
    border-color: transparent transparent var(--psb-accent);
}

.text-danger  { color: var(--psb-danger) !important; }
.text-success { color: var(--psb-success) !important; }
.text-warning { color: var(--psb-warning) !important; }
.text-info    { color: var(--psb-info) !important; }

.btn-outline-primary {
    color: var(--psb-accent);
    border-color: var(--psb-accent);
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
    background-color: var(--psb-accent) !important;
    border-color: var(--psb-accent) !important;
    color: #06211d !important;
}

.badge { font-weight: 500; border-radius: 0.375rem; padding: 0.35em 0.6em; }
.badge.bg-success { background-color: rgba(74, 222, 128, 0.15) !important; color: var(--psb-success); }
.badge.bg-danger { background-color: rgba(248, 113, 113, 0.15) !important; color: var(--psb-danger); }
.badge.bg-warning { background-color: rgba(251, 191, 36, 0.15) !important; color: var(--psb-warning) !important; }
.badge.bg-info { background-color: var(--psb-accent-dim) !important; color: var(--psb-accent); }
.badge.bg-secondary { background-color: #2c343f !important; color: var(--psb-text-muted); }

.alert { border-radius: var(--psb-radius); }
.alert-success { background-color: rgba(74, 222, 128, 0.08); border-color: rgba(74, 222, 128, 0.35); color: var(--psb-success); }
.alert-danger { background-color: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.35); color: var(--psb-danger); }
.alert-warning { background-color: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.35); color: var(--psb-warning); }
.alert-info { background-color: var(--psb-accent-dim); border-color: rgba(45, 212, 191, 0.35); color: var(--psb-accent); }

code { color: var(--psb-accent); background: rgba(45, 212, 191, 0.06); padding: 0.1em 0.35em; border-radius: 0.3em; font-size: 0.85em; }

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--psb-success); }
.invalid { outline: 1px solid var(--psb-danger); }
.validation-message { color: var(--psb-danger); font-size: 0.875rem; }

/* ─── Status pills (run states, dashboard style) ─────────────────────────── */

.psb-state { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8125rem; font-weight: 600; padding: 0.25rem 0.625rem; border-radius: 999px; }
.psb-state::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.psb-state-pending  { color: var(--psb-warning); background: rgba(251, 191, 36, 0.12); }
.psb-state-running  { color: var(--psb-accent);  background: var(--psb-accent-dim); }
.psb-state-successful { color: var(--psb-success); background: rgba(74, 222, 128, 0.12); }
.psb-state-faulted  { color: var(--psb-danger);  background: rgba(248, 113, 113, 0.12); }
.psb-state-stopped, .psb-state-unknown { color: var(--psb-text-muted); background: #2c343f; }
.psb-state-running::before { animation: psb-pulse 1.2s ease-in-out infinite; }

@keyframes psb-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ─── Process button cards ───────────────────────────────────────────────── */

.psb-button-card {
    border: 1px solid var(--psb-border);
    border-radius: var(--psb-radius);
    background: var(--psb-card-bg);
    box-shadow: var(--psb-shadow);
    transition: border-color 0.15s ease, background-color 0.15s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.psb-button-card:hover {
    background: var(--psb-card-bg-hover);
    border-color: #3a434f;
}
.psb-button-card .psb-card-body { padding: 1.125rem 1.25rem; flex: 1; }
.psb-button-card .psb-card-footer {
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--psb-border);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.psb-button-icon {
    width: 2.5rem; height: 2.5rem;
    border-radius: 0.625rem;
    background: var(--psb-accent-dim);
    color: var(--psb-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
}

/* ─── Environment badges (deterministic palette by name hash) ────────────── */

.psb-env-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}
.psb-env-badge::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.psb-env-badge.env-0 { color: #5eead4; background: rgba(45, 212, 191, 0.12); }
.psb-env-badge.env-1 { color: #86efac; background: rgba(74, 222, 128, 0.12); }
.psb-env-badge.env-2 { color: #fcd34d; background: rgba(251, 191, 36, 0.12); }
.psb-env-badge.env-3 { color: #c4b5fd; background: rgba(167, 139, 250, 0.14); }
.psb-env-badge.env-4 { color: #fda4af; background: rgba(251, 113, 133, 0.14); }

/* ─── Page header ────────────────────────────────────────────────────────── */

.psb-page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.psb-page-header h1 { margin-bottom: 0.125rem; }
.psb-page-header .psb-subtitle { color: var(--psb-text-muted); font-size: 0.9rem; }

/* ─── Auth pages (login / onboard / request access) ──────────────────────── */

.psb-auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(80rem 40rem at 70% -10%, rgba(45, 212, 191, 0.07), transparent), #0e1117;
    padding: 1.5rem;
}
.psb-auth-card {
    background: var(--psb-card-bg);
    border: 1px solid var(--psb-border);
    border-radius: 1rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    padding: 2.25rem 2.5rem;
    width: 100%;
    max-width: 28rem;
}
.psb-auth-card .row > [class^="col-"] { width: 100%; }
.psb-auth-card h2 { font-size: 1rem; font-weight: 500; color: var(--psb-text-muted); }
.psb-auth-card h1 { margin-bottom: 1.25rem; }
.psb-auth-brand {
    display: flex; align-items: center; gap: 0.75rem;
    font-weight: 600; font-size: 1rem;
    margin-bottom: 1.5rem; color: var(--psb-text);
}
.psb-auth-brand .psb-logo-img { height: 2.5rem; }

/* ─── Modal (button parameter dialog, US-8) ──────────────────────────────── */

.modal-content {
    background: var(--psb-card-bg);
    border: 1px solid var(--psb-border);
    border-radius: var(--psb-radius);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
.modal-header, .modal-footer {
    border-color: var(--psb-border);
}
.modal-title { font-weight: 600; }
.modal-backdrop.show { opacity: 0.65; }

/* ─── Misc ───────────────────────────────────────────────────────────────── */

.darker-border-checkbox.form-check-input { border-color: #4d5765; }

#blazor-error-ui {
    background: #2a1d05;
    border-top: 2px solid var(--psb-warning);
    color: var(--psb-text);
    bottom: 0;
    box-shadow: 0 -1px 6px rgba(0,0,0,0.4);
    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: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: rgba(248, 113, 113, 0.15);
    border: 1px solid var(--psb-danger);
    padding: 1rem;
    color: var(--psb-danger);
    border-radius: var(--psb-radius);
}

.blazor-error-boundary::after { content: "An error has occurred."; }