/* ==========================================================================
   Octopus Template
   --------------------------------------------------------------------------
   Project   : Digitaal Documentatiecentrum
   Component : com_octopus
   Versie    : 1.0 RC1

   Dit bestand bevat de centrale template- en componentopmaak.
   Nieuwe CSS wordt toegevoegd in de passende sectie, niet onderaan.
   ========================================================================== */

:root {
    /* Kleuren */
    --blue: #002b5c;
    --blue-dark: #001f43;
    --gold: #b68a1f;
    --light: #f5f7fa;
    --text: #1f2933;
    --white: #ffffff;

    /* Paginabreedtes */
    --page-dashboard-width: 1280px;
    --page-work-width: 1800px;
    --page-text-width: 1100px;

    /* Algemene afstanden */
    --page-padding: 25px;
    --page-bottom-space: 70px;

    /* Kaarten */
    --card-radius: 4px;
    --card-border: #d7dde5;

    /* Formulieren */
    --form-border: #cfd6df;
    --form-focus-shadow: 0 0 0 3px rgba(0, 43, 92, 0.12);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
    background: var(--light);
}

a {
    color: var(--blue);
    text-decoration: none;
}

/* LOGIN */

.login-hero {
    min-height: 680px;
    background:
        linear-gradient(rgba(0, 20, 45, 0.65), rgba(0, 20, 45, 0.65)),
        url("../images/hero-login-documentatiecentrum1.jpg") center / cover no-repeat;
}

.login-overlay {
    min-height: 680px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 45px 20px;
    text-align: center;
    color: var(--white);
}

.login-logo {
    width: 145px;
    height: 145px;
    border-radius: 50%;
    background: white;
    margin-bottom: 35px;
}

.login-overlay h1 {
    margin: 0;
    font-family: Georgia, serif;
    font-size: 46px;
    font-weight: 700;
}

.login-overlay h2 {
    margin: 15px 0;
    color: var(--gold);
    font-size: 24px;
}

.login-overlay p {
    font-size: 17px;
    line-height: 1.6;
}

.login-card {
    margin-top: 25px;
    width: 390px;
    max-width: 100%;
    background: var(--white);
    color: var(--blue);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(0,0,0,0.25);
}

.login-card h3 {
    margin-top: 0;
    font-family: Georgia, serif;
    font-size: 24px;
}

.login-card input {
    width: 100%;
    padding: 13px;
    margin-bottom: 12px;
    border: 1px solid #d7dde5;
    border-radius: 5px;
}

.login-card button,
.login-card .btn {
    width: 100%;
    padding: 13px;
    border: 0;
    border-radius: 5px;
    background: var(--blue);
    color: white;
    font-weight: 700;
}

.public-info {
    max-width: 1180px;
    margin: 0 auto;
    padding: 55px 25px 70px;
    text-align: center;
}

.public-info h2 {
    font-family: Georgia, serif;
    color: var(--blue);
    font-size: 30px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 35px;
    margin-top: 40px;
}

.info-grid article {
    padding: 20px;
}

.icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #e6edf6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

/* DASHBOARD */

/* HEADER EN HOOFDMENU */

.site-header {
    height: 104px;
    background: var(--white);
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 260px;
    align-items: center;
    padding: 0 36px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    position: relative;
    z-index: 20;
}

.user-box {
    justify-self: end;
    color: var(--blue);
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    line-height: 1.25;
    text-align: right;
}

.user-box .login-greeting,
.user-box .mod-login__greeting {
    display: block !important;
    white-space: normal !important;
    max-width: 240px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 15px;
}

.brand img {
    width: 66px;
    height: 66px;
    border-radius: 50%;
}

.brand strong {
    display: block;
    color: var(--blue);
    font-weight: 700;
}

.brand span {
    display: block;
    font-size: 14px;
    color: var(--text);
}

.main-nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-nav ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 34px;
    list-style: none;
}

.main-nav li {
    margin: 0;
    padding: 0;
}

.main-nav a {
    display: inline-block;
    color: #111;
    font-weight: 600;
    text-decoration: none;
    padding: 30px 0 20px;
    border-bottom: 3px solid transparent;
}

.main-nav a:hover,
.main-nav .active > a,
.main-nav .current > a {
    color: var(--blue);
    border-bottom-color: var(--gold);
}


/* HOOFDMENU - dropdown */

.main-nav {
    position: relative;
}

.main-nav > ul,
.main-nav .mod-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 34px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav li {
    position: relative;
}

.main-nav li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: #ffffff;
    border: 1px solid var(--card-border);
    box-shadow: 0 8px 22px rgba(0,0,0,0.12);
    z-index: 1000;
}

.main-nav li:hover > ul,
.main-nav li:focus-within > ul {
    display: block;
}

.main-nav li ul li {
    display: block;
}

.main-nav li ul a {
    display: block;
    padding: 10px 16px;
    border-bottom: 0;
    white-space: nowrap;
}

.main-nav li ul a:hover {
    background: #f5f7fa;
    color: var(--blue);
}



.user-box {
    justify-self: end;
    color: var(--blue);
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    line-height: 1.25;
    text-align: right;
}

.user-box .login-greeting,
.user-box .mod-login__greeting {
    display: block !important;
    white-space: normal !important;
    max-width: 240px;
}

.dashboard-hero {
    height: 310px;
    background:
        linear-gradient(rgba(0, 20, 45, 0.6), rgba(0, 20, 45, 0.6)),
        url("../images/hero-login-documentatiecentrum1.jpg") center / cover no-repeat;
    color: white;
    display: flex;
    align-items: center;
    padding-left: 70px;
    position: relative;
    z-index: 1;
}

.dashboard-hero h1 {
    font-family: Georgia, serif;
    font-size: 38px;
    margin: 0 0 18px;
}

.dashboard-main {
    max-width: var(--page-dashboard-width);
    margin: 0 auto;
    padding: 0 var(--page-padding) var(--page-bottom-space);
}

.portal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: -70px;
    position: relative;
    z-index: 10;
}

