/* =====================================================================================================
   Portaal page CSS, on top of km-theme.css (KM UI style guide: KM.Timelocal\docs\UI_STYLE_GUIDE.md).
   km-theme.css is a copy of the TimeLocal master (KM.Timelocal.CORE.Website\wwwroot\css\km-theme.css):
   don't edit it here, change the master and copy it again. Portaal-only rules go in this file, tokens only.
   Replaces klep.css: the old helper classes that views still use are kept at the bottom ("Legacy").
   ===================================================================================================== */

/* ---------------------------------------------------------------- App shell
   Same places as before: the app bar on top, the menu on the left, the page on the right.
   On a screen the app bar stays visible and the menu and the page scroll separately (as the old fixed
   top bar did); a document viewer fills the page height (embed/iframe with h-100 inside #mainPage). */
@media screen and (min-width: 768px) {
    html,
    body {
        height: 100%;
    }

    body {
        height: 100vh;
        min-height: 0;
        overflow: hidden;
    }

    .portaal-shell {
        display: flex;
        flex: 1 1 auto;
        min-height: 0;
    }

    .portaal-side {
        overflow-y: auto;
    }

    .portaal-content {
        display: flex;
        flex-direction: column;
        overflow: auto;
    }

    /* grows to fill the page, never shrinks below its content; a 0 basis makes its height definite,
       so viewers with h-100 fill it */
    .portaal-content > #mainPage {
        flex: 1 0 0%;
    }
}

.portaal-side {
    flex: 0 0 280px;
    max-width: 280px;
    padding: var(--km-space-3) var(--km-space-2) var(--km-space-6);
    background: var(--km-bg-surface);
    border-right: var(--km-border);
}

.portaal-content {
    flex: 1 1 0;
    min-width: 0;
    padding: var(--km-space-4) var(--km-space-6) var(--km-space-8);
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .portaal-side {
        flex-basis: 240px;
        max-width: 240px;
    }

    .portaal-content {
        padding: var(--km-space-3) var(--km-space-4) var(--km-space-6);
    }
}

/* Phones (external site): menu above the page, the whole page scrolls, as before */
@media (max-width: 767.98px) {
    .portaal-side {
        max-width: none;
        border-right: 0;
        border-bottom: var(--km-border);
    }

    .portaal-content {
        padding: var(--km-space-3) var(--km-space-4) var(--km-space-6);
    }

    /* the side menu folded behind its "Menu" button (2026-11-05): a short bar above the page */
    .portaal-side {
        padding: var(--km-space-2) var(--km-space-4);
    }

    .portaal-side-collapse.show {
        padding-top: var(--km-space-2);
    }
}

/* App bar: brand, module links, search and the user on the right */
.km-appbar .navbar-brand:hover,
.km-appbar .navbar-brand:focus {
    color: #FFFFFF;
}

/* Search in the app bar: one white box on the right, next to the user.
   [magnifier] [search field] | [Documenten ▾] [→]. The whole box gets the focus ring when something in it has focus. */
.portaal-appbar-search {
    margin: var(--km-space-2) 0;
}

.portaal-search-box {
    display: flex;
    align-items: center;
    width: 420px;
    max-width: 100%;
    height: var(--km-control-height);
    background: var(--km-bg-surface);
    border-radius: var(--km-radius-md);
}

.portaal-search-box:focus-within {
    outline: 2px solid var(--km-gray-0);
    outline-offset: 2px;
}

.portaal-search-icon {
    flex: 0 0 auto;
    margin: 0 var(--km-space-2) 0 var(--km-space-3);
    font-size: var(--km-font-small);
    color: var(--km-gray-600);
}

.portaal-search-box svg.portaal-search-icon {
    width: 14px;
}

.portaal-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    font-size: var(--km-font-body);
    color: var(--km-text-primary);
    background: transparent;
    border: 0;
}

.portaal-search-input::placeholder {
    color: var(--km-gray-600);
}

.portaal-search-input:focus,
.portaal-search-scope:focus,
.portaal-search-button:focus {
    outline: none;   /* the whole box shows the focus ring (:focus-within above) */
}

