/* ============================================================
   nformal Tools — app styles
   Built on tokens.css (nformal Design System). Custom property
   names below are kept stable so every template/partial CSS file
   that already references them (--primary-color, --accent-color,
   etc.) picks up the brand palette without further edits.
   ============================================================ */

:root {
    --primary-color: var(--gray-700);
    --secondary-color: var(--slate);
    --accent-color: var(--green-spring);
    --accent-color-strong: var(--green-spring-600);
    --background-color: var(--surface-page);
    --text-color: var(--text-body);
    --text-color-dark: var(--text-strong);
    --error-color: var(--status-danger);
    --button-hover-color: var(--green-spring-600);
    --tile-shadow: rgba(14, 20, 18, 0.09);
    --tile-hover-background: var(--white);
    --header-border-color: var(--ink-3);
    --light-grey: var(--gray-500);
}

.login-form-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
    width: 100%;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-top: var(--space-4);
    min-width: 340px;
    max-width: 400px;
}

.login-form label {
    font-weight: var(--w-medium);
    margin-bottom: var(--space-2);
}

.login-form input[type="text"],
.login-form input[type="password"] {
    padding: var(--space-3) var(--space-4);
    font-size: 1.1rem;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-default);
    background: var(--gray-50);
    margin-bottom: var(--space-1);
    box-sizing: border-box;
    width: 100%;
    font-family: var(--font-text);
    color: var(--text-strong);
}

.login-form input[type="text"]:focus,
.login-form input[type="password"]:focus {
    outline: none;
    border-color: var(--accent-color-strong);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(47, 185, 107, 0.16);
}

.login-form input[type="submit"] {
    background: var(--accent-color);
    color: var(--ink);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-3) 0;
    font-size: 1.1rem;
    font-weight: var(--w-medium);
    cursor: pointer;
    transition: background var(--dur-base) var(--ease-out);
    margin-top: var(--space-2);
}

.login-form input[type="submit"]:hover {
    background: var(--button-hover-color);
}

body {
    font-family: var(--font-text);
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--text-color-dark);
    letter-spacing: var(--tracking-snug);
    font-weight: var(--w-medium);
}

.admin-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.admin-setting-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 16px;
    margin-bottom: 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
}

.admin-setting-card h5 { margin: 0 0 4px; }

.admin-setting-control { display: flex; align-items: center; gap: 10px; }

.admin-setting-control select { width: 160px; }

.admin-actions .btn {
    margin-right: 4px;
    margin-bottom: 4px;
}

.results-table td code {
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 480px;
    display: inline-block;
}

.impersonation-banner {
    background-color: var(--status-warning);
    color: var(--ink);
    text-align: center;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: var(--w-medium);
}

.impersonation-banner a {
    color: var(--ink);
    text-decoration: underline;
}

.header {
    background-color: var(--ink);
    color: var(--text-on-dark);
    padding: var(--space-3) 0;
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--header-border-color);
    max-height: 150px;
    overflow: hidden;
}

.header .row {
    height: 100%;
}

.header .logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    padding-left: 30px;
}

.tooling-lockup {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tooling-lockup-wordmark {
    height: 30px;
    width: auto;
    display: block;
}

.tooling-lockup-div {
    width: 1.5px;
    height: 27px;
    background: currentColor;
    opacity: 0.28;
}

.tooling-lockup-word {
    font-family: var(--font-display);
    font-weight: var(--w-medium);
    font-size: 29px;
    letter-spacing: -0.022em;
    line-height: 1;
    color: var(--white);
    display: flex;
    align-items: baseline;
    white-space: nowrap;
}

.tooling-lockup-word img {
    height: 20px;
    width: auto;
    align-self: center;
    position: relative;
    top: 0.045em;
}

a:hover {
    text-decoration: none;
    color: unset;
}

/* The page's width: wide enough to read on most pages; boards widen it (body.nira-wide). */
:root { --page-max: 1400px; }
body.nira-wide { --page-max: 2560px; }

.container {
    width: 100%;
    max-width: var(--page-max);
    padding: 0 20px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* This will make all tiles stretch to the height of the tallest */

}

.row {

    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: space-between;
    flex-direction: row;
    align-items: baseline;
    width: 100%;
}


.input-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.input-row {
    display: flex;
    align-items: center; /* Aligns items vertically in the center */
    gap: 10px; /* Provides space between items */
}

.input-row label {
    margin-bottom: 0; /* Overrides any bottom margin on labels */
}

/* You can also ensure inputs and selects align well */
.input-row input[type="text"],
.input-row select {
    height: 38px; /* Adjust height as needed */
    padding: 0 10px;
}

/* This ensures the button matches the height of inputs/selects */
.search-form button {
    height: 38px; /* Should match input and select height */
    padding: 0 20px; /* Adjust padding to your preference */
}

.col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    padding: 15px;
    box-sizing: border-box;
}