.portal-card {
    background: white;
    border-radius: 8px;
    padding: 35px 28px;
    text-align: center;
    box-shadow: 0 12px 32px rgba(0,0,0,0.10);
}

.portal-card h2 {
    color: #111;
    font-size: 22px;
}

.portal-card p {
    line-height: 1.6;
}

.portal-card a,
.brugse-stam a {
    display: inline-block;
    margin-top: 15px;
    padding: 12px 22px;
    border-radius: 4px;
    background: var(--blue);
    color: white;
    font-weight: 700;
}

.portal-card .gold-button {
    background: var(--gold);
}

.portal-icon {
    width: 82px;
    height: 82px;
    margin: 0 auto 20px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
}

.portal-icon.blue {
    background: var(--blue);
}

.portal-icon.gold {
    background: var(--gold);
}

.brugse-stam {
    position: relative;
    margin-top: 28px;
    background: #fbf6ec;
    border: 1px solid #e3c88a;
    border-radius: 8px;
    padding: 35px 40px;
    display: block;
}

.brugse-stam .moduletable,
.brugse-stam .mod-custom {
    display: block;
    width: 100%;
}

.brugse-stam-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr 150px;
    gap: 30px;
    align-items: center;
    width: 100%;
}

.brugse-stam h2 {
    margin: 0;
    font-family: Georgia, serif;
    font-size: 34px;
    color: var(--blue);
}

.brugse-stam h3 {
    color: var(--gold);
}

