/*
 * Atlas' own styles. Every page links this file after Bootstrap; nothing in
 * the views carries a <style> block or a style="" attribute, because the
 * Content-Security-Policy (style-src 'self') would block them.
 *
 * ONE ACCENT COLOUR. Bootstrap hard-codes its blue in .btn-primary, the focus
 * ring, checkboxes and pagination, so overriding --bs-primary alone left every
 * button blue next to an orange menu. Each of those is set below.
 *
 * The brand orange (#f37021) is too light for white text (2.9:1), so buttons
 * and links use --atlas-accent, a darker orange that reaches 5.2:1 (WCAG AA).
 * The bright orange is for the logo and marks that carry no text.
 */

:root {
    --atlas-brand: #f37021;
    --atlas-accent: #c2410c;
    --atlas-accent-rgb: 194, 65, 12;
    --atlas-accent-hover: #9a3412;
    --atlas-accent-soft: #fff4ec;
    --atlas-ink: #2a2a2a;
    --atlas-muted: #6b7280;
    --atlas-border: #e5e7eb;
    --atlas-surface: #f6f7f9;
}

body.atlas-app,
body.atlas-login {
    --bs-primary: var(--atlas-accent);
    --bs-primary-rgb: var(--atlas-accent-rgb);
    --bs-link-color: var(--atlas-accent);
    --bs-link-color-rgb: var(--atlas-accent-rgb);
    --bs-link-hover-color: var(--atlas-accent-hover);
    --bs-link-hover-color-rgb: 154, 52, 18;
    --bs-body-color: var(--atlas-ink);
    --bs-focus-ring-color: rgba(var(--atlas-accent-rgb), .25);
    background-color: var(--atlas-surface);
}

/* --- Bootstrap's blue, replaced ----------------------------------------- */
.btn-primary {
    --bs-btn-bg: var(--atlas-accent);
    --bs-btn-border-color: var(--atlas-accent);
    --bs-btn-hover-bg: var(--atlas-accent-hover);
    --bs-btn-hover-border-color: var(--atlas-accent-hover);
    --bs-btn-active-bg: var(--atlas-accent-hover);
    --bs-btn-active-border-color: var(--atlas-accent-hover);
    --bs-btn-disabled-bg: var(--atlas-accent);
    --bs-btn-disabled-border-color: var(--atlas-accent);
    --bs-btn-focus-shadow-rgb: var(--atlas-accent-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--atlas-accent);
    --bs-btn-border-color: var(--atlas-accent);
    --bs-btn-hover-bg: var(--atlas-accent);
    --bs-btn-hover-border-color: var(--atlas-accent);
    --bs-btn-active-bg: var(--atlas-accent-hover);
    --bs-btn-active-border-color: var(--atlas-accent-hover);
    --bs-btn-focus-shadow-rgb: var(--atlas-accent-rgb);
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #f5a77a;
    box-shadow: 0 0 0 .25rem rgba(var(--atlas-accent-rgb), .2);
}
.form-check-input:checked {
    background-color: var(--atlas-accent);
    border-color: var(--atlas-accent);
}
.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23f5a77a'/%3e%3c/svg%3e");
}
.pagination {
    --bs-pagination-color: var(--atlas-accent);
    --bs-pagination-hover-color: var(--atlas-accent-hover);
    --bs-pagination-focus-color: var(--atlas-accent-hover);
    --bs-pagination-active-bg: var(--atlas-accent);
    --bs-pagination-active-border-color: var(--atlas-accent);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--atlas-accent-rgb), .2);
}
.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--atlas-accent);
}

/* --- Layout pages (layout/header.php): <body class="atlas-app"> ---------- */
/* A column that is at least the window high, so the footer sits at the
   bottom of a short page instead of halfway up it. */
body.atlas-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
/* The body fills what the navbar and footer leave, and its row stretches with
   it, so the sidebar's border runs down to the footer. The sidebar has NO
   height of its own: a min-height of 100vh made every page taller than the
   window, and the footer was always just below it. */
.atlas-body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
.atlas-body > .row {
    flex: 1 0 auto;
}

.atlas-navbar {
    background-color: var(--atlas-ink);
    padding-block: .5rem;
}
.atlas-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    color: #fff !important;
}
.atlas-brand small {
    color: #a3a3a3;
    font-weight: 400;
    font-size: .8rem;
    padding-left: .5rem;
    border-left: 1px solid #4b4b4b;
}