.portaal-search-scope {
    flex: 0 0 auto;
    height: 22px;
    margin-left: var(--km-space-2);
    padding: 0 var(--km-space-2);
    font-size: var(--km-font-small);
    color: var(--km-gray-700);
    background: var(--km-gray-100);
    border: 0;
    border-radius: var(--km-radius-sm);
    cursor: pointer;
}

.portaal-search-scope:hover {
    background: var(--km-gray-200);
}

.portaal-search-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0 2px 0 var(--km-space-1);
    color: var(--km-primary-600);
    background: transparent;
    border: 0;
    border-radius: var(--km-radius-sm);
    cursor: pointer;
}

.portaal-search-button:hover {
    color: var(--km-primary-700);
    background: var(--km-primary-50);
}

.km-appbar-user {
    padding: var(--km-space-2) 0;
}

@media (min-width: 992px) {
    /* the search box pushes itself to the right; the user sits right after it, behind a thin divider */
    .portaal-appbar-search + .km-appbar-user {
        margin-left: var(--km-space-4);
        padding-left: var(--km-space-4);
        border-left: 1px solid var(--km-primary-400);
    }

    .km-appbar-user {
        padding-left: var(--km-space-4);
    }
}

/* Laptop widths: a narrower box, so the module links keep their room */
@media (min-width: 992px) and (max-width: 1439.98px) {
    .portaal-search-box {
        width: 300px;
    }

    .portaal-appbar-search + .km-appbar-user {
        margin-left: var(--km-space-3);
        padding-left: var(--km-space-3);
    }
}

/* Narrower screens: the bar collapses into the menu button; the search box takes the full width there */
@media (max-width: 991.98px) {
    .portaal-search-box {
        width: 100%;
    }
}

/* Page messages under the app bar (ViewData["Notification"], link added to the start page) */
#messageArea:empty {
    display: none;
}

#messageArea h4 {
    margin: 0;
    font-size: var(--km-font-body);
    font-weight: 600;
}

/* ---------------------------------------------------------------- Left menu (MenuItemPartial)
   Hooks kept: .multiLvNav, .navigationItem (data-target = ".{id}"), .collapse.{id}, .showtable, .parent{id}. */
.portaal-side-title {
    margin: 0 var(--km-space-2) var(--km-space-2);
}

.multiLvNav .navigationItem {
    display: flex;
    align-items: flex-start;
    margin: 1px 0;
    border-left: 3px solid transparent;
    border-radius: 0 var(--km-radius-sm) var(--km-radius-sm) 0;
    cursor: pointer;
}

.multiLvNav .navigationItem:hover {
    background: var(--km-gray-100);
}

.multiLvNav .navigationItem.active {
    background: var(--km-primary-50);
    border-left-color: var(--km-primary-600);
}

.multiLvNav .showtable {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px var(--km-space-2);
    font-size: var(--km-font-body);
    line-height: 20px;
    color: var(--km-text-primary);
    white-space: normal;
    overflow-wrap: anywhere;
}

.multiLvNav .showtable:hover,
.multiLvNav .showtable:focus {
    color: var(--km-primary-700);
    text-decoration: none;
}

.multiLvNav > .navigationItem > .showtable {
    font-weight: 600;
}

.multiLvNav .navigationItem.active > .showtable {
    font-weight: 600;
    color: var(--km-primary-700);
}

.multiLvNav .km-menu-chevron {
    display: flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    height: 32px;
    font-size: var(--km-font-caption);
    color: var(--km-gray-600);
}

.multiLvNav .km-menu-chevron svg {
    transition: transform .15s ease;
}

.multiLvNav .navigationItem[aria-expanded="true"] .km-menu-chevron svg {
    transform: rotate(90deg);
}

/* sub levels: indented with a guide line */
.multiLvNav .portaal-submenu {
    margin-left: var(--km-space-3);
    padding-left: var(--km-space-1);
    border-left: var(--km-border);
}

@media (prefers-reduced-motion: reduce) {
    .multiLvNav .km-menu-chevron svg {
        transition: none;
    }
}