.magazine-placeholder {
    height: 180px;
    background: white;
    border: 1px solid #ddd;
    transform: rotate(4deg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Georgia, serif;
    font-size: 28px;
    color: #111;
    box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}

.round-link {
    width: 120px;
    height: 120px;
    background: var(--blue);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 700;
}

.bottom-grid {
    margin-top: 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.bottom-grid article {
    background: white;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.bottom-grid h2 {
    color: var(--blue);
}

/* FOOTER */

.site-footer {
    background: #ffffff !important;
    color: var(--blue) !important;
    padding: 34px 70px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 60px !important;
    border-top: 1px solid #e5e7eb !important;
    font-size: 16px !important;
}

.footer-contact {
    line-height: 1.75 !important;
    max-width: 420px;
}

.footer-contact strong,
.footer-contact span,
.footer-contact a {
    display: block !important;
}

.footer-contact strong {
    margin-bottom: 8px;
}

.footer-contact a {
    margin-top: 12px;
    color: #0066cc !important;
}

.footer-support {
    display: flex !important;
    align-items: center !important;
    gap: 34px !important;
}

.footer-support span {
    font-weight: 600;
    white-space: nowrap;
}

.footer-support img {
    max-height: 75px !important;
    max-width: 180px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* LOGINFORMULIER */

.login-card .mod-login__username label,
.login-card .mod-login__password label {
    display: none !important;
}

.login-card .mod-login__remember label,
.login-card .form-check-label {
    display: inline-block !important;
}

.login-card input[type="checkbox"] {
    width: auto;
    margin-right: 8px;
}

.login-card ul {
    list-style: none;
    padding-left: 0;
    margin: 18px 0 0;
}

.login-card li {
    margin: 6px 0;
}

/* Joomla frontend editing-info op modules verbergen */

.portal-grid .moduletable > h3,
.portal-grid .module-title,
.portal-grid .module-position,
.portal-grid .edit-icon,
.portal-grid .btn.jmodedit,
.portal-grid a.jmodedit {
    display: none !important;
}

.main-nav .moduletable > :not(ul) {
    display: none !important;
}

/* User menu / uitloggen */

.user-box {
    justify-self: end;
    color: var(--blue);
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    line-height: 1.25;
    text-align: right;
}

.user-box .login-greeting,
.user-box .mod-login__greeting {
    display: block !important;
    white-space: normal !important;
    max-width: 240px;
}

.user-menu form {
    margin: 0;
}

.user-menu .logout-button,
.user-menu button,
.user-menu .btn {
    padding: 9px 18px;
    border: 0;
    border-radius: 4px;
    background: var(--gold);
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
}

.user-menu .logout-button:hover,
.user-menu button:hover,
.user-menu .btn:hover {
    background: #9f7518;
}

.user-menu .login-greeting,
.user-menu .mod-login__greeting {
    display: none !important;
}

/* Brugse Stam foto */

.brugse-stam-visual {
    position: relative;
    width: 100%;
    height: 190px;
    transform: rotate(4deg);
    box-shadow: 0 12px 28px rgba(0,0,0,0.15);
    background: #ffffff;
    overflow: hidden;
}

.brugse-stam-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: sepia(35%) grayscale(40%) brightness(1.05);
}

.brugse-stam-title {
    position: absolute;
    top: 38px;
    left: 55px;
    font-family: Georgia, serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--blue);
    letter-spacing: 2px;
    transform: rotate(-6deg);
    text-shadow: 0 1px 2px rgba(255,255,255,0.8);
}

/* RESPONSIVE */

@media (max-width: 900px) {
    .info-grid,
    .portal-grid,
    .bottom-grid,
    .brugse-stam-content {
        grid-template-columns: 1fr;
    }

    .site-header {
        height: auto;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .main-nav ul {
        flex-wrap: wrap;
        gap: 16px;
    }

    .dashboard-hero {
        padding: 40px 25px;
        height: 260px;
    }

    .site-footer {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 30px !important;
    }

    .footer-support {
        flex-wrap: wrap !important;
    }
}

/* ==========================================================================
   10. OCTOPUS - GEMEENSCHAPPELIJKE BASIS
   ========================================================================== */

.com-octopus-search,
.com-octopus-results,
.com-octopus-record,
.com-octopus-edit,
.com-octopus-checkqueue,
.com-octopus-checktypes,
.com-octopus-deletequeue,
.com-octopus-manage,
.com-octopus-recordstats,
.com-octopus-autochecks {
    max-width: var(--page-work-width);
    margin: 45px auto var(--page-bottom-space);
    padding: 0 var(--page-padding);
}

/* Cards */

.com-octopus-search .card,
.com-octopus-results .card,
.com-octopus-record .card,
.com-octopus-edit .card,
.com-octopus-checkqueue .card,
.com-octopus-checktypes .card,
.com-octopus-deletequeue .card,
.com-octopus-manage .card,
.com-octopus-recordstats .card,
.com-octopus-autochecks .card {
    background: #ffffff;
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    margin-bottom: 18px;
    overflow: hidden;
}

.com-octopus-search .card-header,
.com-octopus-results .card-header,
.com-octopus-record .card-header,
.com-octopus-edit .card-header,
.com-octopus-checkqueue .card-header,
.com-octopus-checktypes .card-header,
.com-octopus-deletequeue .card-header,
.com-octopus-manage .card-header,
.com-octopus-recordstats .card-header,
.com-octopus-autochecks .card-header {
    background: #fafafa;
    border-bottom: 1px solid var(--card-border);
    padding: 16px 20px;
}

.com-octopus-search .card-body,
.com-octopus-results .card-body,
.com-octopus-record .card-body,
.com-octopus-edit .card-body,
.com-octopus-checkqueue .card-body,
.com-octopus-checktypes .card-body,
.com-octopus-deletequeue .card-body,
.com-octopus-manage .card-body,
.com-octopus-recordstats .card-body,
.com-octopus-autochecks .card-body {
    padding: 20px;
}

/* Titels */

.com-octopus-search h1,
.com-octopus-results h1,
.com-octopus-record h1,
.com-octopus-edit h1,
.com-octopus-checkqueue h1,
.com-octopus-checktypes h1,
.com-octopus-deletequeue h1,
.com-octopus-manage h1,
.com-octopus-recordstats h1,
.com-octopus-autochecks h1 {
    margin: 0 0 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 400;
    color: #9b0000;
}

.com-octopus-search h2,
.com-octopus-results h2,
.com-octopus-record h2,
.com-octopus-edit h2,
.com-octopus-checkqueue h2,
.com-octopus-checktypes h2,
.com-octopus-deletequeue h2,
.com-octopus-manage h2,
.com-octopus-recordstats h2,
.com-octopus-autochecks h2 {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--blue);
}

.com-octopus-search .d-flex,
.com-octopus-results .d-flex,
.com-octopus-record .d-flex,
.com-octopus-edit .d-flex,
.com-octopus-checkqueue .d-flex,
.com-octopus-checktypes .d-flex,
.com-octopus-deletequeue .d-flex,
.com-octopus-manage .d-flex,
.com-octopus-recordstats .d-flex,
.com-octopus-autochecks .d-flex {
    display: flex;
}

.com-octopus-search .justify-content-between,
.com-octopus-results .justify-content-between,
.com-octopus-record .justify-content-between,
.com-octopus-edit .justify-content-between {
    justify-content: space-between;
}

.com-octopus-search .align-items-center,
.com-octopus-results .align-items-center,
.com-octopus-record .align-items-center,
.com-octopus-edit .align-items-center {
    align-items: center;
}

.com-octopus-search .gap-2,
.com-octopus-results .gap-2,
.com-octopus-record .gap-2,
.com-octopus-edit .gap-2 {
    gap: 8px;
}

.com-octopus-search .gap-3,
.com-octopus-results .gap-3,
.com-octopus-record .gap-3,
.com-octopus-edit .gap-3 {
    gap: 16px;
}

.com-octopus-search .text-muted,
.com-octopus-results .text-muted,
.com-octopus-record .text-muted,
.com-octopus-edit .text-muted {
    color: #6b7280;
}

.com-octopus-search .text-end,
.com-octopus-results .text-end,
.com-octopus-record .text-end,
.com-octopus-edit .text-end {
    text-align: right;
}

.com-octopus-search .mb-0,
.com-octopus-results .mb-0,
.com-octopus-record .mb-0,
.com-octopus-edit .mb-0 {
    margin-bottom: 0;
}

.com-octopus-search .mb-2,
.com-octopus-results .mb-2,
.com-octopus-record .mb-2,
.com-octopus-edit .mb-2 {
    margin-bottom: 8px;
}

.com-octopus-search .mb-3,
.com-octopus-results .mb-3,
.com-octopus-record .mb-3,
.com-octopus-edit .mb-3 {
    margin-bottom: 16px;
}

.com-octopus-search .mt-3,
.com-octopus-results .mt-3,
.com-octopus-record .mt-3,
.com-octopus-edit .mt-3 {
    margin-top: 16px;
}

.com-octopus-search .mt-4,
.com-octopus-results .mt-4,
.com-octopus-record .mt-4,
.com-octopus-edit .mt-4 {
    margin-top: 24px;
}

/* =========================================================
   OCTOPUS - formulieren
   ========================================================= */

.com-octopus-search label,
.com-octopus-edit label,
.com-octopus-record label,
.com-octopus-checkqueue label,
.com-octopus-checktypes label,
.com-octopus-autochecks label {
    display: block;
    margin-bottom: 8px;
    color: #1f2933;
}

.com-octopus-search input[type="text"],
.com-octopus-search select,
.com-octopus-edit input[type="text"],
.com-octopus-edit select,
.com-octopus-edit textarea,
.com-octopus-record input[type="text"],
.com-octopus-record select,
.com-octopus-record textarea,
.com-octopus-checkqueue input[type="text"],
.com-octopus-checkqueue select,
.com-octopus-checkqueue textarea,
.com-octopus-checktypes input[type="text"],
.com-octopus-checktypes input[type="number"],
.com-octopus-checktypes select,
.com-octopus-autochecks select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--form-border);
    border-radius: 2px;
    font-size: 16px;
    background: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}

.com-octopus-search input[type="text"],
.com-octopus-search select,
.com-octopus-edit input[type="text"],
.com-octopus-edit select,
.com-octopus-checkqueue input[type="text"],
.com-octopus-checkqueue select {
    height: 46px;
}

.com-octopus-checktypes input[type="text"],
.com-octopus-checktypes input[type="number"],
.com-octopus-checktypes select,
.com-octopus-autochecks select {
    height: 38px;
    font-size: 14px;
}