.atlas-search {
    position: relative;
    align-items: center;
    width: min(26rem, 40vw);
}
.atlas-search .bi-search {
    position: absolute;
    left: .65rem;
    color: #9ca3af;
    pointer-events: none;
}
.atlas-search .form-control {
    padding-left: 2rem;
}
.atlas-navbar .atlas-search .form-control {
    background-color: #3a3a3a;
    border-color: #4b4b4b;
    color: #fff;
}
.atlas-navbar .atlas-search .form-control::placeholder {
    color: #a3a3a3;
}
.atlas-navbar .atlas-search .form-control:focus {
    background-color: #fff;
    color: var(--atlas-ink);
}
.atlas-search-mobile {
    display: flex;
    width: 100%;
}

.atlas-user-button {
    color: #e5e5e5;
    border: 0;
}
.atlas-user-button:hover,
.atlas-user-button:focus,
.atlas-user-button.show {
    color: #fff;
    background-color: #3a3a3a;
}
.atlas-badge-role {
    background-color: var(--atlas-accent-soft);
    color: var(--atlas-accent);
    font-weight: 500;
}

/* The sidebar: a column from md up, an offcanvas panel below. */
.atlas-sidebar {
    background-color: #fff;
    border-right: 1px solid var(--atlas-border);
}
/* From md up the column stretches to the footer; its contents stick below the
   navbar while a long page scrolls. */
@media (min-width: 768px) {
    .atlas-sidebar {
        padding-top: 1rem;
    }
    .atlas-sidebar .offcanvas-body {
        display: block;
        position: sticky;
        top: 4.5rem;
    }
}
.atlas-nav-section {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--atlas-muted);
    padding: 1rem .75rem .35rem;
}
.atlas-nav-section:first-of-type {
    padding-top: 0;
}
.atlas-sidebar .nav-link {
    color: var(--atlas-ink);
    border-radius: .375rem;
    padding: .45rem .75rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    border-left: 3px solid transparent;
}
.atlas-sidebar .nav-link:hover {
    background-color: var(--atlas-surface);
}
.atlas-sidebar .nav-link.active {
    background-color: var(--atlas-accent-soft);
    color: var(--atlas-accent);
    border-left-color: var(--atlas-brand);
    font-weight: 500;
}

.atlas-main {
    padding: 1.25rem 1.5rem 2rem;
}
@media (max-width: 575.98px) {
    .atlas-main {
        padding: 1rem;
    }
}

.atlas-breadcrumb {
    --bs-breadcrumb-divider-color: #9ca3af;
    font-size: .875rem;
    margin-bottom: .75rem;
}
.atlas-breadcrumb a {
    text-decoration: none;
}
.atlas-breadcrumb a:hover {
    text-decoration: underline;
}
.atlas-breadcrumb .active {
    color: var(--atlas-muted);
}

.atlas-flash .bi {
    margin-right: .35rem;
}

/* A page's title row: the title (and what it belongs to) left, actions right. */
.atlas-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-bottom: 1.25rem;
}
.atlas-page-header h1 {
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0;
}
.atlas-page-sub {
    color: var(--atlas-muted);
    margin: .15rem 0 0;
}
.atlas-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.card {
    --bs-card-border-color: var(--atlas-border);
    --bs-card-cap-bg: #fff;
}
.atlas-table {
    margin-bottom: 0;
}
.atlas-table thead th {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--atlas-muted);
    background-color: #fafafa;
    border-bottom-width: 1px;
    white-space: nowrap;
}
.atlas-table td,
.atlas-table th {
    padding: .7rem 1rem;
}
.atlas-table tbody tr:last-child td {
    border-bottom: 0;
}
.atlas-row-link {
    font-weight: 600;
    text-decoration: none;
    color: var(--atlas-ink);
}
.atlas-row-link:hover {
    color: var(--atlas-accent);
    text-decoration: underline;
}
.atlas-row-icon {
    color: #9ca3af;
    margin-right: .5rem;
}
.atlas-count {
    color: var(--atlas-muted);
    white-space: nowrap;
    text-decoration: none;
}
a.atlas-count:hover {
    color: var(--atlas-accent);
}
.atlas-actions {
    white-space: nowrap;
    text-align: right;
}
.atlas-actions .btn {
    --bs-btn-padding-x: .45rem;
}
.atlas-empty {
    text-align: center;
    color: var(--atlas-muted);
    padding: 2.5rem 1rem !important;
}
.atlas-empty .bi {
    display: block;
    font-size: 1.75rem;
    margin-bottom: .35rem;
    color: #c4c8cf;
}
.atlas-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    background-color: #f1f2f4;
    color: #374151;
    white-space: nowrap;
}
.atlas-tag-warning {
    background-color: #fef3c7;
    color: #92400e;
}