/* Actions and the user card under the menu */
.portaal-side-actions {
    display: flex;
    flex-direction: column;
    gap: var(--km-space-1);
    margin-top: var(--km-space-4);
    padding-top: var(--km-space-3);
    border-top: var(--km-border);
}

.portaal-side-actions .btn {
    display: flex;
    align-items: center;
    gap: var(--km-space-2);
    width: 100%;
    text-align: left;
    white-space: normal;
}

.portaal-side-actions .btn svg {
    flex: 0 0 16px;
    color: var(--km-gray-600);
}

.portaal-side-actions .btn .fa-circle.text-success,
.portaal-side-actions .btn svg.text-success {
    color: var(--km-success-700);
}

.portaal-userinfo {
    margin-top: var(--km-space-4);
    padding: var(--km-space-3);
    font-size: var(--km-font-small);
    color: var(--km-text-secondary);
    background: var(--km-bg-surface-subtle);
    border: var(--km-border);
    border-radius: var(--km-radius-md);
}

.portaal-userinfo .km-dl dd {
    color: var(--km-text-primary);
}

.portaal-userinfo a {
    display: inline-flex;
    align-items: center;
    gap: var(--km-space-1);
    margin-top: var(--km-space-2);
}

/* Login with a tag (internal site): in the menu column, as before */
.portaal-login label {
    font-size: var(--km-font-small);
    font-weight: 600;
    color: var(--km-gray-800);
}

/* ---------------------------------------------------------------- Pages */
/* Home: the blocks of the start page in two columns (briefings and explanations full width) */
.indexContainer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--km-space-4);
    align-items: start;
}

.indexContainer > .portaalBorderedItem {
    margin-bottom: 0;
}

.indexContainer .item {
    grid-column: 1 / -1;
}

@media (max-width: 1199.98px) {
    .indexContainer {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Form, detail and confirmation pages: one column of 960 px (back link, title and card(s) together).
   User decision 2026-11-03 (MVC 5 site, here since 2026-11-05): this column starts at the same left edge as every other
   page, next to the menu; centred, the title jumped left and right between a list and a form. The free space is on the right.
   Pages with a table (lists, the document list, reports) keep the full width: they use it.
   (:has is supported by Edge/Chrome since 2022; an older browser shows the cards at their own width.) */
@media (min-width: 1200px) {
    #mainPage:has(.km-form-card, .km-card-narrow, .km-reading, .km-form-width, .portaal-welcome):not(:has(table)) {
        width: 100%;
        max-width: 960px;
    }

    /* a page that is only a narrow card (details, delete, a small login): a narrower column, the card fills it */
    #mainPage:has(.km-card-narrow):not(:has(.km-form-card, .km-reading, table)) {
        max-width: 640px;
    }

    #mainPage:has(.km-card-narrow):not(:has(.km-form-card, .km-reading, table)) .km-card-narrow {
        max-width: none;
    }

    /* a form card above a full-width list (Ideeën, add forms on admin lists): as wide as the list, so the blocks line up */
    #mainPage:has(table) .km-form-card {
        max-width: none;
    }
}

/* Start page for a visitor who is not logged in: one welcome card at reading width */
.portaal-welcome {
    max-width: 960px;
}

.portaal-welcome > .km-page-title {
    font-size: var(--km-font-h1);
    line-height: 28px;
}

.portaal-welcome-lead {
    font-size: var(--km-font-body);
    color: var(--km-text-secondary);
}

.portaal-welcome-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--km-space-3) var(--km-space-6);
    margin: 0 0 var(--km-space-4);
    padding: 0;
    list-style: none;
}

.portaal-welcome-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--km-space-3);
}

.portaal-welcome-icon {
    display: inline-flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    height: 32px;
    color: var(--km-primary-600);
    background: var(--km-primary-50);
    border-radius: var(--km-radius-md);
}

@media (max-width: 991.98px) {
    .portaal-welcome-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A card title with its actions on the right (start page blocks) */
.portaal-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--km-space-2);
    min-height: var(--km-control-height);
    margin-bottom: var(--km-space-2);
}