.com-octopus-search input:focus,
.com-octopus-search select:focus,
.com-octopus-edit input:focus,
.com-octopus-edit select:focus,
.com-octopus-edit textarea:focus,
.com-octopus-record input:focus,
.com-octopus-record select:focus,
.com-octopus-record textarea:focus,
.com-octopus-checkqueue input:focus,
.com-octopus-checkqueue select:focus,
.com-octopus-checkqueue textarea:focus,
.com-octopus-checktypes input:focus,
.com-octopus-checktypes select:focus,
.com-octopus-autochecks select:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: var(--form-focus-shadow);
}

/* =========================================================
   OCTOPUS - knoppen
   ========================================================= */

.com-octopus-search .btn,
.com-octopus-search button,
.com-octopus-results .btn,
.com-octopus-results button,
.com-octopus-record .btn,
.com-octopus-record button,
.com-octopus-edit .btn,
.com-octopus-edit button,
.com-octopus-checkqueue .btn,
.com-octopus-checkqueue button,
.com-octopus-deletequeue .btn,
.com-octopus-deletequeue button,
.com-octopus-manage .btn,
.com-octopus-manage button,
.com-octopus-checktypes .btn,
.com-octopus-checktypes button,
.com-octopus-autochecks .btn,
.com-octopus-autochecks button,
.com-octopus-recordstats .btn,
.com-octopus-recordstats button {
    display: inline-block;
    padding: 10px 16px;
    border: 0;
    border-radius: 0;
    background: var(--blue);
    color: #ffffff !important;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
}

.com-octopus-search .btn-primary,
.com-octopus-results .btn-primary,
.com-octopus-record .btn-primary,
.com-octopus-edit .btn-primary,
.com-octopus-checkqueue .btn-primary,
.com-octopus-deletequeue .btn-primary,
.com-octopus-manage .btn-primary,
.com-octopus-checktypes .btn-primary,
.com-octopus-autochecks .btn-primary,
.com-octopus-recordstats .btn-primary,
.com-octopus-search .btn-secondary,
.com-octopus-results .btn-secondary,
.com-octopus-record .btn-secondary,
.com-octopus-edit .btn-secondary,
.com-octopus-checkqueue .btn-secondary,
.com-octopus-deletequeue .btn-secondary,
.com-octopus-manage .btn-secondary,
.com-octopus-checktypes .btn-secondary,
.com-octopus-autochecks .btn-secondary,
.com-octopus-recordstats .btn-secondary,
.com-octopus-search .btn-outline-secondary,
.com-octopus-results .btn-outline-secondary,
.com-octopus-record .btn-outline-secondary,
.com-octopus-edit .btn-outline-secondary,
.com-octopus-checkqueue .btn-outline-secondary,
.com-octopus-deletequeue .btn-outline-secondary,
.com-octopus-manage .btn-outline-secondary,
.com-octopus-checktypes .btn-outline-secondary,
.com-octopus-autochecks .btn-outline-secondary,
.com-octopus-recordstats .btn-outline-secondary {
    background: var(--blue);
}

.com-octopus-record .btn-warning,
.com-octopus-edit .btn-success,
.com-octopus-autochecks .btn-warning,
.com-octopus-checkqueue .btn-warning,
.com-octopus-deletequeue .btn-warning,
.com-octopus-manage .btn-warning,
.com-octopus-checktypes .btn-warning,
.com-octopus-recordstats .btn-warning {
    background: var(--gold);
}

.com-octopus-results .btn-sm,
.com-octopus-record .btn-sm,
.com-octopus-edit .btn-sm,
.com-octopus-checkqueue .btn-sm,
.com-octopus-deletequeue .btn-sm,
.com-octopus-checktypes .btn-sm,
.com-octopus-autochecks .btn-sm,
.com-octopus-recordstats .btn-sm {
    padding: 8px 13px;
    font-size: 14px;
}

/* =========================================================
   OCTOPUS - tabellen
   ========================================================= */

.com-octopus-results .table-responsive,
.com-octopus-checkqueue .table-responsive {
    overflow-x: auto;
}

.com-octopus-results table,
.com-octopus-checkqueue table,
.com-octopus-deletequeue table,
.com-octopus-checktypes table,
.com-octopus-recordstats table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

.com-octopus-results thead th,
.com-octopus-checkqueue thead th,
.com-octopus-deletequeue thead th,
.com-octopus-checktypes thead th,
.com-octopus-recordstats thead th {
    background: #f8fafc;
    border-bottom: 1px solid #111827;
    text-align: left;
}

.com-octopus-results td,
.com-octopus-checkqueue td,
.com-octopus-deletequeue td,
.com-octopus-checktypes td,
.com-octopus-recordstats td {
    border-bottom: 1px solid #e5e7eb;
}

.com-octopus-results tbody tr:nth-child(odd) td,
.com-octopus-checkqueue tbody tr:nth-child(odd) td,
.com-octopus-deletequeue tbody tr:nth-child(odd) td,
.com-octopus-checktypes tbody tr:nth-child(odd) td {
    background: #f3f3f3;
}

.com-octopus-results tbody tr:hover td,
.com-octopus-checkqueue tbody tr:hover td,
.com-octopus-deletequeue tbody tr:hover td {
    background: #eef3f8;
}

/* =========================================================
   OCTOPUS - zoekscherm
   ========================================================= */

.com-octopus-search .row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px 16px;
}

.com-octopus-search .col-md-6 {
    grid-column: span 6;
}

.com-octopus-search .col-md-4 {
    grid-column: span 4;
}

/* =========================================================
   OCTOPUS - resultaten
   ========================================================= */

.com-octopus-results .d-flex.flex-column.flex-lg-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.com-octopus-results hr {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 20px 0;
}

.com-octopus-results .row.g-2 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 8px;
}

.com-octopus-results .col-md-3 {
    grid-column: span 3;
}

.com-octopus-results .col-md-2 {
    grid-column: span 2;
}

.com-octopus-results .border {
    border: 1px solid #d7dde5;
}

