/* The one place the primary colour is defined: everything primary-coloured below uses var(--dash-primary). */
:root {
    --dash-primary: #4f46e5;
    --dash-primary-ring: color-mix(in srgb, var(--dash-primary) 25%, transparent);
    --dash-muted: #6c757d;
    --field-border-width: 1px;
    --field-border-color: var(--bs-border-color);
    --field-radius: var(--bs-border-radius);
    --field-focus-border: var(--dash-primary);
}

body { background: var(--bs-tertiary-bg); }

.hs-navbar { background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); }
.hs-navbar .navbar-brand { font-weight: 700; color: var(--dash-primary); }
.hs-card { border-radius: 12px; border: 1px solid var(--bs-border-color); }

.btn-primary {
    --bs-btn-bg: var(--dash-primary);
    --bs-btn-border-color: var(--dash-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--dash-primary) 88%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--dash-primary) 88%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--dash-primary) 80%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--dash-primary) 80%, black);
    --bs-btn-disabled-bg: var(--dash-primary);
    --bs-btn-disabled-border-color: var(--dash-primary);
}

/* Fields: one shared look, with a leading icon. */
.form-control, .form-select {
    border: var(--field-border-width) solid var(--field-border-color);
    border-radius: var(--field-radius);
}
.form-control:focus, .form-select:focus {
    border-color: var(--field-focus-border);
    box-shadow: 0 0 0 3px var(--dash-primary-ring);
}
.os-input-icon { position: relative; }
.os-input-icon > i {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--dash-muted); font-size: .95rem; pointer-events: none; z-index: 4;
}
.os-input-icon > input.form-control, .os-input-icon > select.form-select { padding-left: 38px; }

/* Show/hide button inside a password box. */
.os-input-icon > input[type="password"], .os-input-icon > input[data-password-field] { padding-right: 44px; }
.password-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    border: 0; background: transparent; color: var(--dash-muted); padding: 4px 8px; line-height: 1; z-index: 5;
}
.password-toggle:hover, .password-toggle:focus-visible { color: var(--dash-primary); }

.char-counter {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-size: .7rem; color: var(--dash-muted); background: var(--bs-body-bg); padding: 0 4px; pointer-events: none;
}
.os-input-icon > input[data-char-counter] { padding-right: 56px; }

/* Modal dialogs (Elvis structure). */
.msg-content { border: 0; border-radius: 14px; }
.msg-header { border-bottom: 1px solid var(--bs-border-color); }
.msg-title { font-size: 1.05rem; font-weight: 700; margin: 0; }
.msg-header-icon { color: var(--dash-primary); margin-right: 6px; }
.msg-footer { border-top: 1px solid var(--bs-border-color); }

.btn-modal-confirm {
    background: var(--dash-primary); border-color: var(--dash-primary); color: #fff;
}
.btn-modal-confirm:hover { background: color-mix(in srgb, var(--dash-primary) 88%, black); color: #fff; }
.btn-modal-cancel { background: transparent; border: 1px solid var(--bs-border-color); color: var(--bs-body-color); }
.btn-modal-cancel:hover { border-color: var(--dash-primary); color: var(--dash-primary); }
.btn-modal-delete { background: var(--bs-danger); border-color: var(--bs-danger); color: #fff; }

/* Environment tabs. */
.hs-tabs .nav-link { color: var(--bs-body-color); font-weight: 600; }
.hs-tabs .nav-link.active { color: var(--dash-primary); border-bottom-color: var(--bs-body-bg); }
.hs-tab-card { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; }

.btn-outline-dash-primary {
    --bs-btn-color: var(--dash-primary);
    --bs-btn-border-color: var(--dash-primary);
    --bs-btn-hover-bg: var(--dash-primary);
    --bs-btn-hover-border-color: var(--dash-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--dash-primary);
    --bs-btn-active-border-color: var(--dash-primary);
    --bs-btn-active-color: #fff;
}

/* Read-only code blocks (the project file shown on the Portals page). */
.hs-code { font-family: var(--bs-font-monospace); font-size: .8rem; resize: vertical; }