.portaal-card-head .km-card-title {
    margin: 0;
}

.portaal-card-actions {
    display: flex;
    align-items: center;
    gap: var(--km-space-1);
}

/* Dashboard start page: one row per question (label, choice, "Tonen") */
.portaal-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--km-space-2);
    margin-bottom: var(--km-space-4);
}

.portaal-query {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--km-space-2) var(--km-space-3);
    padding: var(--km-space-2) 0;
    border-bottom: var(--km-border);
}

.portaal-query:last-child {
    border-bottom: 0;
}

.portaal-query > label:first-child {
    flex: 0 0 300px;
    margin: 0;
    font-size: var(--km-font-small);
    font-weight: 600;
    color: var(--km-gray-800);
}

.portaal-query .custom-select {
    width: 320px;
    max-width: 100%;
}

.portaal-query .km-input-date {
    width: 160px;
}

.portaal-query .custom-control {
    margin: 0;
}

@media (max-width: 991.98px) {
    .portaal-query > label:first-child {
        flex-basis: 100%;
    }
}

/* Foutmeldingen (Dashboard/Errors): the full message of a log line, with its line breaks */
.portaal-log-details {
    margin: var(--km-space-2) 0 0;
    padding: var(--km-space-2);
    font-family: var(--km-font-mono);
    font-size: var(--km-font-caption);
    white-space: pre-wrap;
    background: var(--km-bg-sunken);
    border-radius: var(--km-radius-sm);
}

/* Berichten (external site): a post keeps its line breaks */
.portaal-message-body {
    white-space: pre-line;
}

/* The remove button inside a chip (chosen access types in the document and menu forms) fits the 24 px chip */
.km-chip .btn-km-icon {
    width: 20px;
    min-height: 20px;
    height: 20px;
    padding: 0;
}

/* Document viewers: the frame fills the page */
.mainPage embed,
.mainPage iframe,
embed.mainPage,
iframe.mainPage {
    display: block;
    min-height: 480px;
    background: var(--km-bg-surface);
    border: var(--km-border);
    border-radius: var(--km-radius-md);
}

/* ---------------------------------------------------------------- Legacy (klep.css), mapped onto tokens */
img {
    max-width: 100%;
    max-height: 100%;
}

textarea {
    width: 100%;
}

iframe {
    background-color: var(--km-bg-surface);
}

/* A block of content: the old rounded white box, now a km-card */
.portaalBorderedItem {
    margin-bottom: var(--km-space-4);
    padding: var(--km-space-4);
    color: var(--km-text-primary);
    background: var(--km-bg-surface);
    border: var(--km-border);
    border-radius: var(--km-radius-md);
}

.portaalBorderedItem > h1,
.portaalBorderedItem > h2,
.portaalBorderedItem > h3,
.portaalBorderedItem > h4,
.portaalBorderedItem > h5 {
    font-size: var(--km-font-h2);
    font-weight: 600;
    line-height: 22px;
}

.content,
.menuTextColor {
    color: var(--km-text-primary);
}

.ExpiredItem {
    color: var(--km-danger-700);
    background-color: var(--km-danger-50);
}

.fake-link {
    color: var(--km-text-link);
    text-decoration: underline;
    cursor: pointer;
}

/* Bootstrap 3 names still in older views */
.btn-default {
    color: var(--km-gray-900);
    background-color: var(--km-bg-surface);
    border-color: var(--km-gray-500);
}

.btn-default:hover,
.btn-default:focus {
    color: var(--km-gray-900);
    background-color: var(--km-gray-100);
}

.dl-horizontal {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: var(--km-space-1) var(--km-space-4);
    font-size: var(--km-font-small);
}

.dl-horizontal dt {
    font-weight: 400;
    color: var(--km-text-secondary);
}

.dl-horizontal dd {
    margin: 0;
}

.control-label {
    font-size: var(--km-font-small);
    font-weight: 600;
    color: var(--km-gray-800);
}