.com-octopus-results .rounded {
    border-radius: 4px;
}

.com-octopus-results .p-2 {
    padding: 10px;
}

.com-octopus-results .bg-light {
    background: #f8fafc;
}

.com-octopus-results thead th {
    color: #111827 !important;
    padding: 12px 10px;
    font-weight: 400;
}

.com-octopus-results td {
    padding: 11px 10px;
    color: #111827;
}

.com-octopus-results tbody tr:nth-child(even) td {
    background: #ffffff;
}

.com-octopus-results .badge {
    display: inline-block;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
}

.com-octopus-results .bg-danger,
.com-octopus-record .bg-danger {
    background: #b91c1c !important;
}

.com-octopus-results .bg-success,
.com-octopus-record .bg-success {
    background: #2f7d3b !important;
}

.com-octopus-results .bg-warning,
.com-octopus-record .bg-warning {
    background: #d9a400 !important;
}

.com-octopus-results .bg-primary,
.com-octopus-record .bg-primary {
    background: var(--blue) !important;
}

.com-octopus-results .bg-secondary,
.com-octopus-record .bg-secondary {
    background: #6b7280 !important;
}

.com-octopus-results .text-dark,
.com-octopus-record .text-dark {
    color: #111827 !important;
}

/* =========================================================
   OCTOPUS - detail en bewerken
   ========================================================= */

.com-octopus-record > .d-flex,
.com-octopus-edit > .d-flex {
    margin-bottom: 18px;
}

.com-octopus-record > .row,
.com-octopus-edit form > .row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
}

.com-octopus-record .col-lg-6,
.com-octopus-edit .col-lg-6 {
    grid-column: span 6;
}

.com-octopus-record .col-12,
.com-octopus-edit .col-12 {
    grid-column: span 12;
}

.com-octopus-record .card-body > .row.border-bottom {
    display: grid;
    grid-template-columns: 35% 65%;
    border-bottom: 1px solid #e5e7eb;
    padding: 9px 0;
}

.com-octopus-record .fw-semibold,
.com-octopus-edit .fw-semibold {
    font-weight: 700;
}

.com-octopus-record .h-100,
.com-octopus-edit .h-100 {
    height: 100%;
}

.com-octopus-edit .form-label {
    font-weight: 700;
}

.com-octopus-edit .mb-3 {
    margin-bottom: 16px;
}

/* =========================================================
   OCTOPUS - meldingen
   ========================================================= */

.com-octopus-search .alert,
.com-octopus-results .alert,
.com-octopus-record .alert,
.com-octopus-edit .alert,
.com-octopus-checkqueue .alert {
    padding: 14px 18px;
    border-radius: 4px;
    margin-bottom: 18px;
}

.com-octopus-search .alert-warning,
.com-octopus-results .alert-warning,
.com-octopus-record .alert-warning,
.com-octopus-edit .alert-warning,
.com-octopus-checkqueue .alert-warning {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
}

.com-octopus-record .alert-info,
.com-octopus-checkqueue .alert-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

/* =========================================================
   OCTOPUS - responsive
   ========================================================= */

@media (max-width: 900px) {
    .com-octopus-search .row,
    .com-octopus-results .row.g-2,
    .com-octopus-record > .row,
    .com-octopus-edit form > .row {
        grid-template-columns: 1fr;
    }

    .com-octopus-search .col-md-6,
    .com-octopus-search .col-md-4,
    .com-octopus-results .col-md-3,
    .com-octopus-results .col-md-2,
    .com-octopus-record .col-lg-6,
    .com-octopus-edit .col-lg-6,
    .com-octopus-record .col-12,
    .com-octopus-edit .col-12 {
        grid-column: span 1;
    }

    .com-octopus-results .d-flex.flex-column.flex-lg-row,
    .com-octopus-record > .d-flex,
    .com-octopus-edit > .d-flex {
        flex-direction: column;
        align-items: flex-start;
    }

    .com-octopus-record .card-body > .row.border-bottom {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* OCTOPUS PAGINERING */

.com-octopus-results .pagination,
.com-octopus-results ul.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding-left: 0;
    margin: 22px 0 0;
    align-items: center;
}

.com-octopus-results .pagination li {
    margin: 0;
}

.com-octopus-results .pagination a,
.com-octopus-results .pagination span {
    display: inline-block;
    min-width: 36px;
    padding: 8px 12px;
    border: 1px solid #d7dde5;
    background: #ffffff;
    color: var(--blue);
    text-align: center;
    font-weight: 600;
    text-decoration: none;
}

.com-octopus-results .pagination a:hover {
    background: #f5f7fa;
    border-color: var(--blue);
}

.com-octopus-results .pagination .active a,
.com-octopus-results .pagination .active span {
    background: var(--blue);
    border-color: var(--blue);
    color: #ffffff;
}

/* OCTOPUS RECORD / DETAIL */

.com-octopus-record {
    max-width: 1280px;
    margin: 45px auto 80px;
    padding: 0 25px;
}

.com-octopus-record h1 {
    margin: 0 0 26px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 40px;
    font-weight: 400;
    color: #9b0000;
}

.com-octopus-record .d-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 24px;
}

.com-octopus-record .row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}

.com-octopus-record .col-lg-6 {
    grid-column: span 6;
}

.com-octopus-record .col-12 {
    grid-column: span 12;
}

/* Recorddetail gebruikt iets ruimere card spacing. */
.com-octopus-record .card-header {
    padding: 17px 22px;
    background: #fafafa;
    border-bottom: 1px solid #d7dde5;
}

.com-octopus-record .card-header h2,
.com-octopus-record .card-header h3 {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    color: var(--blue);
}

.com-octopus-record .card-body {
    padding: 22px;
}

.com-octopus-record table {
    width: 100%;
    border-collapse: collapse;
}

.com-octopus-record th,
.com-octopus-record td {
    padding: 10px 0;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top;
}

.com-octopus-record th {
    width: 34%;
    color: #111827;
    font-weight: 700;
    text-align: left;
}

.com-octopus-record td {
    color: #111827;
}

