:root {
    --hc-ink: #17202a;
    --hc-muted: #65737e;
    --hc-line: #dfe5ea;
    --hc-surface: #ffffff;
    --hc-soft: #f4f7f9;
    --hc-primary: #427a4d;
    --hc-primary-dark: #2f603b;
    --hc-danger: #a12b2b;
    --hc-success: #3f7549;
    --hc-warning: #fff5cc;
}

.hc-wrap, .hc-portal { color: var(--hc-ink); }
.hc-wrap * , .hc-portal * { box-sizing: border-box; }
.hc-wrap { max-width: 1540px; }
.hc-portal { max-width: 1200px; margin: 2rem auto; font-family: inherit; }

.hc-page-header {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin: 1.25rem 0; padding: 1.2rem 1.4rem; border-radius: 16px;
    background: linear-gradient(135deg, #eaf5f8, #f7fbfc); border: 1px solid #d6e8ee;
}
.hc-page-header h1, .hc-page-header h2 { margin: 0 0 .25rem; color: var(--hc-primary-dark); }
.hc-page-header p { margin: 0; color: var(--hc-muted); }
.hc-brand { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hc-primary); }

.hc-card {
    display: block; margin: 1rem 0; padding: 1.25rem; background: var(--hc-surface);
    border: 1px solid var(--hc-line); border-radius: 14px; box-shadow: 0 3px 16px rgba(23,32,42,.05);
}
details.hc-card > summary { cursor: pointer; font-size: 1.05rem; }
details.hc-card[open] > summary { margin-bottom: 1rem; }

.hc-grid { display: grid; gap: 1rem; }
.hc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hc-grid-sidebar { grid-template-columns: minmax(360px, .9fr) minmax(560px, 1.4fr); align-items: start; }
.hc-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: 1rem 0; }

.hc-card label { display: flex; flex-direction: column; gap: .4rem; font-weight: 600; }
.hc-card label.hc-checkbox { flex-direction: row; align-items: center; font-weight: 500; }
.hc-card input[type=text], .hc-card input[type=email], .hc-card input[type=password],
.hc-card input[type=date], .hc-card input[type=time], .hc-card input[type=number],
.hc-card select, .hc-card textarea {
    width: 100%; min-height: 40px; padding: .55rem .65rem; border: 1px solid #b9c5cc; border-radius: 8px; background: #fff;
}
.hc-card select[multiple] { min-height: 150px; }