/* Status cells in the Dashboard tables: older views colour a td with btn-success (done), btn-warning (not done, still
   valid) or btn-secondary (not done, expired). They carry meaning, so they keep their colour on row hover, and
   btn-secondary on a td stays grey (the theme turns the btn-secondary BUTTON white). */
td.btn-secondary,
.km-table tbody tr:hover > td.btn-secondary {
    color: var(--km-gray-900);
    background-color: var(--km-gray-200);
    border-color: var(--km-gray-200);
}

.km-table tbody tr:hover > td.btn-success {
    background-color: var(--km-success-solid);
}

.km-table tbody tr:hover > td.btn-warning {
    background-color: var(--km-warning-500);
}

.km-table tbody tr:hover > td.ExpiredItem {
    background-color: var(--km-danger-50);
}

/* Portaal loads the default DataTables skin (not the Bootstrap 4 one), which forces "color: inherit !important" on the
   current page button: dark text on the blue km-theme background. */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: var(--km-text-on-primary) !important;
    background: var(--km-primary-600);
}

/* Room for the sort arrows on the right of every sortable header, the same in every state (MVC 5 2026-11-03, here
   2026-11-05). Before, an unsorted header had padding-right 0: the arrows sat under the header text and a column
   changed width when it was sorted. */
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc {
    padding-right: 24px !important;
}

/* A file input next to a button or field: the same 32 px height, so they line up */
.form-control-file {
    min-height: 32px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.textWrap {
    white-space: normal !important;
    word-wrap: break-word;
}

.croptext {
    word-wrap: break-word;
}

.h90 {
    height: 90%;
}

.h100 {
    height: 100%;
}

.w100 {
    width: 100%;
}

.w20 {
    width: 20%;
}

.w-40 {
    width: 40% !important;
}

.w-20 {
    width: 20% !important;
}

.mt15 {
    margin-top: var(--km-space-4);
}

.ml10p {
    margin-left: 10%;
}

.margin-lr-auto {
    margin-left: auto;
    margin-right: auto;
}

/* The document list card: was "display: table", which made the card as wide as a wide table (wider than the screen).
   Now the card keeps the page width and the table scrolls sideways inside it (guide §11.2 "wide tables never widen the page"). */
.displayDocumentsTable {
    display: block;
    min-width: 0;
}

.overFlowXAuto {
    position: relative;
    max-width: 100%;
    overflow-x: auto;
}

/* default DataTables skin: no grey fill on the sorted column (guide §5.4: no coloured columns) */
table.dataTable tbody tr > .sorting_1,
table.dataTable tbody tr > .sorting_2,
table.dataTable tbody tr > .sorting_3,
table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.display tbody tr.even > .sorting_1,
table.dataTable.display tbody tr.odd > .sorting_2,
table.dataTable.display tbody tr.even > .sorting_2,
table.dataTable.order-column tbody tr > .sorting_1,
table.dataTable.display tbody tr.odd,
table.dataTable.display tbody tr.even {
    background-color: transparent;
}

table.dataTable.display tbody tr:hover,
table.dataTable.display tbody tr:hover > .sorting_1 {
    background-color: var(--km-primary-50);
}

.printTableclass {
    font-size: var(--km-font-h2);
}

/* ---------------------------------------------------------------- Print: only the page */
@media print {
    html,
    body {
        height: auto;
        overflow: visible;
        background: var(--km-bg-surface);
    }

    .km-appbar,
    .portaal-side,
    .menu,
    .km-skip-link,
    .km-toast-stack {
        display: none !important;
    }

    .portaal-shell,
    .portaal-content {
        display: block;
        padding: 0;
        overflow: visible;
    }

    .portaalBorderedItem {
        border: 0;
        padding: 0;
    }

    /* columns and buttons marked "not for print" (document list) */
    .nonprint {
        display: none !important;
    }

    /* Document list on paper (2026-11-05): no column buttons or sort arrows, and the table over the full width
       (DataTables centres it at its screen width). */
    .portaal-col-tools {
        display: none !important;
    }

    table.dataTable thead th {
        background-image: none !important;
        padding-right: var(--km-space-2) !important;
    }

    table.dataTable thead th::before,
    table.dataTable thead th::after {
        display: none !important;
    }

    #documentsTable {
        width: 100% !important;
        margin: 0 !important;
    }

    /* no scroll box on paper: it cut wide tables off at the page edge */
    .overFlowXAuto {
        overflow: visible !important;
    }
}