.com-octopus-record .alert-danger,
.com-octopus-record .bg-danger {
    background: #fde8e8 !important;
    color: #991b1b !important;
    border: 1px solid #f5b5b5;
    padding: 14px 18px;
}

.com-octopus-record iframe,
.com-octopus-record embed,
.com-octopus-record object {
    width: 100%;
    min-height: 800px;
    border: 1px solid #d7dde5;
    background: #f3f4f6;
}

/* OCTOPUS RECORD - TABLET */

@media (max-width: 1100px) {
    .com-octopus-record {
        max-width: 100%;
        padding: 0 22px;
    }

    .com-octopus-record .col-lg-6 {
        grid-column: span 12;
    }

    .com-octopus-record h1 {
        font-size: 34px;
    }

    .com-octopus-record iframe,
    .com-octopus-record embed,
    .com-octopus-record object {
        min-height: 700px;
    }
}
/* OCTOPUS RECORD - CONTROLE / VERIFICATIE */

.com-octopus-record .border.rounded {
    background: #fafafa;
    border: 1px solid #d7dde5 !important;
    border-radius: 6px;
    padding: 18px !important;
}

.com-octopus-record .form-check {
    margin-bottom: 12px;
}

.com-octopus-record .form-check-input {
    margin-right: 8px;
}

.com-octopus-record .form-check-label {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

.com-octopus-record textarea.form-control {
    width: 100%;
    min-height: 85px;
    resize: vertical;
    font-size: 15px;
}

.com-octopus-record .h-100 {
    height: 100%;
}
/* OCTOPUS RECORD - controle/verificatie ruimer */

.com-octopus-record #octopus-checks-collapse .row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.com-octopus-record #octopus-checks-collapse .col-md-6 {
    grid-column: auto;
}

.com-octopus-record #octopus-checks-collapse .border.rounded {
    padding: 18px !important;
    background: #fafafa;
}

.com-octopus-record #octopus-checks-collapse textarea.form-control {
    min-height: 130px;
}

@media (max-width: 900px) {
    .com-octopus-record #octopus-checks-collapse .row {
        grid-template-columns: 1fr;
    }
}

/* OCTOPUS EDIT - schakelaars Foto / GDPR */

.com-octopus-edit .form-switch {
    display: flex;
    align-items: center;
    min-height: 42px;
}

.com-octopus-edit .form-switch .form-check-input {
    width: 54px;
    height: 28px;
    margin: 0;
    cursor: pointer;
    appearance: none;
    background: #cfd6df;
    border-radius: 999px;
    position: relative;
    transition: background 0.2s ease;
}