.tile-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

.tile {
    flex: 1 1 auto; /* Adjust based on your layout requirements */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    padding: var(--space-5);
    margin: var(--space-3) 0;
    background-color: var(--tile-hover-background);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--primary-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    color: var(--text-color-dark);
    font-weight: var(--w-medium);
    font-size: large;
    font-family: var(--font-display);
    transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
    height: 150px;
}

.tile:hover {
    border-left: 4px solid var(--accent-color-strong);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.tile-icon {
    display: block;
    width: 48px;
    height: 48px;
    color: var(--accent-color-strong);
    margin-bottom: 15px;
    position: absolute;
    top: 20px;
    right: 20px;
}

.tile-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.tile h4 {
    margin: 10px 0;
    padding-right: 56px;
}

.tile p {
    font-size: 16px;
    font-family: var(--font-text);
    font-weight: var(--w-regular);
}

input[type="text"],
input[type="number"],
select,
textarea,
button {
    padding: 8px 12px;
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-md);
    font-family: var(--font-text);
    transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent-color-strong);
    box-shadow: 0 0 0 3px rgba(47, 185, 107, 0.16);
}

textarea {
    resize: vertical;
    height: 200px;
    width: 100%;
}

button {
    background-color: var(--accent-color);
    color: var(--ink);
    border: none;
    cursor: pointer;
    height: 38px;
    font-weight: var(--w-medium);
}

button:hover {
    background-color: var(--button-hover-color);
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-family: var(--font-text);
}

th, td {
    border: 1px solid var(--border-subtle);
    padding: 10px 8px;
    text-align: left;
}

th {
    background-color: var(--gray-100);
    color: var(--text-strong);
    font-weight: var(--w-medium);
}

tr:nth-child(even) {
    background-color: var(--gray-50);
}

.nav-link {
    font-weight: var(--w-medium);
    font-size: 18px;
    font-family: var(--font-display);
}

.nav-link:hover {
    color: var(--accent-color-strong);
}

label {
    display: block;
    color: var(--text-color-dark);
    font-family: var(--font-text);
}

.error {
    color: var(--error-color);
}

pre.language-json,
code.language-json {
    background-color: var(--background-color);
    color: var(--text-color);
}

.box {
    background-color: var(--white);
    color: var(--text-color-dark);
    border-left: 4px solid var(--accent-color-strong);
    padding: 20px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}

a.disabled {
    color: var(--text-muted);
    pointer-events: none;
    cursor: default;
}