/* =====================================================================================================
   Page structure (2026-11-03, KM.Portaal.CORE): every page gets the same frame, so the pages look finished.
   Tokens and existing km- components only; the portaal- classes below are the start page tiles and the
   Beheer link groups. See docs/STYLING_GUIDE.md in KM.Portaal.CORE.
   ===================================================================================================== */

/* ---------------------------------------------------------------- Page header band (km-page-header, §4.2)
   List, report and overview pages: the white band across the content area, actions on the right.
   Form/detail pages (960 px column, see "Form, detail and confirmation pages" above) keep the header on the canvas,
   in line with their card: there the band would only be as wide as the 960 px column. */
.km-page-header .portaal-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--km-space-2);
    margin-left: auto;
}

.km-page-header .km-page-header-meta {
    display: block;
    margin-top: 2px;
}

@media (min-width: 1200px) {
    #mainPage:has(.km-form-card, .km-card-narrow, .km-reading, .km-form-width, .portaal-welcome):not(:has(table)) > .km-page-header {
        /* the title at the same height as on pages with the band (band: 16 px up, 12 px padding) */
        margin: calc(var(--km-space-3) - var(--km-space-4)) 0 var(--km-space-4);
        padding: 0;
        background: transparent;
        border-bottom: 0;
    }
}

/* ---------------------------------------------------------------- DataTables: toolbar, footer, empty state
   One calm toolbar above every list (rows per page left, search right) and one footer (count left, paging right).
   portaal.js hides the paging when everything fits on one page and the "per pagina" choice for short lists. */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: var(--km-space-3);
    font-size: var(--km-font-small);
    color: var(--km-text-secondary);
}

.dataTables_wrapper .dataTables_filter input {
    width: 240px;
    margin-left: 0;
}

.dataTables_wrapper .dataTables_info {
    padding-top: var(--km-space-3);
    font-size: var(--km-font-small);
    color: var(--km-text-secondary);
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: var(--km-space-2);
}

.dataTables_wrapper .portaal-dt-hidden {
    display: none !important;
}

table.dataTable td.dataTables_empty {
    padding: var(--km-space-6) var(--km-space-4);
    text-align: center;
    color: var(--km-text-secondary);
    background: var(--km-bg-sunken);
}

/* ---------------------------------------------------------------- Start page: what is open for you
   A row of tiles above the blocks: the count, what it is, and a link to the block below. */
.portaal-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--km-space-4);
    margin-bottom: var(--km-space-4);
}

.portaal-stat {
    display: flex;
    align-items: center;
    gap: var(--km-space-3);
    padding: var(--km-space-4);
    color: var(--km-text-primary);
    background: var(--km-bg-surface);
    border: var(--km-border);
    border-left: 3px solid var(--km-primary-600);
    border-radius: var(--km-radius-md);
    text-decoration: none;
}

a.portaal-stat:hover,
a.portaal-stat:focus {
    color: var(--km-text-primary);
    background: var(--km-primary-50);
    text-decoration: none;
}

.portaal-stat--todo {
    border-left-color: var(--km-warning-500);
}

.portaal-stat--done {
    border-left-color: var(--km-success-700);
}

.portaal-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    color: var(--km-primary-600);
    background: var(--km-primary-50);
    border-radius: var(--km-radius-md);
}

.portaal-stat--todo .portaal-stat-icon {
    color: var(--km-warning-800);
    background: var(--km-warning-50);
}

.portaal-stat--done .portaal-stat-icon {
    color: var(--km-success-700);
    background: var(--km-success-50);
}