/* Forms: the buttons at the bottom of a card. */
.atlas-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding-top: 1rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--atlas-border);
}
.form-label {
    font-weight: 500;
}
.atlas-field-hint {
    font-weight: 400;
    color: var(--atlas-muted);
    font-size: .8rem;
}

/* Generated SCL and other code. */
.atlas-code {
    position: relative;
    background-color: #1f2328;
    color: #e6edf3;
    border-radius: .5rem;
    padding: 1rem 1.25rem;
    margin: 0;
    font-size: .85rem;
    line-height: 1.55;
    max-height: 32rem;
    overflow: auto;
}
.atlas-code code {
    color: inherit;
}
.atlas-code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}

/* The overview. */
.atlas-stat {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}
.atlas-stat .card-body {
    display: flex;
    align-items: center;
    gap: .9rem;
}
.atlas-stat-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .5rem;
    display: grid;
    place-items: center;
    background-color: var(--atlas-accent-soft);
    color: var(--atlas-accent);
    font-size: 1.15rem;
    flex-shrink: 0;
}
.atlas-stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
}
.atlas-stat-label {
    color: var(--atlas-muted);
    font-size: .85rem;
}
a.atlas-stat:hover .card {
    border-color: #f5a77a;
}
.atlas-list {
    --bs-list-group-border-color: var(--atlas-border);
}
.atlas-list .list-group-item {
    padding: .6rem 1rem;
}
.atlas-search-hit small {
    color: var(--atlas-muted);
}
mark {
    padding: 0 .1em;
    background-color: #fde68a;
}

/* The confirmation dialog (footer.php). */
.atlas-confirm-detail {
    color: #991b1b;
    background-color: #fef2f2;
    border-radius: .375rem;
    padding: .6rem .75rem;
}

.atlas-footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .9rem 1.5rem;
    font-size: .8rem;
    color: var(--atlas-muted);
    border-top: 1px solid var(--atlas-border);
    background-color: #fff;
}

/* --- Login pages (login.php, login-mfa.php): <body class="atlas-login"> -- */
.login-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.card-login {
    width: 100%;
    max-width: 400px;
}
.atlas-login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}
.atlas-login-brand strong {
    font-size: 1.4rem;
}
.atlas-login-brand span {
    color: var(--atlas-muted);
    font-size: .875rem;
}
.atlas-login-footer {
    margin-top: 1.5rem;
    font-size: .8rem;
    color: var(--atlas-muted);
}

/* --- Audit log --------------------------------------------------------- */
.atlas-audit-details {
    min-width: 18rem;
    word-break: break-word;
}

/* The number of open points next to "Aandachtspunten" in the sidebar. */
.atlas-nav-badge {
    background-color: #fef3c7;
    color: #92400e;
    font-weight: 600;
}

/* The recovery codes after MFA setup: two columns of XXXX-XXXX-XXXX-XXXX. */
.atlas-recovery-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: .35rem 1.5rem;
    padding: 1rem 1rem 1rem 2.5rem;
    margin-bottom: 1rem;
    background-color: var(--bs-tertiary-bg);
    border-radius: .5rem;
    font-size: 1rem;
    letter-spacing: .03em;
}
.atlas-recovery-codes li::marker {
    color: var(--atlas-muted);
    font-size: .8rem;
}

/* An alert in the audit log (AuditLog::ALERTS): a red tag and a tinted row. */
.atlas-tag-danger {
    background-color: #fee2e2;
    color: #991b1b;
}
.atlas-table tr.atlas-audit-alert > td {
    background-color: #fff7f7;
}