.com-octopus-edit .form-switch .form-check-input::before {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    left: 3px;
    top: 3px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

.com-octopus-edit .form-switch .form-check-input:checked {
    background: var(--gold);
}

.com-octopus-edit .form-switch .form-check-input:checked::before {
    transform: translateX(26px);
}

.digidoc-text {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #333;
    font-weight: 400;
}
/* =====================================================
   OCTOPUS MANAGE / BEHEER
   ===================================================== */

.com-octopus-manage {
    margin: 45px auto 80px;
    padding: 0 var(--page-padding);
}

.com-octopus-manage > .card:first-child {
    margin-bottom: 24px;
}

.com-octopus-manage .card {
    background: #ffffff;
    border: 1px solid #d7dde5;
    border-radius: var(--card-radius, 4px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    padding: 22px;
}

.com-octopus-manage h1 {
    margin: 0 0 12px;
    font-size: 30px;
    font-weight: 400;
    color: #9b0000;
}

.com-octopus-manage h2 {
    margin: 0 0 12px;
    font-size: 20px;
    color: var(--blue);
}

.com-octopus-manage p {
    line-height: 1.65;
    color: #4b5563;
}

.com-octopus-manage .manage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

.com-octopus-manage .manage-item {
    display: flex;
    height: 100%;
}

.com-octopus-manage .manage-item .card {
    width: 100%;
    min-height: 220px;
    display: flex;
    flex-direction: column;
}

.com-octopus-manage .manage-item .card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.com-octopus-manage .manage-item p {
    flex: 1;
    min-height: 72px;
}

.com-octopus-manage .btn,
.com-octopus-manage a.btn {
    margin-top: 12px;
    padding: 12px 18px;
}

.com-octopus-manage .manage-item .btn,
.com-octopus-manage .manage-item a.btn {
    min-width: 210px;
    margin-top: auto;
    text-align: center;
    white-space: nowrap;
    align-self: flex-start;
}

@media (max-width: 1100px) {
    .com-octopus-manage .manage-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .com-octopus-manage .manage-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   OCTOPUS CHECKQUEUE
===================================================== */

.com-octopus-checkqueue {
    max-width: var(--page-work-width) !important;
    margin: 45px auto 80px;
    padding: 0 var(--page-padding);
}

/* Checkqueue gebruikt iets ruimere card body voor tabellen. */
.com-octopus-checkqueue .card-body {
    padding: 22px;
}

.com-octopus-checkqueue h1 {
    margin: 0 0 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: 400;
    color: #9b0000;
}

.com-octopus-checkqueue .text-muted,
.com-octopus-checkqueue .checkqueue-info {
    color: #6b7280;
}

.com-octopus-checkqueue .checkqueue-info {
    margin-top: 8px;
    font-size: 15px;
}

.com-octopus-checkqueue .checkqueue-header,
.com-octopus-checkqueue .d-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.com-octopus-checkqueue .checkqueue-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.com-octopus-checkqueue hr {
    border: 0;
    border-top: 1px solid #d7dde5;
    margin: 18px 0;
}

/* Tabel */

.com-octopus-checkqueue table {
    font-size: 14px;
}

.com-octopus-checkqueue thead th {
    color: #111827;
    padding: 13px 10px;
    font-weight: 400;
    white-space: nowrap;
}

.com-octopus-checkqueue td {
    padding: 12px 10px;
    vertical-align: top;
}

.com-octopus-checkqueue th:nth-child(1),
.com-octopus-checkqueue td:nth-child(1) {
    width: 90px;
}

.com-octopus-checkqueue th:nth-child(2),
.com-octopus-checkqueue td:nth-child(2) {
    width: 230px;
}

.com-octopus-checkqueue th:nth-child(3),
.com-octopus-checkqueue td:nth-child(3) {
    width: 120px;
}

.com-octopus-checkqueue th:nth-child(5),
.com-octopus-checkqueue td:nth-child(5) {
    width: 130px;
}

.com-octopus-checkqueue th:nth-child(6),
.com-octopus-checkqueue td:nth-child(6) {
    width: 210px;
}

.com-octopus-checkqueue td:nth-child(2) {
    font-weight: 600;
}

.com-octopus-checkqueue td:nth-child(4) {
    color: #4b5563;
}

/* Probleemlabels */

.com-octopus-checkqueue .badge {
    display: inline-block;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    background: #374151;
    margin: 2px 4px 2px 0;
}

.com-octopus-checkqueue .bg-danger {
    background: #b91c1c !important;
}

.com-octopus-checkqueue .bg-success {
    background: #2f7d3b !important;
}

.com-octopus-checkqueue .bg-warning {
    background: #d9a400 !important;
    color: #111827 !important;
}

.com-octopus-checkqueue .bg-secondary {
    background: #6b7280 !important;
}

/* Actieknoppen */

.com-octopus-checkqueue td:last-child {
    white-space: nowrap;
    text-align: right;
}

.com-octopus-checkqueue td:last-child .btn {
    margin: 2px;
    padding: 8px 12px;
    font-size: 14px;
}

/* Paginering */

.com-octopus-checkqueue .pagination,
.com-octopus-checkqueue ul.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding-left: 0;
    margin: 22px 0 0;
    align-items: center;
}

.com-octopus-checkqueue .pagination li {
    margin: 0;
}

.com-octopus-checkqueue .pagination a,
.com-octopus-checkqueue .pagination span {
    display: inline-block;
    min-width: 36px;
    padding: 8px 12px;
    border: 1px solid #d7dde5;
    background: #ffffff;
    color: var(--blue);
    text-align: center;
    font-weight: 600;
    text-decoration: none;
}

.com-octopus-checkqueue .pagination a:hover {
    background: #f5f7fa;
    border-color: var(--blue);
}

.com-octopus-checkqueue .pagination .active a,
.com-octopus-checkqueue .pagination .active span {
    background: var(--blue);
    border-color: var(--blue);
    color: #ffffff;
}

@media (max-width: 1100px) {
    .com-octopus-checkqueue {
        max-width: 100%;
        padding: 0 18px;
    }

    .com-octopus-checkqueue .checkqueue-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .com-octopus-checkqueue .checkqueue-buttons {
        justify-content: flex-start;
    }


    .com-octopus-checkqueue table {
        min-width: 980px;
    }
}

/* =====================================================
   OCTOPUS DELETEQUEUE
   ===================================================== */

.com-octopus-deletequeue {
    max-width: var(--page-work-width);
    margin: 45px auto 80px;
    padding: 0 var(--page-padding);
}

/* Deletequeue gebruikt iets ruimere card body voor tabellen. */
.com-octopus-deletequeue .card-body {
    padding: 22px;
}

.com-octopus-deletequeue h1 {
    margin: 0 0 10px;
    font-size: 30px;
    font-weight: 400;
    color: #9b0000;
}

.com-octopus-deletequeue .deletequeue-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.com-octopus-deletequeue .deletequeue-info {
    margin-top: 8px;
    color: #6b7280;
    font-size: 15px;
}

.com-octopus-deletequeue .deletequeue-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.com-octopus-deletequeue table {
    font-size: 14px;
}

.com-octopus-deletequeue thead th {
    padding: 13px 10px;
    white-space: nowrap;
}

.com-octopus-deletequeue td {
    padding: 12px 10px;
    vertical-align: top;
}

.com-octopus-deletequeue td:last-child {
    white-space: nowrap;
    text-align: right;
}

.com-octopus-deletequeue td:last-child .btn,
.com-octopus-deletequeue td:last-child button {
    margin: 2px;
    padding: 8px 11px;
}

.com-octopus-deletequeue td:nth-child(2) {
    min-width: 180px;
}

/* =====================================================
   OCTOPUS CHECKTYPES
===================================================== */

.com-octopus-checktypes .checktypes-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.com-octopus-checktypes .checktypes-info {
    margin-top: 8px;
    color: #6b7280;
    font-size: 15px;
}

.com-octopus-checktypes .checktypes-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* OCTOPUS CHECKTYPES - tabel en formulieren */

.com-octopus-checktypes table {
    font-size: 14px;
}

.com-octopus-checktypes thead th {
    padding: 12px 10px;
    white-space: nowrap;
}

.com-octopus-checktypes td {
    padding: 8px 10px;
    vertical-align: middle;
}

.com-octopus-checktypes .btn,
.com-octopus-checktypes button {
    padding: 9px 14px;
}

.com-octopus-checktypes .checktypes-buttons .btn {
    padding: 10px 16px;
}

/* OCTOPUS CHECKTYPES - nieuw type formulier */

.com-octopus-checktypes .card:last-child .card-body form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    align-items: end;
}

.com-octopus-checktypes .card:last-child .card-body form button {
    justify-self: start;
}

@media (max-width: 800px) {
    .com-octopus-checktypes .card:last-child .card-body form {
        grid-template-columns: 1fr;
    }
}

/* CHECKTYPES - formulier nieuw controletype definitief */

.com-octopus-checktypes .card:last-child form {
    max-width: 900px;
}

.com-octopus-checktypes .card:last-child form > input,
.com-octopus-checktypes .card:last-child form > select {
    margin-bottom: 10px;
}

.com-octopus-checktypes .card:last-child form > button {
    margin-top: 4px;
}

/* =====================================================
   OCTOPUS AUTOCHECKS
   ===================================================== */

.com-octopus-autochecks .autochecks-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.com-octopus-autochecks .autochecks-info {
    margin-top: 8px;
    color: #6b7280;
    font-size: 15px;
}

.com-octopus-autochecks .autochecks-buttons {
    display: flex;
    gap: 10px;
}

.com-octopus-autochecks .border.rounded {
    background: #fafafa;
    border: 1px solid #d7dde5 !important;
    border-radius: 4px;
    padding: 20px !important;
    margin-bottom: 20px;
}

/* RECORDSTATS - layout herstellen */

.com-octopus-recordstats .row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
}