.portaal-stat-value {
    display: block;
    font-size: 24px;          /* --km-font-display (§3.2): dashboard numbers only */
    line-height: 32px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.portaal-stat-label {
    display: block;
    font-size: var(--km-font-small);
    color: var(--km-text-secondary);
}

/* ---------------------------------------------------------------- Beheer and other link overviews
   Grouped cards; each link has an icon, a title and one line that says what it is for. */
.portaal-link-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: var(--km-space-4);
    align-items: start;
}

.portaal-link-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.portaal-link-list > li + li {
    border-top: var(--km-border);
}

.portaal-link-list a {
    display: flex;
    align-items: flex-start;
    gap: var(--km-space-3);
    padding: var(--km-space-3) var(--km-space-2);
    color: var(--km-text-primary);
    text-decoration: none;
    border-radius: var(--km-radius-sm);
}

.portaal-link-list a:hover,
.portaal-link-list a:focus {
    background: var(--km-gray-100);
    text-decoration: none;
}

.portaal-link-list .portaal-link-icon {
    flex: 0 0 20px;
    margin-top: 2px;
    color: var(--km-primary-600);
    text-align: center;
}

.portaal-link-list .portaal-link-title {
    display: block;
    font-weight: 600;
    color: var(--km-text-link);
}

.portaal-link-list .portaal-link-text {
    display: block;
    font-size: var(--km-font-small);
    color: var(--km-text-secondary);
}

/* ---------------------------------------------------------------- Side menu: the user card */
.portaal-userinfo .portaal-user-name {
    display: block;
    font-size: var(--km-font-body);
    font-weight: 600;
    color: var(--km-text-primary);
}

.portaal-userinfo .portaal-user-meta {
    display: block;
    margin-bottom: var(--km-space-2);
}

/* ---------------------------------------------------------------- Card headers with a count and actions */
.km-card .portaal-card-head .km-badge {
    margin-left: var(--km-space-2);
    vertical-align: middle;
}

/* km-card already has the card padding (16 px, §4.5): a Bootstrap card-body inside it must not add another 20 px. */
.card.km-card > .card-body {
    padding: 0;
}

/* Cards stacked in the normal page flow: 16 px apart (cards in a grid use the grid gap). */
.km-card + .km-card {
    margin-top: var(--km-space-4);
}

/* ... and only there: next to each other in a grid the margin pushed the 2nd and 3rd card 16 px down (Beheer, 2026-11-05) */
:is(.indexContainer, .portaal-stats, .portaal-link-groups) > .km-card + .km-card {
    margin-top: 0;
}

/* Count badges next to a card title, also in the older portaalBorderedItem blocks */
.portaalBorderedItem .km-card-title > .km-badge,
.km-card .km-card-title > .km-badge {
    margin-left: var(--km-space-2);
    vertical-align: middle;
}

/* View tabs in the page header band (Claims, OldTimers): the tab underline sits on the band's bottom edge,
   without the tabs' own grey line (§5.7 page-level view tabs). */
.km-page-header > .km-tabs {
    order: 10;                 /* their own row under title and actions, whatever the markup order */
    flex-basis: 100%;
    margin-bottom: calc(-1 * var(--km-space-3));
    border-bottom: 0;
}

/* The title block takes the free space, so the actions stay on the right of the title row. */
.km-page-header > .km-page-header-title {
    flex: 1 1 auto;
    min-width: 0;
}

/* A table frame inside a card: the card is the frame (no second border); the table still scrolls inside it. */
.km-card .km-table-wrap {
    border: 0;
    border-radius: 0;
}

/* Text and a button inside an empty state */
.km-empty > p {
    margin-bottom: var(--km-space-3);
}

.km-empty > p:last-child {
    margin-bottom: 0;
}

/* A title or subject that opens the same item as the code link next to it (2026-11-05): it reads as normal text,
   and shows it is a link on hover/focus, so the tables look the same but the larger text is clickable too. */
a.portaal-title-link {
    color: inherit;
    text-decoration: none;
}

a.portaal-title-link:hover,
a.portaal-title-link:focus {
    color: var(--km-text-link);
    text-decoration: underline;
}

/* The search words marked in the search results (2026-11-05) */
mark.portaal-hit {
    padding: 0 1px;
    color: inherit;
    background: var(--km-warning-100);
    border-radius: 2px;
}

