/* ============================================
   EHRI Orderverwerking - V2 modernized
   Donkerder bezel, teal/cyan accenten, blauwe
   sidebar. Klassen en widths gelijk aan origineel.
   ============================================ */

:root {
    --bezel: #2c3e50;
    --bezel-dark: #22303f;
    --header: #0e7490;
    --header-dark: #0c627a;
    --accent: #06b6d4;
    --accent-soft: #cffafe;
    --sidebar-bg: #1e293b;
    --sidebar-hover: #334155;
    --sidebar-active: #0e7490;
    --sidebar-text: #e2e8f0;
    --card: #ffffff;
    --card-tint: #f8fafc;
    --text: #0f172a;
    --text-muted: #64748b;
    --border: #cbd5e1;
    --border-soft: #e2e8f0;
    --success: #166534;
    --success-bg: #dcfce7;
    --error: #991b1b;
    --error-bg: #fee2e2;
    --warning: #92400e;
    --warning-bg: #fef3c7;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.12);
    --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.10);
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --transition: 140ms ease;
    --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html { margin: 0; padding: 0; }
body { font-family: var(--font-system); font-size: 13px; line-height: 1.5; background: var(--bezel); margin: 0; padding: 0; color: var(--text); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
ul, ol, dl { padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6, p { margin-top: 0; padding-right: 5px; padding-left: 5px; }
h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
h2 { font-size: 16px; font-weight: 600; color: var(--text); }
h3 { font-size: 14px; font-weight: 600; color: var(--text); }
a { color: var(--header); transition: color var(--transition); }
a.darker { color: var(--header-dark); }
a img { border: none; }
a:link { text-decoration: none; }
a:hover, a:active, a:focus { text-decoration: underline; color: var(--header-dark); }

.container { background: var(--card); margin: 12px auto; box-shadow: var(--shadow-card); border-radius: var(--radius-lg); overflow: hidden; }
.container.padding-collapse { padding: 1px; }

.header { background: linear-gradient(135deg, var(--header) 0%, var(--header-dark) 100%); padding: 12px 16px; color: #fff; }
.header h1 { color: #fff; }
.header table td { color: var(--text); }
.header table strong { color: var(--text); }
.header table { background: rgba(255, 255, 255, 0.95) !important; border-radius: var(--radius-sm); }
.header > table { background: transparent !important; }

.sidebar1 { float: left; padding-bottom: 9999px; margin-bottom: -9999px; position: relative; overflow: visible; background: #1e293b; }
.pull-right { float: right; }
.ml-2 { margin-left: 10px; }
.mr-2 { margin-right: 10px; }
.my-2 { margin-top: 10px; margin-bottom: 10px; }
.d-inline-block { display: inline-block; }
.d-block { display: block; }

.content { padding: 10px 0; width: calc(100% - 220px); float: left; min-height: 500px; position: relative; background: var(--card-tint); }
.content ul, .content ol { padding: 0 15px 15px 40px; }
h1, h2, h3 { padding-left: 0; margin-bottom: 8px; margin-top: 14px; }
.inline-block { display: inline-block; }
.pl-2 { padding-left: 10px; }
.pointer { cursor: pointer; }
.d-flex { display: flex; }

/* --- Navigation menu (cyaanblauw zoals origineel) --- */
ul.nav { list-style: none; margin-bottom: 15px; width: 210px; background: #1e293b; overflow: hidden; z-index: 9000; border-top: 1px solid #334155; padding-bottom: 10px; }
ul.nav > li { margin-bottom: 10px !important; display: block; }
ul.nav > li:last-child { margin-bottom: 10px !important; }
ul.nav a, ul.nav a:visited { padding: 9px 14px; display: block; width: 100%; text-decoration: none; background: #0e7490; color: #fff; font-weight: 500; font-size: 14px; transition: background var(--transition), color var(--transition); }
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { background: #0c627a; color: #fff; text-decoration: none; }
ul.nav .activelink { background: #06b6d4 !important; color: #fff !important; font-weight: 600; }

.debug-table { background-color: var(--card); border: 1px solid var(--border); border-spacing: 0; border-collapse: collapse; text-align: left !important; }
.debug-table td, .debug-table th { border: 1px solid var(--border-soft); padding: 5px 8px; }
.w-100 { width: 100%; }
table th { text-align: left; }

/* Pulsing alert animation (Actuele meldingen) */
@-webkit-keyframes alertanim { from { background: #dc2626; } to { background: #7f1d1d; } }
@keyframes alertanim { from { background: #dc2626; } to { background: #7f1d1d; } }
ul.nav .alert a {
    -webkit-animation: alertanim 1s infinite alternate;
    animation: alertanim 1s infinite alternate;
    color: #fff !important;
    font-weight: 600;
}

.sidebar1 #btn_dropdown { position: absolute; top: -16px; cursor: pointer; display: none; }
.sidebar1 #btn_toggle_menustyle { position: absolute; top: -16px; cursor: pointer; }

/* --- Footer --- */
.footer { padding: 12px 16px; background: linear-gradient(135deg, var(--header) 0%, var(--header-dark) 100%); position: relative; clear: both; color: #fff; font-size: 11px; }

.fltrt { float: right; margin-left: 8px; }
.fltlft { float: left; margin-right: 8px; }
.clearfloat { clear: both; height: 0; font-size: 1px; line-height: 0; }

/* --- Buttons --- */
.button {
    background: var(--header);
    color: #fff;
    border: 1px solid var(--header-dark);
    border-radius: var(--radius-md);
    display: inline-block;
    font-family: var(--font-system);
    font-size: 12px;
    font-weight: 600;
    padding: 7px 18px;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: var(--shadow-sm);
}
.button:hover { background: var(--header-dark); border-color: var(--header-dark); box-shadow: var(--shadow-md); text-decoration: none; color: #fff; transform: translateY(-1px); }
.button:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.button:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.smallbutton {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: inline-block;
    font-family: var(--font-system);
    font-size: 11px;
    font-weight: 500;
    padding: 4px 12px;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition);
}
.smallbutton:hover { background: var(--accent-soft); border-color: var(--header); color: var(--header-dark); text-decoration: none; }
.smallbutton:active { transform: translateY(1px); }

.qtip_docs { cursor: pointer; }

/* --- Searcher (legacy) --- */
.KS_RES_T .KS_RES_R { font-weight: 600; }
.KS_RES_T .KS_RES_H { font-weight: 600; background-color: var(--accent-soft); }
.KS_RES_T .KS_RES_HOVER { cursor: pointer; background-color: var(--border-soft); }

/* --- Forms / Inputs --- */
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], textarea, select {
    font-family: var(--font-system);
    font-size: 12px;
    color: var(--text);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 5px 8px;
    transition: border-color var(--transition), box-shadow var(--transition);
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--header);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { resize: none; margin: 0; }
SELECT { width: 204px; padding-left: 4px; }
.checkbox { width: 16px; padding: 0; margin: 0; }
.groupbutton { height: 29px; width: 206px; margin-top: 1px; background-image: url('../images/frames/button.png'); }
.groupbutton div { padding-top: 6px; font-size: 12px; font-weight: 600; }

/* --- Common --- */
.inputtable td { height: 28px; }
.textdiv { padding: 4px; }
.error { display: block; color: var(--error); background: var(--error-bg); padding: 8px 12px; border-radius: var(--radius-sm); border-left: 4px solid var(--error); }
#jsErrorDiv { color: var(--error); font-weight: 600; text-align: center; }
.success { display: block; color: var(--success); background: var(--success-bg); padding: 8px 12px; border-radius: var(--radius-sm); border-left: 4px solid var(--success); }
.noSELECT { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.padding { padding: 14px; }
.red { color: var(--error); }
.white { color: #fff; }
.redbg { background-color: var(--error-bg); }
.black { color: var(--text); }
.graybg { background-color: var(--border-soft); }
.edit { cursor: pointer; margin-left: 10px; margin-right: 10px; vertical-align: top; }
.mono { font-family: "SF Mono", Monaco, "Cascadia Mono", "Roboto Mono", Consolas, monospace; }

/* --- Paging --- */
#pagingselect { padding: 10px; }
#pagingselect #paginglabel { padding-top: 10px; font-weight: 500; color: var(--text-muted); }
#pagingselect a { padding: 4px 10px; font-size: 13px; color: var(--text); border-radius: var(--radius-sm); margin: 0 2px; transition: background var(--transition); }
#pagingselect a:hover { background: var(--accent-soft); text-decoration: none; }
#pagingselect a.selected { color: #fff; font-size: 13px; font-weight: 600; background: var(--header); }

/* --- Filter / control bar --- */
#orderdiv, #cleardiv, #filterdiv { padding-left: 10px; float: left; }
#printlink { float: right; margin-right: 10px; }

/* --- Item list --- */
#itemlist .item { background-color: var(--card); margin-bottom: 10px; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border-soft); }
#itemlist .item .head { padding: 10px; font-size: 14px; overflow: auto; background: var(--accent-soft); }
#itemlist .item .thead td { padding: 6px 10px; font-weight: 600; background: var(--header); color: #fff; }

/* --- Upload area --- */
#holder { border: 2px dashed var(--border); width: 400px; min-height: 130px; margin: 20px auto; border-radius: var(--radius-md); background: var(--card-tint); transition: all var(--transition); }
#holder.hover { border-color: var(--accent); background: var(--accent-soft); }
#holder img { display: block; margin: 10px auto; }
#holder p { margin: 10px; font-size: 14px; color: var(--text-muted); }
progress { width: 100%; border-radius: var(--radius-sm); overflow: hidden; }
progress:after { content: '%'; }
.fail { background: var(--error); padding: 4px 8px; color: #fff; border-radius: var(--radius-sm); }
.hidden { display: none !important; }

.deleterow { display: inline-block; cursor: pointer; padding-left: 20px; color: var(--text-muted); transition: color var(--transition); }
.deleterow:hover { color: var(--error); }
.regel_select_art { float: left; }

/* --- Standard table --- */
.table { background-color: var(--card); margin-bottom: 12px; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border-soft); }
.table .head { padding: 10px; }
.table .thead td, .table .thead th { padding: 9px 12px; font-weight: 600; color: #fff; background: var(--header); border: none; font-size: 12px; letter-spacing: 0.02em; }
.table td { padding: 7px 12px; border-bottom: 1px solid var(--border-soft); }
.table tr:last-child td { border-bottom: none; }
.table .tselectrow { cursor: pointer; transition: background var(--transition); }
.table .tselectrow:hover td { background-color: var(--accent-soft); }
.table .selected-row td { background-color: var(--accent-soft); }

/* --- Import --- */
#importmanualtable .thead td { font-size: 10px; }

/* --- Artikelen --- */
ul.cas-info-list { padding: 10px !important; }

/* --- Fancy table --- */
.fancytable { background-color: var(--card); border: 1px solid var(--border); border-spacing: 0; border-collapse: separate; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.fancytable td { padding: 7px 12px; }
.fancytable td { border-left: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.fancytable td:first-child { border-left: none; }
.fancytable .fancyrow { background-color: var(--card); }
.fancytable .fancyheader { font-weight: 600; color: #fff; background: var(--header); }
.fancytable .selected { cursor: pointer; background-color: var(--header); color: #fff; }
.fancytable .selrow { cursor: pointer; transition: background var(--transition); }
.fancytable .selrow:hover td { background-color: var(--accent-soft); color: var(--text); }

/* --- Fancy select --- */
.fancyselect { height: 24px; background-color: var(--card); position: relative; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.fancyselect .fancy_sel_hold_name { position: absolute; top: 3px; bottom: 2px; left: 6px; right: 24px; font-size: 12px; overflow: hidden; white-space: nowrap; vertical-align: middle; color: var(--header); cursor: pointer; }
.fancyselect .fancy_sel_btn_select { position: absolute; top: 0; bottom: 0; width: 22px; right: 0; background-image: url(../images/gui/fancy_select_icon.png); background-repeat: no-repeat; background-position: center; cursor: pointer; }

/* --- Actuele meldingen --- */
.notice { background: linear-gradient(135deg, var(--accent-soft) 0%, #f0fdfa 100%); padding: 12px 14px; font-size: 14px; margin-bottom: 8px; border-radius: var(--radius-md); border-left: 4px solid var(--header); color: var(--text); }
.notice .cbread { display: inline-block; float: right; }

/* --- Pakbonnen --- */
.pakbon_regel_table { width: 100%; }
.pakbon_regel_table_select input { padding: 2px; margin: 0; width: 50px; }
.pakbon_regel_table_select .btnadd { cursor: pointer; }
.pakbon_regel_table .btndelete { cursor: pointer; }
.pakbon_regel_table .btnadd { cursor: pointer; }
.pakbon_regel_table .ui-multiselect { width: 120px; }

/* --- Fancy file uploader --- */
.upl_fancy_input { display: inline-block; }
.upl_fancy_input .upl_button {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: inline-block;
    font-family: var(--font-system);
    font-size: 11px;
    font-weight: 500;
    padding: 4px 12px;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition);
}
.upl_fancy_input .upl_button:hover { background: var(--accent-soft); border-color: var(--header); color: var(--header-dark); }
.upl_fancy_input .upl_button:active { transform: translateY(1px); }
.upl_fancy_input .upl_upload_area { display: inline-block; height: 100%; overflow: hidden; cursor: pointer; position: relative; }
.upl_fancy_input input { cursor: pointer; height: 100%; position: absolute; right: 0; top: 0; opacity: 0.01; font-size: 100px; }
.upl_fancy_input .upl_remove_area, .upl_link_area { display: inline-block; height: 100%; vertical-align: top; }
.upl_fancy_input .upl_remove_area .upl_remove { width: 16px; height: 16px; cursor: pointer; vertical-align: middle; }
.upl_fancy_input .upl_link_area .upl_link { vertical-align: middle; }

/* --- Filtered dropdown search --- */
.ds-dropdownSearch { position: relative; padding: 0; margin: 0 0 2px 0; width: 600px; height: 22px; background-color: var(--card); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.ds-dropdownSearch.ds-dropdownSearch-hidden { height: 0; border: none; }
.ds-dropdownSearch .ds-mainLabel { position: absolute; top: 0; bottom: 0; left: 0; padding: 3px 8px; right: 25px; background-color: var(--card); overflow: hidden; white-space: nowrap; cursor: pointer; border-radius: var(--radius-sm); }
.ds-dropdownSearch .ds-button { position: absolute; top: 0; bottom: 0; right: 0; width: 20px; background-position: center; cursor: pointer; }
.ds-dropdownSearch .ds-button.down { background-image: url(../images/dropdown-arrow-down.png); background-repeat: no-repeat; }
.ds-dropdownSearch .ds-button.up { background-image: url(../images/dropdown-arrow-up.png); background-repeat: no-repeat; }
.ds-resultContainer { position: absolute; width: 400px; height: 350px; display: none; background-color: var(--card); border-radius: var(--radius-md); border: 1px solid var(--border); z-index: 100; box-shadow: var(--shadow-md); }
.ds-resultContainer .ds-searchbox-wrapper { position: absolute; top: 4px; left: 4px; right: 4px; height: 28px; }
.ds-resultContainer .ds-searchbox-wrapper .ds-searchbox { width: 100%; height: 24px; }
.ds-resultContainer .ds-resultInner { position: absolute; overflow: hidden; overflow-y: auto; top: 34px; bottom: 2px; left: 2px; right: 2px; background-color: var(--card-tint); }
.ds-resultContainer .ds-resultInner .ds-result { float: left; clear: both; width: 100%; padding: 5px 10px; cursor: pointer; transition: background var(--transition); }
.ds-resultContainer .ds-resultInner .ds-result:hover { background-color: var(--accent-soft); }

/* --- Multiselect --- */
.ui-multiselect { padding: 2px 0 2px 4px; text-align: left; border-radius: var(--radius-sm); }
.ui-multiselect span.ui-icon { float: right; }
.ui-multiselect-single .ui-multiselect-checkboxes input { position: absolute !important; top: auto !important; left: -9999px; }
.ui-multiselect-single .ui-multiselect-checkboxes label { padding: 5px !important; }

.ui-multiselect-header { margin-bottom: 3px; padding: 3px 0 3px 4px; }
.ui-multiselect-header ul { font-size: 0.9em; }
.ui-multiselect-header ul li { float: left; padding: 0 10px 0 0; }
.ui-multiselect-header a { text-decoration: none; }
.ui-multiselect-header a:hover { text-decoration: underline; }
.ui-multiselect-header span.ui-icon { float: left; }
.ui-multiselect-header li.ui-multiselect-close { float: right; text-align: right; padding-right: 0; }

.ui-multiselect-menu { display: none; padding: 3px; position: absolute; z-index: 10000; text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.ui-multiselect-checkboxes { position: relative; overflow-y: auto; }
.ui-multiselect-checkboxes label { cursor: default; display: block; border: 1px solid transparent; padding: 4px 6px; border-radius: var(--radius-sm); }
.ui-multiselect-checkboxes label:hover { background: var(--accent-soft); }
.ui-multiselect-checkboxes label input { position: relative; top: 1px; }
.ui-multiselect-checkboxes li { clear: both; font-size: 0.9em; padding-right: 3px; }
.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label { text-align: center; font-weight: 600; border-bottom: 1px solid var(--border); }
.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label a { display: block; padding: 3px; margin: 1px 0; text-decoration: none; }

/* --- Handmatige facturen --- */
#line_wrapper div:nth-child(even) { background-color: var(--card-tint); }
.man_invoice_line { }

* html .ui-multiselect-checkboxes label { border: none; }
@media print { .ui-multiselect-menu { display: none; } }

.ui-multiselect-checkboxes .anumSent span { color: var(--error) !important; }

.doa-dropdownOrderAttributes { position: relative; display: inline-block; width: 100%; padding: 0; margin: 0 0 2px 0; }
.new-order-line-import .doa-dropdownOrderAttributes { width: 300px; }
.doa-dropdownOrderAttributes .doa-mainLabel { position: absolute; top: 0; bottom: 0; left: 0; padding: 3px 8px; right: 25px; background-color: var(--card); overflow: hidden; white-space: nowrap; cursor: pointer; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.doa-dropdownOrderAttributes .doa-btnOpen { width: 100%; text-align: center; }
.doa-dropdownOrderAttributes .doa-popup { position: absolute; z-index: 1000; top: 100%; left: 0; background-color: var(--card); border: 1px solid var(--border); width: 100%; display: none; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.doa-dropdownOrderAttributes .doa-popup .doa-inputWrapper { padding: 10px; }
.doa-dropdownOrderAttributes .doa-popup .doa-inputWrapper input { margin-bottom: 5px; width: 100%; }
.doa-dropdownOrderAttributes .doa-popup .doa-buttonWrapper { padding: 10px; }

/* --- Order emails --- */
.render-pdf-results .render-pdf-tab-group a { display: inline-block; }
.render-pdf-results .render-pdf-tab { border: 1px solid var(--border); border-radius: var(--radius-sm) var(--radius-sm) 0 0; margin-right: 3px; vertical-align: bottom; padding: 5px 12px; cursor: pointer; background: var(--card-tint); }
.render-pdf-results .render-pdf-tab.active { border-bottom: 0; background-color: var(--card); font-weight: 600; color: var(--header); }
.render-pdf-results .render-pdf-tab-body { clear: both; }
.render-pdf-current-tab-sheets .render-pdf-data-sheet { margin: 10px; background-color: var(--card); position: relative; border-radius: var(--radius-sm); }
.render-pdf-current-tab-sheets .render-pdf-data-page-counter { position: absolute; top: 0; left: 0; background-color: var(--text); color: #fff; padding: 2px 6px; border-radius: var(--radius-sm); }
.render-pdf-current-tab-sheets .render-pdf-data-sheet-cell { position: absolute; border: 1px solid var(--border); cursor: pointer; }
.render-pdf-hint { white-space: pre; font-size: 12px; background-color: var(--card); border: 1px solid var(--text); position: absolute; z-index: 1000; padding: 6px 10px; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }

/* --- Status badges --- */
.status-text-new      { background: var(--header);  color: #fff; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.status-text-skipped  { background: #f59e0b;       color: #fff; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.status-text-error    { background: #dc2626;       color: #fff; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.status-text-imported { background: #16a34a;       color: #fff; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }

/* ============================================
   Globale banner & section-head (alle menu's)
   ============================================ */
.ehri_banner { background: linear-gradient(135deg, #0e7490 0%, #0c627a 100%); color: #fff; padding: 14px 18px; margin-bottom: 14px; border-radius: 8px; }
.ehri_banner h1 { margin: 0; color: #fff; font-size: 18px; font-weight: 600; padding: 0; }
.ehri_banner .meta { color: #cffafe; font-size: 12px; margin-top: 2px; }
.ehri_section_head { background: linear-gradient(135deg, #0e7490 0%, #0c627a 100%); color: #fff; padding: 10px 14px; margin: 18px 0 8px 0; border-radius: 6px 6px 0 0; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; }
.ehri_section_head .sub { font-weight: 400; color: #cffafe; font-size: 12px; margin-left: 8px; }
.ehri_section_head.warn { background: linear-gradient(135deg, #b76e00 0%, #92400e 100%); }

/* ============================================
   MOBILE — telefoon / kleine tablet
   Schermbreedte tot 768px: sidebar bovenop,
   container en content full width, font groter.
   ============================================ */
@media (max-width: 768px) {
    body { font-size: 14px; }
    .container { width: 100% !important; max-width: 100% !important; margin: 0 !important; border-radius: 0 !important; }
    .header { padding: 8px 10px; }
    .header > table { display: block; }
    .header > table > tbody { display: block; }
    .header > table tr { display: block; }
    .header > table td { display: block; width: auto !important; padding: 4px 0; }
    .header > table td table { width: 100% !important; }
    /* nieuwe flexbox-kop netjes stapelen op mobiel */
    .header > div { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
    .header > div > div { flex: 1 1 auto !important; min-width: 0 !important; width: 100% !important; justify-content: flex-start !important; padding: 0 !important; }
    .hdr_card { width: 100% !important; box-sizing: border-box; }
    .sidebar1 { float: none !important; width: 100% !important; height: auto !important; padding: 0; margin-bottom: 0 !important; }
    ul.nav { width: 100% !important; height: auto !important; margin-bottom: 0; }
    ul.nav li { display: block; }
    ul.nav a, ul.nav a:visited { padding: 11px 14px; font-size: 14px; }
    .content { width: 100% !important; float: none !important; padding: 12px 10px; min-height: auto; }
    .footer { padding: 12px 10px; }
    table { max-width: 100%; }
    .table, .fancytable { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    input[type="text"], input[type="password"], input[type="email"], input[type="number"], textarea, select { max-width: 100%; font-size: 16px; }
    .button { padding: 10px 18px; font-size: 14px; }
    .ds-dropdownSearch { width: 100% !important; max-width: 100%; }
    #holder { width: 100% !important; max-width: 100%; }
    .padding { padding: 10px; }
}