/* MCC application layout (sidebar, top bar, page parts). Colours come from mcc-theme.css. */
:root {
    --mcc-sidebar-width: 260px;
}

html,
body {
    min-height: 100%;
}

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

.min-w-0 {
    min-width: 0;
}

.mcc-app {
    min-height: 100vh;
}

/* Sidebar: light surface with a fine border; the active entry uses the soft accent. */
.mcc-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--mcc-sidebar-width);
    background: var(--mcc-surface);
    border-right: 1px solid var(--mcc-border);
    color: var(--mcc-text);
    z-index: 1030;
}

.mcc-sidebar-brand {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--mcc-border);
}

.mcc-sidebar-brand a {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    color: var(--mcc-heading);
}

.mcc-brand-mark {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--mcc-accent-fg);
}

.mcc-brand-name {
    font-size: 0.9rem;
    color: var(--mcc-text-muted);
}

.mcc-sidebar-nav {
    overflow-y: auto;
    padding: 0.75rem 1rem 1rem;
}

.mcc-nav {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.mcc-nav-link {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    color: var(--mcc-text);
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mcc-nav-link:hover,
.mcc-nav-link:focus {
    color: var(--mcc-heading);
    background: var(--mcc-surface-2);
}

.mcc-nav-link.active {
    color: var(--mcc-accent-text);
    background: var(--mcc-accent-soft);
    font-weight: 600;
}

/* Navigation groups: <details> opened by click; the group of the current page is open and
   its label keeps the accent colour when closed. */
.mcc-nav-group-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    color: var(--mcc-text);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mcc-nav-group-label::-webkit-details-marker {
    display: none;
}

.mcc-nav-group-label::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    margin-right: 0.2rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: 0.5;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.mcc-nav-group[open] > .mcc-nav-group-label::after {
    transform: rotate(45deg);
}

.mcc-nav-group-label:hover {
    color: var(--mcc-heading);
    background: var(--mcc-surface-2);
}

.mcc-nav-group.has-active > .mcc-nav-group-label {
    color: var(--mcc-accent-text);
}

.mcc-nav-group-items {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin: 0.125rem 0 0.375rem 0.85rem;
    padding-left: 0.5rem;
    border-left: 1px solid var(--mcc-border);
}

.mcc-nav-link-sub {
    padding: 0.375rem 0.75rem;
    font-size: 0.925rem;
}

.mcc-sidebar-user {
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid var(--mcc-border);
}

.mcc-main {
    min-height: 100vh;
}

.mcc-topbar {
    min-height: 58px;
    background: var(--mcc-surface);
}

.mcc-content {
    max-width: 1600px;
}

.mcc-dashboard-card {
    border: 0;
    box-shadow: var(--bs-box-shadow-sm);
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mcc-dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--bs-box-shadow);
}

.mcc-empty-state {
    max-width: 680px;
}

.status-dot {
    width: 0.7rem;
    height: 0.7rem;
    display: inline-block;
    border-radius: 50%;
}

.status-dot-success {
    background: var(--bs-success);
}

.status-dot-danger {
    background: var(--bs-danger);
}

@media (min-width: 992px) {
    .mcc-main {
        margin-left: var(--mcc-sidebar-width);
    }
}

.mcc-json-preview {
    max-height: 720px;
    overflow: auto;
    padding: 1rem;
    background: var(--cr-dark, #111827);
    color: #e5e7eb;
    font-size: 0.82rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Scanner (pick & pack): short green / red flash after a scan. */
.mcc-scan-ok {
    animation: mcc-scan-ok 0.7s ease-out;
}

.mcc-scan-error {
    animation: mcc-scan-error 1s ease-out;
}

@keyframes mcc-scan-ok {
    from { box-shadow: 0 0 0 0.5rem rgba(25, 135, 84, 0.6); }
    to { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

@keyframes mcc-scan-error {
    from { box-shadow: 0 0 0 0.5rem rgba(220, 53, 69, 0.7); }
    to { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

/* Procedure documentation (audit/procedure.php): readable document, missing facts marked. */
.mcc-procedure-doc {
    max-width: 960px;
}

.mcc-procedure-doc section {
    margin-top: 2rem;
}

.mcc-procedure-doc h2 {
    font-size: 1.3rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--mcc-border);
}

.mcc-procedure-doc h3 {
    font-size: 1.05rem;
    margin-top: 1.25rem;
}

.mcc-doc-facts th {
    width: 34%;
    font-weight: 600;
}

.mcc-doc-missing {
    padding: 0 0.3rem;
    border-radius: 0.25rem;
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}

/* Printing: only the page content, without navigation and buttons. */
@media print {
    .mcc-sidebar,
    .mcc-topbar,
    .mcc-no-print,
    .offcanvas {
        display: none !important;
    }

    .mcc-main {
        margin-left: 0 !important;
    }

    .mcc-content {
        max-width: none;
        padding: 0 !important;
    }

    .card {
        box-shadow: none !important;
        border: 0 !important;
    }

    .mcc-procedure-doc .card-body {
        padding: 0 !important;
    }

    .mcc-procedure-doc section {
        break-inside: avoid-page;
    }

    .mcc-doc-signature {
        break-before: page;
    }
}

.mcc-pick-code {
    font-family: var(--bs-font-monospace);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.1;
    word-break: break-all;
}

/* Access denied page (mccRenderAccessDenied): lock in a soft danger circle. */
.mcc-denied-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
}