.com-octopus-recordstats .col-lg-6 {
    grid-column: span 6;
}

.com-octopus-recordstats .col-lg-4 {
    grid-column: span 4;
}

.com-octopus-recordstats .col-12 {
    grid-column: span 12;
}

.com-octopus-recordstats canvas {
    display: block;
    width: 100% !important;
    height: 380px !important;
}

.com-octopus-recordstats th,
.com-octopus-recordstats td {
    padding: 10px;
}

.com-octopus-recordstats .text-end {
    text-align: right;
}

@media (max-width: 900px) {
    .com-octopus-recordstats .col-lg-6,
    .com-octopus-recordstats .col-lg-4,
    .com-octopus-recordstats .col-12 {
        grid-column: span 12;
    }
}

/* RECORDSTATISTIEKEN HEADER */

.com-octopus-recordstats .recordstats-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
}

.com-octopus-recordstats .recordstats-buttons{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

/* RECORDSTATS - knoppen */

.com-octopus-recordstats .recordstats-buttons a {
    display: inline-block !important;
    padding: 10px 16px !important;
    background: var(--blue) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border: 0 !important;
}

/* RECORDSTATS - KPI totaal records */

.com-octopus-recordstats .display-6 {
    font-size: 34px;
    font-weight: 400;
    color: #111827;
    line-height: 1.1;
}

.com-octopus-recordstats .card-body .text-muted {
    color: #6b7280;
    margin-bottom: 6px;
}

/* ==========================================================
   RECORD DETAIL LAYOUT
   ========================================================== */

.com-octopus-record {
    max-width: var(--page-work-width) !important;
}

.com-octopus-record .record-detail-grid {
    display: grid !important;
    grid-template-columns: 400px minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: start !important;
}

.com-octopus-record .record-metadata,
.com-octopus-record .record-pdf {
    min-width: 0 !important;
}

.com-octopus-record .record-detail-grid .card-header {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
}

.com-octopus-record .record-field {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #e5e7eb;
}

.com-octopus-record .record-field-label {
    font-weight: 700;
    color: #111827;
}

.com-octopus-record .record-field-value {
    color: #111827;
    overflow-wrap: anywhere;
}

.com-octopus-record .record-metadata h3 {
    margin: 28px 0 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid #d7dde5;
    color: var(--blue);
    font-size: 18px;
    font-weight: 700;
}

.com-octopus-record .record-metadata h3:first-child {
    margin-top: 0;
}

.com-octopus-record .record-pdf-frame {
    width: 100%;
    height: calc(100vh - 220px);
    min-height: 680px;
    border: 1px solid #d7dde5;
    background: #f3f4f6;
}

.com-octopus-record .record-subtitle {
    margin-top: 4px;
    font-size: 15px;
    color: #6b7280;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Op echte mobiele schermen mag de PDF onder de metadata komen. */
@media (max-width: 900px) {
    .com-octopus-record .record-detail-grid {
        grid-template-columns: 1fr !important;
    }

    .com-octopus-record .record-pdf-frame {
        height: 700px;
        min-height: 700px;
    }
}

/* Checkqueue dropdownfilter */

.com-octopus-checkqueue .checkqueue-filter {
    max-width: 360px;
}

.com-octopus-checkqueue .checkqueue-filter label {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
}

.com-octopus-checkqueue .checkqueue-filter .form-select {
    width: 100%;
    height: 44px;
}

/* Hoofditems met submenu dezelfde layout geven */

.main-nav > ul > li > a,
.main-nav > ul > li > span,
.main-nav .mod-menu > li > a,
.main-nav .mod-menu > li > span {
    display: inline-block;
    color: #111;
    font-weight: 600;
    text-decoration: none;
    padding: 30px 0 20px;
    border-bottom: 3px solid transparent;
    cursor: pointer;
}

.main-nav > ul > li > a:hover,
.main-nav > ul > li > span:hover,
.main-nav .mod-menu > li > a:hover,
.main-nav .mod-menu > li > span:hover,
.main-nav > ul > li.active > a,
.main-nav > ul > li.active > span,
.main-nav > ul > li.current > a,
.main-nav > ul > li.current > span,
.main-nav .mod-menu > li.active > a,
.main-nav .mod-menu > li.active > span,
.main-nav .mod-menu > li.current > a,
.main-nav .mod-menu > li.current > span {
    color: var(--blue);
    border-bottom-color: var(--gold);
}

.main-nav li ul {
    min-width: 230px;
    padding: 10px 0;
    border-top: 3px solid var(--gold);
}

.main-nav li ul a {
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 600;
}

.main-nav li ul a:hover {
    background: #f5f7fa;
}

@media (max-height: 900px) {
    .login-overlay {
        justify-content: flex-start;
        padding-top: 24px;
    }

    .login-logo {
        width: 105px;
        height: 105px;
        margin-bottom: 18px;
    }

    .login-overlay h1 {
        font-size: 38px;
    }

    .login-overlay h2 {
        margin: 8px 0;
        font-size: 21px;
    }

    .login-overlay p {
        margin: 8px 0;
        font-size: 15px;
        line-height: 1.45;
    }

    .login-card {
        margin-top: 14px;
        padding: 22px 26px;
    }
}

@media (max-width: 767px) {
    body > * {
        display: none !important;
    }

    body::before {
        content: "Het Digitaal Documentatiecentrum is niet beschikbaar op smartphones. Gebruik een tablet, laptop of desktop.";
        display: flex;
        min-height: 100vh;
        padding: 30px;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        line-height: 1.5;
        color: #002b5c;
        background: #f5f7fa;
    }
}