.managed-connections {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.managed-connections label {
    font-weight: bold;
    display: block;
    margin-bottom: 4px;
}

.managed-connection-btn {
    margin-right: 8px;
    margin-bottom: 8px;
}

.managed-connections-divider {
    margin: 12px 0 0;
    font-size: 13px;
}

.code-toolbar {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 10px;
}

@media screen and (max-width: 768px) {
    .input-row label {
        margin-bottom: 3px;
    }
}

.logo a {
    width: 100px;
}

.instructions p strong {
    color: var(--accent-color-strong); /* Using accent color for strong text */
}

label img {
    max-width: 100px;
}

.main-container {
    width: 100%;
}

.welcome-message {
    width: 100%;
}

/* ============================================================
   Bootstrap component overrides — templates use raw Bootstrap
   classes directly, so reskin them here rather than in templates.
   ============================================================ */

.btn {
    border-radius: var(--radius-md);
    font-family: var(--font-text);
    font-weight: var(--w-medium);
    letter-spacing: 0.01em;
    transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.btn:active {
    transform: translateY(0.5px);
}

.btn-primary,
.btn-success {
    background-color: var(--green-spring);
    border-color: var(--green-spring);
    color: var(--ink);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
    background-color: var(--green-spring-600);
    border-color: var(--green-spring-600);
    color: var(--ink);
}

.btn-danger {
    background-color: var(--status-danger);
    border-color: var(--status-danger);
    color: var(--white);
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #c94a39;
    border-color: #c94a39;
    color: var(--white);
}

.btn-secondary {
    background-color: transparent;
    border-color: var(--border-strong);
    color: var(--ink);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--gray-100);
    border-color: var(--border-strong);
    color: var(--ink);
}

.btn-warning {
    background-color: var(--status-warning);
    border-color: var(--status-warning);
    color: var(--ink);
}

.btn-info {
    background-color: var(--slate);
    border-color: var(--slate);
    color: var(--white);
}

.form-control {
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-default);
    font-family: var(--font-text);
    color: var(--text-strong);
}

.form-control:focus {
    border-color: var(--green-spring-600);
    box-shadow: 0 0 0 3px rgba(47, 185, 107, 0.16);
}

.card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-xs);
}

.modal-content {
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: var(--shadow-lg);
    font-family: var(--font-text);
}

.modal-header {
    border-bottom: 1px solid var(--border-subtle);
}

.modal-header .modal-title {
    font-family: var(--font-display);
    font-weight: var(--w-medium);
}

.modal-footer {
    border-top: 1px solid var(--border-subtle);
}

.table {
    font-family: var(--font-text);
}

.table thead th {
    background-color: var(--gray-100);
    border-color: var(--border-subtle);
    font-weight: var(--w-medium);
}

.badge-primary,
.badge-success {
    background-color: var(--green-spring-100);
    color: var(--green-spring-700);
}

.badge-danger {
    background-color: #FBE3DE;
    color: var(--status-danger);
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: var(--radius-md) !important;
    border-color: var(--border-default) !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus {
    border-color: var(--green-spring-600) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--green-spring) !important;
    color: var(--ink) !important;
}

/* vue-select overrides, shared by any page that needs a branded searchable
   dropdown instead of a native <select> -- e.g. templates/partials/
   eightfold_connect_form.html, used from both eightfold.html and
   api_explorer.html. Page-specific v-select instances (.ef-vselect,
   .schema-vselect) keep their own near-identical block since they predate
   this one; new usages should prefer .brand-vselect over duplicating it. */
.brand-vselect .vs__dropdown-toggle {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 3px 6px;
    background: var(--white);
    min-height: 38px;
}

.brand-vselect.vs--open .vs__dropdown-toggle {
    border-color: var(--green-spring-600);
    box-shadow: 0 0 0 2px rgba(47, 185, 107, 0.2);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.brand-vselect .vs__dropdown-menu {
    border: 1px solid var(--green-spring-600);
    border-top: none;
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    max-height: 280px;
    font-size: 13px;
}

.brand-vselect .vs__dropdown-option--highlight {
    background: var(--green-spring);
    color: var(--ink);
}

.brand-vselect .vs__selected {
    color: var(--text-strong);
}

.brand-vselect .vs__clear svg,
.brand-vselect .vs__open-indicator {
    fill: var(--gray-600);
}

.brand-vselect.vs--disabled .vs__dropdown-toggle {
    background: var(--gray-100);
    cursor: not-allowed;
}

.brand-vselect .vs__search {
    font-size: 13px;
}

.dropdown-menu {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-md);
    font-family: var(--font-text);
    padding: var(--space-2) 0;
}

.dropdown-item {
    color: var(--text-strong);
    padding: 8px 16px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--green-spring-100);
    color: var(--text-strong);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--green-spring);
    color: var(--ink);
}