.hc-button, .hc-portal .button {
    display: inline-block; padding: .65rem 1rem; border: 0; border-radius: 8px;
    background: var(--hc-primary); color: #fff !important; text-decoration: none; cursor: pointer; font-weight: 700;
}
.hc-button:hover { background: var(--hc-primary-dark); }
.hc-button-secondary { background: #e8eef1; color: var(--hc-ink) !important; }

.hc-toolbar, .hc-period-nav, .hc-section-title, .hc-item-row, .hc-item-actions, .hc-tabs {
    display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
}
.hc-toolbar { margin: 1rem 0; }
.hc-period-nav { justify-content: space-between; }
.hc-section-title { justify-content: space-between; }
.hc-section-title h2 { margin-bottom: .2rem; }

.hc-status { margin-left: auto; padding: .4rem .7rem; border-radius: 999px; font-weight: 700; }
.hc-status.is-open { color: var(--hc-success); background: #e7f6ee; }
.hc-status.is-closed { color: #755c15; background: #fff3c4; }

.hc-table-scroll { width: 100%; overflow-x: auto; }
.hc-planning-table, .hc-front-table { width: 100%; border-collapse: collapse; }
.hc-front-table th, .hc-front-table td { padding: .7rem; border-bottom: 1px solid var(--hc-line); text-align: left; vertical-align: top; }
.hc-front-table th { background: var(--hc-soft); }
.hc-planning-table td { vertical-align: top; }
.hc-row-conflict td { background: #fff5f5 !important; }
.hc-conflict { color: var(--hc-danger); font-size: .9em; margin-bottom: .25rem; }
.hc-ok { color: var(--hc-success); font-weight: 700; }
.hc-bad { color: var(--hc-danger); font-weight: 700; }
.hc-muted { color: var(--hc-muted); }

.hc-alert { padding: .85rem 1rem; margin: 1rem 0; border-left: 5px solid #d0a821; background: var(--hc-warning); border-radius: 8px; }
.hc-alert-error { border-color: var(--hc-danger); background: #fff0f0; color: #7e1d1d; }
.hc-alert-success { border-color: var(--hc-success); background: #eaf8f0; color: #165b38; }

.hc-item-row { justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--hc-line); }
.hc-item-actions { margin-left: auto; }
.hc-inline-form { display: inline-flex; align-items: center; gap: .45rem; margin: 0; }
.hc-inline-form label { display: inline-flex; flex-direction: row; align-items: center; gap: .25rem; }
.hc-user-form select { width: auto; min-width: 180px; }

.hc-tabs { margin: 0 0 1rem; border-bottom: 1px solid var(--hc-line); }
.hc-tabs a { padding: .75rem 1rem; color: var(--hc-primary-dark); text-decoration: none; border-bottom: 3px solid transparent; }
.hc-tabs a.is-active { border-color: var(--hc-primary); font-weight: 800; }
.hc-tabs a:last-child { margin-left: auto; }

.button-link-delete { border: 0; background: transparent; color: #b32d2e; cursor: pointer; text-decoration: underline; padding: 0; }

@media (max-width: 960px) {
    /*
     * minmax(0, 1fr) en niet 1fr. Een 1fr-kolom heeft van zichzelf een
     * ondergrens van auto: ze wordt nooit smaller dan haar inhoud. Staat er
     * een tabel van acht kolommen in, dan groeit de kolom mee tot die tabel
     * past - gemeten 875 pixels in een vak van 370 - en loopt het formulier
     * ernaast buiten het scherm. Met een nul als ondergrens mag de kolom wel
     * krimpen en schuift de tabel binnen haar eigen venster.
     */
    .hc-grid-2, .hc-grid-3, .hc-grid-sidebar, .hc-check-grid { grid-template-columns: minmax(0, 1fr); }
    .hc-page-header { align-items: flex-start; }
    .hc-brand { display: none; }
    .hc-status { margin-left: 0; }
}

@media print {
    body { background: #fff !important; }
    #wpadminbar, #adminmenumain, #wpfooter, .notice, .hc-no-print, .hc-toolbar, .hc-tabs, .hc-portal-header { display: none !important; }
    #wpcontent, #wpbody-content { margin: 0 !important; padding: 0 !important; }
    .hc-card { box-shadow: none; border: 0; padding: 0; }
    .hc-planning-print { display: block !important; }
    .hc-planning-table, .hc-front-table { font-size: 9pt; }
    .hc-planning-table th, .hc-planning-table td, .hc-front-table th, .hc-front-table td { padding: 4px !important; }
    a { color: #000 !important; text-decoration: none !important; }
}

.hc-table-search {
    width: min(360px, 100%); margin: 0 0 .75rem; padding: .55rem .7rem;
    border: 1px solid #b9c5cc; border-radius: 8px;
}
#hc-print-root { display: none; }
@media print {
    body.hc-print-target-mode > *:not(#hc-print-root) { display: none !important; }
    body.hc-print-target-mode #hc-print-root { display: block !important; }
    body.hc-print-target-mode #hc-print-root table { width: 100%; border-collapse: collapse; }
    body.hc-print-target-mode #hc-print-root th,
    body.hc-print-target-mode #hc-print-root td { border: 1px solid #bbb; padding: 6px; text-align: left; }
}

/* 1.1: kalenderweergave die de oorspronkelijke HomeClinic-maandgrid volgt. */
.hc-view-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.hc-preview-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin: 0 0 1rem; padding: .85rem 1rem; border: 1px solid #b8d8e3;
    border-left: 5px solid var(--hc-primary); border-radius: 10px; background: #eef8fb;
}
.hc-preview-banner span { color: var(--hc-muted); }
.hc-user-preview-action { display: inline-block; margin-top: .55rem; }
.hc-user-preview-action form { display: inline-flex; }

.hc-calendar-scroll { margin-top: 1rem; }
.hc-calendar-table { width: 100%; min-width: 980px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.hc-calendar-table th {
    padding: .65rem .55rem; text-align: left; background: #17202a; color: #fff;
    border-right: 5px solid #fff; font-size: .9rem; text-transform: lowercase;
}
.hc-calendar-table th:last-child { border-right: 0; }
.hc-calendar-table td {
    position: relative; padding: .45rem .5rem; vertical-align: top; line-height: 1.35;
    border-right: 5px solid #fff; font-size: .88rem; word-break: break-word;
}
.hc-calendar-table td:last-child { border-right: 0; }
.hc-calendar-table td.is-valid { background: #bafbaf; }
.hc-calendar-table td.is-invalid { background: #fabfab; }
.hc-calendar-table td.is-inactive { background: #efefef; color: #8a949b; }
.hc-calendar-table td.is-today { box-shadow: inset 0 0 0 3px #17202a; }
.hc-calendar-date-row td { padding-top: .55rem; font-size: .98rem; }
.hc-calendar-date-row td strong { font-size: 1.08rem; }
.hc-calendar-morning-row td, .hc-calendar-evening-row td { min-height: 48px; }
.hc-calendar-unassigned-row td { min-height: 42px; color: #3f4a50; }
tbody.hc-calendar-week > tr:last-child > td { border-bottom: 5px solid #fff; }
.hc-calendar-label {
    display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem;
    margin: 0 .35rem .2rem 0; border-radius: 4px; background: rgba(255,255,255,.65);
    font-size: .72rem; font-weight: 800; color: #17202a;
}
.hc-calendar-badges { float: right; display: inline-flex; gap: .25rem; margin-left: .3rem; }
.hc-activity-badge {
    display: inline-flex; align-items: center; justify-content: center; min-width: 1.45rem; height: 1.45rem;
    padding: 0 .3rem; border-radius: 4px; background: #2458d3; color: #fff; font-weight: 800;
}
/* Het taartje op dubbele grootte: het is het enige teken in de kalender
   dat niets met de bezetting te maken heeft, en het hoort op te vallen. */
.hc-birthday-badge { display: inline-flex; align-items: center; min-height: 1.45rem; font-size: 2em; line-height: 1; }
.hc-calendar-legend { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; margin-top: 1rem; color: var(--hc-muted); font-size: .9rem; }
.hc-calendar-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.hc-legend-dot { width: .9rem; height: .9rem; border-radius: 3px; display: inline-block; }
.hc-legend-dot.is-valid { background: #bafbaf; }
.hc-legend-dot.is-invalid { background: #fabfab; }

@media (max-width: 700px) {
    .hc-portal { margin: 1rem auto; }
    .hc-preview-banner, .hc-section-title { align-items: flex-start; }
    .hc-preview-banner { flex-direction: column; }
    .hc-view-actions { justify-content: flex-start; }
}

@media print {
    .hc-calendar-table { min-width: 0; font-size: 7pt; }
    .hc-calendar-table th, .hc-calendar-table td { padding: 3px !important; border-right-width: 2px; }
    tbody.hc-calendar-week > tr:last-child > td { border-bottom-width: 2px; }
    .hc-calendar-label { min-width: 12px; height: 12px; font-size: 6pt; }
    .hc-activity-badge { min-width: 12px; height: 12px; font-size: 6pt; }
}

/* 1.2: visuele pariteit met de oorspronkelijke Angular Material-app. */
:root {
    --hc-primary: #427a4d;
    --hc-primary-dark: #2f603b;
    --hc-accent: #5deb63;
    --hc-app-bg: #fafafa;
    --hc-ink: #212121;
    --hc-muted: #6b7280;
    --hc-line: #dddddd;
    --hc-valid: #bafbaf;
    --hc-invalid: #fabfab;
    --hc-inactive: #efefef;
}

body.homeclinic-app-admin #adminmenumain { display: none; }
body.homeclinic-app-admin #wpcontent { margin-left: 0; padding-left: 0; }
body.homeclinic-app-admin #wpbody-content { padding-bottom: 0; }
body.homeclinic-app-admin #wpfooter { display: none; }
body.homeclinic-app-admin { background: var(--hc-app-bg); }
body.homeclinic-app-admin .wrap.hc-wrap { margin: 0; max-width: none; }

.hc-app-shell,
.hc-admin-app {
    background: var(--hc-app-bg);
    color: var(--hc-ink);
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
    min-height: 720px;
    overflow: hidden;
}
.hc-portal.hc-app-shell {
    width: min(1600px, calc(100vw - 24px));
    max-width: none;
    margin: 1.25rem 50%;
    transform: translateX(-50%);
    border: 1px solid #e0e0e0;
    box-shadow: 0 3px 14px rgba(0,0,0,.12);
}

.hc-app-toolbar {
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 18px 0 24px;
    background: var(--hc-primary);
    color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,.25);
    position: relative;
    z-index: 5;
}
.hc-app-title {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hc-app-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 3px;
}
.hc-app-actions form { margin: 0; }
.hc-icon-button {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #fff !important;
    text-decoration: none !important;
    cursor: pointer;
    padding: 0;
    transition: background .16s ease;
}
.hc-icon-button:hover,
.hc-icon-button:focus { background: rgba(255,255,255,.16); color: #fff !important; outline: none; }
.hc-icon-button .dashicons { width: 24px; height: 24px; font-size: 24px; }
.hc-icon-button-dark { color: var(--hc-primary) !important; }
.hc-icon-button-dark:hover { background: rgba(86,146,95,.12); color: var(--hc-primary-dark) !important; }

.hc-app-body { display: flex; min-height: 656px; align-items: stretch; }
.hc-app-sidenav {
    width: 170px;
    flex: 0 0 170px;
    background: #fff;
    border-right: 1px solid #e1e1e1;
    box-shadow: 1px 0 3px rgba(0,0,0,.05);
    display: flex;
    flex-direction: column;
}
.hc-sidenav-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 18px 16px 13px;
    color: var(--hc-primary-dark);
    border-bottom: 1px solid #eeeeee;
}
.hc-sidenav-brand .dashicons { font-size: 23px; width: 23px; height: 23px; }
.hc-app-sidenav nav { padding: 8px 0; }
.hc-app-sidenav nav a {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 15px;
    color: #333;
    text-decoration: none;
    border-left: 4px solid transparent;
    font-size: 14px;
}
.hc-app-sidenav nav a:hover { background: rgba(0,0,0,.04); }
.hc-app-sidenav nav a.is-active {
    color: var(--hc-primary-dark);
    background: rgba(86,146,95,.11);
    border-left-color: var(--hc-primary);
    font-weight: 600;
}
.hc-app-sidenav nav .dashicons { color: #666; }
.hc-app-sidenav nav a.is-active .dashicons { color: var(--hc-primary); }
.hc-sidenav-user {
    margin-top: auto;
    padding: 14px 16px;
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
}
.hc-sidenav-user small { color: var(--hc-muted); }

.hc-app-content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 20px 24px 36px;
    background: var(--hc-app-bg);
}
.hc-screen-intro { margin: 0 0 14px; color: #666; }
.hc-screen-section { margin: 0; }
.hc-screen-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 14px;
}
.hc-screen-heading h1 { margin: 0 0 3px; font-size: 24px; font-weight: 400; color: #222; }
.hc-screen-heading p { margin: 0; color: var(--hc-muted); }
.hc-planning-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    padding: 7px 11px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
}
.hc-planning-state.is-open { background: #e8f5e9; color: #1b5e20; }
.hc-planning-state.is-closed { background: #fff8e1; color: #7a5b00; }

.hc-material-card,
.hc-card {
    display: block;
    margin: 0 0 24px;
    padding: 22px 24px;
    background: #fff;
    border: 0;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
}
.hc-material-card h2,
.hc-card h2 { margin: 0 0 18px; font-size: 20px; font-weight: 500; color: #292929; }
.hc-material-card h3 { font-weight: 500; }
.hc-card-title-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 16px; }
.hc-card-title-row h2 { margin: 0; }

.hc-form-stack { display: grid; gap: 15px; }
.hc-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 15px; }
.hc-material-card label,
.hc-dialog label,
.hc-card label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 13px;
    font-weight: 500;
    color: #555;
}
.hc-material-card label.hc-checkbox,
.hc-dialog label.hc-checkbox,
.hc-card label.hc-checkbox { flex-direction: row; align-items: center; gap: 8px; }
.hc-material-card input[type=text],
.hc-material-card input[type=email],
.hc-material-card input[type=password],
.hc-material-card input[type=date],
.hc-material-card input[type=time],
.hc-material-card input[type=number],
.hc-material-card select,
.hc-material-card textarea,
.hc-dialog input[type=text],
.hc-dialog input[type=email],
.hc-dialog input[type=password],
.hc-dialog input[type=date],
.hc-dialog input[type=time],
.hc-dialog input[type=number],
.hc-dialog select,
.hc-dialog textarea {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    background: #f5f5f5;
    border: 0;
    border-bottom: 2px solid #9e9e9e;
    border-radius: 3px 3px 0 0;
    box-shadow: none;
}
.hc-material-card textarea,
.hc-dialog textarea { min-height: 90px; }
.hc-material-card input:focus,
.hc-material-card select:focus,
.hc-material-card textarea:focus,
.hc-dialog input:focus,
.hc-dialog select:focus,
.hc-dialog textarea:focus {
    outline: none;
    border-bottom-color: var(--hc-primary);
    box-shadow: 0 1px 0 var(--hc-primary);
}
.hc-form-actions,
.hc-dialog-actions { display: flex; align-items: center; gap: 9px; margin-top: 20px; }
.hc-admin-app .button,
.hc-portal .button,
.hc-button {
    min-height: 36px;
    border: 0 !important;
    border-radius: 2px !important;
    padding: 7px 16px !important;
    background: #eeeeee !important;
    color: #333 !important;
    box-shadow: 0 2px 3px rgba(0,0,0,.18) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    line-height: 22px !important;
}
.hc-admin-app .button-primary,
.hc-portal .button-primary,
.hc-button:not(.hc-button-secondary) {
    background: var(--hc-primary) !important;
    color: #fff !important;
}
.hc-admin-app .button:hover,
.hc-portal .button:hover,
.hc-button:hover { filter: brightness(.97); }

.hc-calendar-scroll { margin-top: 0; overflow-x: auto; }
.hc-calendar-table.hc-calendar-original {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    background: var(--hc-app-bg);
}
.hc-calendar-table.hc-calendar-original th {
    background: transparent;
    color: #222;
    padding: 5px;
    text-align: left;
    border: 0;
    border-right: 5px solid var(--hc-app-bg);
    font-size: 14px;
    font-weight: 700;
    text-transform: lowercase;
}
.hc-calendar-table.hc-calendar-original th.is-selected { background: #000; color: #fff; }
.hc-calendar-table.hc-calendar-original td {
    padding: 5px;
    border: 0;
    border-right: 5px solid var(--hc-app-bg);
    vertical-align: top;
    line-height: 1.35;
    font-size: 13px;
    color: #222;
    word-break: break-word;
}
.hc-calendar-table.hc-calendar-original td.is-valid { background: var(--hc-valid); }
.hc-calendar-table.hc-calendar-original td.is-invalid { background: var(--hc-invalid); }
.hc-calendar-table.hc-calendar-original td.is-inactive { background: var(--hc-inactive); color: #888; }
.hc-calendar-table.hc-calendar-original td.is-selected-day { box-shadow: inset 0 0 0 3px rgba(0,0,0,.82); }
.hc-calendar-table.hc-calendar-original tbody.hc-calendar-week > tr:last-child > td { border-bottom: 5px solid var(--hc-app-bg); }
.hc-calendar-date-row td { min-height: 31px; }
.hc-calendar-morning-row td,
.hc-calendar-evening-row td { height: 48px; }
.hc-calendar-unassigned-row td { height: 40px; color: #444; }
.hc-calendar-cell-link {
    display: block;
    min-height: 100%;
    color: inherit !important;
    text-decoration: none !important;
}
.hc-calendar-table td:hover .hc-calendar-cell-link { filter: brightness(.94); }
.hc-calendar-badges { float: right; display: inline-flex; gap: 3px; margin-left: 5px; }
.hc-activity-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 25px;
    height: 25px;
    padding: 0 5px;
    border-radius: 0;
    background: #427a4d;
    color: #fff;
    font-weight: 700;
}
.hc-birthday-badge { display: inline-flex; align-items: center; min-height: 25px; font-size: 2em; line-height: 1; }
.hc-calendar-legend { margin-top: 12px; }
.hc-week-nav-head { width: 44px !important; }
.hc-week-nav {
    width: 44px !important;
    text-align: center !important;
    vertical-align: middle !important;
    background: var(--hc-app-bg) !important;
    border-bottom: 5px solid var(--hc-app-bg) !important;
}
.hc-week-nav a { display: flex; align-items: center; justify-content: center; min-height: 100%; color: #111 !important; text-decoration: none; }
.hc-week-nav:hover { background: #efefef !important; }
.hc-week-section { margin-bottom: 20px; }

.hc-conflict-banner {
    margin: 10px 0 24px;
    padding: 15px;
    background: var(--hc-invalid);
    color: #471f17;
}
.hc-day-columns { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; align-items: start; }
.hc-day-column { min-width: 0; }
.hc-simple-table { width: 100%; border-collapse: collapse; margin-bottom: 5px; }
.hc-simple-table th,
.hc-simple-table td { padding: 7px; border: 1px solid #ddd; text-align: left; vertical-align: top; }
.hc-simple-table tbody tr:nth-child(even) { background: #f9f9f9; }
.hc-simple-table th { font-weight: 600; background: #fff; }

.hc-data-table { width: 100%; border-collapse: collapse; }
.hc-data-table th { background: #fff; color: #333; font-weight: 600; }
.hc-data-table th,
.hc-data-table td { padding: 12px 10px !important; border-bottom: 1px solid #e6e6e6 !important; vertical-align: middle; }
.hc-data-table tbody tr:hover { background: rgba(0,0,0,.04); }
.hc-table-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 10px;
}
.hc-table-search {
    flex: 1 1 330px;
    width: min(420px, 100%);
    margin: 0;
    min-height: 44px;
    padding: 8px 10px;
    border: 0;
    border-bottom: 2px solid #9e9e9e;
    background: transparent;
    font-size: 18px;
}
.hc-table-pager { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.hc-table-pager select { min-height: 36px; }
.hc-table-pager button { border: 0; background: transparent; cursor: pointer; padding: 6px; }
.hc-table-pager button:disabled { opacity: .35; cursor: default; }

.hc-dialog {
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 0;
    border: 0;
    border-radius: 3px;
    box-shadow: 0 10px 34px rgba(0,0,0,.34);
    color: var(--hc-ink);
}
.hc-dialog::backdrop { background: rgba(0,0,0,.48); }
.hc-dialog-header { display: flex; align-items: center; gap: 15px; padding: 20px 24px 12px; }
.hc-dialog-header h2 { margin: 0; font-size: 23px; font-weight: 400; }
.hc-dialog-close { margin-left: auto; border: 0; background: transparent; font-size: 30px; line-height: 1; cursor: pointer; color: #666; }
.hc-dialog-content { padding: 8px 24px 24px; overflow-y: auto; max-height: calc(100vh - 120px); }

.hc-segment-button {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 6px 11px;
    border: 1px solid #c5c5c5;
    background: #fff;
    color: #333 !important;
    text-decoration: none !important;
}
.hc-segment-button + .hc-segment-button { margin-left: -1px; }
.hc-segment-button.is-active { background: var(--hc-primary); border-color: var(--hc-primary); color: #fff !important; }

.hc-preview-banner {
    border-radius: 2px;
    border-color: #b9d7be;
    border-left-color: var(--hc-primary);
    background: #eef7f0;
}
.hc-alert { border-radius: 0; }

.hc-switch { display: inline-flex !important; cursor: pointer; }
.hc-switch input { position: absolute; opacity: 0; }
.hc-switch span { width: 36px; height: 18px; border-radius: 20px; background: #aaa; position: relative; transition: .18s; }
.hc-switch span::after { content: ""; width: 22px; height: 22px; position: absolute; top: -2px; left: -2px; background: #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.4); transition: .18s; }
.hc-switch input:checked + span { background: rgba(86,146,95,.45); }
.hc-switch input:checked + span::after { left: 16px; background: var(--hc-primary); }

.hc-login-card {
    width: min(420px, calc(100% - 30px));
    margin: 50px auto;
    padding: 34px;
    text-align: center;
    background: #fff;
    box-shadow: 0 4px 18px rgba(0,0,0,.18);
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}
.hc-login-mark { width: 62px; height: 62px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--hc-primary); color: #fff; }
.hc-login-mark .dashicons { font-size: 34px; width: 34px; height: 34px; }

@media (max-width: 1050px) {
    .hc-app-sidenav { width: 152px; flex-basis: 152px; }
    .hc-app-content { padding: 18px 16px 30px; }
    .hc-day-columns, .hc-grid-sidebar { grid-template-columns: minmax(0, 1fr); }
    .hc-form-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 720px) {
    .hc-portal.hc-app-shell { width: 100%; margin: 0; transform: none; border-left: 0; border-right: 0; }
    .hc-app-toolbar { min-height: 56px; padding: 0 8px 0 14px; }
    .hc-app-title { font-size: 17px; }
    .hc-app-body { display: block; }
    .hc-app-sidenav { width: 100%; border-right: 0; border-bottom: 1px solid #ddd; display: block; }
    .hc-sidenav-brand, .hc-sidenav-user { display: none; }
    .hc-app-sidenav nav { display: flex; overflow-x: auto; padding: 0; }
    .hc-app-sidenav nav a { flex: 0 0 auto; min-height: 50px; padding: 7px 11px; border-left: 0; border-bottom: 3px solid transparent; }
    .hc-app-sidenav nav a.is-active { border-left: 0; border-bottom-color: var(--hc-primary); }
    .hc-app-sidenav nav a .dashicons { display: none; }
    .hc-app-content { padding: 14px 10px 26px; }
    .hc-form-grid { grid-template-columns: minmax(0, 1fr); }
    .hc-screen-heading { align-items: flex-start; flex-direction: column; }
    .hc-table-tools { align-items: stretch; flex-direction: column; }
    .hc-table-pager { justify-content: space-between; }
    .hc-calendar-table.hc-calendar-original { min-width: 900px; }
    .hc-dialog { width: calc(100vw - 18px); }
}

@media print {
    body.homeclinic-app-admin #wpadminbar,
    .hc-app-toolbar,
    .hc-app-sidenav,
    .hc-screen-intro,
    .hc-planning-state,
    .hc-no-print,
    .hc-calendar-legend { display: none !important; }
    body.homeclinic-app-admin #wpcontent { margin: 0 !important; }
    /*
     * Het thema houdt het portaal op het scherm smal. Op papier telt die
     * beperking niet: daar hoort de kalender het hele blad te vullen.
     */
    .hc-portal,
    .hc-app-shell, .hc-admin-app, .hc-app-content { min-height: 0; padding: 0 !important; margin: 0 !important; background: #fff !important; box-shadow: none !important; border: 0 !important; transform: none !important; width: 100% !important; max-width: none !important; }
    .hc-calendar-table.hc-calendar-original { min-width: 0; font-size: 7pt; }
    .hc-calendar-table.hc-calendar-original th,
    .hc-calendar-table.hc-calendar-original td { padding: 3px !important; border-right-width: 2px; }
    .hc-calendar-table.hc-calendar-original tbody.hc-calendar-week > tr:last-child > td { border-bottom-width: 2px; }
}


/* 1.3: HomeClinic huisstijl */
:root {
    --hc-brand-green: #56925f;
    --hc-brand-green-dark: #2f603b;
    --hc-brand-green-bright: #5deb63;
    --hc-brand-soft: #eef7f0;
}
.hc-toolbar-brand {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}
.hc-brand-logo {
    display: block;
    width: 132px;
    max-height: 46px;
    object-fit: contain;
    object-position: left center;
    flex: 0 0 auto;
}
.hc-sidenav-brand {
    min-height: 74px;
    padding: 13px 14px;
    background: linear-gradient(180deg, #f7fbf8, #eef7f0);
}
.hc-sidenav-logo {
    display: block;
    width: 138px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}
.hc-app-toolbar {
    background: linear-gradient(100deg, #427a4d 0%, #56925f 72%, #4d8858 100%);
    box-shadow: 0 2px 8px rgba(34, 76, 44, .28);
}
.hc-app-sidenav nav a.is-active {
    background: var(--hc-brand-soft);
}
.hc-app-sidenav nav a:hover {
    background: #f3f8f4;
}
.hc-screen-heading h1,
.hc-material-card h2,
.hc-card h2 {
    color: #284f32;
}
.hc-planning-state.is-open,
.hc-status.is-open {
    background: #e5f4e8;
    color: #285f36;
}
.hc-preview-banner {
    border-color: #b9d7be;
    border-left-color: var(--hc-brand-green);
    background: var(--hc-brand-soft);
}
.hc-login-card {
    border-top: 6px solid var(--hc-brand-green);
    border-radius: 6px;
}
.hc-login-logo {
    display: block;
    width: min(235px, 78%);
    height: auto;
    margin: 0 auto 18px;
}
.hc-login-card h2 {
    margin-top: 0;
    color: var(--hc-brand-green-dark);
}
.hc-admin-app .button-primary:focus,
.hc-portal .button-primary:focus,
.hc-button:focus,
.hc-icon-button:focus {
    outline: 3px solid rgba(93,235,99,.55);
    outline-offset: 2px;
}
.hc-material-card,
.hc-card {
    border-top: 2px solid rgba(86,146,95,.18);
}
.hc-table-search:focus {
    border-bottom-color: var(--hc-brand-green) !important;
    box-shadow: 0 1px 0 var(--hc-brand-green) !important;
    outline: none;
}
.hc-calendar-table.hc-calendar-original th {
    background: #294c31;
}
.hc-calendar-table.hc-calendar-original th.is-selected {
    background: #17301d;
}
.hc-activity-badge {
    background: var(--hc-brand-green-dark);
}
.hc-legend-dot.is-valid {
    box-shadow: inset 0 0 0 1px rgba(47,96,59,.2);
}
@media (max-width: 720px) {
    .hc-brand-logo { width: 104px; }
    .hc-toolbar-brand { gap: 10px; }
}

/* 1.3.1: kalenderpersonalisatie, verlofworkflow en printoptimalisatie */
.hc-calendar-table.hc-calendar-original th {
    color: #fff !important;
    background: #294c31;
}
.hc-calendar-table.hc-calendar-original th.is-selected { color: #fff !important; }

.hc-user-highlight,
.hc-highlight-preview {
    background: var(--hc-user-highlight, #fff200);
    color: #151515;
    border-radius: 3px;
    padding: 1px 3px;
    font-weight: 700;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.hc-highlight-demo { display: inline-block; }
.hc-account-color-row { display: flex; align-items: end; gap: 22px; flex-wrap: wrap; }
.hc-account-color-row label { min-width: 170px; }
.hc-account-color-row input[type=color] {
    width: 92px !important;
    height: 46px;
    min-height: 46px;
    padding: 3px !important;
    cursor: pointer;
}
.hc-highlight-preview { margin-bottom: 8px; }

.hc-mine-toggle-form { margin: 0 8px 0 0; }
.hc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    color: #333;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.hc-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.hc-toggle-track {
    width: 38px;
    height: 20px;
    border-radius: 999px;
    background: #a8ada9;
    position: relative;
    transition: background .16s ease;
    flex: 0 0 auto;
}
.hc-toggle-track::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.32);
    transition: transform .16s ease;
}
.hc-toggle input:checked + .hc-toggle-track { background: var(--hc-primary); }
.hc-toggle input:checked + .hc-toggle-track::after { transform: translateX(18px); }
.hc-toggle input:focus-visible + .hc-toggle-track { outline: 3px solid rgba(86,146,95,.3); outline-offset: 2px; }
.hc-print-scope-note { margin-top: 3px !important; font-weight: 600; color: #284f32 !important; }

.hc-data-table th { text-align: left !important; }
.hc-card-title-row .hc-table-hint { color: var(--hc-muted); font-size: 12px; font-weight: 400; }
.hc-status-cell { width: 74px; text-align: center; }
.hc-status-icon { font-size: 22px; width: 22px; height: 22px; }
.hc-status-icon.is-pending { color: #c07b12; }
.hc-status-icon.is-approved { color: #2e7d32; }
.hc-status-icon.is-rejected { color: #b3261e; }
.hc-row-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 150px; }
.hc-row-actions form { margin: 0; }
.hc-action-approve { background: #2e7d32 !important; color: #fff !important; }
.hc-action-reject { background: #b3261e !important; color: #fff !important; }
.hc-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-left: 7px;
    padding: 0 6px;
    border-radius: 999px;
    background: #b3261e;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.hc-table-tools-main { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.hc-filter-toggle,
.hc-filter-reset {
    min-height: 36px;
    padding: 6px 11px;
    border: 1px solid #c6cdc8;
    background: #fff;
    color: #284f32;
    cursor: pointer;
    font-weight: 600;
}
.hc-filter-toggle.is-active { background: var(--hc-brand-soft); border-color: var(--hc-primary); }
.hc-table-filter-panel {
    display: none;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 10px;
    margin: -2px 0 14px;
    padding: 14px;
    background: #f4f8f5;
    border: 1px solid #dbe7dd;
}
.hc-table-filter-panel.is-open { display: grid; }
.hc-table-filter-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hc-table-filter-field > span { font-size: 12px; font-weight: 700; color: #435149; }
.hc-table-filter-field input,
.hc-table-filter-field select {
    width: 100%;
    min-height: 38px;
    border: 1px solid #bbc6be;
    background: #fff;
}
.hc-filter-range { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hc-filter-reset-wrap { display: flex; align-items: end; }

@media (max-width: 900px) {
    .hc-table-filter-panel { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
    .hc-table-tools-main { flex-wrap: wrap; }
}
@media (max-width: 560px) {
    .hc-table-filter-panel { grid-template-columns: minmax(0, 1fr); }
    .hc-toggle span:last-child { max-width: 135px; white-space: normal; }
}

@page { size: A4 landscape; margin: 5mm; }
@media print {
    html, body { width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; }
    #hc-print-root { width: 100% !important; max-width: none !important; }
    .hc-planning-print { width: 100% !important; margin: 0 !important; padding: 0 !important; }
    .hc-screen-heading { margin: 0 0 2.5mm !important; align-items: flex-start; }
    .hc-screen-heading h1 { font-size: 13pt !important; line-height: 1.1 !important; margin: 0 0 1mm !important; }
    .hc-screen-heading p { font-size: 7pt !important; margin: 0 !important; }
    #hc-print-root .hc-view-actions,
    #hc-print-root .hc-no-print,
    #hc-print-root .hc-calendar-legend { display: none !important; }
    #hc-print-root .hc-table-scroll,
    #hc-print-root .hc-calendar-scroll { overflow: visible !important; width: 100% !important; }
    #hc-print-root .hc-calendar-table.hc-calendar-original {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
        font-size: 6.2pt !important;
        line-height: 1.08 !important;
        page-break-inside: avoid !important;
        break-inside: avoid-page !important;
    }
    #hc-print-root .hc-calendar-table.hc-calendar-original th {
        padding: 1.2mm 1mm !important;
        font-size: 6.5pt !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    #hc-print-root .hc-calendar-table.hc-calendar-original td {
        padding: .8mm 1mm !important;
        word-break: normal !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    #hc-print-root .hc-user-highlight {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    #hc-print-root .hc-front-table { font-size: 6.5pt !important; page-break-inside: avoid; }
    #hc-print-root .hc-front-table th,
    #hc-print-root .hc-front-table td { padding: 1mm !important; }
}


/* 1.3.2: eendaags verlof en optionele einddatum */
.hc-field-hint {
    font-size: .82em;
    font-weight: 400;
    opacity: .72;
}

/* 1.3.3: persoonlijke kalender zonder lege placeholders + dynamische één-pagina-print */
.hc-calendar-table.hc-calendar-mine-only .hc-muted {
    display: none;
}

@page {
    size: A4 landscape;
    margin: 4mm;
}

@media print {
    body.hc-print-target-mode #hc-print-root.hc-print-calendar {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #hc-print-root.hc-print-calendar .hc-planning-print {
        width: 100% !important;
        max-width: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
        /* Geen zoom: die maakt elke rand één beeldpunt breed, waardoor het
         * verschil tussen de dagrand en het dunne lijntje verdwijnt. Het
         * passend maken gebeurt met de lettergrootte per dichtheid. */
    }

    #hc-print-root.hc-print-calendar .hc-screen-heading {
        margin: 0 0 1.6mm !important;
        gap: 0 !important;
    }

    #hc-print-root.hc-print-calendar .hc-screen-heading h1 {
        font-size: 11.5pt !important;
        line-height: 1.05 !important;
        margin: 0 0 .6mm !important;
    }

    #hc-print-root.hc-print-calendar .hc-screen-heading p {
        display: inline !important;
        font-size: 6.4pt !important;
        line-height: 1.05 !important;
        margin: 0 2.5mm 0 0 !important;
    }

    #hc-print-root.hc-print-calendar .hc-table-scroll,
    #hc-print-root.hc-print-calendar .hc-calendar-scroll {
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* Belangrijk: de volledige tabel niet als één ondeelbaar blok markeren.
       Chrome schoof die daardoor bij sommige persoonlijke views naar pagina 2. */
    .hc-calendar-table.hc-calendar-original {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        page-break-before: auto !important;
        break-before: auto !important;
        page-break-inside: auto !important;
        break-inside: auto !important;
        line-height: 1.02 !important;
    }

    .hc-calendar-table.hc-calendar-original tr {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    .hc-calendar-table.hc-calendar-original th,
    .hc-calendar-table.hc-calendar-original td {
        padding: .55mm .72mm !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    /*
     * Hier stonden vaste rijhoogtes. Die zijn vervangen door de hoogtes
     * per weekaantal verderop; deze regels wonnen daarvan omdat ze naar
     * een id verwijzen, en lieten de kalender maar half gevuld.
     */
    #hc-print-root.hc-print-calendar .hc-calendar-morning-row td,
    #hc-print-root.hc-print-calendar .hc-calendar-evening-row td {
        vertical-align: top !important;
    }

    #hc-print-root.hc-print-calendar .hc-user-highlight {
        padding: 0 .45mm !important;
        border-radius: .5mm !important;
    }

    #hc-print-root.hc-print-calendar.hc-print-density-normal .hc-calendar-table.hc-calendar-original {
        font-size: 6.15pt !important;
    }
    #hc-print-root.hc-print-calendar.hc-print-density-normal .hc-calendar-table.hc-calendar-original th {
        font-size: 6.25pt !important;
    }

    #hc-print-root.hc-print-calendar.hc-print-density-compact .hc-calendar-table.hc-calendar-original {
        font-size: 5.55pt !important;
        line-height: 1 !important;
    }
    #hc-print-root.hc-print-calendar.hc-print-density-compact .hc-calendar-table.hc-calendar-original th {
        font-size: 5.8pt !important;
    }

    #hc-print-root.hc-print-calendar.hc-print-density-dense .hc-calendar-table.hc-calendar-original {
        font-size: 4.95pt !important;
        line-height: .98 !important;
    }
    #hc-print-root.hc-print-calendar.hc-print-density-dense .hc-calendar-table.hc-calendar-original th {
        font-size: 5.35pt !important;
    }

    #hc-print-root.hc-print-calendar.hc-print-density-ultra .hc-calendar-table.hc-calendar-original {
        font-size: 4.4pt !important;
        line-height: .96 !important;
    }
    #hc-print-root.hc-print-calendar.hc-print-density-ultra .hc-calendar-table.hc-calendar-original th {
        font-size: 4.9pt !important;
    }

    #hc-print-root.hc-print-calendar .hc-activity-badge,
    #hc-print-root.hc-print-calendar .hc-birthday-badge {
        min-width: 10px !important;
        height: 10px !important;
        min-height: 10px !important;
        font-size: 5pt !important;
        line-height: 10px !important;
    }
}

/* 1.3.4: persoonlijke iCal/ICS synchronisatie. */
.hc-card-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.hc-calendar-sync-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e8f3ea;
    color: var(--hc-primary-dark);
    font-size: 25px;
    line-height: 44px;
}
.hc-calendar-sync-note {
    margin: 1rem 0;
    padding: .8rem 1rem;
    border-left: 4px solid var(--hc-primary);
    border-radius: 8px;
    background: #eef7f0;
    color: #284c31;
}
.hc-calendar-url-label { display: block !important; }
.hc-material-card input.hc-calendar-url[readonly] {
    width: 100%;
    margin-top: .45rem;
    background: #f7faf8;
    color: #29412f;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: .86rem;
}
.hc-calendar-sync-actions {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
    margin: .8rem 0 .4rem;
}
.hc-calendar-sync-actions .hc-button,
.hc-calendar-sync-actions .hc-button-secondary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.hc-calendar-sync-actions .is-copied { background: var(--hc-success); }
.hc-calendar-help {
    margin: 1rem 0;
    padding: .8rem 1rem;
    border: 1px solid var(--hc-line);
    border-radius: 10px;
    background: #fbfcfb;
}
.hc-calendar-help summary { cursor: pointer; font-weight: 700; color: var(--hc-primary-dark); }
.hc-calendar-help p:last-child { margin-bottom: 0; }
.hc-calendar-regenerate {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 0;
}
.hc-calendar-regenerate span { color: var(--hc-muted); font-size: .9rem; }

@media (max-width: 640px) {
    .hc-card-title-row { align-items: center; }
    .hc-calendar-sync-icon { width: 38px; height: 38px; line-height: 38px; font-size: 22px; }
    .hc-calendar-sync-actions .hc-button { width: 100%; justify-content: center; }
}

/* 1.3.5: o/a/v-legenda, plannerdiagnostiek en teamkalender. */
.hc-v-entry {
    cursor: help;
    border-bottom: 1px dotted currentColor;
    text-decoration: none;
}
.hc-planning-diagnostics {
    margin-top: 20px;
}
.hc-planning-diagnostics > .hc-card-title-row > .dashicons {
    width: 42px;
    height: 42px;
    font-size: 27px;
    line-height: 42px;
    text-align: center;
    color: var(--hc-primary-dark);
    background: #e8f3ea;
    border-radius: 50%;
}
.hc-stat-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 10px;
    margin: 14px 0 20px;
}
.hc-stat-card {
    min-height: 84px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid #dce4de;
    border-left: 4px solid var(--hc-primary);
    border-radius: 8px;
    background: #f8fbf9;
}
.hc-stat-card strong {
    color: var(--hc-primary-dark);
    font-size: 24px;
    line-height: 1;
}
.hc-stat-card span { color: #53615a; font-size: 12px; font-weight: 600; }
.hc-stat-card.is-good { border-left-color: #378447; background: #f0f8f2; }
.hc-stat-card.is-bad { border-left-color: #c9503f; background: #fff2ef; }
.hc-stat-card.is-bad strong { color: #9e3023; }
.hc-status-summary-table { width: 100%; }
.hc-status-summary-table th { white-space: nowrap; }
.hc-status-summary-table td { vertical-align: top; }
.hc-status-summary-table tr.is-problem td { background: #fff7f5; }
.hc-summary-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-weight: 700;
    font-size: 12px;
}
.hc-summary-status i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    background: #378447;
}
.hc-summary-status.is-bad { color: #9e3023; }
.hc-summary-status.is-bad i { background: #c9503f; }
.hc-summary-status.is-good { color: #2f6f3a; }
.hc-summary-reasons { min-width: 280px; line-height: 1.45; }

@media (max-width: 1100px) {
    .hc-stat-grid { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
}
@media (max-width: 620px) {
    .hc-stat-grid { grid-template-columns: repeat(2, minmax(110px, 1fr)); }
}

/* 1.3.6: auditlog, meldingen en veilige verlofverwijdering. */
.hc-row-deleted td {
    font-style: italic;
    opacity: .74;
    background: #f3f3f3 !important;
}
.hc-status-icon.is-deleted { color: #6b7280; }
.hc-status-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 2px 4px 2px 0;
}
.hc-status-form select { min-width: 132px; }
.hc-table-footnote { color: var(--hc-muted); margin: 12px 0 0; }
.hc-action-restore { border-color: var(--hc-primary) !important; color: var(--hc-primary-dark) !important; }

.hc-notification-bell { position: relative; }
.hc-notification-badge {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #d63d2f;
    color: #fff;
    border: 2px solid #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 14px;
    text-align: center;
    box-sizing: border-box;
}
.hc-notification-center .hc-card-title-row { align-items: center; }
.hc-notification-list { display: grid; gap: 10px; margin-top: 14px; }
.hc-notification-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 15px;
    border: 1px solid #dde4df;
    border-left: 4px solid #aab6ae;
    border-radius: 8px;
    background: #fafcfb;
}
.hc-notification-item.is-unread {
    border-left-color: var(--hc-primary);
    background: #eef8f0;
}
.hc-notification-main { flex: 1 1 auto; min-width: 0; }
.hc-notification-main p { margin: 5px 0 0; }
.hc-notification-title-row { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; }
.hc-notification-title-row time { flex: 0 0 auto; color: var(--hc-muted); font-size: 12px; }

.hc-toast-stack {
    position: fixed;
    z-index: 1000000;
    right: 18px;
    bottom: 18px;
    width: min(390px, calc(100vw - 36px));
    display: grid;
    gap: 10px;
    pointer-events: none;
}
.hc-toast {
    position: relative;
    pointer-events: auto;
    padding: 15px 42px 14px 16px;
    border: 1px solid #cfe0d3;
    border-left: 5px solid var(--hc-primary, #3f8650);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(0,0,0,.18);
    color: #26342a;
    animation: hc-toast-in .18s ease-out;
}
.hc-toast > button {
    position: absolute;
    top: 5px;
    right: 8px;
    border: 0;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #647068;
}
.hc-toast strong { display: block; color: var(--hc-primary-dark, #245532); }
.hc-toast p { margin: 5px 0 8px; }
.hc-toast-actions a { color: var(--hc-primary-dark, #245532); font-weight: 700; text-decoration: none; }
@keyframes hc-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 720px) {
    .hc-notification-item { flex-direction: column; }
    .hc-notification-title-row { flex-direction: column; gap: 2px; }
    .hc-status-form { display: flex; width: 100%; flex-wrap: wrap; }
}
.hc-field-note {
    margin: 4px 0 0;
    padding: 9px 11px;
    border-radius: 7px;
    background: #eef7f0;
    color: #36533d;
    font-size: 12px;
    line-height: 1.45;
}

/* E-mailvoorkeuren in het account-tabblad */
.hc-mail-master {
    margin: 0 0 12px;
}

.hc-mail-types {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.hc-mail-type {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid var(--hc-border, #d7e0d9);
    border-radius: 6px;
}

.hc-mail-type input {
    margin-top: 3px;
}

@media (min-width: 720px) {
    .hc-mail-types {
        grid-template-columns: 1fr 1fr;
    }
}

/* Taalkeuze */
.hc-language-select {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 320px;
}

/* Rechts-naar-links: Arabisch en Marokkaans-Arabisch.
   De kalender houdt zijn weekvolgorde, want die volgt de datum en niet de
   leesrichting; de omliggende opmaak spiegelt wel mee. */
.hc-rtl {
    text-align: right;
}

.hc-rtl .hc-calendar-grid,
.hc-rtl .hc-week-strip,
.hc-rtl table {
    direction: ltr;
    text-align: start;
}

.hc-rtl .hc-app-sidenav {
    text-align: right;
}

.hc-rtl .hc-mail-type,
.hc-rtl .hc-account-color-row {
    flex-direction: row-reverse;
}

/*
 * Inlogscherm in het portaal.
 *
 * Bewust dezelfde opbouw en dezelfde waarden als homeclinic-login.css, het
 * WordPress-inlogscherm: dezelfde achtergrond, hetzelfde logo erboven,
 * dezelfde kaart. Het enige verschil is dat hier geen invoervelden staan,
 * alleen de knop die naar dat scherm doorstuurt. Zo is het voor een
 * medewerker één doorlopend geheel in plaats van twee schermen die op elkaar
 * lijken.
 */
.hc-login-screen {
    background: linear-gradient(180deg, #f4f7f9 0%, #e7eef0 100%);
    padding: 6vh 20px;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    /*
     * Hoog genoeg om als scherm te lezen en niet als blok op een pagina. Het
     * WordPress-inlogscherm vult de hoogte; hier staat er meestal nog een
     * menubalk van het thema boven, dus blijft er wat over in plaats van
     * honderd procent.
     */
    min-height: 72vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 * De blokken van het thema plat, zodat die achtergrond de rand haalt.
 *
 * Zonder dit begint de kleur pas onder de ruimte die het thema om zijn
 * inhoud legt - bij Divi honderdnegenendertig pixels wit tussen de menubalk
 * en het inlogscherm. Dan lijkt het een blok op een pagina en niet het scherm
 * waar het WordPress-inlogscherm op volgt.
 *
 * Dezelfde aanpak als bij het portaal zelf, en om dezelfde reden geen lijst
 * met klassenamen: welke blokken het zijn, verschilt per thema. De breedte
 * blijft uitdrukkelijk 100% met border-box; width:auto laat een floatkolom
 * naar haar inhoud groeien, en dat maakte in 2.25.1 de hele pagina te breed.
 *
 * De buitenste schil van een thema blijft ongemoeid: die draagt vaak de
 * ruimte voor een vastgezette menubalk.
 */
body :where(div, section, article, main, aside, form):has(.hc-login-screen) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body :where(div, section, article, main, aside, form):has(.hc-login-screen):not(
    #page-container, #et-main-area, #et-boc, #page, #wrapper, .site, .et-l
) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.hc-login-inner {
    width: min(320px, 100%);
    margin: 0 auto;
    text-align: center;
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}

.hc-login-screen .hc-login-logo {
    display: block;
    width: 220px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 18px;
}

.hc-login-screen .hc-login-card {
    width: auto;
    margin: 12px 0 0;
    padding: 26px 24px 24px;
    background: #ffffff;
    border: 1px solid #dfe5ea;
    border-top: 1px solid #dfe5ea;
    border-radius: 14px;
    box-shadow: 0 3px 16px rgba(23, 32, 42, .08);
    text-align: center;
}

.hc-login-screen .hc-login-card h2 {
    margin: 0 0 8px;
    color: #2f603b;
    font-size: 20px;
}

.hc-login-screen .hc-login-card p {
    margin: 0 0 20px;
    color: #65737e;
    font-size: 14px;
}

/*
 * Exact dezelfde knop als op het WordPress-inlogscherm.
 *
 * De !important staat hier niet voor de sier: verderop in deze stylesheet
 * krijgt .hc-button een vierkante hoek met !important mee, uit de tijd dat
 * alle knoppen er zo uitzagen. Zonder deze regels wint die en staat er een
 * hoekige knop naast een afgeronde.
 */
.hc-login-screen .hc-login-button {
    display: inline-block;
    min-height: 0 !important;
    padding: 6px 18px !important;
    border: 1px solid #2f603b !important;
    border-radius: 10px !important;
    background: #427a4d !important;
    color: #fff !important;
    box-shadow: none !important;
    text-shadow: none;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.9;
    transition: background .15s ease;
}

.hc-login-screen .hc-login-button:hover,
.hc-login-screen .hc-login-button:focus {
    background: #2f603b !important;
    color: #fff !important;
}

.hc-login-screen .hc-login-button:focus {
    box-shadow: 0 0 0 2px rgba(66, 122, 77, .35) !important;
    outline: 2px solid transparent;
}

@media (prefers-color-scheme: dark) {
    .hc-login-screen {
        background: linear-gradient(180deg, #1b2430 0%, #141b24 100%);
    }
}

/* Markeerschakelaar met kleurkiezer boven de planning. */
.hc-highlight-form {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.hc-highlight-color input[type="color"] {
    width: 34px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--hc-line);
    border-radius: 8px;
    background: none;
    cursor: pointer;
}

.hc-highlight-color input[type="color"]:disabled {
    cursor: not-allowed;
    opacity: .45;
}

/*
 * Het portaal sluit aan op de bovenrand.
 *
 * De witruimte boven de werkbalk komt van de pagina waarin de shortcode staat,
 * niet van het portaal zelf. Daarom wordt de bovenmarge van de omhullende
 * blokken weggehaald in plaats van het portaal omhoog te trekken: dat laatste
 * zou over een themakop heen schuiven in plaats van hem op te ruimen.
 */
:where(.entry-content, .page-content, .site-main, .site-content, main, article):has(.hc-app-shell) {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.hc-portal.hc-app-shell {
    margin-top: 0;
}

/* Op een telefoon van rand tot rand: daar telt elke pixel hoogte. */
@media (max-width: 782px) {
    .hc-portal.hc-app-shell {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        width: 100vw;
        max-width: 100vw;
        border-radius: 0;
    }

    :where(.entry-content, .page-content, .site-main, .site-content, main, article):has(.hc-app-shell) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/*
 * Een dun lijntje boven de regel met verlof en niet-ingeplande medewerkers.
 *
 * Die regel is een andere soort informatie dan de twee shiftregels erboven:
 * daar staat wie werkt, hier wie niet. Zonder scheiding lezen ze als één lijst.
 */
.hc-calendar-table .hc-calendar-unassigned-row td {
    border-top: 1px solid #d8dee2;
}

.hc-calendar-table.hc-calendar-original .hc-calendar-unassigned-row td {
    border-top: 1px solid rgba(23, 32, 42, .16);
}

/* Weeknummer vooraan elke week. */
.hc-calendar-table th.hc-week-number,
.hc-calendar-table td.hc-week-number {
    width: 34px;
    min-width: 34px;
    text-align: center;
    font-size: .78rem;
    color: var(--hc-muted);
    background: var(--hc-soft);
    border-right: 1px solid #d8dee2;
    font-variant-numeric: tabular-nums;
}

.hc-calendar-table td.hc-week-number {
    font-weight: 700;
    color: #47555f;
}

@media print {
    .hc-calendar-table th.hc-week-number,
    .hc-calendar-table td.hc-week-number {
        width: 18px;
        min-width: 18px;
        font-size: 6pt;
    }
}

/*
 * Printen per weergave.
 *
 * De papierrichting zelf wordt per weergave in de pagina gezet, omdat een
 * @page-regel voor het hele document geldt. Hier staat wat daarbij hoort.
 */
@media print {
    /* De lijst wordt door het script geschaald; hij mag daarbij niet afbreken. */
    .hc-print-fit {
        overflow: visible !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .hc-print-portrait .hc-front-table {
        font-size: 8pt;
    }

    .hc-print-portrait .hc-front-table th,
    .hc-print-portrait .hc-front-table td {
        padding: 2px 4px !important;
    }

    /* De kop van de tabel herhalen wanneer het toch over twee vellen gaat. */
    .hc-front-table thead {
        display: table-header-group;
    }

    .hc-front-table tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/*
 * Dagweergave: blokken in plaats van een kalendercel.
 *
 * Een dag in een kalendergrid is een smalle kolom met afgekorte namen. Wie de
 * dagweergave opent wil juist niet hoeven inzoomen, dus staan de gegevens hier
 * onder elkaar met de namen voluit.
 */
.hc-day-view {
    display: grid;
    gap: 12px;
    margin: 12px 0 4px;
}

@media (min-width: 720px) {
    .hc-day-view {
        grid-template-columns: 1fr 1fr;
    }
}

.hc-day-block {
    background: var(--hc-surface);
    border: 1px solid var(--hc-line);
    border-left: 4px solid var(--hc-primary);
    border-radius: 12px;
    padding: 14px 16px;
}

.hc-day-view.is-invalid .hc-day-block {
    border-left-color: var(--hc-danger);
}

.hc-day-block h2 {
    margin: 0 0 6px;
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hc-muted);
}

.hc-day-content {
    font-size: 1.02rem;
    line-height: 1.6;
}

/* De periodenavigatie van week en dag. */
.hc-portal .hc-period-nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}

.hc-portal .hc-period-nav .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
}

/*
 * De navigatie van week en dag past altijd op één regel.
 *
 * Elke stapknop draagt twee opschriften. Op een breed scherm staat het
 * volledige — "Vorige week" — omdat daar plaats voor is en het duidelijker
 * leest. Wordt het scherm smaller, dan blijft "Vorige" over, en op een
 * telefoon alleen het pijltje. "Vandaag" blijft altijd staan: dat is de knop
 * waarmee je terugvindt waar je was, en een pijl zonder woord zegt dat niet.
 *
 * Het volledige opschrift blijft als title en aria-label bestaan, dus wie met
 * een schermlezer werkt of even blijft hangen met de muis, hoort of ziet nog
 * steeds waar de knop heen gaat.
 */
.hc-portal .hc-period-nav {
    flex-wrap: nowrap;
    align-items: center;
}

.hc-portal .hc-nav-step .hc-nav-kort {
    display: none;
}

@media (max-width: 640px) {
    .hc-portal .hc-nav-step .hc-nav-lang {
        display: none;
    }

    .hc-portal .hc-nav-step .hc-nav-kort {
        display: inline;
    }
}

@media (max-width: 430px) {
    .hc-portal .hc-nav-step .hc-nav-kort {
        display: none;
    }

    .hc-portal .hc-nav-step {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .hc-portal .hc-period-nav {
        gap: 6px;
    }
}


/*
 * Zwart-wit afdrukken, met één uitzondering.
 *
 * Deze regels horen bij de printwortel die de printknop opbouwt, en niet bij
 * een eigen printlaag ernaast: die printwortel berekent zelf al een dichtheid
 * en zoomfactor om de maand op één vel te krijgen, en twee mechanismen die
 * elkaar tegenwerken leverden een scheve afdruk op.
 */
@media print {
    /*
     * De groene en rode dagtegels vallen weg. In grijstinten krijgen ze
     * ongeveer dezelfde waarde, dus op papier zeggen ze niets; de rasterlijnen
     * dragen de structuur al.
     */
    #hc-print-root .hc-calendar-table td.is-valid,
    #hc-print-root .hc-calendar-table td.is-invalid,
    #hc-print-root .hc-calendar-table td.is-inactive,
    #hc-print-root .hc-calendar-table.hc-calendar-original td.is-valid,
    #hc-print-root .hc-calendar-table.hc-calendar-original td.is-invalid,
    #hc-print-root .hc-calendar-table.hc-calendar-original td.is-inactive {
        background: #fff !important;
        color: #000 !important;
    }

    /*
     * De rand rond een dag weegt zwaarder dan het lijntje binnenin. Staan ze
     * even dik, dan leest de regel met verlof als een eigen vakje in plaats
     * van als het onderste deel van diezelfde dag.
     */
    #hc-print-root .hc-calendar-table td,
    #hc-print-root .hc-calendar-table th {
        border-left-color: #333 !important;
        border-right-color: #333 !important;
    }

    #hc-print-root .hc-calendar-unassigned-row td {
        border-top: 0.3pt solid #c4c9cc !important;
    }

    /*
     * De eigen markering gaat wel in kleur mee: dat is de reden dat iemand de
     * planning meeneemt.
     *
     * Twee lagen, want browsers laten achtergronden bij het printen standaard
     * weg. De achtergrond met print-color-adjust werkt zodra achtergronden
     * aanstaan; de rand eromheen wordt altijd gedrukt, want een rand telt niet
     * als achtergrond. Zo is de markering in beide gevallen te zien.
     */
    #hc-print-root .hc-user-highlight {
        background-color: var(--hc-user-highlight, #fff200) !important;
        color: #000 !important;
        border: 0.7pt solid var(--hc-user-highlight, #fff200) !important;
        border-radius: .6mm !important;
        padding: 0 .5mm !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        box-decoration-break: clone;
    }

    /* De bolletjes in de legende zonder kleur, maar wel te onderscheiden. */
    #hc-print-root .hc-legend-dot {
        background: #fff !important;
        border: 0.5pt solid #000 !important;
    }
}

/*
 * De laatste kleurvlakken uit de afdruk.
 *
 * De balk met de dagnamen is op het scherm donkergroen en de activiteiten-
 * markeringen zijn gevulde blokjes. Op papier zijn dat inktvlakken die niets
 * toevoegen: de kop staat toch al bovenaan en een blokje met een letter erin
 * leest net zo goed met een randje eromheen.
 */
@media print {
    #hc-print-root .hc-calendar-table th,
    #hc-print-root .hc-calendar-table.hc-calendar-original th {
        background: #fff !important;
        color: #000 !important;
        border-right-color: #333 !important;
        border-bottom: 0.8pt solid #333 !important;
        font-weight: 700;
    }

    #hc-print-root .hc-week-number {
        background: #fff !important;
        color: #000 !important;
    }

    #hc-print-root .hc-activity-badge,
    #hc-print-root .hc-calendar-label {
        background: #fff !important;
        color: #000 !important;
        border: 0.5pt solid #000 !important;
    }
}

/*
 * Echte lijnen rond elke dag op papier.
 *
 * Op het scherm wordt het raster gemaakt met witte tussenruimtes: 5 px tussen
 * de kolommen, 1 mm tussen de weken. Tegen een gekleurde dagtegel werkt dat,
 * want het wit tekent de scheiding. Op papier verdwijnt die tegel en daarmee
 * ook de scheiding: dan staan zeven kolommen tekst naast elkaar zonder dat
 * iets aangeeft waar de ene dag ophoudt.
 *
 * Daarom worden die witte ruimtes hier vervangen door lijnen. Een dag is
 * daarbij één vakje van vier regels hoog: datum, ochtend, avond en de regel
 * met verlof. De buitenrand is vol en donker, het lijntje voor de verlofregel
 * blijft dun en licht.
 */
@media print {
    #hc-print-root .hc-calendar-table,
    #hc-print-root .hc-calendar-table.hc-calendar-original {
        border-collapse: collapse !important;
    }

    #hc-print-root .hc-calendar-table td,
    #hc-print-root .hc-calendar-table.hc-calendar-original td {
        border-top: 0 !important;
        border-bottom: 0 !important;
        border-left: 0.75pt solid #555 !important;
        border-right: 0.75pt solid #555 !important;
    }

    /* Bovenkant van de dag: de regel met het dagnummer. */
    #hc-print-root .hc-calendar-date-row td,
    #hc-print-root .hc-calendar-table.hc-calendar-original .hc-calendar-date-row td {
        border-top: 2.25pt solid #222 !important;
    }

    /* Onderkant van de dag, en het dunne lijntje erboven. */
    #hc-print-root .hc-calendar-unassigned-row td,
    #hc-print-root .hc-calendar-table.hc-calendar-original .hc-calendar-unassigned-row td {
        border-top: 0.5pt solid #c4c9cc !important;
        border-bottom: 2.25pt solid #222 !important;
    }

    /* Buitenrand van de tabel, zodat het raster sluit. */
    #hc-print-root .hc-calendar-table th:first-child,
    #hc-print-root .hc-calendar-table td:first-child {
        border-left: 2.25pt solid #222 !important;
    }

    #hc-print-root .hc-calendar-table th:last-child,
    #hc-print-root .hc-calendar-table td:last-child {
        border-right: 2.25pt solid #222 !important;
    }

    #hc-print-root .hc-calendar-table th,
    #hc-print-root .hc-calendar-table.hc-calendar-original th {
        border-right: 0.75pt solid #555 !important;
        border-top: 2.25pt solid #222 !important;
    }

    /*
     * De weken sluiten nu op elkaar aan met een lijn in plaats van een witte
     * strook. Dat scheelt hoogte, dus de regels mogen wat ruimer staan.
     */
    #hc-print-root .hc-calendar-unassigned-row td {
        padding-bottom: 0.6mm !important;
    }
}

/*
 * De maandkalender vult het vel.
 *
 * De rijen hadden vaste hoogtes in millimeters. Die zijn gekozen op de krapste
 * maand, dus bij een maand van vijf weken bleef onderaan een strook wit staan
 * ter grootte van bijna een derde van de pagina.
 *
 * In plaats daarvan krijgt de tabel de hoogte die er is. De browser verdeelt
 * die over de rijen die er zijn: vijf weken worden ruimer dan zes, zonder dat
 * er iets uitgerekend hoeft te worden. Blijkt een maand toch te vol, dan doet
 * de zoomfactor van de printknop de rest.
 */
@media print {
    #hc-print-root.hc-print-calendar .hc-calendar-date-row td,
    #hc-print-root.hc-print-calendar .hc-calendar-morning-row td,
    #hc-print-root.hc-print-calendar .hc-calendar-evening-row td,
    #hc-print-root.hc-print-calendar .hc-calendar-unassigned-row td {
        height: auto !important;
        min-height: 0 !important;
    }

    .hc-calendar-table {
        /* Liggend A4 min de marges, min de ruimte voor titel en ondertitel. */
        height: auto !important;
    }

    /*
     * De datumregel houdt zijn eigen maat; de ruimte die overblijft gaat naar
     * de regels met namen, want daar staat de inhoud.
     */
    #hc-print-root.hc-print-calendar .hc-calendar-date-row td {
        height: 5mm !important;
        vertical-align: top;
    }
}

/* De kop met de dagnamen sluit aan op hetzelfde raster. */
@media print {
    #hc-print-root .hc-calendar-table thead th {
        border-top: 2.25pt solid #222 !important;
        border-bottom: 2.25pt solid #222 !important;
    }
}

/*
 * Het raster van de maandkalender op papier.
 *
 * Dit blok bepaalt de hele meetkunde van de afdruk en staat bewust achteraan:
 * eerdere blokken hebben elkaar jarenlang overschreven, en dit is het blok dat
 * wint. Wie hier iets verandert, hoeft nergens anders te kijken.
 *
 * Uitgangspunten:
 * - Alle dagen zijn even breed en even hoog. De hoogte volgt uit het aantal
 *   weken, niet uit de inhoud, zodat een drukke dag de rest niet scheeftrekt.
 * - Namen die niet op een regel passen, lopen door op de regel eronder; de
 *   kolom wordt daar niet breder van.
 * - Een dag is een vak met een zware omkadering. De datum staat in een eigen
 *   balkje bovenaan dat vak, de regel voor verlof en niet-ingepland wordt
 *   afgescheiden door een dun lijntje.
 */
@media print {
    .hc-calendar-table.hc-calendar-original {
        table-layout: fixed !important;
        border-collapse: collapse !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Even brede kolommen: de weeknummerkolom is smal, de zeven dagen delen de rest. */
    .hc-calendar-table.hc-calendar-original th.hc-week-number,
    .hc-calendar-table.hc-calendar-original td.hc-week-number {
        width: 6mm !important;
        text-align: center !important;
        vertical-align: top !important;
    }

    .hc-calendar-table.hc-calendar-original thead th:not(.hc-week-number),
    .hc-calendar-table.hc-calendar-original tbody td:not(.hc-week-number) {
        width: calc((100% - 6mm) / 7) !important;
    }

    /*
     * Namen lopen door op de volgende regel in plaats van de kolom te verbreden.
     *
     * De hoogte van een tabelcel telt standaard alleen de inhoud; binnenmarge en
     * randen komen er nog bovenop. Met border-box is de opgegeven hoogte de hele
     * hoogte, en klopt de verdeling over de pagina.
     */
    .hc-calendar-table.hc-calendar-original td,
    .hc-calendar-table.hc-calendar-original th {
        box-sizing: border-box !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        vertical-align: top !important;
    }

    /*
     * Gelijke dagen. Van de 186 mm gaat ongeveer 5 mm naar de kop met de
     * dagnamen; wat overblijft wordt eerlijk over de weken verdeeld, en binnen
     * een week over de datumbalk en de drie regels met namen.
     */
    .hc-calendar-table.hc-calendar-original .hc-calendar-date-row td {
        height: 4.6mm !important;
        min-height: 0 !important;
    }

    .hc-calendar-table.hc-calendar-original[data-hc-calendar-weeks="4"] .hc-calendar-morning-row td,
    .hc-calendar-table.hc-calendar-original[data-hc-calendar-weeks="4"] .hc-calendar-evening-row td,
    .hc-calendar-table.hc-calendar-original[data-hc-calendar-weeks="4"] .hc-calendar-unassigned-row td {
        height: 11.55mm !important;
        min-height: 0 !important;
    }

    .hc-calendar-table.hc-calendar-original[data-hc-calendar-weeks="5"] .hc-calendar-morning-row td,
    .hc-calendar-table.hc-calendar-original[data-hc-calendar-weeks="5"] .hc-calendar-evening-row td,
    .hc-calendar-table.hc-calendar-original[data-hc-calendar-weeks="5"] .hc-calendar-unassigned-row td {
        height: 8.93mm !important;
        min-height: 0 !important;
    }

    .hc-calendar-table.hc-calendar-original[data-hc-calendar-weeks="6"] .hc-calendar-morning-row td,
    .hc-calendar-table.hc-calendar-original[data-hc-calendar-weeks="6"] .hc-calendar-evening-row td,
    .hc-calendar-table.hc-calendar-original[data-hc-calendar-weeks="6"] .hc-calendar-unassigned-row td {
        height: 7.19mm !important;
        min-height: 0 !important;
    }

    /* De omkadering van een dag: zwaar rondom. */
    .hc-calendar-table.hc-calendar-original td,
    .hc-calendar-table.hc-calendar-original th {
        border-left: 2.25pt solid #222 !important;
        border-right: 2.25pt solid #222 !important;
    }

    .hc-calendar-table.hc-calendar-original .hc-calendar-date-row td {
        border-top: 2.25pt solid #222 !important;
        border-bottom: 2.25pt solid #222 !important;
    }

    .hc-calendar-table.hc-calendar-original .hc-calendar-unassigned-row td {
        border-top: 0.5pt solid #c4c9cc !important;
        border-bottom: 2.25pt solid #222 !important;
    }

    /*
     * De weeknummercel loopt over alle vier de regels. Zonder eigen onderrand
     * viel de onderste lijn in die kolom weg.
     */
    .hc-calendar-table.hc-calendar-original td.hc-week-number {
        border-top: 2.25pt solid #222 !important;
        border-bottom: 2.25pt solid #222 !important;
    }

    /* De datumbalk en de kop krijgen een grijze ondergrond, de kop de lichtste. */
    .hc-calendar-table.hc-calendar-original .hc-calendar-date-row td,
    .hc-calendar-table.hc-calendar-original td.hc-week-number {
        background: #e4e6e7 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .hc-calendar-table.hc-calendar-original thead th {
        background: #f1f3f4 !important;
        border-top: 2.25pt solid #222 !important;
        border-bottom: 2.25pt solid #222 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Dagen buiten de maand blijven leeg en wit. */
    .hc-calendar-table.hc-calendar-original td.is-inactive {
        background: transparent !important;
    }
}

/*
 * De lettergrootte van de cellen op papier.
 *
 * De dichtheidsklassen zetten hun lettergrootte op de tabel en rekenden op
 * overerving. De cellen hebben echter een eigen lettergrootte uit de
 * schermopmaak, en die wint van overerving: de celtekst bleef dus altijd even
 * groot, welke dichtheid er ook gekozen werd. Zolang de afdruk nog een
 * zoomfactor gebruikte viel dat niet op, want die verkleinde alles alsnog.
 *
 * Daarom staan de maten hier op de cellen zelf.
 */
@media print {
    .hc-calendar-table.hc-calendar-original td,
    .hc-calendar-table.hc-calendar-original th {
        line-height: 1.12 !important;
        padding: .5mm .6mm !important;
    }

    #hc-print-root.hc-print-calendar.hc-print-density-normal .hc-calendar-table.hc-calendar-original td,
    #hc-print-root.hc-print-calendar.hc-print-density-normal .hc-calendar-table.hc-calendar-original th {
        font-size: 8pt !important;
    }

    #hc-print-root.hc-print-calendar.hc-print-density-compact .hc-calendar-table.hc-calendar-original td,
    #hc-print-root.hc-print-calendar.hc-print-density-compact .hc-calendar-table.hc-calendar-original th {
        font-size: 7pt !important;
    }

    #hc-print-root.hc-print-calendar.hc-print-density-dense .hc-calendar-table.hc-calendar-original td,
    #hc-print-root.hc-print-calendar.hc-print-density-dense .hc-calendar-table.hc-calendar-original th {
        font-size: 6.2pt !important;
    }

    #hc-print-root.hc-print-calendar.hc-print-density-ultra .hc-calendar-table.hc-calendar-original td,
    #hc-print-root.hc-print-calendar.hc-print-density-ultra .hc-calendar-table.hc-calendar-original th {
        font-size: 5.4pt !important;
    }

    /* Het dagnummer blijft het grootst binnen zijn dichtheid. */
    .hc-calendar-table.hc-calendar-original .hc-calendar-date-row td strong {
        font-size: 1.15em !important;
        font-weight: 700 !important;
    }
}

/*
 * De omkadering hangt aan de weekgroep, niet aan bepaalde regels.
 *
 * De bovenrand zat op de datumregel en de onderrand op de regel met verlof.
 * Die laatste regel bestaat niet als iemand alleen de eigen shifts toont, en
 * dan viel de onderkant van de dag weg. Elke week staat nu in een eigen groep,
 * dus de eerste en laatste regel van die groep dragen de rand, wat er ook
 * tussen staat.
 */
@media print {
    .hc-calendar-table.hc-calendar-original tbody {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .hc-calendar-table.hc-calendar-original tbody > tr:first-child > td {
        border-top: 2.25pt solid #222 !important;
    }

    .hc-calendar-table.hc-calendar-original tbody > tr:last-child > td {
        border-bottom: 2.25pt solid #222 !important;
    }

    /* Het dunne lijntje boven de verlofregel blijft dun. */
    .hc-calendar-table.hc-calendar-original tbody > tr.hc-calendar-unassigned-row > td {
        border-top: 0.5pt solid #c4c9cc !important;
    }

    /*
     * Een dag houdt zijn eigen achtergrond niet: op papier zegt groen of rood
     * niets meer, en een gevulde cel maakt de tekst alleen maar minder leesbaar.
     */
    .hc-calendar-table.hc-calendar-original tbody td.is-valid,
    .hc-calendar-table.hc-calendar-original tbody td.is-invalid,
    .hc-calendar-table.hc-calendar-original tbody td.is-inactive {
        background: transparent !important;
    }

    .hc-calendar-table.hc-calendar-original tbody tr.hc-calendar-date-row > td {
        background: #e4e6e7 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/*
 * De rechterrand van de weeknummerkolom.
 *
 * Die cel loopt over de vier regels van een week en tekende haar rechterrand
 * dus in een stuk, terwijl de dagcellen ernaast dezelfde rand per regel
 * tekenen. Op die plek liepen de lijnstukken over elkaar heen, wat in de
 * afdruk te zien was als een onregelmatig onderverdeelde kolom.
 *
 * De rand komt nu van de dagcellen, net als bij elke andere kolom.
 */
@media print {
    .hc-calendar-table.hc-calendar-original td.hc-week-number {
        border-right: 0 !important;
    }
}


/*
 * Waarom hier geen aparte maten voor een staand blad staan.
 *
 * Die stonden er wel, achter een voorwaarde op de stand van het blad. Die
 * voorwaarde is niet te vertrouwen: bij het afdrukken meldt de browser de
 * stand en de breedte van het venster, niet die van het bladvak. Het blok
 * vuurde daardoor ook op een liggend blad, en de ruimere rijhoogtes duwden
 * de kalender naar een tweede bladzijde.
 *
 * De maten hierboven gelden nu overal. Wie op iOS een staand blad kiest,
 * houdt onderaan wat wit over. Dat is te verkiezen boven een afdruk die
 * niet past.
 */


/*
 * De talen die een medewerker mag kiezen.
 *
 * Een vinkjeslijst binnen het medewerkersformulier. Nederlands staat erbij als
 * uitgeschakeld vinkje: het is de taal van de planning zelf en kan niet weg.
 */
.hc-language-choice {
    margin: 12px 0 0;
    padding: 12px 14px;
    border: 1px solid #dbe1e4;
    border-radius: 4px;
    background: #fbfcfc;
}

.hc-language-choice legend {
    padding: 0 6px;
    font-weight: 600;
    color: #3f4a50;
}

.hc-language-choice .hc-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}

.hc-language-choice input[disabled] + span,
.hc-language-choice input[disabled] {
    opacity: .65;
}

.hc-setting-row {
    display: block;
    max-width: 640px;
    line-height: 1.5;
}

/*
 * Tweestapsverificatie onder Account.
 *
 * Drie toestanden delen deze opmaak: uit, half ingesteld, en aan. De
 * herstelcodes staan bewust groot en in een vaste letter, want ze worden
 * overgeschreven.
 */
.hc-2fa-status.is-on { font-weight: 600; color: #2e6b37; }

.hc-2fa-stappen {
    margin: 12px 0;
    padding-left: 20px;
    line-height: 1.6;
}

.hc-2fa-stappen li { margin-bottom: 14px; }

.hc-2fa-open { display: inline-block; margin-top: 6px; }

.hc-2fa-sleutel {
    display: inline-block;
    margin-top: 6px;
    padding: 7px 10px;
    border: 1px solid #dbe1e4;
    border-radius: 4px;
    background: #f7f9f9;
    font-family: "Roboto Mono", Consolas, monospace;
    font-size: 1.05rem;
    letter-spacing: .08em;
    user-select: all;
}

.hc-2fa-code { display: block; max-width: 260px; }

.hc-2fa-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.hc-2fa-codes {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid #c8dbcb;
    border-radius: 4px;
    background: #f2f8f3;
}

.hc-2fa-codes ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.hc-2fa-codes code {
    font-family: "Roboto Mono", Consolas, monospace;
    font-size: 1.05rem;
    letter-spacing: .06em;
}

.hc-2fa-merk .dashicons { color: #2e6b37; vertical-align: middle; }

.hc-button-danger { background: #b3392c !important; border-color: #b3392c !important; }
.hc-button-quiet { background: transparent !important; color: #3f4a50 !important; border: 1px solid #cbd4d8 !important; }

/*
 * De QR-code bij het instellen van tweestapsverificatie.
 *
 * Een witte ondergrond met wat lucht eromheen: een scanner heeft die stille
 * rand nodig om de code te vinden.
 */
.hc-2fa-qr {
    /*
     * Op een eigen regel. Als blok in de tekstregel ging de zin ervoor op
     * de onderrand van de afbeelding staan, alsof hij erbij hoorde.
     */
    display: block;
    width: max-content;
    margin: 10px 0;
    padding: 6px;
    border: 1px solid #dbe1e4;
    border-radius: 4px;
    background: #ffffff;
    line-height: 0;
}

.hc-2fa-qr svg { display: block; width: 200px; height: 200px; }

@media print {
    /* De code hoort niet mee de printer in. */
    .hc-2fa-qr { display: none !important; }
}

/*
 * De afdruk zonder tussenkomst van het script.
 *
 * Iemand die afdrukt via het menu van de browser of via de deelknop op iOS,
 * komt nooit langs de printknop in de pagina. Die weg krijgt nu dezelfde
 * opmaak: een standaardmaat voor de celtekst, en containers die niet meer
 * afknippen wat erbuiten valt.
 */
@media print {
    .hc-calendar-table.hc-calendar-original td,
    .hc-calendar-table.hc-calendar-original th {
        font-size: 7pt;
    }

    /*
     * Op het scherm schuift de kalender zijwaarts in zijn eigen venster. Op
     * papier bestaat schuiven niet: wat buiten dat venster valt, zou wegvallen.
     */
    .hc-table-scroll,
    .hc-calendar-scroll {
        overflow: visible !important;
        max-width: none !important;
    }

    /* De kalender is breder dan een telefoonscherm; op papier telt dat niet. */
    .hc-calendar-table.hc-calendar-original {
        min-width: 0 !important;
        table-layout: fixed !important;
    }
}
/*
 * Leesbaarheid van de afdruk.
 *
 * De kop met de dagnamen staat op het scherm in het groen met witte letters.
 * Op papier krijgt die kop een lichte ondergrond, maar de letters bleven wit:
 * onleesbaar. Alle tekst in de kalender wordt hier dus expliciet donker gezet,
 * los van wat het scherm ervan maakt.
 *
 * De eigen markering houdt daarnaast een rand in dezelfde kleur. Browsers
 * laten achtergronden bij het afdrukken standaard weg; randen niet. Zo blijft
 * de markering ook zichtbaar als "achtergrondbeelden" uitstaat.
 */
@media print {
    .hc-calendar-table.hc-calendar-original thead th,
    .hc-calendar-table.hc-calendar-original tbody td,
    .hc-calendar-table.hc-calendar-original tbody td strong {
        color: #1c1c1c !important;
    }

    /* Dagen buiten de maand blijven lichter, zodat ze niet meelezen. */
    .hc-calendar-table.hc-calendar-original tbody td.is-inactive,
    .hc-calendar-table.hc-calendar-original tbody td.is-inactive strong {
        color: #8a8a8a !important;
    }

    .hc-user-highlight {
        border: 0.7pt solid var(--hc-user-highlight, #fff200) !important;
        border-radius: 0 !important;
        padding: 0 .4mm !important;
        color: #1c1c1c !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/*
 * De opvulling van het thema rond de pagina.
 *
 * Het thema zet ruime witruimte boven en onder de sectie waarin het portaal
 * staat. Op het scherm hoort dat zo; op papier duwt het de kalender naar
 * beneden tot hij tegen de onderrand aanloopt. Deze klassen komen uit Divi;
 * gebruikt de site ooit een ander thema, dan raken deze regels niets.
 */
@media print {
    .et-boc,
    .et-l,
    .et_builder_inner_content,
    .et_pb_section,
    .et_pb_row,
    .et_pb_column,
    .et_pb_text,
    .et_pb_text_inner {
        padding: 0 !important;
        margin: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }
}

/*
 * Dezelfde rijhoogtes, maar zwaar genoeg voor de printkopie.
 *
 * De kopie die de printknop maakt draagt regels die naar #hc-print-root
 * verwijzen. Zo'n verwijzing weegt zwaarder dan welke reeks klassen ook,
 * dus zonder deze varianten hield die kopie haar eigen oude maten en
 * vulde de kalender maar de helft van het blad.
 */
@media print {
    #hc-print-root .hc-calendar-table.hc-calendar-original[data-hc-calendar-weeks="4"] .hc-calendar-morning-row td,
    #hc-print-root .hc-calendar-table.hc-calendar-original[data-hc-calendar-weeks="4"] .hc-calendar-evening-row td,
    #hc-print-root .hc-calendar-table.hc-calendar-original[data-hc-calendar-weeks="4"] .hc-calendar-unassigned-row td {
        height: 11.55mm !important;
        min-height: 0 !important;
    }

    #hc-print-root .hc-calendar-table.hc-calendar-original[data-hc-calendar-weeks="5"] .hc-calendar-morning-row td,
    #hc-print-root .hc-calendar-table.hc-calendar-original[data-hc-calendar-weeks="5"] .hc-calendar-evening-row td,
    #hc-print-root .hc-calendar-table.hc-calendar-original[data-hc-calendar-weeks="5"] .hc-calendar-unassigned-row td {
        height: 8.93mm !important;
        min-height: 0 !important;
    }

    #hc-print-root .hc-calendar-table.hc-calendar-original[data-hc-calendar-weeks="6"] .hc-calendar-morning-row td,
    #hc-print-root .hc-calendar-table.hc-calendar-original[data-hc-calendar-weeks="6"] .hc-calendar-evening-row td,
    #hc-print-root .hc-calendar-table.hc-calendar-original[data-hc-calendar-weeks="6"] .hc-calendar-unassigned-row td {
        height: 7.19mm !important;
        min-height: 0 !important;
    }

    #hc-print-root .hc-calendar-table.hc-calendar-original .hc-calendar-date-row td {
        height: 4.6mm !important;
        min-height: 0 !important;
    }
}

/*
 * Hetzelfde raster, in een vorm die ook in de printkopie wint.
 *
 * De kopie die de printknop maakt draagt oudere regels die naar #hc-print-root
 * verwijzen. Zo'n verwijzing weegt in de opmaak zwaarder dan welke reeks
 * klassen ook, dus die oude regels wonnen: randen van drie beeldpunten door
 * elkaar met die van een, geen grijstinten, en een weeknummerkolom die
 * onderaan openbleef.
 *
 * Dit blok herhaalt de regels van hierboven met #hc-print-root ervoor. Wie
 * hierboven iets wijzigt, hoort het hier ook te doen; beide wegen naar de
 * printer horen hetzelfde op te leveren.
 */
@media print {
    /* Een dag is een vak met een zware omkadering. */
    #hc-print-root .hc-calendar-table.hc-calendar-original td,
    #hc-print-root .hc-calendar-table.hc-calendar-original th {
        border-left: 1.5pt solid #222 !important;
        border-right: 1.5pt solid #222 !important;
        box-sizing: border-box !important;
        vertical-align: top !important;
    }

    /* De datumbalk: zwaar omkaderd en grijs, zodat het nummer opvalt. */
    #hc-print-root .hc-calendar-table.hc-calendar-original .hc-calendar-date-row td {
        border-top: 1.5pt solid #222 !important;
        border-bottom: 1.5pt solid #222 !important;
        background: #e4e6e7 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Het dunne lijntje boven verlof, en de onderkant van de dag. */
    #hc-print-root .hc-calendar-table.hc-calendar-original .hc-calendar-unassigned-row td {
        border-top: 0.5pt solid #c4c9cc !important;
        border-bottom: 1.5pt solid #222 !important;
    }

    /* De weeknummerkolom loopt over de hele week en sluit onderaan mee. */
    #hc-print-root .hc-calendar-table.hc-calendar-original td.hc-week-number {
        border-top: 1.5pt solid #222 !important;
        border-bottom: 1.5pt solid #222 !important;
        border-right: 0 !important;
        background: #e4e6e7 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* De omkadering hangt aan de week, niet aan een bepaalde regel. */
    #hc-print-root .hc-calendar-table.hc-calendar-original tbody > tr:first-child > td {
        border-top: 1.5pt solid #222 !important;
    }

    #hc-print-root .hc-calendar-table.hc-calendar-original tbody > tr:last-child > td {
        border-bottom: 1.5pt solid #222 !important;
    }

    /* De kop met de dagnamen: lichter grijs, donkere letters. */
    #hc-print-root .hc-calendar-table.hc-calendar-original thead th {
        border-top: 1.5pt solid #222 !important;
        border-bottom: 1.5pt solid #222 !important;
        background: #f1f3f4 !important;
        color: #1c1c1c !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Groen en rood zeggen op papier niets. */
    #hc-print-root .hc-calendar-table.hc-calendar-original tbody td.is-valid,
    #hc-print-root .hc-calendar-table.hc-calendar-original tbody td.is-invalid,
    #hc-print-root .hc-calendar-table.hc-calendar-original tbody td.is-inactive {
        background: transparent !important;
    }

    #hc-print-root .hc-calendar-table.hc-calendar-original tbody td,
    #hc-print-root .hc-calendar-table.hc-calendar-original tbody td strong {
        color: #1c1c1c !important;
    }

    #hc-print-root .hc-calendar-table.hc-calendar-original tbody td.is-inactive,
    #hc-print-root .hc-calendar-table.hc-calendar-original tbody td.is-inactive strong {
        color: #8a8a8a !important;
    }
}

/*
 * De grijze datumbalk, als laatste woord.
 *
 * De regel die groen en rood weghaalt, richt zich op de klassen is-valid en
 * is-invalid. Die staan ook op de cellen van de datumbalk, en woog daardoor
 * zwaarder dan de regel die daar grijs neerzet: de balk werd wit. Deze regel
 * staat achteraan en noemt de rij er uitdrukkelijk bij, zodat hij wint.
 */
@media print {
    .hc-calendar-table.hc-calendar-original tbody tr.hc-calendar-date-row > td,
    #hc-print-root .hc-calendar-table.hc-calendar-original tbody tr.hc-calendar-date-row > td {
        background: #e4e6e7 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/*
 * Sorteerbare kolomkoppen.
 *
 * Een pijltje geeft aan waarop en in welke richting gesorteerd is. De kop
 * blijft ook met het toetsenbord te bedienen, vandaar de zichtbare omlijning
 * bij focus.
 */
.hc-data-table th.hc-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.hc-data-table th.hc-sortable:hover { background: rgba(0, 0, 0, .04); }

.hc-data-table th.hc-sortable::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid currentColor;
    opacity: .18;
}

.hc-data-table th.hc-sortable.is-sorted-up::after { opacity: .85; }

.hc-data-table th.hc-sortable.is-sorted-down::after {
    border-bottom: 0;
    border-top: 5px solid currentColor;
    opacity: .85;
}

.hc-data-table th.hc-sortable:focus-visible {
    outline: 2px solid var(--hc-primary, #2e6b37);
    outline-offset: -2px;
}

@media print {
    .hc-data-table th.hc-sortable::after { display: none !important; }
}

/*
 * Openstaande verlofaanvragen in de kalender.
 *
 * Oranje, niet rood: rood betekent in deze planning "controle nodig", en dit
 * is iets anders. Hier staat een aanvraag waarover nog beslist moet worden.
 * Staat diegene die dag ook ingepland, dan is het merkteken steviger: keur je
 * goed, dan valt die shift weg en moet er iemand anders komen.
 */
.hc-pending-line {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.hc-pending-mark {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border: 1px solid #d98a2b;
    border-radius: 3px;
    background: #fdf1e1;
    color: #8a4b06;
    font-size: .82rem;
    line-height: 1.5;
    cursor: pointer;
}

.hc-pending-mark:hover { background: #fbe4c8; }

.hc-pending-mark.is-planned {
    border-color: #b3392c;
    background: #fbe3e0;
    color: #8c2419;
    font-weight: 600;
}

.hc-dialog-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    margin: 0 0 16px;
}

.hc-dialog-facts dt { font-weight: 600; color: #3f4a50; }
.hc-dialog-facts dd { margin: 0; }

.hc-dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; }

@media print {
    .hc-pending-line { display: none !important; }
}

/*
 * De inschatting van de impact bij een verlofaanvraag.
 *
 * Drie niveaus, met de reden er in het klein onder. De kleuren volgen de
 * betekenis die ze in de rest van de planning al hebben: groen is in orde,
 * rood vraagt om een beslissing.
 */
.hc-impact {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 3px;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
}

.hc-impact.is-gunstig { background: #e4f4e7; color: #2e6b37; }
.hc-impact.is-aandacht { background: #fdf1e1; color: #8a4b06; }
.hc-impact.is-ongunstig { background: #fbe3e0; color: #8c2419; }

.hc-impact-reden {
    display: block;
    margin-top: 3px;
    color: #6b7280;
    font-size: .78rem;
    line-height: 1.4;
}

/*
 * Het instellingenscherm.
 *
 * De premiumfuncties staan ingesprongen onder hun hoofdschakelaar. Staat die
 * uit, dan blijven ze zichtbaar maar grijs: je ziet dus wat er te krijgen is
 * en wat er bewaard staat, zonder dat het werkt.
 */
.hc-setting-hoofd { margin-bottom: 4px; }

.hc-premium-groep {
    margin-left: 26px;
    padding-left: 16px;
    border-left: 3px solid #dbe1e4;
}

.hc-premium-groep.is-uit {
    opacity: .5;
    border-left-color: #e8ecee;
}

.hc-premium-groep.is-uit .hc-setting-row { cursor: not-allowed; }

.hc-defaults-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px 20px;
    max-width: 780px;
}

.hc-defaults-grid label { display: flex; flex-direction: column; gap: 4px; }
.hc-defaults-grid input { max-width: 120px; }

/*
 * De sterren bij een verlofaanvraag.
 *
 * Drie sterren en een kruisje om terug naar nul te gaan. Voor wie ze niet mag
 * wijzigen staan ze er als tekst, zonder knop: een planner ziet het oordeel
 * van de medewerker, maar past het niet aan.
 */
.hc-sterren {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    line-height: 1;
}

.hc-sterren-form { display: inline; }

.hc-ster {
    padding: 0 1px;
    border: 0;
    background: none;
    color: #cbd4d8;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

button.hc-ster:hover,
button.hc-ster:hover ~ .hc-ster { color: #e0a92b; }

.hc-ster.is-aan { color: #d9a01f; }

.hc-sterren.is-vast .hc-ster { cursor: default; }

.hc-ster-wis {
    margin-left: 4px;
    padding: 0 3px;
    border: 0;
    background: none;
    color: #9aa5ab;
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
}

.hc-ster-wis:hover { color: #b3392c; }

/*
 * De voorkeursplanning: een raster van weekdagen tegen dagdelen.
 */
.hc-patroon-raster {
    margin: 12px 0;
    padding: 12px 14px;
    border: 1px solid #dbe1e4;
    border-radius: 4px;
    background: #fbfcfc;
}

.hc-patroon-raster legend { padding: 0 6px; font-weight: 600; color: #3f4a50; }

.hc-patroon-snel { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }

.hc-patroon-tabel { max-width: 520px; margin: 0; }
.hc-patroon-tabel th { text-align: center; font-weight: 600; }
.hc-patroon-tabel th[scope="row"] { text-align: left; white-space: nowrap; }
.hc-patroon-tabel td { text-align: center; }
.hc-patroon-tabel input { width: 18px; height: 18px; }

.hc-maand-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/*
 * De toegangsstatus van een medewerker.
 *
 * Drie toestanden, en alleen de groene zegt dat het echt gelukt is: een
 * verstuurde uitnodiging zegt enkel dat de mail vertrokken is.
 */
.hc-toegang {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 3px;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
}

.hc-toegang.is-actief { background: #e4f4e7; color: #2e6b37; }
.hc-toegang.is-wacht { background: #fdf1e1; color: #8a4b06; }
.hc-toegang.is-open { background: #eef1f2; color: #566068; }

.hc-toegang-detail {
    display: block;
    margin: 3px 0;
    color: #6b7280;
    font-size: .78rem;
    line-height: 1.4;
}

.button.button-small { padding: 0 8px; font-size: .78rem; line-height: 1.9; height: auto; }

/* Weekenddagen in de eigen planning: net genoeg verschil om de maand in
   weken te kunnen lezen, zonder de tabel in twee kleuren te splitsen. */
.hc-data-table tr.hc-weekend > td {
    background: rgba(0, 0, 0, .035);
}

/* 2.19.1: de tellers per medewerker krijgen lucht.
 *
 * Het blok stond vlak tegen de planning erboven en de cijfers stonden dicht
 * op elkaar; zo leest het als een voetnoot van het rooster in plaats van als
 * een eigen overzicht. Dezelfde regels gelden in het portaal en in wp-admin,
 * want het is dezelfde tabel. */
.hc-employee-totals {
    margin-top: 32px;
}
.hc-employee-totals .hc-card-title-row {
    margin-bottom: 22px;
}
.hc-employee-totals .hc-card-title-row p {
    margin: 6px 0 0;
    max-width: 68ch;
    line-height: 1.55;
}
.hc-employee-totals th,
.hc-employee-totals td {
    padding-top: 11px;
    padding-bottom: 11px;
}
.hc-employee-totals .hc-table-scroll {
    padding-bottom: 4px;
}

/* 2.20.0: feestdagen en weekends in de kalender.
 *
 * Een feestdag en een weekenddag zijn geen gewone werkdag. Dat hoort te zien
 * te zijn zonder eerst de datum te lezen, maar het mag de status van de dag
 * niet overstemmen: groen, rood en grijs blijven groen, rood en grijs.
 *
 * Daarom geen eigen kleur maar een waas eroverheen. Een laag in
 * background-image legt zwart met lage dekking over de achtergrondkleur die er
 * al ligt, wat die kleur ook is. De tekst en de vignetten blijven eronder
 * ongemoeid; een filter op de cel zou die mee verdonkeren.
 *
 * Deze regels staan achteraan omdat de kleurregels de background-verkorting
 * gebruiken; die zet background-image op none. Achteraan staan is alleen niet
 * genoeg: de cascade kijkt eerst naar het gewicht van de kiezer en pas daarna
 * naar de volgorde. Daarom staat hc-calendar-original er uitdrukkelijk bij,
 * zodat deze regels even zwaar wegen als de kleurregels en dus winnen. */
.hc-calendar-table td.is-weekend-day,
.hc-calendar-table.hc-calendar-original td.is-weekend-day {
    background-image: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
}
.hc-calendar-table td.is-holiday,
.hc-calendar-table.hc-calendar-original td.is-holiday {
    background-image: linear-gradient(rgba(0, 0, 0, .17), rgba(0, 0, 0, .17));
}

/* De ster op het scherm, de F op papier: dezelfde afspraak als de C en de V. */
.hc-holiday-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    line-height: 1;
    color: #8a6b00;
}
.hc-holiday-star { font-size: 1.8em; }
.hc-holiday-letter { display: none; }
.hc-legend-star { color: #8a6b00; font-size: 1.15em; }

@media print {
    /*
     * Een grijze ster is op papier een vlekje; de letter zegt het wel. Ze
     * krijgt precies de maat en de opmaak van de C en de V, zodat de drie op
     * papier een rij vormen in plaats van drie losse tekens.
     */
    .hc-holiday-star {
        display: none !important;
    }
    .hc-holiday-letter {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 12px;
        height: 12px;
        padding: 0 5px;
        background: #427a4d;
        color: #fff;
        font-size: 6pt;
        font-weight: 700;
    }
    .hc-holiday-badge {
        min-height: 0;
    }

    /* Wit met een zwarte rand, net als de C en de V hierboven. */
    #hc-print-root .hc-holiday-letter {
        background: #fff !important;
        color: #000 !important;
        border: 0.5pt solid #000 !important;
    }
    #hc-print-root.hc-print-calendar .hc-holiday-letter {
        min-width: 10px !important;
        height: 10px !important;
        min-height: 10px !important;
        font-size: 5pt !important;
        line-height: 10px !important;
    }

    /*
     * Het waas verdwijnt mee met groen en rood. In grijstinten is een donkerder
     * vlak niet te onderscheiden van een gevulde cel, en dan leest de dag
     * slechter in plaats van beter. Op papier draagt de F het alleen.
     */
    .hc-calendar-table td.is-weekend-day,
    .hc-calendar-table td.is-holiday,
    .hc-calendar-table.hc-calendar-original td.is-weekend-day,
    .hc-calendar-table.hc-calendar-original td.is-holiday,
    #hc-print-root .hc-calendar-table td.is-weekend-day,
    #hc-print-root .hc-calendar-table td.is-holiday {
        background-image: none !important;
    }
}


/*
 * 2.21.0: maandkalender onder de verlofaanvragen.
 *
 * De badges dragen de status, niet het hele dagvak. Zo blijven twee aanvragen
 * op dezelfde dag afzonderlijk leesbaar en aanklikbaar.
 */
.hc-absence-calendar-card { margin-top: 24px; }
.hc-absence-calendar-card .hc-card-title-row { align-items: center; }
.hc-absence-calendar-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.hc-absence-calendar-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: 12px 0 16px;
}
.hc-absence-calendar-toolbar h3 { margin: 0; text-align: center; }
.hc-absence-calendar-toolbar .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
}
.hc-absence-calendar[aria-busy="true"] { opacity: .62; pointer-events: none; }
.hc-absence-calendar-grid {
    width: 100%;
    min-width: 720px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 4px;
}
.hc-absence-calendar-grid th {
    padding: 8px;
    background: var(--hc-primary, #2e6b37);
    color: #fff;
    text-align: center;
}
.hc-absence-calendar-grid td {
    height: 112px;
    padding: 7px;
    border: 1px solid #d8dfda;
    border-radius: 4px;
    background: #fff;
    vertical-align: top;
}
.hc-absence-calendar-grid td.is-inactive { background: #f2f4f2; color: #8a928d; }
.hc-absence-calendar-day {
    display: block;
    margin-bottom: 7px;
    font-weight: 700;
}
.hc-absence-calendar-badges { display: grid; gap: 5px; }
.hc-absence-calendar-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.35;
}
button.hc-absence-calendar-badge {
    width: 100%;
    cursor: pointer;
    text-align: left;
}
.hc-absence-calendar-badge.is-pending {
    border-color: #d98a2b;
    background: #fdf1e1;
    color: #8a4b06;
}
button.hc-absence-calendar-badge.is-pending:hover { background: #fbe4c8; }
.hc-absence-calendar-badge.is-approved {
    border-color: #69a573;
    background: #e4f4e7;
    color: #2e6b37;
}
button.hc-absence-calendar-badge.is-approved:hover { background: #d5ecd9; }

@media (max-width: 782px) {
    .hc-absence-calendar-card .hc-card-title-row { align-items: flex-start; }
    .hc-absence-calendar-grid { min-width: 660px; }
    .hc-absence-calendar-grid td { height: 96px; padding: 5px; }
}

/* 2.22.0: de verlofkalender toont wat er al gepland staat.
 *
 * De aantallen staan boven de aanvragen, want ze zijn de achtergrond waartegen
 * een planner de aanvraag leest: eerst hoeveel volk er die dag is, dan wie er
 * vrij vraagt. Klein en grijs, zodat ze de badges niet overstemmen; alleen een
 * tekort krijgt kleur, want dat is het enige dat om aandacht vraagt. */
.hc-absence-calendar-shifts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-bottom: 7px;
    font-size: .76rem;
    line-height: 1.3;
    color: #6b7280;
}
.hc-absence-shift-count {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: help;
}
.hc-absence-shift-count.is-short {
    color: #a8321f;
    font-weight: 700;
}
.hc-absence-calendar-hint {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    color: var(--hc-muted, #6b7280);
    font-size: .8rem;
    font-weight: 400;
}

/* Feestdagen en weekends, met dezelfde waas als in de planningskalenders. De
 * dagvakjes zijn hier wit in plaats van groen of rood, maar de laag werkt op
 * elke ondergrond, dus is het dezelfde regel met een andere kiezer. */
.hc-absence-calendar-grid td.is-weekend-day {
    background-image: linear-gradient(rgba(0, 0, 0, .07), rgba(0, 0, 0, .07));
}
.hc-absence-calendar-grid td.is-holiday {
    background-image: linear-gradient(rgba(0, 0, 0, .13), rgba(0, 0, 0, .13));
}
.hc-absence-calendar-day .hc-holiday-badge {
    min-height: 0;
    margin-left: 5px;
    vertical-align: middle;
}
.hc-absence-calendar-day .hc-holiday-star { font-size: 1.1em; }

/* 2.23.0: dezelfde verlofkalender in het portaal.
 *
 * Een zorgteamlid beslist hier niets, dus zijn de badges gewone labels en geen
 * knoppen. Wat wel klikt, is de dag zelf: die zet de datum klaar in het
 * formulier erboven. De verwijzing ligt om de inhoud van de cel heen en niet
 * om de cel zelf, net als in de planningskalender. */
.hc-portal .hc-absence-calendar-grid th {
    font-size: .82rem;
    font-weight: 600;
}
.hc-absence-calendar-pick {
    display: block;
    min-height: 100%;
    cursor: pointer;
    color: inherit !important;
    text-decoration: none !important;
}
.hc-absence-calendar-grid td:hover > .hc-absence-calendar-pick { filter: brightness(.97); }
.hc-absence-calendar-pick:focus-visible {
    outline: 3px solid var(--hc-brand-green, #2e6b37);
    outline-offset: 2px;
}
.hc-portal .hc-absence-calendar-toolbar .hc-button { min-width: 44px; text-align: center; }
.hc-portal .hc-absence-calendar-toolbar .dashicons { line-height: inherit; }

/* Zonder aanvraagrecht is de kalender een overzicht en geen invoerscherm. */
.hc-portal .hc-absence-calendar-badge { width: fit-content; }

/* 2.24.0: het aanvraagformulier als venster over de kalender.
 *
 * Een dag aanklikken bracht je eerst naar het formulier verderop de pagina.
 * Dat las als een sprong. Nu komt het formulier naar de dag toe. */
.hc-absence-calendar-open {
    margin: 0 0 16px;
}
.hc-absence-dialog .hc-dialog-content > p {
    margin: 0 0 16px;
    color: var(--hc-muted, #6b7280);
}
.hc-absence-dialog .hc-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

/*
 * Zonder script staat hetzelfde venster gewoon in de pagina: de dag is dan een
 * verwijzing die de bladzijde herlaadt met die datum erin. Een dialoogvenster
 * dat open staat maar niet modaal is, wordt door de browser absoluut
 * gepositioneerd; hier hoort het zich als een kaart te gedragen.
 */
.hc-absence-dialog[open]:not(:modal) {
    position: static;
    width: auto;
    max-height: none;
    margin: 0 0 24px;
}
.hc-absence-dialog[open]:not(:modal) .hc-dialog-content {
    max-height: none;
}

@media (max-width: 600px) {
    .hc-absence-dialog .hc-grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* 2.24.1: het portaal in liggende stand op iOS.
 *
 * Twee dingen hielden de opmaak daar tegen. De schermbreedte staat nu in de
 * kop van de pagina zelf (zie HC_Portal::viewport_meta); dit is het tweede.
 *
 * Safari op iOS vergroot lettertypes in brede blokken op eigen houtje. Dat
 * heet tekstautoschaling en is bedoeld voor pagina's die niet voor een telefoon
 * gemaakt zijn. Bij het draaien naar liggend wordt het blok breder, groeit de
 * tekst mee en past een maandrooster ineens niet meer. Deze regel zet dat uit;
 * de opmaak bepaalt de lettergrootte zelf al, per schermbreedte. */
.hc-portal,
.hc-app-shell,
.hc-admin-app {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/*
 * Liggend op een telefoon is een eigen geval: breed genoeg voor de kalender,
 * maar te laag voor de vaste minimumhoogtes van de app-schil. Die staan hier
 * los, zodat het rooster niet onder de vouw begint.
 */
@media (max-height: 500px) and (orientation: landscape) {
    .hc-portal.hc-app-shell {
        margin-top: 0;
        margin-bottom: 0;
    }
    .hc-app-shell,
    .hc-admin-app {
        min-height: 0;
    }
    .hc-app-body {
        min-height: 0;
    }
}

/* 2.25.0: een telefoon in liggende stand is nog altijd een telefoon.
 *
 * Hier zat de fout die het portaal op een iPhone in liggend onbruikbaar
 * maakte. De telefoonopmaak hangt aan max-width: 720px en 782px, en een iPhone
 * is liggend 844 pixels breed. Geen van beide gold dus meer, en de schil viel
 * terug op de bureaubladregel: breedte 100vw min 24, gecentreerd met marge 50%
 * en een verschuiving van de halve eigen breedte.
 *
 * Die truc breekt uit de kolom van het thema. Ze werkt alleen zolang die kolom
 * even breed is als het venster: de 50% telt van de kolom, de 100vw van het
 * scherm. Is de kolom smaller - en dat is een themakolom bijna altijd - dan
 * staat de schil te ver naar links. Links viel eraf, rechts bleef wit.
 *
 * De breedte is nu niet meer van het venster afgeleid maar van de ruimte die
 * er is, en de kolom van het thema wordt opzij gezet in plaats van omzeild.
 * Zonder rekensom die van twee dingen tegelijk uitgaat, valt er ook niets meer
 * uit de pas te lopen.
 */
@media (max-height: 500px) and (orientation: landscape) {
    .hc-portal.hc-app-shell {
        width: 100%;
        max-width: none;
        margin: 0;
        transform: none;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    /* Het menu blijft bovenaan staan, zoals staand. Liggend is er breedte
     * zat en juist weinig hoogte; een kolom van 170 pixels naast het rooster
     * eet dan de ruimte op waar de kalender het meest aan heeft. */
    .hc-app-body { display: block; }
    .hc-app-sidenav {
        width: 100%;
        flex: none;
        border-right: 0;
        border-bottom: 1px solid #ddd;
        display: block;
    }
    .hc-sidenav-brand,
    .hc-sidenav-user { display: none; }
    .hc-app-sidenav nav { display: flex; overflow-x: auto; padding: 0; }
    .hc-app-sidenav nav a {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 6px 12px;
        border-left: 0;
        border-bottom: 3px solid transparent;
    }
    .hc-app-sidenav nav a.is-active {
        border-left: 0;
        border-bottom-color: var(--hc-primary);
    }
    .hc-app-toolbar { min-height: 48px; padding: 0 8px 0 14px; }
    .hc-app-title { font-size: 16px; }
    .hc-app-content { padding: 12px 12px 22px; }
}

/*
 * Het portaal van rand tot rand op een telefoon.
 *
 * Een pagina die uit één toepassing bestaat, hoort niet in de kolom van het
 * thema te staan. Op een telefoon kost dat aan drie kanten ruimte die er niet
 * is: Divi zet een container op 58 pixels padding bovenaan, de sectie erin op
 * 54 en de rij daarin nog eens op 27. Samen 139 pixels wit boven een balk die
 * tegen de rand hoort te staan, en links en rechts hetzelfde verhaal.
 *
 * Daarom worden de omhullende blokken zelf platgelegd in plaats van dat de
 * schil eromheen probeert te rekenen. Welke blokken dat zijn, verschilt per
 * thema; daarom staat er geen lijst met klassenamen maar wordt elk blok
 * genomen dat het portaal bevat.
 *
 * Op één na. De buitenste schil van een thema draagt vaak de ruimte voor een
 * vastgezette menubalk erbovenop; die leeghalen zou het menu over de pagina
 * heen leggen. Die staan hieronder uitgezonderd.
 *
 * De breedte blijft uitdrukkelijk 100%. Een aantal pagebuilders, waaronder
 * Divi, bouwt kolommen met floats. width:auto laat zo'n kolom naar haar inhoud
 * groeien; de kalender van 900 pixels maakt dan de volledige pagina 900 pixels
 * breed. Met 100% blijft de pagina op de schermbreedte en schuift alleen de
 * kalender binnen haar eigen .hc-table-scroll.
 */
@media (max-width: 782px), (max-height: 500px) and (orientation: landscape) {
    body :where(div, section, article, main, aside, form):has(.hc-app-shell) {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body :where(div, section, article, main, aside, form):has(.hc-app-shell):not(
        #page-container, #et-main-area, #et-boc, #page, #wrapper, .site, .et-l
    ) {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* En de schil zelf raakt de rand: geen rand, geen ronding, geen schaduw
     * die suggereert dat er nog iets naast ligt. */
    .hc-portal.hc-app-shell {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        transform: none !important;
        border-left: 0;
        border-right: 0;
        border-top: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

/*
 * Geen spoor van WordPress voor wie hier alleen de planning beheert.
 *
 * De balk zelf wordt in PHP niet meer getekend. Wat overblijft is de ruimte
 * die WordPress er bovenaan voor vrijhoudt: die hangt aan de klasse wp-toolbar
 * op het html-element, en daar bestaat geen filter voor. De regel eronder is
 * het vangnet voor het geval een andere plugin de balk alsnog uitschrijft.
 */
html.wp-toolbar:has(body.hc-no-wp-chrome) {
    padding-top: 0 !important;
}

body.hc-no-wp-chrome #wpadminbar {
    display: none !important;
}

/*
 * En onder het inlogscherm geen wit meer.
 *
 * Het scherm is zo hoog als het nodig heeft; daaronder komt de achtergrond van
 * het thema tevoorschijn, en die is wit. Het WordPress-inlogscherm zet zijn
 * kleur daarom op de body en niet op een blok. Dat gebeurt hier ook, met de
 * eindkleur van het verloop: waar het blok ophoudt, gaat de pagina in precies
 * dezelfde tint verder en is er geen naad te zien.
 */
body:has(.hc-login-screen) {
    background-color: #e7eef0 !important;
}

@media (prefers-color-scheme: dark) {
    body:has(.hc-login-screen) {
        background-color: #141b24 !important;
    }
}

/*
 * Het beheerscherm op een telefoon.
 *
 * Al het mobiele werk richtte zich op .hc-app-shell, de schil van het portaal.
 * Het beheerscherm heet .hc-admin-app en werd daar dus nooit door geraakt,
 * terwijl een planner daar nu juist zijn werk doet.
 *
 * Twee dingen van WordPress zelf stonden in de weg. Gemeten op een nabootsing
 * van wp-admin bij 390 pixels: de pagina werd 600 breed en er stond 135 pixels
 * wit boven de HomeClinic-balk.
 */

/*
 * wp-admin houdt de pagina zeshonderd pixels breed, want het beheer is niet
 * voor een telefoon gemaakt. Dit scherm wel, en dan is die ondergrens precies
 * wat het te breed maakt.
 */
body.homeclinic-app-admin {
    min-width: 0 !important;
}

/*
 * De ruimte boven de balk kwam van drie dingen die WordPress boven de inhoud
 * zet: de knoppen Scherminstellingen en Hulp, de melding dat er een nieuwe
 * versie klaarstaat, en meldingen van andere plugins. Op een scherm dat als
 * toepassing bedoeld is, hoort daar niets van thuis.
 *
 * De meldingen van plugins blijven staan voor een beheerder: die kan er iets
 * mee. Voor wie hier alleen de planning beheert, is het ruis waar hij toch
 * niets aan kan doen.
 */
body.homeclinic-app-admin #screen-meta,
body.homeclinic-app-admin #screen-meta-links,
body.homeclinic-app-admin .update-nag {
    display: none !important;
}

body.homeclinic-app-admin.hc-no-wp-chrome .notice,
body.homeclinic-app-admin.hc-no-wp-chrome .updated,
body.homeclinic-app-admin.hc-no-wp-chrome .error {
    display: none !important;
}

body.homeclinic-app-admin #wpbody,
body.homeclinic-app-admin #wpbody-content {
    padding-top: 0 !important;
}

/* En van rand tot rand, net als het portaal. */
@media (max-width: 782px), (max-height: 500px) and (orientation: landscape) {
    body.homeclinic-app-admin #wpcontent {
        padding: 0 !important;
        margin: 0 !important;
    }

    .hc-admin-app {
        min-height: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

/*
 * De weeknummerkolom zo smal als twee cijfers.
 *
 * Er staat nooit meer dan 53 in, dus de breedte hoort daarnaar te staan en
 * niet naar de kop erboven. De cijfers staan in tabelcijfers, zodat elke week
 * even breed uitvalt; met wat minder ruimte ernaast past het ruim.
 */
@media screen {
    .hc-calendar-table th.hc-week-number,
    .hc-calendar-table td.hc-week-number {
        width: 26px;
        min-width: 26px;
        padding-left: 3px;
        padding-right: 3px;
    }

    /*
     * De kop van die kolom draagt witte letters, net als de dagnamen ernaast,
     * maar stond op het lichte vlak van de cellen eronder. Wit op bijna wit:
     * 'wk' was er nauwelijks doorheen te zien. Nu hetzelfde donkergroen als de
     * dagnamen, zodat de kopregel één balk is in plaats van zeven vakjes met
     * een gat vooraan. De cellen eronder blijven licht met donkere cijfers.
     */
    .hc-calendar-table th.hc-week-number {
        background: #294c31;
        color: #fff;
    }
}

/*
 * De maandnavigatie onder de kop van het maandoverzicht.
 *
 * Op een breed scherm staan de pijltjes in de werkbalk. Op een telefoon is daar
 * geen plaats: ze schoven over het logo en de maand die openstond viel half
 * achter de titel weg. Hier staat ze op een eigen rij, met de maandnaam
 * ertussen, zodat het scherm zelf zegt waar je bent.
 */
.hc-month-nav {
    display: none;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
}
.hc-month-nav-label {
    text-align: center;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--hc-primary-dark);
}
.hc-month-nav-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 40px;
    border: 1px solid var(--hc-line, #dfe5ea);
    border-radius: 8px;
    background: #fff;
    color: var(--hc-primary-dark) !important;
    text-decoration: none !important;
}
.hc-month-nav-step:hover,
.hc-month-nav-step:focus {
    background: var(--hc-soft, #f4f7f9);
}

@media (max-width: 782px), (max-height: 500px) and (orientation: landscape) {
    .hc-month-nav { display: grid; }

    /* De pijltjes in de werkbalk zouden hetzelfde nog eens zeggen, en het waren
     * juist die twee die over het logo heen kwamen. Aan een klasse en niet aan
     * hun titel: die is vertaald en zou in een andere taal niets raken. */
    .hc-app-toolbar .hc-toolbar-month {
        display: none;
    }
}

/*
 * Het menu achter het poppetje.
 *
 * Het hangt onder de knop en niet in de werkbalk zelf, zodat de balk niet
 * langer wordt naarmate er iets bijkomt.
 */
.hc-account-menu {
    position: relative;
    display: inline-flex;
}
.hc-account-menu-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 120;
    min-width: 220px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--hc-line, #dfe5ea);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(23, 32, 42, .18);
}
.hc-account-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--hc-ink, #17202a) !important;
    font-size: .92rem;
    text-align: left;
    text-decoration: none !important;
    cursor: pointer;
}
.hc-account-menu-item:hover,
.hc-account-menu-item:focus {
    background: var(--hc-soft, #f4f7f9);
}
.hc-account-menu-item.is-leaving {
    color: #a8321f !important;
}
.hc-account-menu-item .dashicons {
    width: 18px;
    height: 18px;
    font-size: 18px;
    line-height: 18px;
    flex: 0 0 auto;
}

@media (max-width: 782px) {
    /* Op een smal scherm mag het paneel niet buiten beeld hangen; het blijft
     * onder de knop staan maar krijgt de breedte van wat er over is. */
    .hc-account-menu-panel {
        min-width: 0;
        width: max-content;
        max-width: calc(100vw - 24px);
    }
}

/*
 * Niets in het beheerscherm mag breder worden dan de plaats die het heeft.
 *
 * Op het scherm Medewerkers was de oorzaak aan te wijzen: een rasterkolom die
 * niet mocht krimpen. Op Verlofaanvragen is gemeld dat de pagina meeschuift
 * naar rechts, en dat heb ik met de echte HTML niet kunnen nabootsen - niet in
 * de oude opmaak en niet in de nieuwe.
 *
 * Deze regels gokken daarom niet naar het mechanisme maar sluiten de uitkomst
 * af: een kaart en een schuifvak worden nooit breder dan hun ouder, en mogen
 * krimpen onder hun inhoud. Wat dan nog te breed is, schuift binnen zijn eigen
 * venster - zoals een tabel van tien kolommen hoort te doen.
 *
 * Alleen een ondergrens en een bovengrens, geen breedte: dat was in 2.25.1 de
 * fout die de pagina juist verbreedde.
 */
@media (max-width: 782px), (max-height: 500px) and (orientation: landscape) {
    .hc-app-content,
    .hc-app-content > *,
    .hc-material-card,
    .hc-screen-section,
    .hc-table-scroll {
        min-width: 0;
        max-width: 100%;
    }
}

/*
 * De pagina zelf schuift niet, wat er ook gebeurt.
 *
 * Op het scherm Verlofaanvragen schuift de pagina mee naar rechts zodra er
 * openstaande aanvragen zijn - alleen daar, alleen dan, en alleen op iOS. Met
 * de echte gerenderde HTML van dat scherm, inclusief een openstaande aanvraag
 * met echte impactredenen, blijft de pagina hier op 390 pixels gewoon 390
 * breed. Het mechanisme heb ik dus niet te pakken.
 *
 * Dit is daarom een slot en geen diagnose: horizontaal afknippen op het niveau
 * van de beheerpagina. Dat kost niets, want alles wat op deze schermen breder
 * is dan het venster schuift al binnen zijn eigen vak - de aanvragentabel, de
 * kalender, de tabbladenrij. De pagina zelf heeft die ruimte nooit nodig.
 *
 * clip en niet hidden: hidden maakt er een schuifbaar vak van en breekt
 * position sticky; clip knipt alleen af. Een browser die clip niet kent, laat
 * deze regel liggen en gedraagt zich zoals voorheen.
 */
@media (max-width: 782px), (max-height: 500px) and (orientation: landscape) {
    body.homeclinic-app-admin #wpbody-content,
    body.homeclinic-app-admin #wpbody,
    body.homeclinic-app-admin #wpcontent {
        overflow-x: clip;
    }
}

/* Een e-mailsoort die niemand kan uitzetten. Wel te zien, niet te bedienen. */
.hc-mail-type.is-vast {
    opacity: .85;
    cursor: default;
}
.hc-mail-type.is-vast input {
    cursor: default;
}

/* --- 2.33.0 Resetscherm ---------------------------------------------------
 *
 * Drie kaarten die alle drie iets weghalen. Ze horen niet te lezen als de
 * andere kaarten in het beheer: een rode rand links zegt op afstand al dat
 * hier iets anders staat, zonder dat de kaart zelf rood wordt en onleesbaar.
 */
.hc-reset-card {
    border-left: 4px solid #b32d2e;
}
.hc-reset-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-top: 16px;
}
.hc-reset-bevestiging {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}
.hc-reset-bevestiging input {
    width: 140px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* Een tabel die alleen iets laat zien. Dezelfde regels als een gegevenstabel,
 * maar zonder de zoek- en filterbalk: bij negen vaste regels is dat gereedschap
 * voor een probleem dat er niet is. */
.hc-simple-table { width: 100%; border-collapse: collapse; }
.hc-simple-table th { background: #fff; color: #333; font-weight: 600; text-align: left; }
.hc-simple-table th,
.hc-simple-table td { padding: 12px 10px; border-bottom: 1px solid #e6e6e6; vertical-align: middle; }
/* Alleen waar de laatste kolom een getal is. Deze regel stond eerst op
 * .hc-simple-table zelf, en die klasse staat op negen tabellen: de dagdetails,
 * de maandsamenvatting, de planningsstatus. Daar werd de laatste kolom - een
 * naam, een reden - ineens rechts uitgelijnd en tot 140 pixels geknepen. */
.hc-getallen-tabel td:last-child,
.hc-getallen-tabel th:last-child { text-align: right; width: 140px; }

/* --- 2.38.0 Aandachtspunten -----------------------------------------------
 *
 * Oranje, niet rood. Een conflict zegt dat er iets niet klopt; een
 * aandachtspunt zegt dat de planner iets bewust gedaan heeft en het terug moet
 * kunnen vinden - iemand inplannen die die dag niet doorgaf, bijvoorbeeld.
 * Dezelfde kleur als de balk boven een dringende e-mail, zodat 'let op' er in
 * de hele toepassing hetzelfde uitziet.
 */
.hc-stat-card.is-attention { border-left-color: #e2a24a; background: #fef7ed; }
.hc-stat-card.is-attention strong { color: #8a5a12; }
.hc-status-summary-table tr.is-attention td { background: #fffaf3; }
.hc-summary-status.is-attention { color: #8a5a12; }
.hc-summary-status.is-attention i { background: #e2a24a; }
.hc-summary-reasons .hc-aandacht { color: #8a5a12; }

/* De o:, a: en v: voor een rij namen. Vet en onderlijnd, zodat het oog in een
 * volle maand meteen ziet welke regel het is. De namen erachter houden hun
 * eigen opmaak: een onderlijnde naam blijft een tijdsbeperkte shift. */
.hc-dagdeel {
    font-weight: 700;
    text-decoration: underline;
}

/* Een melding blijft staan tot je ze zelf wegklikt. Vandaar het kruisje, en
 * de ruimte ernaast zodat de tekst er niet onder loopt. */
.hc-alert {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}
.hc-alert > span { flex: 1; }
.hc-alert-close {
    flex: none;
    border: 0;
    background: none;
    padding: 0 .2rem;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: .6;
}
.hc-alert-close:hover { opacity: 1; }