/* Overview pages for all sites (Dashboard/All…, 2026-11-05): one folded section per site, a summary line on the
   button; the table is built when the section opens (portaal.js portaalOpenSite). */
.portaal-site-section {
    margin-bottom: var(--km-space-2);
}

.portaal-site-toggle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--km-space-1) var(--km-space-3);
    width: 100%;
    padding: var(--km-space-3) var(--km-space-4);
    font: inherit;
    color: var(--km-text-primary);
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--km-radius-md);
    cursor: pointer;
}

.portaal-site-toggle:hover {
    background: var(--km-bg-surface-subtle);
}

.portaal-site-name {
    font-weight: 600;
}

.portaal-site-summary {
    font-size: var(--km-font-small);
    color: var(--km-text-secondary);
}

.portaal-site-chevron {
    margin-left: auto;
    color: var(--km-text-secondary);
    transition: transform 0.15s;
}

.portaal-site-toggle[aria-expanded="true"] .portaal-site-chevron {
    transform: rotate(180deg);
}

.portaal-site-body {
    padding: 0 var(--km-space-4) var(--km-space-4);
}

/* the site's own box inside the section: no second frame */
.portaal-site-body > .portaalBorderedItem {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* A text cell that may break a very long word when the table would otherwise not fit (2026-11-05: subjects on
   Mondelinge toelichtingen). Normal words still wrap between words first. */
.portaal-wrap-anywhere {
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* The subject column of Mondelinge toelichtingen: wide enough to read (2026-11-05) */
.km-table th.portaal-col-subject {
    min-width: 180px;
}

/* Mondelinge toelichtingen has 12 columns: its headers may take two lines ("Geldig t.e.m."), so the table fits */
#table_OralExplanation thead th {
    white-space: normal;
}

/* A Bootstrap row placed directly in the page (Mijn gebruiker, dossier details): no outer gutters, so its blocks start at
   the same left edge as the title; a gap between the columns instead (2026-11-05; before 15 px left of the title).
   On wide screens the columns stay side by side and share the width minus the gap, in the same ratio. */
#mainPage > .row {
    margin-left: 0;
    margin-right: 0;
    row-gap: var(--km-space-4);
}

#mainPage > .row > [class*="col"] {
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 992px) {
    /* only rows of up to 3 blocks side by side: a row with more columns must keep wrapping (2026-11-05: Mijn planning
       put 40 day columns on one line) */
    #mainPage > .row:not(:has(> :nth-child(4))) {
        flex-wrap: nowrap;
        column-gap: var(--km-space-4);
    }

    #mainPage > .row:not(:has(> :nth-child(4))) > [class*="col"] {
        flex-shrink: 1;
    }
}

/* Mijn planning (Home/Plans, 2026-11-05): one card per day; two per row on phones, a week per row (Monday to Saturday)
   on wide screens, each day in its weekday column so the weeks line up. Today has a blue edge. */
.portaal-plan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--km-space-3);
}

@media (min-width: 992px) {
    .portaal-plan-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .portaal-plan-d1 { grid-column: 1; }
    .portaal-plan-d2 { grid-column: 2; }
    .portaal-plan-d3 { grid-column: 3; }
    .portaal-plan-d4 { grid-column: 4; }
    .portaal-plan-d5 { grid-column: 5; }
    .portaal-plan-d6 { grid-column: 6; }
}

.portaal-plan-today {
    border-color: var(--km-primary-500);
    box-shadow: 0 0 0 1px var(--km-primary-500);
}

/* Buttons in a card's title row keep their text on one line (2026-11-05: "Werkzoneplannen" took two lines at 1280 px,
   twice as high as the icon buttons next to it); the row wraps below the title instead when space runs out. */
.portaal-card-actions .btn {
    white-space: nowrap;
}

/* ... and the title too (from 768 px): when both do not fit, the buttons move to the line below the title */
.portaal-card-head {
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    .portaal-card-head > .km-card-title {
        white-space: nowrap;
    }
}