/* ===================================================================
// STYLES.CSS
// Hoofd stylesheet voor de My Isaeus Applicatie
//
// Inhoudsopgave:
// -------------------------------------------------------------------
// 1.  Global Styles & Root Variables
// 2.  Layout & Grid System
// 3.  General Components
//       - Header & Navigation
//       - Buttons & Action Icons
//       - Cards, List Items & Status Indicators
//       - Forms & Inputs
//       - Modals & Details Container
//       - Tables (History & Invoice)
//       - Tabs
//       - Notifications, Loaders & Spinners
//       - Miscellaneous UI Elements
// 4.  Module-Specific Styles
// 5.  Theming (Dark Mode & Font Size)
//       - Dark Mode
//       - Font Size
// 6.  Responsive Design (Media Queries)
// 7.  Animations
// 8.  Floating Action Button (FAB) Speed Dial
// ===================================================================*/


/* ===================================================================
// 1. Global Styles & Root Variables
// ===================================================================*/
:root {
	--primary-color: #4267B2;
	--text-gray: #666;
	--border-color: #e0e0e0;
	--shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    --task-hover-bg-0: #eef3fa; /* Kleur voor het item waar je direct op hovert */
    --task-hover-bg-1: #e2eaf4; /* Kleur voor de directe ouder */
    --task-hover-bg-2: #d5e1ee; /* Kleur voor de grootouder */
    --task-hover-bg-3: #c8d8e8; /* Kleur voor de overgrootouder */
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Inter', sans-serif;
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	color: #333;
	line-height: 1.4;
	margin: 0;
	padding: 0;
	min-height: 100vh;
	position: relative;
}

/* Monospace font voor numerieke data */
.font-monospace {
    font-family: 'Roboto Mono', 'JetBrains Mono', monospace;
}


/* Gestijlde Scrollbalken */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
    border: 2px solid #f1f1f1;
}
::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
* {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}


/* ===================================================================
// 2. Layout & Grid System
// ===================================================================*/
.app-wrapper {
    /* Wordt gebruikt in de desktop media query */
}

.main-area {
    /* Wordt gebruikt in de media queries */
}

.content {
	padding: 25px 10px 10px 10px;
	margin: 0;
}

.form-grid {
    display: grid;
    gap: 15px;
}

.details-grid {
    display: flex;
    gap: 20px;
    margin-bottom: 5px;
}

.details-column {
    flex: 1;
    min-width: 0; /* Helps with text overflow handling */
}

.details-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 30px; /* Vertical | Horizontal */
    margin-top: 15px;
}

.details-grid-layout .form-section-title {
    grid-column: 1 / -1; /* Titel over de volledige breedte */
}

.grid-column-full {
    grid-column: 1 / -1;
}

.grid-item {
    display: flex;
    flex-direction: column;
}
/* ===================================================================
// 3. General Components
// ===================================================================*/

/* --- Header & Navigation --- */
.header {
	padding: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
	border-bottom: 1px solid var(--border-color);
	box-shadow: var(--shadow);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

.header h1,
.header-title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
}

.details-container {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	overflow-y: auto
}

.details-container.active {
	display: flex;
	animation:modalFadeIn 0.3s ease-in-out
}

.details-header {
	display: flex;
	padding: 10px;
	background: #f5f5f5;
	border-bottom: 1px solid #e0e0e0;
	align-items: center;
	margin-top: 0px;
	margin-bottom: 10px;	
	border-radius: 8px;
}

.details-header h2 {
	margin: 0;
	font-size: 16px;
	color: #222
}

.back-button {
	margin-right: 15px;
	text-decoration: none;
	color: var(--primary-color);
	font-size: 16px;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 5px
}

.back-button:hover {
	color: #2e4a8a
}

.bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	display: flex;
	justify-content: space-around;
	padding: 10px 0;
	border-top: 1px solid var(--border-color);
	box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1)
}

.nav-item {
	color: var(--text-gray);
	text-align: center;
	text-decoration: none;
	font-size: 20px;
	padding: 5px;
	transition: color 0.3s ease;
}

.nav-item.active {
	color: var(--primary-color);
}

.sidebar {
    /* Stijlen voor desktop sidebar in media query */
}

/* Extra stijlen voor de module groepen */
.module-group {
    /* background-color: var(--card-bg); */
	background-color: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow);
    margin-bottom: 10px;
    overflow: hidden;
}

.module-group:last-child {
    margin-bottom: 0;
}

body.dark-mode .module-group {
	background-color: #1e1e1e;
}

.filter-controls {
	margin-left: 0px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: 0px;
}

#advanced-filter-controls {
    display: grid;
    /* Een grid van 24 kolommen voor maximale flexibiliteit */
    grid-template-columns: repeat(24, 1fr);
    gap: 5px 5px;
    align-items: end;
}

#advanced-filter-controls #filter-organisation-item {
    grid-column: 1 / span 12; /* Neemt de eerste 3 kolommen in */
}
#advanced-filter-controls #filter-person-item {
    grid-column: 13 / span 12; /* Neemt de laatste 3 kolommen in */
}
#advanced-filter-controls #filter-handler-item {
    grid-column: 1 / span 10; /* Eerste 2 kolommen, tweede rij */
}
#advanced-filter-controls #filter-date-from-item {
    grid-column: 11 / span 7; /* Middelste 2 kolommen, tweede rij */
}
#advanced-filter-controls #filter-date-to-item {
    grid-column: 18 / span 7; /* Laatste 2 kolommen, tweede rij */
}


/* Specifieke aanpassing voor de filterbalk in de service module */
.filter-controls.form-grid {
    gap: 5px 5px; /* 5px verticaal, 5px horizontaal */
}

.module-header {
    background-color: #eee;
    padding: 5px 16px;
    font-weight: 600;
    color: var(--primary-text);
    border: 1px solid var(--border-color);
}

body.dark-mode .module-header {
    background-color: #111; /* Donkere achtergrond */
    color: #e0e0e0;            /* Lichtere tekstkleur */
    border-color: #333;        /* Donkere borderkleur */
}

.relation-list-container .module-header {
    border-radius: 8px;
}

.module-group .relation-item {
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border-color);
}

.module-group .relation-item:last-child {
    border-bottom: none;
}

/* --- Buttons & Action Icons --- */
.btn {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.3s;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}
.btn-primary:hover {
    background-color: #2e4a8a;
}

.btn-secondary {
    background-color: #ccc;
    color: #333;
}
.btn-secondary:hover {
    background-color: #bbb;
}

.btn-danger {
    background-color: #dc3545;
    color: white;
}
.btn-danger:hover {
    background-color: #c82333;
}

.btn-small {
    padding: 5px 10px;
    line-height: 1.5;
}

#saveSettingsBtn {
    background-color: #3498DB;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: background-color 0.3s ease;
}
#saveSettingsBtn:hover {
    background-color: #2980b9;
}

.floating-action-button {
    position: fixed;
    bottom: 70px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    z-index: 2000;
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
    opacity: 0;
    transform: translateY(100px);
    pointer-events: none;
	cursor: pointer;
}
.floating-action-button.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.floating-action-button:hover {
    background-color: #2e4a8a;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

.modal-action-btn,
.contact-action-btn {
    background: none;
    border: none;
    color: var(--text-gray);
    cursor: pointer;
    font-size: 12px; /* Verkleind voor de nieuwe knopgrootte */
    padding: 2px;  /* Verkleind voor de nieuwe knopgrootte */
    border-radius: 50%;
    width: 22px;   /* Jouw verzoek */
    height: 22px;  /* Jouw verzoek */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
	flex-shrink: 0;
}
.contact-action-btn {
    background: rgba(0, 0, 0, 0.05);
}
.modal-action-btn:hover,
.contact-action-btn:hover {
    background-color: #e0e0e0;
    color: #333;
}

.copy-button {
	background: none;
	border: none;
	color: var(--primary-color);
	cursor: pointer;
	font-size: 14px;
	padding: 5px;
	margin-left: 5px;
	transition: color 0.3s ease
}
.copy-button:hover {
	color: #2e4a8a
}

.action-buttons {
	display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* --- Cards, List Items & Status Indicators --- */
.relation-item,
.password-item,
.organization-item,
.ticket-item {
	padding: 5px;
	margin-bottom: 5px;
	background: #fff;
	border-radius: 8px;
	text-decoration: none;
	color: #333;
	display: block;
	transition: all 0.3s ease;
	box-shadow: var(--shadow);
	cursor: pointer
}
.relation-item:hover,
.password-item:hover,
.organization-item:hover,
.ticket-item:hover {
	background: #f8f9fa;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.organization-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.item-count {
	color: var(--text-gray);
	font-size: 0.9em;
	margin-left: 10px;
}

body.dark-mode .item-count {
    color: #aaa;
}

/* Badge voor gearchiveerde items */
.relation-archive-badge {
    background-color: #6c757d;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    margin-right: 8px;
    font-weight: 500;
    flex-shrink: 0; /* Voorkomt dat de badge krimpt */
}

/* Algemene container-stijl */
.relation-list,
#content-section {
    border-radius: 8px;
    box-shadow: var(--shadow);
}

/* Flexbox-container voor de header van een lijst-item.
   Dit is de enige definitie die nodig is. */
.relation-header {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Gedeelde tekst-stijlen voor de titels */
.relation-name,
.password-title {
    font-weight: 600;
    font-size: 16px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Specifieke layout-stijl om de titel de beschikbare ruimte te geven.
   Dit duwt de badges correct naar rechts. */
.password-title {
    flex-grow: 1;
}

.password-subheader {
	font-size: 0.8em;
	margin-left: 10px;
}

.url {
	color: var(--primary-color);
	word-break: break-all
}

.organization-name {
    font-size: 14px;
    color: var(--text-gray);
}

/* DNS module: align header items on one line and style count */
.dns-module .password-header {
    justify-content: flex-start; /* override global space-between */
    gap: 6px;
    margin-bottom: 0; /* remove extra bottom space so item height fits content */
}
.dns-module .password-header .password-title {
    flex: 0 0 auto;              /* do not shrink title */
    white-space: nowrap;
    overflow: visible;           /* no ellipsis for title */
    text-overflow: clip;
}
.dns-module .password-header .organization-name {
    flex: 1 1 auto;              /* takes remaining space */
    min-width: 40px;
    white-space: nowrap;
    overflow: hidden;            /* ellipsis when needed */
    text-overflow: ellipsis;
}
.dns-module .password-header .record-count {
    flex: 0 0 auto;
    font-size: 14px;
    color: var(--text-gray);
    white-space: nowrap;
    margin-left: auto;           /* keep counter right-aligned even without org */
}
body.dark-mode .dns-module .password-header .record-count {
    color: #bbb;                 /* match dark mode org-name */
}

.relation-type-badge {
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 12px;
    background-color: #e9ecef;
    color: #495057;
    margin-left: 10px;
    white-space: nowrap;
}

.ict-contact-badge {
    display: inline-block;
    background-color: #e9ecef;
    color: #495057;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
    vertical-align: middle;
}

body.dark-mode .ict-contact-badge {
    background-color: #333;
    color: #e0e0e0;
}

/* Subtiele rand voor klant-acties; in dark-mode een lichte rand */
.action-card.client-action { border: 1px solid rgba(0,0,0,0.18); border-radius: 8px; }
.dark-mode .action-card.client-action { border-color: rgba(255,255,255,0.28); }

.details-card,
.action-card {
	background: #f8f9fa;
	border-radius: 8px;
	box-shadow: var(--shadow);
	padding: 20px;
    margin-bottom: 10px;
	position: relative;
}

.details-card .details-field:last-child {
    margin-bottom: 0;
}

.contact-card,
.location-card {
	background: #f8f9fa;
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 10px;
	box-shadow: var(--shadow);
    position: relative;
}

.contact-card-actions {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.contact-card:hover,
.details-card:hover,
.action-card:hover {
    background-color: #f1f1f1;
}

.contact-card:hover .contact-card-actions,
.details-card:hover .contact-card-actions,
.location-card:hover .contact-card-actions,
.action-card:hover .contact-card-actions {
    opacity: 1;
}

.menu-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	background: #f8f9ff;
	border-radius: 8px;
	margin-bottom: 10px;
	text-decoration: none;
	color: #2980b9;
	box-shadow: var(--shadow);
	transition: all 0.3s ease
}
.menu-item.last-logins { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; overflow:hidden; }
.menu-item:hover {
	background: #3498db;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.menu-item:hover i {
    color: #fff;
}
.menu-item-left {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 24px;
}
.menu-item-left span {
  line-height: 24px;
  display: inline-block;
  vertical-align: middle;
}
.menu-item i {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    font-size: 18px;
    color: #2980b9;
    line-height: 1;
}

.client-type {
	background: #4CAF50;
	color: #FFFFFF;
	padding: 5px 15px;
	border-radius: 20px;
	font-size: 14px;
	margin-left: auto
}

/* Status Indicators */
.status-paid {
    background-color: #d4edda !important; /* Lichtgroen */
    color: #155724 !important; /* Donkergroen */
    border: 1px solid #c3e6cb;
}

.status-open {
    background-color: #f8d7da !important; /* Lichtrood */
    color: #721c24 !important; /* Donkerrood */
    border: 1px solid #f5c6cb;
}

/* --- Forms & Inputs --- */
.form-control {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1em;
    background: #fff;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.form-control:focus {
    outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 8px rgba(66, 103, 178, 0.2);
}

.form-control:hover {
    border-color: var(--primary-color);
}

/* Stijl voor read-only velden */
.form-control.readonly-field {
    background-color: #f0f0f0;
    cursor: not-allowed;
}
/* Voorkom dat de textarea horizontaal kan worden vergroot, wat de UI breekt */
textarea.form-control {
    resize: vertical; /* Sta alleen verticale resize toe */
    min-height: 120px; /* Een redelijke minimumhoogte */
}

.form-section-title-with-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-color);
}
.form-section-title-with-button .form-section-title {
    margin: 0;
    padding: 0;
    border: none;
}
body.dark-mode .form-section-title-with-button {
    border-bottom-color: #333;
}

.search-bar {
	width: 100%;
	padding: 12px 40px 12px 16px;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	font-size: 16px;
	background: #fff;
	box-shadow: var(--shadow);
	transition: border-color 0.3s, box-shadow 0.3s
}
.search-bar:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 8px rgba(66, 103, 178, 0.2)
}

.search-bar:hover {
	border-color: var(--primary-color);
}

/* --- Aanpassingen voor zoekbalk met filter --- */
.search-section {
    position: relative;
    margin-bottom: 5px;
}

/* Container voor de iconen rechts in de zoekbalk */
.search-icons-container {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 12px; /* Ruimte tussen de iconen */
    color: var(--text-gray);
}

.search-icons-container .filter-icon,
.search-icons-container .search-icon,
.search-icons-container .clear-icon {
    cursor: pointer;
    transition: color 0.2s;
}

.search-icons-container .filter-icon:hover,
.search-icons-container .clear-icon:hover {
    color: #333;
}

.search-icons-container .search-icon,
.search-icons-container .clear-icon {
    position: static; /* Annuleert 'position: absolute' */
    transform: none;  /* Reset de 'transform: translateY' */
}

body.dark-mode .search-icons-container .filter-icon:hover,
body.dark-mode .search-icons-container .clear-icon:hover {
    color: #fff;
}

/* Pas de padding van de zoekbalk aan om ruimte te maken voor de iconen */
.search-bar {
    padding-right: 90px; /* Meer ruimte voor 3 iconen */
}

.clear-icon {
    display: none; /* Wordt via JS getoond */
}

/* Styling voor het filter-pop-up menu */
.filter-menu {
    display: none; /* Standaard verborgen */
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 5px;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow);
    z-index: 10;
    padding: 10px;
	width: 250px;
}
.filter-menu.active {
    display: block; /* Toon het menu */
}
body.dark-mode .filter-menu {
    background-color: #2d2d2d;
    border-color: #444;
}

.filter-section {
    margin-bottom: 0px;
}
.filter-section > label {
    font-weight: 600;
    font-size: 0.9em;
    display: block;
    margin-bottom: 5px;
}
.filter-section.separator-top {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid var(--border-color);
}
body.dark-mode .filter-section.separator-top {
    border-top-color: #333;
}
.view-options-container,
.status-checkboxes-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.view-option-btn {
    background: none;
    border: none;
    text-align: left;
    padding: 6px 8px;
    width: 100%;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    color: var(--primary-color);
}
.view-option-btn:hover {
    background-color: #f1f3f5;
}
body.dark-mode .view-option-btn {
    color: #64B5F6;
}
body.dark-mode .view-option-btn:hover {
    background-color: #3a3a3a;
}

.filter-option {
    display: flex;
    align-items: center;
    padding: 5px;
}

.filter-option label {
    margin-left: 8px;
    cursor: pointer;
}

.search-icon {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-gray)
}
.clear-icon {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-gray);
    cursor: pointer;
    display: none;
    transition: color 0.2s;
}

.clear-icon:hover {
    color: #333;
}

/* Stijl voor de container van de accountinstellingen */
.settings-container-well {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin-top: 15px;
    background-color: #f8f9fa;
}

/* Dark mode variant */
body.dark-mode .settings-container-well {
    border-color: #444;
    background-color: #2d2d2d;
}

/* Kleinere versie van de aan/uit schakelaar */
.switch-small {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    vertical-align: middle;
    flex-shrink: 0; /* Voorkomt dat de switch krimpt */
}
.switch-small input {
    opacity: 0;
    width: 0;
    height: 0;
}
.switch-small .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e0e0e0;
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 22px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.switch-small .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.switch-small input:checked + .slider {
    background-color: var(--primary-color);
}
.switch-small input:checked + .slider:before {
    transform: translateX(18px);
}
.switch-small input:focus + .slider {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(66, 103, 178, 0.15);
}
body.dark-mode .switch-small .slider {
    background-color: #555;
}

/* --- Aangepaste 'aan' kleur voor sliders in Dark Mode --- */
body.dark-mode .switch input:checked + .slider,
body.dark-mode .switch-small input:checked + .slider {
    background-color: #34495e;
}

/* Nieuwe grid-layout voor permissies */
.permission-grid {
    display: grid;
    /* Maakt automatisch kolommen die min 240px en max 1fr breed zijn */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px;
    margin-top: 15px;
}
.permission-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: #fdfdfd;
    margin-bottom: 8px; /* <-- VOEG DEZE REGEL TOE */
}

/* Optioneel, voor de perfectie: verwijder de marge van het laatste item */
.permission-item:last-child {
    margin-bottom: 0;
}
.permission-item .modal-label {
    margin-bottom: 0; /* Verwijder de standaard marge */
    font-weight: 500;
    flex-grow: 1; /* Zorgt dat het label de beschikbare ruimte inneemt */
    margin-right: 10px;
}
body.dark-mode .permission-item {
    background-color: #2d2d2d;
    border-color: #444;
}

/* Folder/Map Dropdown Styling */
.folder-dropdown {
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--border-color);
	border-radius: 0.5rem;
	background-color: #f5f5f5;
	font-family: 'Inter', sans-serif;
	font-size: 0.9em; /* Standaardgrootte */
	font-weight: 500;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	transition: all 0.2s ease-in-out;
	appearance: none;
	/* Aangepast pijltje voor de dropdown */
	background-image: url('data:image/svg+xml;utf8,<svg fill="%2364748b" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1rem;
}

.folder-dropdown:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(66, 103, 178, 0.15);
	outline: none;
}

.folder-dropdown:hover {
	border-color: var(--primary-color);
}

.folder-dropdown option {
	color: #333;
	background-color: #fff;
}

/* Styling voor de 'Extra Info' box in het ticket-formulier */
.org-extra-info-well {
    background: #f1f1f1;
    padding: 10px;
    border-radius: 8px;
    min-height: 50px;
    white-space: pre-wrap;
    word-break: break-word;
    border: 1px solid var(--border-color);
}

/* Dark mode variant voor de 'Extra Info' box */
body.dark-mode .org-extra-info-well {
    background-color: #2d2d2d;
    border-color: #444;
    color: #e0e0e0;
}

/* Positionering van de 'Mappen beheren'-knop op de dropdown */

/* 1. Maak van de container een positionerings-anker */
#folder-section {
    position: relative;
}

/* 2. Verwijder de ruimte tussen de dropdown en de knop */
#folder-section {
    gap: 0;
}

/* 3. Plaats de knop absoluut binnen de container */
#editFoldersBtn {
    position: absolute;
    right: 1.5rem; /* Positie links van het dropdown-pijltje */
    top: 50%;
    transform: translateY(-50%);
    z-index: 5; /* Zorgt dat de knop boven de dropdown ligt */
}

/* 4. Geef de tekst in de dropdown extra ruimte zodat deze niet onder de knop valt */
#folderDropdown {
    padding-right: 3.5rem !important; /* Extra ruimte voor het pijltje én de knop */
}

#editFoldersBtn:hover {
    background-color: transparent;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    vertical-align: middle;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e0e0e0;
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 34px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
input:checked + .slider {
    background-color: var(--primary-color);
}
input:checked + .slider:before {
    transform: translateX(26px);
}
input:focus + .slider {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(66, 103, 178, 0.15);
}

.form-section-title {
    display: block;
    font-size: 1.1em;
    color: var(--primary-color);
    margin-top: 10px;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-color);
}
.form-section-title:first-child {
    margin-top: 0;
}

.form-input-group {
    display: flex;
    gap: 5px;
}

.form-input-group .btn {
    flex-shrink: 0;
}

.form-input-group .btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.form-input-group-centered {
    display: flex;
    align-items: center;
    gap: 10px;
}
.input-country-code { flex-basis: 60px !important; }
.input-area-code { flex-basis: 80px !important; }
.input-mobile-prefix { flex-basis: 70px !important; }
.input-flex-grow { flex-grow: 1; }

.form-actions-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Voegt ruimte toe tussen de linker- en rechterknoppen */
    padding-top: 15px;
    margin-top: 20px;
    border-top: 1px solid var(--border-color);
}

/* Deze class zorgt ervoor dat de knoppen altijd naar rechts worden geduwd */
.form-actions-container .right-buttons {
    margin-left: auto; /* Dit is de belangrijkste regel */
    display: flex;
    gap: 10px; /* Ruimte tussen de knoppen Annuleren en Opslaan */
}

/* --- Modals & Details Container --- */
.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
    overflow-y: auto;
    animation: modalFadeIn 0.3s ease-in-out;
}

/* (removed projects-specific z-index override to avoid cross-module issues) */
.modal-container.active {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px
}
body.modal-open {
	overflow: hidden
}

/* Hide FAB speed dial when a modal is open */

.modal-content {
    background: #FFFFFF;
    width: 100%;
    max-width: 600px; /* Default size */
    margin: 20px auto;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    animation: modalSlideIn 0.3s ease-out
}
.modal-content-large { max-width: 850px; }
.modal-content-medium { max-width: 550px; }
.modal-content-small { max-width: 420px; }

.modal-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid var(--border-color)
}
.modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    flex-grow: 1;
}
.modal-back {
    display: flex;
    align-items: center;
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 500;
    margin-right: 0px;
    cursor: pointer;
    transition: color 0.2s;
}
.modal-back:hover { color: #2e4a8a; }
.modal-back i { margin-right: 5px; }

.modal-badge {
    background: #e9ecef;
    color: #495057;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}

/* --- Project Export Modal (PDF viewer) — align with invoice viewer --- */
#projectExportModal .modal-content.modal-content-large { max-width: 850px; }
#projectExportModal .modal-body { padding: 20px; }
#project-pdf-display-area {
    height: 80vh;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border-color, #ccc);
}
.dark-mode #project-pdf-display-area {
    border-color: rgba(255,255,255,0.25);
}

.modal-body {
    padding: 20px;
}

.modal-actions {
    margin-left: auto;
    display: none;
    align-items: center;
    gap: 8px; /* ruimte tussen bewerk-/actie-iconen en badge */
}

/* Disabled state for IT Service modal save button */
#itServiceHoursModal .btn:disabled,
#itServiceHoursModal .btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.modal-field, .details-field {
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.modal-label, .details-label {
    font-weight: 600;
    color: #333;
    font-size: 0.9em;
}
.modal-value, .details-value {
    font-size: 1em;
    color: var(--text-gray);
    word-break: break-word;
    /* Force wrap of extreem lange woorden/keys (bv. DKIM p=...)
       om horizontale overflow en paginabreedte-jumps te voorkomen */
    overflow-wrap: anywhere;
}

.pre-wrap-text {
    white-space: pre-wrap;
    /* Zorgt dat ononderbroken tokens alsnog kunnen afbreken */
    overflow-wrap: anywhere;
}

.modal-value a, .details-value a {
    color: var(--primary-color);
    text-decoration: none;
}
.modal-value a:hover, .details-value a:hover {
    text-decoration: underline;
}
.value-with-actions {
	display: flex;
    align-items: center;
    gap: 5px;
}
.value-with-actions > a, .value-with-actions > span:first-child {
    word-break: break-all;
    min-width: 0;
}

.modal-section {
 margin-bottom: 20px
}

.modal-section-title {
 font-size: 18px;
 font-weight: 600;
 color: var(--primary-color);
 margin-bottom: 15px
}

/* --- Tables (History & Invoice) --- */
.history-table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.history-table,
.invoice-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    table-layout: fixed;
    overflow-wrap: break-word;
}
.history-table th, .history-table td,
.invoice-table th, .invoice-table td {
    padding: 5px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
    overflow-wrap: break-word;
}
.history-table th, .invoice-table th {
    font-weight: 600;
    color: var(--primary-color);
}
.history-table tbody tr:hover,
.invoice-table tbody tr:hover {
    background-color: #f8f9fa;
}

.history-table tbody tr:last-child td {
    border-bottom: none;
}

/* --- Column-specific alignments and styles --- */
/* Right-align all numeric, amount, and date columns */
.history-table .col-amount,
.history-table .col-sub-amount,
.history-table .col-inv-amount,
.history-table .col-qty,
.history-table .col-sub-qty,
.history-table .col-date,
.history-table .col-sub-date,
.history-table .col-inv-date,
.history-table .col-end,
.history-table .col-inv-id,
.open-invoices-table .col-nummer,
.open-invoices-table .col-bedrag,
.open-invoices-table .col-datum,
.history-table.client-invoices-table .col-nummer,
.history-table.client-invoices-table .col-bedrag,
.history-table.client-invoices-table .col-datum,
.history-table .col-batch-num,
.history-table .col-batch-amount,
.history-table .col-batch-date {
    text-align: right;
}

/* Add padding to the headers of these columns to make space for the sort icon */
.history-table thead th.col-amount,
.history-table thead th.col-sub-amount,
.history-table thead th.col-inv-amount,
.history-table thead th.col-qty,
.history-table thead th.col-sub-qty,
.history-table thead th.col-date,
.history-table thead th.col-sub-date,
.history-table thead th.col-inv-date,
.history-table thead th.col-end,
.history-table thead th.col-inv-id,
.open-invoices-table thead th.col-nummer,
.open-invoices-table thead th.col-bedrag,
.open-invoices-table thead th.col-datum,
.history-table.client-invoices-table thead th.col-nummer,
.history-table.client-invoices-table thead th.col-bedrag,
.history-table.client-invoices-table thead th.col-datum,
.history-table thead th.col-batch-num,
.history-table thead th.col-batch-amount,
.history-table thead th.col-batch-date {
    padding-right: 20px;
}

/* Specifics for History Table */
.history-table .col-hist-datum    { width: 15%; }
.history-table .col-hist-type     { width: 15%; }
.history-table .col-hist-persoon  { width: 20%; }
.history-table .col-hist-omschr   { width: 50%; }

.history-table .person-link,
.history-table .ticket-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}
.history-table .person-link:hover,
.history-table .ticket-link:hover {
    text-decoration: underline;
}

.history-table th.sortable {
    cursor: pointer;
    position: relative;
    user-select: none;
}
.history-table th.sortable:hover {
    background-color: #f0f0f0;
}
.history-table th.sortable::after {
    content: ' \2195'; /* Up-down arrow */
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: 0.4;
    transition: opacity 0.2s;
}
.history-table th.sortable:hover::after {
    opacity: 1;
}

/* Relatiebeheer details: kolombreedtes en overflow binnen details-container */
#detailsContainer .history-table th.col-sub-type,
#detailsContainer .history-table td.col-sub-type { width: 15%; text-align: left; }
#detailsContainer .history-table th.col-sub-desc,
#detailsContainer .history-table td.col-sub-desc { width: 32%; text-align: left; }
#detailsContainer .history-table th.col-sub-amount { text-align: right; }
#detailsContainer .history-table td.col-sub-amount { width: 8%; text-align: right; }
#detailsContainer .history-table th.col-sub-actions,
#detailsContainer .history-table td.col-sub-actions { width: 12%; text-align: left; white-space: nowrap; }

/* Container en ellipsis specifiek voor Relatiebeheer details */
#detailsContainer .history-table-container {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
    overflow-x: auto;
}
#detailsContainer .history-table { table-layout: fixed; width: 100%; }
#detailsContainer .history-table th,
#detailsContainer .history-table td { overflow: hidden; text-overflow: ellipsis; }
.history-table th.sort-asc::after {
    content: ' \25B2'; /* Up arrow */
    opacity: 1;
}
.history-table th.sort-desc::after {
    content: ' \25BC'; /* Down arrow */
    opacity: 1;
}

.client-search-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}
.client-search-link:hover {
    text-decoration: underline;
    cursor: pointer;
}
body.dark-mode .client-search-link {
    color: #64B5F6;
}

/* Specifics for Invoice Table */
.invoice-table .col-inv-id       { width: 10%; }
.invoice-table .col-inv-amount   { width: 10%; text-align: right; }
.invoice-table .col-inv-date     { width: 10%; }
.invoice-table .col-inv-download { width: 40%; text-align: center; }
.invoice-table .col-inv-status   { vertical-align: middle; text-align: center; }

.invoice-download-link {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 1.1em;
}

.invoice-download-link:hover {
    color: #2e4a8a;
}
.invoice-summary-container {
    margin-top: 20px;
    padding-top: 10px;
    text-align: left;
    font-size: 0.9em;
    color: var(--text-gray);
    border-top: 1px solid var(--border-color);
}

/* Geef factuur-"cards" binnen de facturatie module wat binnenruimte */
.invoicing-module .module-group {
    padding: 10px;
}


/* ===================================================================
// Specifieke Kolombreedtes voor Facturatie Module
// ===================================================================*/

/* Zorgt ervoor dat de tabel de volledige breedte gebruikt en de kolombreedtes respecteert */
.invoicing-module .history-table {
    table-layout: fixed;
    width: 100%;
}

/* 1. Factuurnummer - Smaller */
.invoicing-module .open-invoices-table th:nth-child(1),
.invoicing-module .open-invoices-table td:nth-child(1) {
    width: calc(6% + 2px);
}

/* 2. Organisatie / Klant - Breder */
.invoicing-module .open-invoices-table th:nth-child(2),
.invoicing-module .open-invoices-table td:nth-child(2) {
    width: calc(32% - 2px);
}

/* 3. Bedrag (inc.) */
.invoicing-module .open-invoices-table th:nth-child(3),
.invoicing-module .open-invoices-table td:nth-child(3) {
    width: 8%;
}

/* 4. Bedrag (excl.) */
.invoicing-module .open-invoices-table th:nth-child(4),
.invoicing-module .open-invoices-table td:nth-child(4) {
    width: 8%;
}

/* 5. Datum - Smaller */
.invoicing-module .open-invoices-table th:nth-child(5),
.invoicing-module .open-invoices-table td:nth-child(5) {
    width: 8%;
}

/* 6. Herinnering */
.invoicing-module .open-invoices-table th:nth-child(6),
.invoicing-module .open-invoices-table td:nth-child(6) {
    width: 8%;
}

/* 7. Aanmaning */
.invoicing-module .open-invoices-table th:nth-child(7),
.invoicing-module .open-invoices-table td:nth-child(7) {
    width: 8%;
}

/* 8. Voldaan op */
.invoicing-module .open-invoices-table th:nth-child(8),
.invoicing-module .open-invoices-table td:nth-child(8) {
    width: 8%;
}

/* 9. Gedownload */
.invoicing-module .open-invoices-table th:nth-child(9),
.invoicing-module .open-invoices-table td:nth-child(9) {
    width: 12%; /* Zelfde breedte als andere datumkolommen */
}

/* 10. Acties (was 9) */
.invoicing-module .open-invoices-table th:nth-child(10),
.invoicing-module .open-invoices-table td:nth-child(10) {
    width: 10%;
    text-align: left;
}

.invoicing-module .open-invoices-table tfoot th {
    font-weight: 600;
    color: var(--primary-color);
    background-color: #f8f9fa;
    border-top: 2px solid var(--border-color); /* Dikkere lijn om het van de body te scheiden */
    border-bottom: none;
    padding-top: 10px;
    padding-bottom: 10px;
}

body.dark-mode .invoicing-module .open-invoices-table tfoot th {
    color: #64B5F6;
    background-color: #1e1e1e;
    border-top-color: #333;
}

/* Zorgt dat actieknoppen in de facturatietabel naast elkaar staan */
.invoicing-module .client-invoices-table {
    table-layout: fixed;
    width: 100%;
}
/* Client facturen (6 kolommen) — beperk brede tweede kolom */
.invoicing-module .client-invoices-table th:nth-child(1),
.invoicing-module .client-invoices-table td:nth-child(1) { width: 14%; }
.invoicing-module .client-invoices-table th:nth-child(2),
.invoicing-module .client-invoices-table td:nth-child(2) { width: 14%; }
.invoicing-module .client-invoices-table th:nth-child(3),
.invoicing-module .client-invoices-table td:nth-child(3) { width: 14%; }
.invoicing-module .client-invoices-table th:nth-child(4),
.invoicing-module .client-invoices-table td:nth-child(4) { width: 18%; }
.invoicing-module .client-invoices-table th:nth-child(5),
.invoicing-module .client-invoices-table td:nth-child(5) { width: 18%; }
.invoicing-module .client-invoices-table th:nth-child(6),
.invoicing-module .client-invoices-table td:nth-child(6) { width: 22%; text-align: left; }


/* Styling voor de tabelkop in de factuur details modal */
.invoice-detail-header {
    background-color: #f8f9fa; /* Lichte achtergrond voor de lichte modus */
}

body.dark-mode .invoice-detail-header {
    background-color: #1e1e1e; /* Donkere achtergrond voor de donkere modus */
}

/* ===================================================================
// Stijlen voor Facturatie Module
// ===================================================================*/

.facturatie-overview-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em; /* Iets kleiner voor meer data */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.facturatie-overview-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: var(--primary-color);
}

.facturatie-overview-table th, 
.facturatie-overview-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.facturatie-overview-table tbody tr:hover td {
    background-color: #f1f3f5;
}

/* Sta alleen tekst-terugloop toe voor de organisatiekolom */
.facturatie-overview-table .col-org {
    white-space: normal;
}

/* Kolombreedtes */
.facturatie-overview-table .col-inv-nr     { width: 8%; }
.facturatie-overview-table .col-org        { width: 25%; }
.facturatie-overview-table .col-amount     { width: 11%; text-align: right; }
.facturatie-overview-table .col-date       { width: 10%; }
.facturatie-overview-table .col-status     { width: 5%; text-align: center; }
.facturatie-overview-table .col-download   { width: 7%; text-align: center; }


/* Dark mode compatibiliteit */
body.dark-mode .facturatie-overview-table {
    border-color: #333;
}
body.dark-mode .facturatie-overview-table th {
    background-color: #1e1e1e;
    color: #64B5F6;
}
body.dark-mode .facturatie-overview-table td {
    border-bottom-color: #333;
}
body.dark-mode .facturatie-overview-table tbody tr:hover td {
    background-color: #2d2d2d;
}

.table-action-buttons {
    text-align: left;
    vertical-align: middle;
}

.action-buttons-wrapper {
    display: inline-flex; /* Gebruik inline-flex zodat text-align:center op de TD werkt */
    align-items: center;
    gap: 8px; /* Voeg de tussenruimte hier globaal toe */
}


.action-buttons-group {
    display: inline-flex;
    align-items: center;
}

/* Specifics for Batch Table */
.history-table .col-batch-org    { width: 15%; }
.history-table .col-batch-desc   { width: 36%; white-space: normal; }
.history-table .col-batch-num    { width: 4%; }
.history-table .col-batch-amount { width: 8%; }
.history-table .col-batch-date   { width: 6%; }
.history-table .col-batch-action { width: 4%; text-align: left; }

/* Specifics for Subscriptions Table (abonnementen.php) */
.history-table[data-table-type="abonnementen"] .col-abbo-holder { width: 16%; }
.history-table[data-table-type="abonnementen"] .col-type { width: 14%; }
.history-table[data-table-type="abonnementen"] .col-omschr { width: 34%; }
.history-table[data-table-type="abonnementen"] .col-date { width: 8%; }
.history-table[data-table-type="abonnementen"] .col-end { width: 7%; }
.history-table[data-table-type="abonnementen"] .col-qty { width: 6%; }
.history-table[data-table-type="abonnementen"] .col-amount { width: 6%; }
.history-table[data-table-type="abonnementen"] .col-actions { width: 10%; }

/* Specifics for Contracts Table (abonnementen.php) */
.history-table[data-table-type="contracten"] th:nth-child(1),
.history-table[data-table-type="contracten"] td:nth-child(1) { width: 10%; } /* Contractnummer */
.history-table[data-table-type="contracten"] th:nth-child(2),
.history-table[data-table-type="contracten"] td:nth-child(2) { width: 50%; } /* Organisatie */
.history-table[data-table-type="contracten"] th:nth-child(3),
.history-table[data-table-type="contracten"] td:nth-child(3) { width: 10%; } /* Aantal abonnementen */
.history-table[data-table-type="contracten"] th:nth-child(4),
.history-table[data-table-type="contracten"] td:nth-child(4) { width: 5%; } /* Status */
.history-table[data-table-type="contracten"] th:nth-child(5),
.history-table[data-table-type="contracten"] td:nth-child(5) { width: 25%; } /* Acties */


/* --- Tabs --- */
.tab-container {
	display: flex;
	gap: 10px;
	margin-bottom: 0;
	overflow-x: auto;
	padding-bottom: 5px
}
.tab {
	flex: 1;
	padding: 10px;
	border: none;
	border-radius: 8px;
	background: #fff;
	color: var(--text-gray);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: var(--shadow);
	white-space: nowrap
}
.tab.active, .tab:hover {
	background: #3498db;
	color: #fff;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.tab .todo-today-tab-badge {
    margin-left: 8px;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 999px;
    background-color: #e74c3c;
    color: #fff;
    font-size: 0.75em;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.dark-mode .tab .todo-today-tab-badge {
    background-color: #e74c3c;
    color: #fff;
}

.modal-tabs {
    display: flex;
    gap: 8px;
    padding: 8px;
    background: #f8f9fa;
    border-bottom: 1px solid var(--border-color);
}
.modal-tab {
    padding: 10px 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 8px;
    border-bottom: none;
    text-align: center;
    background: #f1f1f1;
    color: #2980b9;
	font-size: 0.9em;
}
.modal-tab:hover,
.modal-tab.active {
    background: #3498db;
    color: #fff;
}

/* --- Notifications, Loaders & Spinners --- */
.notification {
	position: fixed;
	bottom: 100px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #5693f5;
	color: #FFFFFF;
	padding: 20px 20px;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	z-index: 1000;
	opacity: 1;
	transition: opacity 0.3s ease;
}
.notification.error {
	background-color: #dc3545;
	color: #FFFFFF;
}

.notification.warning {
    background-color: #ffc107; /* Een duidelijke amber/oranje kleur */
    color: #333; /* Donkere tekst voor goede leesbaarheid op de lichte achtergrond */
}

.notification.fade-out {
	opacity: 0
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(66, 103, 178, 0.1);
    border-radius: 50%;
    border-top-color: var(--primary-color);
    animation: spin 1s ease-in-out infinite;
}
.loading-indicator {
    text-align: center;
    padding: 15px;
    color: var(--text-gray);
}
.loading-indicator i {
    margin-right: 8px;
}
.bottom-loader {
    margin-bottom: 60px;
    padding-bottom: 10px;
    position: relative;
    z-index: 10;
}

/* --- Miscellaneous UI Elements --- */

#aiActionSuggestionContainer,
#aiNewActionSuggestionContainer,
#aiWerkbonSuggestionContainer,
#aiSuggestionContainer {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}

.greeting {
	padding: 15px;
	background: #f8f9ff;
	border-radius: 8px;
	box-shadow: var(--shadow);
	margin-bottom: 15px;
	text-align: center;
}
.greeting-text {
	color: var(--primary-color);
	font-size: 22px
}
.user-name {
	color: var(--text-gray);
	font-size: 18px;
	margin: 5px 0;
}
.org-name {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 16px;
	color: var(--primary-color);
}
.error, .error-message {
	color: #dc3545;
	padding: 10px;
	background: #f8d7da;
	border-radius: 8px;
	margin-bottom: 15px
}
.no-relations,
.no-passwords,
.no-actions,
.no-tickets {
	padding: 20px;
	text-align: center;
	color: var(--text-gray);
	font-size: 16px
}
.separator-top {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}
.card-title-lrg {
    font-size: 1.1em;
    margin-bottom: 10px;
}
.card-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

/* Styling voor de e-mail ontvanger info naast een checkbox */
.email-recipient-info {
    margin-left: 8px;
    font-size: 0.85em;
    font-style: italic;
    color: var(--text-gray);
    display: none; /* Standaard verborgen */
}

/* Toon het element als het niet leeg is */
.email-recipient-info:not(:empty) {
    display: inline;
}

/* Dark mode compatibiliteit */
body.dark-mode .email-recipient-info {
    color: #aaa;
}

/* ===================================================================
// 4. Module-Specific Styles
// ===================================================================*/

/* --- Project Module --- */

/* NIEUW: Gecascadeerd hover-effect voor geneste taken (JAVASCRIPT-AANGESTUURD) */

/* Stijlen die door JavaScript worden toegepast voor een schaalbaar hover-effect */
.task-item.task-hover-active {
    background-color: var(--task-hover-bg-0) !important; /* Belangrijk om andere regels te overschrijven */
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.task-item.task-hover-parent-1 { background-color: var(--task-hover-bg-1); } /* Directe ouder */
.task-item.task-hover-parent-2 { background-color: var(--task-hover-bg-2); } /* Grootouder */
.task-item.task-hover-parent-3,
.task-item.task-hover-parent-deep { background-color: var(--task-hover-bg-3); } /* Overgrootouder en dieper */


.project-module .ticket-header .ticket-status {
    border: 1px solid rgba(0,0,0,0.1) !important;
}

.project-module .resizer {
    background: var(--border-color);
    width: 2px;
    cursor: col-resize;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.2s, background-color 0.2s;
}
.project-module .resizer:hover {
    opacity: 1;
    background-color: var(--primary-color);
}

/* Action List Styling */
.task-list, .sub-tasks {
    list-style: none;
    padding: 0;
}

.sub-tasks {
    margin-left: 15px;
    padding-left: 15px;
    border-left: 2px solid #e0e0e0;
}

.dark-mode .sub-tasks {
    border-left-color: #444;
}

.task-item {
    background: #fff;
    border-radius: 8px;
    padding: 2px;
    margin-bottom: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s, background-color 0.2s;
    position: relative;
}

.dark-mode .task-item {
    background-color: #1e1e1e;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    border: 1px solid #333;
}

.dark-mode .task-item:hover {
    background-color: #2d2d2d; /* Zelfde kleur als contact-card dark mode hover */
}

.task-item.dragging {
    opacity: 0.5;
    background: #f0f8ff;
}

.task-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.drag-handle {
    cursor: grab;
    color: #b0b0b0;
    padding: 5px;
}
.drag-handle:hover {
    color: #333;
}
.dark-mode .drag-handle {
    color: #666;
}
.dark-mode .drag-handle:hover {
    color: #ccc;
}

.task-item .task-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.task-details-grid {
    flex-grow: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto; /* naam | persoon(%) | status */
    grid-auto-rows: auto; /* 1 rij */
    column-gap: 10px;
    row-gap: 0;
    align-items: center;
    min-width: 0; /* Voorkomt overflow in flex container */
}

.task-details-grid .task-name {
    grid-column: 1 / 2; /* Kolom 1 */
    grid-row: 1;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-details-grid .task-status {
    grid-column: 3 / 4; /* Kolom 3 */
    grid-row: 1;
    justify-self: end; /* Badge naar rechts */
}

.task-status-badge {
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* Neutrale achtergrond voor status-badge binnen de To Do module */
.todo-module .task-status-badge {
    background-color: #e9ecef;
    color: #495057;
}
body.dark-mode .todo-module .task-status-badge {
    background-color: #333;
    color: #e0e0e0;
}

.task-details-grid .task-date { display: none; }

.task-details-grid .task-person {
    grid-column: 2 / 3; /* Kolom 2 */
    grid-row: 1;
    font-size: 0.85em;
    color: #666;
    justify-self: end;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-buttons {
    display: flex;
    gap: 5px; /* Ruimte tussen edit en delete knop */
}

.dark-mode .task-details-grid .task-person { color: #aaa; }

/* Drag and Drop Placeholders */
.task-item.drop-before {
    border-top: 2px solid var(--primary-color);
}
.task-item.drop-after {
    border-bottom: 2px solid var(--primary-color);
}
.task-item.drop-inside {
    background-color: #e6f7ff;
}
.dark-mode .task-item.drop-inside {
    background-color: #0d293e;
}


/* --- OTP/TOTP Specifieke Stijlen --- */

.otp-preview {
    font-size: 0.85em;
    color: var(--text-gray);
    margin-left: 10px;
    font-style: italic;
    white-space: nowrap;
}

#otp-advanced-fields {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

.totp-code {
    font-size: 1.1em;
    font-weight: bold;
    letter-spacing: 2px;
    color: #333;
    font-family: 'Courier New', Courier, monospace;
}

.totp-timer-svg-wrapper {
    width: 24px;
    height: 24px;
    margin-left: 8px;
    position: relative; /* Nodig om de tekst te kunnen centreren */
    display: flex;
    align-items: center;
    justify-content: center;
}

.totp-timer-svg-wrapper.counter-clockwise svg {
    transform: scaleX(-1); /* Spiegel de SVG voor tegendraadse animatie */
}

.totp-timer-svg-wrapper svg {
    transform: rotate(-90deg); /* Zorgt dat de animatie bovenaan start */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.totp-timer-track,
.totp-timer-progress {
    fill: none;
    stroke-width: 4;
}

.totp-timer-track {
    stroke: #e0e0e0;
}

.totp-timer-progress {
    stroke: var(--primary-color);
    stroke-linecap: round;
    transition: stroke-dashoffset 0.3s linear;
}

.totp-timer-text {
    position: relative; /* Z-index werkt alleen op gepositioneerde elementen */
    z-index: 1;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--primary-color);
}


/* Stijl voor de groep van OTP-instellingen in het formulier */
.modal-field-group {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
    background-color: #fdfdfd;
}

.modal-field-group > .modal-label {
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 1em;
    color: var(--primary-color);
}

/* Zorgt voor een nette rij-layout van de OTP-velden */
.form-row {
    display: flex;
    gap: 15px;
}

/* --- Dark Mode Aanpassingen voor OTP/TOTP --- */
body.dark-mode .totp-code {
    color: #e0e0e0;
}

body.dark-mode .totp-timer-track {
    stroke: #444;
}

body.dark-mode .totp-timer-progress {
    stroke: #64B5F6;
}

body.dark-mode .totp-timer-text {
    color: #64B5F6;
}

body.dark-mode .modal-field-group {
    background-color: #2d2d2d;
    border-color: #444;
}

body.dark-mode .otp-preview {
    color: #aaa;
}

body.dark-mode #otp-advanced-fields {
    border-top-color: #444;
}

/* --- Home Module --- */
.home-module {
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    padding: 15px;
	margin-top: 0; /* Verwijder topmarge om onnodige scrollbar te voorkomen */
}
body:has(.home-module) {
    overflow: hidden;
}
.home-module .greeting {
    margin-top: 0;
}
.home-menu-container {
    overflow-y: auto;
    flex-grow: 1;
    padding-bottom: 10px;
}
.home-content-container {
    max-width: 850px;
    margin: 0 auto;
    width: 100%;
}

/* --- Settings Module --- */
.settings-module-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 20px;
    max-width: 850px;
    margin: 0 auto;
}
.settings-module-container .folder-dropdown {
    max-width: 300px;
}
.settings-section {
    display: none;
}
.settings-section.active {
    display: block;
}
.setting-item-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.save-settings-container {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
    gap: 10px;
}
.folder-manage-list {
    list-style: none;
    padding: 0;
}
.folder-manage-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px;
    border-bottom: 1px solid #eee;
}
.folder-manage-list li:last-child {
    border-bottom: none;
}
.folder-manage-list .actions {
    display: flex;
    gap: 10px;
}

/* --- Relation/Password/Service Modules --- */
.relation-module,
.password-module,
.service-module,
.project-module {
	position: relative;
	max-width: 1200px; /* Consistent max-width */
}

/* Service Module Specifics */
.project-item,
.ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
	gap: 5px;
}
.ticket-id {
	font-weight: 600;
    color: var(--primary-color);
    flex-grow: 1; /* Zorgt dat de naam de beschikbare ruimte pakt */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.deviation-indicator {
    color: #FFC107; /* Een opvallende gele waarschuwingskleur */
    margin: 0 5px;   /* Een beetje ruimte aan de zijkanten */
    cursor: help;    /* De muiscursor wordt een vraagteken bij hover */
    flex-shrink: 0;  /* Voorkomt dat het icoon krimpt */
}
/* Dark mode variant voor het icoon */
body.dark-mode .deviation-indicator {
    color: #FFD54F; /* Iets lichtere kleur voor betere zichtbaarheid */
}

/* Stijlen voor de afwijkingslabels in de modal header */
.deviation-badge-time {
    background-color: #FFC107 !important; /* Geel voor tijd */
    color: #212529 !important; /* Donkere tekst voor leesbaarheid */
    border: 0px;
}

.deviation-badge-kms {
    background-color: #17A2B8 !important; /* Cyaan voor kilometers */
    color: #fff !important;
    border: 0px;
}

.project-item .ticket-status,
.ticket-status {
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 12px;
    background-color: #e9ecef;
    color: #495057;
	flex-shrink: 0;
}
.ticket-org {
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 5px;
}
.project-item .ticket-desc,
.ticket-desc {
    color: var(--text-gray);
    margin-bottom: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-left: 4px;
    /* Voorkom horizontale overflow door lange tokens in eerste regel */
    word-break: break-word;
    overflow-wrap: anywhere;
}
.project-item .ticket-date,
.ticket-date {
    font-size: 12px;
    color: var(--text-gray);
}
.section-title {
    margin: 20px 0 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
}
.ticket-description {
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
    margin-top: 10px;
}
.description-content {
    max-height: 300px;
    overflow-y: auto;
    padding: 5px 0;
    /* Lange tokens binnen de omschrijving moeten kunnen afbreken */
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
    min-width: 0;
}

/* Stijl voor de uitgeschakelde knop voor ontbrekende contracten */
.contact-action-btn.disabled-btn {
	color: var(--text-color-light-grey);
	cursor: not-allowed;
	opacity: 0.6;
}

/* Overige stijlen */
.checkbox-list { max-height: 50vh; overflow-y: auto; border: 1px solid #e0e0e0; border-radius: 6px; padding: 10px; }
.checkbox-item { display: flex; align-items: center; gap: 8px; padding: 6px 4px; }
.checkbox-item + .checkbox-item { border-top: 1px dashed #eee; }
#contract-viewer-area { height: 75vh; }
#contract-viewer-area iframe { width: 100%; height: 100%; border: 0; }
	
/* ===================================================================
// 5. Theming (Dark Mode & Font Size)
// ===================================================================*/

/* --- Dark Mode --- */
body.dark-mode {
    background: linear-gradient(135deg, #2c2c2c 0%, #212728 100%);
    color: #e0e0e0;
	--task-hover-bg-0: #31373d;
    --task-hover-bg-1: #2b3036;
    --task-hover-bg-2: #262a2e;
    --task-hover-bg-3: #212529;
}
body.dark-mode ::-webkit-scrollbar-track { background: #2c2c2c; }
body.dark-mode ::-webkit-scrollbar-thumb { background: #555; border-color: #2c2c2c; }
body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #777; }
body.dark-mode * { scrollbar-color: #555 #2c2c2c; }

/* Layout & Global */
body.dark-mode .header,
body.dark-mode .bottom-nav,
body.dark-mode .details-header,
body.dark-mode .greeting,
body.dark-mode .modal-header,
body.dark-mode .settings-module-container,
body.dark-mode .modal-tabs {
    background-color: #1e1e1e;
    color: #e0e0e0;
    border-color: #333;
}

body.dark-mode .loading-overlay { background-color: rgba(0, 0, 0, 0.7); }

/* Sidebar */
body.dark-mode .sidebar {
    background-color: #1e1e1e;
    border-right: 1px solid #333;
}
body.dark-mode .sidebar .nav-item {
    background-color: #34495e;
    color: #e0e0e0;
}
body.dark-mode .sidebar .nav-item i { color: inherit; }
body.dark-mode .sidebar .nav-item.active,
body.dark-mode .sidebar .nav-item:hover {
    background-color: #3498db;
    color: #fff;
    border-left-color: #64B5F6;
}

/* Cards & List Items */
body.dark-mode .relation-item,
body.dark-mode .password-item,
body.dark-mode .organization-item,
body.dark-mode .ticket-item,
body.dark-mode .details-card,
body.dark-mode .contact-card,
body.dark-mode .location-card,
body.dark-mode .action-card,
body.dark-mode .menu-item {
    background-color: #1e1e1e;
    color: #e0e0e0;
    border: 1px solid #333;
}

body.dark-mode .contact-card:hover,
body.dark-mode .details-card:hover,
body.dark-mode .action-card:hover {
    background-color: #2d2d2d;
}

body.dark-mode .menu-item:hover {
    background-color: #2d2d2d;
    color: #64B5F6;
}
body.dark-mode .menu-item:hover i {
    color: #64B5F6;
}

body.dark-mode .status-paid {
    background-color: #1c3b23 !important;
    color: #a7d7b2 !important;
    border-color: #2a5233;
}
body.dark-mode .status-open {
    background-color: #491f24 !important;
    color: #f5c6cb !important;
    border-color: #642f35;
}

/* Selected List Items */
.ticket-item.selected,
.project-item.selected,
.relation-item.selected,
.password-item.selected,
.organization-item.selected {
    background:#e9ecef;
    border-left:4px solid var(--primary-color);
    transform:none;
}
body.dark-mode .ticket-item.selected,
body.dark-mode .project-item.selected,
body.dark-mode .relation-item.selected,
body.dark-mode .password-item.selected,
body.dark-mode .organization-item.selected {
	border-left:4px solid var(--primary-color);
    background:#060606;
}

/* Forms & Inputs */
body.dark-mode .form-control,
body.dark-mode .search-bar,
body.dark-mode .folder-dropdown {
    background-color: #1e1e1e;
    color: #e0e0e0;
    border-color: #444;
}

/* Dark mode stijl voor read-only velden */
body.dark-mode .form-control.readonly-field {
    background-color: #2d2d2d;
}

/* Zorgt ervoor dat native UI-elementen van specifieke input-velden (zoals pijltjes en kalenders)
   correct worden weergegeven in donkere modus. */
body.dark-mode input[type="number"],
body.dark-mode input[type="date"],
body.dark-mode input[type="month"] {
    color-scheme: dark;
}

body.dark-mode .folder-dropdown option {
    background-color: #2d2d2d;
    color: #e0e0e0;
}

body.dark-mode .folder-dropdown:focus,
body.dark-mode .search-bar:focus {
	border-color: var(--primary-color);
}

body.dark-mode .form-control:hover,
body.dark-mode .folder-dropdown:hover,
body.dark-mode .search-bar:hover {
	border-color: var(--primary-color);
}

body.dark-mode .clear-icon { color: #aaa; }
body.dark-mode .clear-icon:hover { color: #fff; }
body.dark-mode .slider { background-color: #555; }
body.dark-mode .folder-manage-list li { border-bottom-color: #444; }

/* Modals */
body.dark-mode .modal-content {
    background-color: #1e1e1e;
    color: #e0e0e0;
    border-color: #333;
}
body.dark-mode .modal-title,
body.dark-mode .password-title,
body.dark-mode .org-name,
body.dark-mode .relation-name {
    color: #e0e0e0;
}
body.dark-mode .modal-badge {
	background: #333333;
	color: #e0e0e0;
}
body.dark-mode .modal-action-btn:hover { background-color: #333; color: #fff; }
body.dark-mode .modal-action-btn,
body.dark-mode .contact-action-btn { color: #aaa; }
body.dark-mode .contact-action-btn:hover { background-color: #333; color: #fff; }

body.dark-mode #aiActionSuggestionContainer,
body.dark-mode #aiNewActionSuggestionContainer,
body.dark-mode #aiWerkbonSuggestionContainer,
body.dark-mode #aiSuggestionContainer {
    background-color: #2d2d2d;
    border: 1px solid #444;
}

body.dark-mode .btn-danger {
    background-color: #dc3545;
    color: #fff;
}
body.dark-mode .btn-danger:hover {
    background-color: #c82333; /* Iets donkerder rood bij hover */
}

/* Tables */
body.dark-mode .history-table th,
body.dark-mode .invoice-table th {
    color: #64B5F6;
}
body.dark-mode .history-table tbody tr:hover,
body.dark-mode .invoice-table tbody tr:hover {
    background-color: #2d2d2d;
}
body.dark-mode .history-table th.sortable:hover {
    background-color: #2d2d2d;
}
body.dark-mode .form-actions-container,
body.dark-mode .separator-top,
body.dark-mode .ticket-description {
    border-top-color: #333;
}
body.dark-mode .invoice-summary-container {
    color: #aaa;
    border-top-color: #333;
}

/* Text & Links */
body.dark-mode .organization-name,
body.dark-mode .details-label,
body.dark-mode .modal-label,
body.dark-mode .ticket-date,
body.dark-mode .user-name {
    color: #aaa;
}
body.dark-mode .details-value,
body.dark-mode .ticket-desc,
body.dark-mode .action-date {
    color: #ddd;
}
body.dark-mode .url,
body.dark-mode .details-value a,
body.dark-mode .back-button,
body.dark-mode .copy-button,
body.dark-mode .modal-back,
body.dark-mode .ticket-id,
body.dark-mode .section-title,
body.dark-mode .form-section-title {
    color: #64B5F6;
}
body.dark-mode .form-section-title {
    border-bottom-color: #333;
}

/* Tabs */
body.dark-mode .tab {
    background-color: #1e1e1e;
    color: #e0e0e0;
    border-color: #333;
}
body.dark-mode .tab.active,
body.dark-mode .tab:hover {
    background-color: #34495e;
    color: #64B5F6;
}

body.dark-mode .modal-tab {
    background-color: #2d2d2d;
    color: #e0e0e0;
}
body.dark-mode .modal-tab:hover,
body.dark-mode .modal-tab.active {
    background-color: #34495e;
    color: #64B5F6;
}

/* Buttons */
body.dark-mode .btn-secondary {
    background-color: #555;
    color: #e0e0e0;
}
body.dark-mode .btn-secondary:hover {
    background-color: #444;
}
body.dark-mode #saveSettingsBtn {
    background-color: #34495e;
}
body.dark-mode #saveSettingsBtn:hover {
    background-color: #2d2d2d;
}

body.dark-mode .floating-action-button:hover {
    background-color: #5373b7;
}
/* Miscellaneous Dark Mode */
body.dark-mode .relation-type-badge,
body.dark-mode .ticket-status {
    background-color: #333;
    color: #e0e0e0;
}
body.dark-mode .contact-action-btn {
    background: rgba(255, 255, 255, 0.1);
}
body.dark-mode .loading-indicator {
    color: #e0e0e0;
}

/* ===================================================================
// Tom-Select Styling - FINALE VERSIE 5.0 (met achtergrond fix)
// ===================================================================*/

/* --- Basisstijl (Lichte Modus) --- */
.ts-wrapper.single .ts-control {
    font-family: inherit;
    font-size: 1em;
    line-height: 1.4;
    background: #fff; /* <-- DE FIX: Herstelt de witte achtergrond */
    border: 1px solid var(--border-color); /* <-- DE FIX: Herstelt de correcte randkleur */
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: none !important;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.ts-control input {
    color: inherit;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

.ts-control > .item {
    padding: 0 !important;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.ts-wrapper.single:not(.disabled) .ts-control:hover {
    border-color: var(--primary-color);
}

.ts-wrapper.single.input-active .ts-control {
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(66, 103, 178, 0.2) !important;
}

.ts-dropdown {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

/* Styling voor de 'wissen' knop in Tom-Select */
.ts-wrapper .ts-clear-button {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.ts-wrapper .ts-clear-button:hover {
    opacity: 0.9;
}

.ts-wrapper.flex-grow-select {
    flex-grow: 1;
    min-width: 0; /* Essentiële flexbox-fix om krimp mogelijk te maken */
}

.ts-hidden-accessible {
    position: absolute !important;
    left: -99999px;
    opacity: 0;
}

/* Stijl voor Tom-Select terwijl de opties laden */
.ts-wrapper.is-loading .ts-control {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg width="20" height="20" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" fill="%23888888"%3E%3Cpath d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"%3E%3CanimateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite" /%3E%3C/path%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem 1.25rem;
}

/* Stijl voor een ongeldige Tom-Select component */
.ts-wrapper.is-invalid .ts-control {
    border-color: #d9534f !important; /* Een duidelijke rode kleur, !important voor zekerheid */
    box-shadow: none; /* Verwijder eventuele andere focus-stijlen */
}

/* Kleurt de placeholder-tekst rood bij een validatiefout */
.ts-wrapper.is-invalid .ts-control > input::placeholder {
    color: #d9534f;
    opacity: 1; /* Zorg ervoor dat de placeholder volledig zichtbaar is */
}

/* ===================================================================
// Projecten Module - Advanced Filters (breedte & layout)
// Zet 3 filters netjes naast elkaar op brede panelen,
// en stapelt ze onder elkaar bij smalle panelen.
// ===================================================================*/
.project-module #advanced-filter-controls #filter-organisation-item,
.project-module #advanced-filter-controls #filter-projectmanager-item,
.project-module #advanced-filter-controls #filter-executor-item {
    grid-column: 1 / -1; /* default: full-width op small */
}

@media (min-width: 900px) {
    .project-module #advanced-filter-controls #filter-organisation-item,
    .project-module #advanced-filter-controls #filter-projectmanager-item,
    .project-module #advanced-filter-controls #filter-executor-item {
        grid-column: span 8; /* 3 kolommen van elk 8/24 */
    }
}

.project-module #advanced-filter-controls .ts-wrapper {
    width: 100%;
    min-width: 0; /* laat grid de breedte bepalen */
}

textarea.is-invalid{
    border-color: #dc3545;
}

/*
 * Stijlen voor ongeldige (niet-ingevulde) formuliervelden
 */
.is-invalid {
  border-color: #dc3545 !important; /* Een duidelijke rode kleur voor de rand */
}

/* Optioneel: geef de velden ook een heel lichte rode achtergrond voor extra nadruk */
.is-invalid:focus {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important; /* Rode gloed bij focus */
}

/* --- Dark Mode Aanpassingen --- */

.dark-mode .ts-wrapper.is-invalid .ts-control {
    border-color: #dc3545 !important;
}

.dark-mode textarea.is-invalid {
    border-color: #dc3545 !important;
}

body.dark-mode .ts-wrapper.single .ts-control {
    background: #1e1e1e;
    border-color: #444;
    color: #e0e0e0;
}

body.dark-mode .ts-control input {
    color: #e0e0e0;
}

/* ===================================================================
   Projecten Module - Mijn Openstaande Taken (dashboard lijst)
   =================================================================== */
.my-tasks-container .module-group {
    margin-bottom: 15px;
}

.task-list-dashboard {
    list-style-type: none;
    padding: 0;
}

.task-item-dashboard {
    display: grid;
    grid-template-columns: 1fr 100px 100px 60px 120px; /* + acties kolom */
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
    align-items: center;
}

.task-item-dashboard:hover {
    background-color: var(--hover-bg-color);
}

.task-item-dashboard .task-name {
    font-weight: 500;
}

.task-item-dashboard .task-status,
.task-item-dashboard .task-date,
.task-item-dashboard .task-percentage {
    font-size: 0.9em;
    color: var(--text-gray);
    text-align: right;
}

.task-item-dashboard .task-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.task-item-dashboard .task-actions .contact-action-btn {
    padding: 4px 6px;
    border: 1px solid var(--border-color);
    background: var(--btn-bg, transparent);
    border-radius: 4px;
    cursor: pointer;
}

body.dark-mode .ts-wrapper.single:not(.disabled) .ts-control:hover {
    border-color: var(--primary-color);
}

body.dark-mode .ts-wrapper.single.input-active .ts-control {
    background: #1e1e1e;
	border-color: var(--primary-color);
}

body.dark-mode .ts-dropdown {
    background: #2d2d2d;
    border-color: #444;
}

body.dark-mode .ts-dropdown .option {
    color: #e0e0e0;
}

body.dark-mode .ts-dropdown .option:hover,
body.dark-mode .ts-dropdown .active {
    background-color: #3a3a3a;
}

body.dark-mode .ts-dropdown .create {
    color: #e0e0e0;
}

/* --- Font Size --- */
body.font-small { font-size: 14px; }
body.font-medium { font-size: 16px; }
body.font-large { font-size: 18px; }

body.font-large .search-bar,
body.font-large .tab,
body.font-large .password-title,
body.font-large .organization-name,
body.font-large .dns-module .password-header .record-count,
body.font-large .details-label,
body.font-large .details-value,
body.font-large .description-content,
body.font-large .section-title,
body.font-large .action-card,
body.font-large .modal-title,
body.font-large .modal-badge,
body.font-large .ticket-desc,
body.font-large .ticket-date,
body.font-large .ticket-id,
body.font-large .ticket-status,
body.font-large .ticket-org,
body.font-large .no-actions,
body.font-large .no-tickets,
body.font-large .org-name,
body.font-large .history-table,
body.font-large select.folder-dropdown,
body.font-large select.folder-dropdown option {
    font-size: 1.1em;
}

body.font-small .search-bar,
body.font-small .tab,
body.font-small .password-title,
body.font-small .organization-name,
body.font-small .dns-module .password-header .record-count,
body.font-small .details-label,
body.font-small .details-value,
body.font-small .description-content,
body.font-small .section-title,
body.font-small .action-card,
body.font-small .modal-title,
body.font-small .modal-badge,
body.font-small .ticket-desc,
body.font-small .ticket-date,
body.font-small .ticket-id,
body.font-small .ticket-status,
body.font-small .ticket-org,
body.font-small .no-actions,
body.font-small .no-tickets,
body.font-small .org-name,
body.font-small .history-table,
body.font-small select.folder-dropdown,
body.font-small select.folder-dropdown option {
    font-size: 0.9em;
}

body.font-medium select.folder-dropdown,
body.font-medium select.folder-dropdown option {
    font-size: 1em;
}


/* ===================================================================
// 6. Responsive Design (Media Queries)
// ===================================================================*/

/* --- Desktop Layout (≥ 769px) --- */
  @media (min-width: 769px) {

    /* Base Layout */
    .app-wrapper { display:flex; }
    .main-area {
        flex-grow:1;
        margin-left:200px;
        padding: 10px 0 10px 10px; /* Desktop: 10px boven/onder + 10px links */
    }

    /* --- Aanpassing voor specifieke modules met één content-kolom --- */
    /* Stap 1: Verberg de body scrollbar alleen voor deze pagina's */
    body:has(.main-area .invoicing-module),
    body:has(.main-area .home-module),
    body:has(.main-area .settings-module-container),
    body:has(.main-area .relation-module.client-mode) {
        overflow: hidden;
    }

    /* Service module: forceer geen body-scroll om breedte-jumps te voorkomen */
    body:has(.main-area .service-module) {
        overflow-y: hidden;
    }
    /* Sommige browsers tonen scrollbars op html i.p.v. body; onderdruk die ook */
    html:has(body .main-area .service-module) {
        overflow-y: hidden;
    }

    /* Stap 2: Maak de .main-area scrollbaar en voeg volledige padding toe voor deze pagina's */
    .main-area:has(.invoicing-module),
    .main-area:has(.home-module),
    .main-area:has(.settings-module-container),
    .main-area:has(.relation-module.client-mode) {
        height: 100vh;
        padding: 10px 8px 10px 8px; /* Desktop: 10px boven/onder, 8px zijkant */
        box-sizing: border-box;      /* voorkom kunstmatige overflow door padding */
    }

    /* Service module gebruikt eigen scrollcontainers; fixeer main-area hoogte */
    .main-area:has(.service-module) {
        height: 100vh;
        box-sizing: border-box;
        /* voorkom dat main-area zelf scrollt en html/body een scrollbar krijgt */
        overflow: hidden;
    }

    .main-area:has(.settings-module-container),
    .main-area:has(.relation-module.client-mode),
    .main-area:has(.home-module) {
        overflow: auto;
    }
	
    .content { margin-left:0; width:100%; padding:0; }

    /* Compacter voor client relatiebeheer: minder ruimte onder de header en dichter bij sidebar */
    .main-area:has(.relation-module.client-mode) .content { padding: 0; }
    .bottom-nav { display:none; }
    .floating-action-button { bottom: 30px; right: 30px; }
    .form-grid { grid-template-columns: 1fr 1fr; }

    /* Sidebar */
    .sidebar {
        display:flex; flex-direction:column;
        width:200px; min-height:100vh;
        position:fixed; top:0; left:0;
        background:#fff;
        border-right:1px solid var(--border-color);
        box-shadow:2px 0 5px rgba(0,0,0,.05);
        padding:15px; z-index:1000;
    }
    .sidebar-logo { display:block; width:80%; margin:0 auto 20px; }
    .sidebar .nav-item {
        display:flex; align-items:center; gap:12px;
        padding:10px 15px; margin-bottom:8px;
        font-size:.9em; font-weight:500;
        color:#2980b9; background:#f8f9ff;
        border:1px solid transparent; border-radius:8px;
        transition:all .3s ease;
    }
    .sidebar .nav-item i   { font-size:18px; width:20px; text-align:center; }
    .sidebar .nav-item .todo-today-badge {
        margin-left: auto;
        min-width: 22px;
        padding: 2px 8px;
        border-radius: 999px;
        background-color: #e74c3c;
        color: #fff;
        font-size: 0.75em;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    body.dark-mode .sidebar .nav-item .todo-today-badge {
        background-color: #e74c3c;
        color: #fff;
    }
    .sidebar .nav-item.active,
    .sidebar .nav-item:hover {
        background:#3498db; color:#fff;
        transform:translateX(5px);
        box-shadow:0 4px 8px rgba(0,0,0,.1);
    }

    /* Two-pane Modules */
    .service-module,
    .relation-module,
    .password-module,
    .project-module {
        display:flex;
        height:calc(100vh - 20px); /* Compenseer 10px top + 10px bottom padding in main-area */
        margin:0; max-width:none;
    }
    /* Client-weergave gebruikt geen geforceerde hoogte om spook-scrollbar te voorkomen */
    .relation-module.client-mode {
        height: auto;
    }
    .ticket-list-container,
    .project-list-container,
    .relation-list-container,
    .password-list-container {
        flex:0 1 40%; min-width:250px;
        display:flex; flex-direction:column;
        padding-right:10px; overflow:hidden;
    }
    .list-header { flex-shrink:0; padding-bottom:5px; }
    .scrollable-list {
        flex-grow: 1;
        overflow-y: auto;
        /* Reserve ruimte voor de scrollbar om breedte-jumps te voorkomen bij laden */
        scrollbar-gutter: stable both-edges;
        padding-right: 5px;
        padding-left: 5px;
    }

    /* Fallback voor browsers zonder scrollbar-gutter ondersteuning */
    @supports not (scrollbar-gutter: stable) {
        .scrollable-list { overflow-y: scroll; }
    }


	.password-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 5px
	}

    /* Resizer */
    .resizer {
        display:block; flex-basis:6px; flex-shrink:0;
        cursor:col-resize;
        background:#e0e0e0;
        border-left:1px solid #f0f0f0;
        border-right:1px solid #ccc;
        transition:background-color .2s;
    }
    .resizer:hover { background:var(--primary-color); }
    body.dark-mode .resizer { background:#3a3a3a; border-left:1px solid #444; border-right:1px solid #222; }
    body.dark-mode .resizer:hover { background:#64B5F6; }

    /* Detail Panel */
    #detailsContainer {
        display:block !important;
        position:static !important;
        flex:1 1 60%; min-width:350px;
        background:transparent !important;
        padding-left:10px; padding-right:10px;
        overflow-y:auto; animation:none !important;
    }
    #detailsContainer .modal-content {
        width:100%; height:100%; max-width:none;
        margin:0; box-shadow:none; display:none;
    }
	#detailsContainer .modal-body {
		/* Een algemene fallback-waarde */
		height: calc(100% - 115px); 
		overflow-y: auto;
	}

	.service-module #detailsContainer .modal-body {
		/* Specifieke hoogte voor de Service Module */
		height: calc(100% - 65px);
	}

	.project-module #detailsContainer .modal-body {
		/* Basis voor Projecten Module; wordt overschreven door rules o.b.v. tabs */
		height: calc(100% - 65px);
	}

	/* Projecten: verwijder overlay-padding van actieve modalcontainer in desktop weergave */
	/* Verwijder alleen verticale padding; behoud 10px links/rechts van #detailsContainer */
	.project-module #detailsContainer.modal-container.active {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/* Projecten: pas hoogte aan o.b.v. tabs- staat (leeg vs gevuld) */
	/* Geen tabs (Mijn Taken / Afgehandeld) -> minder aftrek */
	.project-module #detailTabs:empty + #detailContent { height: calc(100% - 55px); }
	/* Wel tabs (Alle Projecten) -> meer aftrek */
	.project-module #detailTabs:not(:empty) + #detailContent { height: calc(100% - 105px); }
	/* Verberg tabs-balk volledig wanneer leeg zodat er geen rand/padding zichtbaar is */
	.project-module #detailTabs:empty { display: none; }

	/* Specifieke hoogte voor de To Do Module (deze module hergebruikt project-layout) */
	.todo-module #detailsContainer .modal-body {
		height: calc(100% - 55px);
	}

	.relation-module #detailsContainer .modal-body {
		/* Specifieke hoogte voor de Relatiebeheer Module */
		height: calc(100% - 125px);
	}
	
    #detailsContainer .modal-back { display:none; }
    /* Kleinere marge onder de details-header specifiek voor client-relatiebeheer */
    .relation-module.client-mode #detailsContainer .details-header {
        margin-bottom: 6px;
    }
    /* Gebruik één scrollcontainer (main-area) voor client-relatiebeheer */
    .relation-module.client-mode #detailsContainer {
        overflow-y: visible;
    }
    .relation-module.client-mode #detailsContainer .modal-body {
        height: auto;
        overflow: visible;
    }
    #detailsPlaceholder {
        display:flex; align-items:center; justify-content:center;
        height:100%; background:#fff; border-radius:12px;
        color:var(--text-gray); box-shadow:var(--shadow);
    }
    body.dark-mode #detailsPlaceholder { background:#1e1e1e; color:#aaa; }

	.invoicing-module {
		display: flex;
		flex-direction: column;
		/* Zorgt ervoor dat de module de volledige hoogte van het contentgebied vult */
		height: calc(100vh - 20px); /* Compenseer 10px top + 10px bottom padding in main-area */
	}

	.invoicing-module .list-header {
		flex-shrink: 0; /* Voorkomt dat de header krimpt */
	}

	#invoicing-scroll-container {
		flex-grow: 1; /* Neemt alle resterende verticale ruimte in */
		overflow-y: auto; /* Voegt een scrollbalk toe als de content te lang is */
		position: relative;
		padding-left: 5px;
		padding-right: 5px;		
	}
	
}

/* ===================================================================
// 7. Animations
// ===================================================================*/
@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes modalFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes modalSlideIn {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ================================================================
   Floating Action Button (FAB) – Speed-dial en sluit-knoppen
   ================================================================ */

/* --------- Hoofd-FAB + container --------- */
.fab-container{
    position:fixed;
    bottom:0;
    right:0;
    z-index:2000;
    display:flex;
    flex-direction:column-reverse;
    align-items:center;
    transition: transform .25s ease, opacity .25s ease;
}

/* basistoestand – verborgen & niet-klikbaar */
.fab-container .floating-action-button{
    position:relative;
    width:56px;
    height:56px;
    border-radius:50%;
    background:var(--primary-color);
    color:#fff;
    border:none;
    box-shadow:0 3px 10px rgba(0,0,0,.3);
    transition:transform .3s ease, opacity .3s ease, background-color .3s ease;
    opacity:0;
    transform:translateY(100px);
    pointer-events:none;
}

/* zichtbaar wanneer JS de klasse .visible op de container zet */
.fab-container.visible .floating-action-button{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

/* Speed-dial-opties (mini-FAB’s) */
.fab-options{
    position:absolute;
    bottom:calc(100% + 40px);
    right:35px;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:5px;
    opacity:0;
    transform:translateY(10px);
    pointer-events:none;
    transition:opacity .3s ease, transform .3s ease;
}

/* zichtbaar zodra de hoofd-FAB ‘open’ klapt (.active) */
.fab-container.active .fab-options{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

/* label + knop per optie */
.fab-option{ display:flex; align-items:center; }
.fab-label{
    background:#fff;
    color:#333;
    padding:5px 10px;
    border-radius:4px;
    box-shadow:var(--shadow);
    margin-right:10px;
    font-size:.9em;
    font-weight:500;
    white-space:nowrap;
}
.fab-action-btn{
    width:48px;
    height:48px;
    border-radius:50%;
    background:#f8f9fa;
    color:var(--primary-color);
    border:none;
    box-shadow:var(--shadow);
    font-size:20px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background-color .3s ease, transform .3s ease;
}

/* Zorgt ervoor dat ALLE FABs, inclusief die in de service-module, de juiste hover-kleur krijgen */
.fab-container .floating-action-button:hover,
.floating-action-button.close-fab:hover {
    background-color: #2e4a8a;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

.fab-action-btn:hover{ background:#e9ecef; transform:scale(1.1); }

/* hoofd-FAB wordt rood & 45° bij open-staat */
.fab-container.active .floating-action-button{
    transform:rotate(45deg);
    background:#dc3545;
}

/* --------- Sluit-FAB’s (alleen bij tab ‘Afgehandeld’) --------- */
#close-fab-container{
    position:fixed;
    bottom:70px;              /* mobile */
    right:20px;
    z-index:1999;
    display:flex;
    gap:15px;
    opacity:0;
    transform:translateY(20px);
    pointer-events:none;
    transition:opacity .3s ease, transform .3s ease;
}
@media (min-width:769px){
    #close-fab-container{ bottom:30px; right:30px; }
}

/* container zichtbaar → knoppen actief */
#close-fab-container.visible{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

/* container zichtbaar – alléén datumkiezer (geen knoppen) */
#close-fab-container.date-only{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
#close-fab-container.date-only .floating-action-button.close-fab{
    display: none;
}

/* basisstijl individuele sluit-knoppen: standaard inert */
.floating-action-button.close-fab{
    position:relative;
    width:56px;
    height:56px;
    border-radius:50%;
    color:#fff;
    border:none;
    box-shadow:0 3px 10px rgba(0,0,0,.3);
    font-size:24px;
    opacity:0;
    transform:translateY(20px);
    pointer-events:none;
    transition:transform .3s ease, opacity .3s ease, background-color .3s ease;
}

/* actief & klikbaar **alleen** wanneer container .visible heeft */
#close-fab-container.visible .floating-action-button.close-fab{
    opacity:1;
    transform:none;
    pointer-events:auto;
}

/* specifieke kleuren */
#closeAndBillFabBtn{ background:#28a745; }
#closeAndBillFabBtn:hover{ background:#218838; }

#closeGratisFabBtn{ background:#17a2b8; }
#closeGratisFabBtn:hover{ background:#138496; }

/* --------- Dark-mode tweaks --------- */
body.dark-mode .fab-label{ background:#060606; color:#e0e0e0; }
body.dark-mode .fab-action-btn{ background:#060606; color:#64B5F6; }
body.dark-mode .fab-action-btn:hover{ background:#2d2d2d; }
body.dark-mode .floating-action-button.close-fab:hover,
body.dark-mode .fab-container .floating-action-button:hover{
    background:#5373b7;
}

/* -------------------------------------------------
   FAB slide in/out (onder → boven)   0.25 s
   -------------------------------------------------*/
.fab-slide-out{
    opacity:0!important;
    transform:translateY(120px)!important;     /* ↓ buiten beeld */
    pointer-events:none!important;
    transition:transform .25s ease, opacity .25s ease;
}
.fab-slide-in{
    opacity:1!important;
    transform:translateY(0)!important;         /* ↑ terug */
    pointer-events:auto!important;
    transition:transform .25s ease, opacity .25s ease;
}

/* Ticket Sluiten CSS op de Afgehandeld tab */
#close-fab-container.visible {
    /* De .visible class wordt door JS toegevoegd; we forceren hier de weergave. */
    display: flex !important;
    align-items: center;
    gap: 12px;
}

/* ================================================================
   Hide FABs while any modal is open (robust overlay behavior)
   ================================================================ */

/* Stijl voor de nieuwe datumkiezer */
.close-fab-datepicker {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff; /* Witte achtergrond */
    color: #333;
    border: 1px solid #ddd;
    border-radius: 28px; /* Sterk afgeronde hoeken */
    padding: 0 20px;
    height: 56px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    
    /* Initieel verborgen, net als de andere knoppen in de container */
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;

	position: relative; /* Maakt positionering mogelijk */
    bottom: 30px;        /* Verplaats 30px omhoog */
    right: 35px;        /* Verplaats 35px naar links */
}
#close-fab-container.visible .close-fab-datepicker {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Toon de datumkiezer wanneer alleen datum zichtbaar moet zijn */
#close-fab-container.date-only .close-fab-datepicker {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
	right: 135px;
}

/* 4. Dark Mode compatibiliteit */
body.dark-mode .close-fab-datepicker {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border-color: #444;
    color-scheme: dark; /* Zorgt voor een donkere native date picker pop-up */
}

/* 5. Stijl voor het kalender-icoontje in de balk */
.close-fab-datepicker::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}
.close-fab-datepicker:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}
body.dark-mode .close-fab-datepicker::-webkit-calendar-picker-indicator {
    filter: invert(1);
}
/* -------------------------------------------------
   AI Solutions modal
   -------------------------------------------------*/
#aiSolutionModal {
	z-index: 1060; 
}

/* -------------------------------------------------
   Mobile settings
   -------------------------------------------------*/

/* --- Tablet & Smaller Layout (< 769px) --- */
@media (max-width: 768px) {
    .sidebar { display: none; }
    .main-area {
        margin-left: 0;
		margin-top: 0; /* Header verwijderd: geen offset meer nodig */
        padding-left: 0;
        padding-bottom: 50px; /* Ruimte voor bottom-nav */
        padding-bottom: calc(50px + env(safe-area-inset-bottom)); /* iOS safe area */
    }
    .bottom-nav { display: flex;  }
	.tab-container { flex-direction: column; gap: 8px; }
	.tab { width: 100%; }
	.search-bar { font-size: 14px; }
	.password-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px}
    .folder-dropdown { max-width: 100%; }
	.modal-title { margin-left: 10px; }
	.floating-action-button { bottom:50px; right: 10px; }
	.fab-container { bottom: 30px; right: 20px; }
	.fab-options { bottom: calc(100% + 60px); right: 15px; }

    /* Responsive adjustments for modal tabs */
    .modal-tabs {
        overflow-x: auto;
        white-space: nowrap; /* Prevent wrapping */
        padding-bottom: 5px; /* Space for scrollbar */
        justify-content: initial; /* Remove center alignment if any */
    }
    .modal-tab {
        flex-shrink: 0; /* Prevent tabs from shrinking */
        padding: 8px 12px; /* Slightly smaller padding */
        font-size: 0.85em; /* Slightly smaller font */
    }

    /* DNS Records Table Mobile Styling */
    .history-table {
        font-size: 14px;
    }

    .history-table th,
    .history-table td {
        padding: 8px 4px;
        word-wrap: break-word;
    }

	/* DNS-specific responsive column widths */
	.dns-module .history-table th:nth-child(1),
	.dns-module .history-table td:nth-child(1) { width: auto !important; } /* Type */

	.dns-module .history-table th:nth-child(2),
	.dns-module .history-table td:nth-child(2) { width: auto !important; } /* Naam */

	.dns-module .history-table th:nth-child(3),
	.dns-module .history-table td:nth-child(3) { width: auto !important; } /* Content */

	.dns-module .history-table th:nth-child(4),
	.dns-module .history-table td:nth-child(4) { width: auto !important; } /* Prioriteit */

	.dns-module .history-table th:nth-child(5),
	.dns-module .history-table td:nth-child(5) { width: auto !important; } /* Acties */

    /* Historie tabel responsive widths (4 kolommen) */
    .history-table .col-hist-datum    { width: 18% !important; }
    .history-table .col-hist-type     { width: 20% !important; }
    .history-table .col-hist-persoon  { width: 25% !important; }
    .history-table .col-hist-omschr   { width: 37% !important; }

    /* Facturen tabel responsive widths (5 kolommen) */
    .history-table .col-inv-id        { width: 15% !important; }
    .history-table .col-inv-amount    { width: 15% !important; }
    .history-table .col-inv-date      { width: 18% !important; }
    .history-table .col-inv-download  { width: 12% !important; }

    .table-action-buttons {
        text-align: left;
        padding: 4px 2px !important;
    }

    .action-buttons-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4px;
        flex-wrap: nowrap;
    }

    .action-buttons-wrapper .modal-action-btn,
    .invoice-download-link {
        padding: 4px 6px;
        min-width: 28px;
        height: 28px;
        font-size: 12px;
        border-radius: 4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* --- Mobile Layout (< 480px) --- */
@media (max-width: 480px) {
	.header h1 { font-size: 18px; }
	.password-title,
	.organization-name,
	.dns-module .password-header .record-count,
	.relation-item { font-size: 14px; }
	.back-button { font-size: 14px; }
    .greeting-text, .user-name { font-size: 16px; }
	.nav-item { font-size: 18px; }

    /* History Tables Extra Small Mobile Styling */
    .history-table {
        font-size: 12px;
    }

    .history-table th,
    .history-table td {
        padding: 6px 2px;
    }

	/* DNS-specific extra small screen adjustments */
	.dns-module .history-table th:nth-child(1),
	.dns-module .history-table td:nth-child(1) { width: auto !important; } /* Type */

	.dns-module .history-table th:nth-child(2),
	.dns-module .history-table td:nth-child(2) { width: auto !important; } /* Naam */

	.dns-module .history-table th:nth-child(3),
	.dns-module .history-table td:nth-child(3) { width: auto !important; } /* Content */

	.dns-module .history-table th:nth-child(4),
	.dns-module .history-table td:nth-child(4) { width: auto !important; } /* Prioriteit */

	.dns-module .history-table th:nth-child(5),
	.dns-module .history-table td:nth-child(5) { width: auto !important; } /* Acties */

    /* Historie tabel extra small adjustments */
    .history-table .col-hist-datum    { width: 20% !important; }
    .history-table .col-hist-type     { width: 18% !important; }
    .history-table .col-hist-persoon  { width: 22% !important; }
    .history-table .col-hist-omschr   { width: 40% !important; }

    /* Facturen tabel extra small adjustments */
    .history-table .col-inv-id        { width: 18% !important; }
    .history-table .col-inv-amount    { width: 20% !important; }
    .history-table .col-inv-date      { width: 20% !important; }
    .history-table .col-inv-download  { width: 15% !important; }

    .action-buttons-wrapper .modal-action-btn,
    .invoice-download-link {
        padding: 3px 5px;
        min-width: 24px;
        height: 24px;
        font-size: 11px;
        margin: 0 1px;
    }
}

/* Stack action buttons vertically on very small screens */
@media (max-width: 320px) {
    .action-buttons-wrapper {
        flex-direction: column;
        gap: 2px;
    }

	.dns-module .history-table th:nth-child(5),
	.dns-module .history-table td:nth-child(5) { width: auto !important; } /* Auto size */

    .history-table .col-inv-download { width: 20% !important; } /* Larger for stacked download button */
}

/* --- Grid Fallbacks for Smaller Screens --- */
@media (max-width: 900px) {
    .details-grid-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }
}


/* --- Grid Fallbacks for Smaller Screens --- */
@media (max-width: 900px) {
    .details-grid-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* --- DNS Domain Selection Styling --- */
.dns-domain-selection {
    margin-top: 15px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
}

.dns-domain-selection-header {
    margin-bottom: 15px;
    font-weight: bold;
    color: #333;
}

.dns-domain-lists {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.dns-domain-list {
    flex: 1;
}

.dns-domain-list h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: bold;
    color: #555;
}

.dns-domain-list select {
    width: 100%;
    min-height: 150px;
    font-size: 13px;
}

.dns-domain-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: center;
    margin-top: 20px;
}

.dns-domain-buttons .btn {
    min-width: 40px;
    padding: 8px 12px;
    font-weight: bold;
}

.dns-domain-selection .loading,
.dns-domain-selection .error {
    padding: 10px;
    text-align: center;
    border-radius: 4px;
}

.dns-domain-selection .loading {
    background-color: #e3f2fd;
    color: #1976d2;
}

.dns-domain-selection .error {
    background-color: #ffebee;
    color: #c62828;
}

/* Responsive styling voor DNS domein selectie */
@media (max-width: 768px) {
    .dns-domain-lists {
        flex-direction: column;
        gap: 10px;
    }
    
    .dns-domain-buttons {
        flex-direction: row;
        justify-content: center;
        margin-top: 10px;
    }
    
    .dns-domain-list select {
        min-height: 120px;
    }
}

/* --- Styling for Nested Permission Items (DNS Opt-in) --- */

/* 1. Allow the main permission item to wrap its content */
.permission-item {
    flex-wrap: wrap;
}

/* 2. Style the container for the nested DNS options */
.permission-item-nested {
    flex-basis: 100%; /* Take up the full width to appear on a new line */
    margin-top: 10px; /* Space between the main toggle and the nested section */
    padding: 5px; /* Inner spacing */
    margin-left: 10px; /* Indentation from the left */
    border-left: 3px solid #e0e0e0; /* Visual indicator for nesting */
    border-radius: 0 8px 8px 0; /* Rounded corners */
}

/* 3. Reset styling for the opt-in toggle *inside* the nested container */
.permission-item-nested .permission-item {
    padding: 0;
    border: none;
    background-color: transparent;
    margin-bottom: 0; /* Remove default margin for a tighter look */
}


/* --- NIEUW: DNS Opt-in Dual List Styling --- */
.dual-list-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 5px;
    align-items: stretch;
}

.dual-list-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0; /* Essentieel voor correcte weergave in flex/grid containers */
}

.dual-list-header {
    font-weight: 600;
    font-size: 0.9em;
    color: var(--primary-color);
}

.dual-list-select {
    width: 100%;
    flex-grow: 1;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 5px;
    background-color: #fdfdfd;
    transition: border-color 0.2s;
}

.dual-list-select:focus {
    outline: none;
    border-color: var(--primary-color);
	box-shadow: 0 0 8px rgba(66, 103, 178, 0.2);
}

.dual-list-select option {
    padding: 5px 8px;
    cursor: pointer;
}

.dual-list-select option:checked {
    background-color: var(--primary-color);
    color: white;
}

.dual-list-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
	align-self: center;
}

.dual-list-actions .btn {
    padding: 8px;
    line-height: 1;
}

/* --- Specifieke layout voor Accountinstellingen in Contactformulier --- */
#accountSettingsContainer .form-grid {
    /* Pas de kolomverhouding aan: linker kolom (2 delen), rechter kolom (3 delen) */
    grid-template-columns: 2fr 3fr;
    /* Vergroot de ruimte tussen de kolommen voor een rustiger beeld */
    gap: 15px 30px; /* 15px verticaal, 30px horizontaal */
}

/* --- Dark Mode Adjustments for Dual List --- */
body.dark-mode .permission-item-nested {
    background-color: #2d2d2d;
    border-left-color: #444;
}

body.dark-mode .permission-item-nested .permission-item {
    background-color: transparent;
}

body.dark-mode .dual-list-header {
    color: #64B5F6;
}

body.dark-mode .dual-list-select {
    background-color: #2d2d2d;
    border-color: #444;
    color: #e0e0e0;
}

body.dark-mode .dual-list-select option:checked {
    background-color: #34495e;
    color: #e0e0e0;
}

/* --- Invoice Quick View --- */
#invoice-display-area, #client-invoice-display-area {
    height: 70vh;
    border-radius: 8px; 
    overflow: hidden; 
    position: relative;
    border: 1px solid var(--border-color, #ccc);
}

.dark-mode #invoice-display-area, .dark-mode #client-invoice-display-area { 
    border-color: rgba(255,255,255,0.25); 
}

/* Specific height for facturatie.php where there is a form below */
.invoicing-module #invoice-display-area {
    height: 75vh;
}

/* Styling for centered form group in modal */
.centered-form-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.input-button-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.input-button-row .form-control {
    max-width: 200px;
}
.invoice-status-actions {
    display: flex;
    gap: 10px;
}

/* ===================== Relatiebeheer: ICT Info ===================== */

/* Tabs */
.ict-tabs-bar {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--border-color);
  padding: 4px 0 8px 0;
  margin-bottom: 10px;
}

.ict-subtab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  background: #f3f6fb;
  color: #333;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
}

.ict-subtab.active { background: var(--primary-color); color: #fff; }
.ict-subtab.add-subtab,
.ict-subtab.edit-toggle { background: #e9eef8; }
.ict-subtab.edit-toggle.active { background: var(--primary-color); color: #fff; }
.ict-subtab.dragging { opacity: 0.6; }
.ict-subtab.drag-over { outline: none; }

.ict-subtab .ict-subtab-actions { display: none; gap: 6px; }
.ict-subtab .ict-subtab-actions:empty { display: none !important; }
.ict-tabs-bar.editing .ict-subtab .ict-subtab-actions { display: inline-flex; }

.ict-mini-btn { border: none; background: transparent; color: inherit; cursor: pointer; padding: 2px; line-height: 1; }
.ict-mini-btn i { font-size: 13px; }
.ict-mini-btn.danger { color: #c0392b; }

/* Tab content & sections */
.ict-tab-content { display: block; }

.ict-sections-header {
  /* Verborgen header — eerste (zichtbare) definitie verwijderd */
  display: none !important;
  margin: 0;
  padding: 0;
  height: 0;
}

.ict-sections-title { font-weight: 600; font-size: 16px; }

.ict-sections-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Infra: Automatische samenvatting */
.ict-infra-autosummary {
  border: 1px solid var(--border-color);
  background: #f9fbfd;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.ict-infra-autosummary .box-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  margin-bottom: 6px;
}
.ict-infra-autosummary .box-header i { color: #1e88e5; }
.ict-infra-autosummary .box-body .row { display: flex; gap: 8px; margin: 4px 0; }
.ict-infra-autosummary .box-body .k { min-width: 180px; color: #666; }
.ict-infra-autosummary .box-body .v { flex: 1; }

.ict-section {
  display: flex;
  gap: 8px;
  padding: 2px 0;
  border-bottom: none; /* geen extra lijn onderaan secties; alleen de titel heeft een border */
}

.ict-section.drag-over { outline: none; }
.ict-drag-handle { display: none; }

.ict-section-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ict-section-title-input {
  padding: 0;
  border: none;
  background: transparent;
  font-weight: 600;
  font-size: 1.1em;              /* samengevoegd */
  color: var(--primary-color);   /* samengevoegd */
  width: 100%;
  display: block;
}

/* Zorg dat de titelwrap de beschikbare ruimte pakt */
.ict-section-title-wrap { flex: 1 1 auto; min-width: 0; }

.ict-section-title-input:focus { outline: none; border-bottom: 1px dashed var(--border-color); }

.ict-section-text { display: none; }

.ict-section-actions { display: flex; gap: 6px; }

.ict-section-header-actions { display: inline-flex; gap: 6px; }

/* Make ICT kopjes look like .form-section-title (samengevoegd in één blok) */
.ict-section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: grab;
  margin-top: 2px;
  margin-bottom: 2px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border-color);
  transition: background-color .15s ease-in-out;
  border-radius: 0;
}

.ict-section-header-row:hover { background-color: #f6f9ff; }

/* Drag-pad met grip icoon op hover */
.ict-section-drag-pad { flex: 0 0 24px; height: 100%; cursor: grab; user-select: none; display: flex; align-items: center; justify-content: center; }
.ict-section-drag-pad i { font-size: 14px; color: #9aa3b2; opacity: 0; transition: opacity .12s ease-in-out; pointer-events: none; }
.ict-section-header-row:hover .ict-section-drag-pad i { opacity: .6; }
body.dark-mode .ict-section-drag-pad i { color: #b8c6d8; }

/* Danger-knop zichtbaar op hover van header row */
.ict-section-header-actions .ict-mini-btn.danger {
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease-in-out;
}
.ict-section-header-row:hover .ict-section-header-actions .ict-mini-btn.danger {
  opacity: 1;
  visibility: visible;
}

/* Dark mode – algemene secties */
body.dark-mode .ict-tabs-bar { border-bottom-color: #333; }

body.dark-mode .ict-subtab { background: #2d2d2d; color: #e0e0e0; }
body.dark-mode .ict-subtab.add-subtab,
body.dark-mode .ict-subtab.edit-toggle { background: #2d2d2d; }
body.dark-mode .ict-subtab:hover,
body.dark-mode .ict-subtab.active,
body.dark-mode .ict-subtab.edit-toggle.active { background-color: #34495e; color: #64B5F6; }

body.dark-mode .ict-section { background: transparent; border: none; }
body.dark-mode .ict-section-title-input { color: #64B5F6; }
body.dark-mode .ict-section-header-row { border-bottom-color: #333; }
body.dark-mode .ict-section-header-row:hover { background-color: #2d2d2d; }
body.dark-mode .ict-section-title-input,
body.dark-mode .ict-section-text { background: transparent; color: #e0e0e0; }

/* Dark mode: Infra automatische samenvatting */
body.dark-mode .ict-infra-autosummary {
  background: #1e1e1e;
  border-color: #333;
}
body.dark-mode .ict-infra-autosummary .box-header i { color: #64B5F6; }
body.dark-mode .ict-infra-autosummary .box-body .k { color: #b8c6d8; }

/* ICT Info: key/value items */
.ict-items-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}

/* Samengevoegd in één blok */
.ict-item {
  display: grid;
  grid-template-columns: 12px 0.7fr 26px 2fr auto;
  gap: 8px;
  align-items: start;
  border-radius: 6px;
  transition: background-color .15s ease-in-out;
}

.ict-item:hover { background-color: #f6f9ff; }
body.dark-mode .ict-item:hover { background-color: #2d2d2d; }

/* Actieknoppen in items zichtbaar op hover */
.ict-item .ict-section-actions {
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease-in-out;
}
.ict-item:hover .ict-section-actions {
  opacity: 1;
  visibility: visible;
}

/* Drag areas/handles */
.ict-item .ict-drag-area {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 100%;
  cursor: grab;
  user-select: none;
}
.ict-item .ict-drag-area i { font-size: 12px; color: #9aa3b2; opacity: 0; transition: opacity .12s ease-in-out; pointer-events: none; }
.ict-item:hover .ict-drag-area i { opacity: .6; }
body.dark-mode .ict-item .ict-drag-area i { color: #b8c6d8; }
.ict-item .ict-drag-handle { display: none; }

/* Managed cell */
.ict-item-managed-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logo (mask) */
.ict-item-logo {
  width: 18px;
  height: 18px;
  display: inline-block;
  cursor: pointer;
  background-color: #000; /* light mode default */
  /* Mask (browser-compatibel) */
  -webkit-mask-image: url('../images/IsaeusCheckmark.png');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url('../images/IsaeusCheckmark.png');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  opacity: .35;
  transition:
    opacity .15s ease-in-out,
    transform .15s ease-in-out,
    box-shadow .15s ease-in-out,
    background-color .15s ease-in-out;
}
.ict-item-logo:hover { opacity: .6; transform: scale(1.06); }
.ict-item-logo.active { opacity: 1; background-color: #000; box-shadow: 0 0 6px rgba(0,0,0,.35); }
.ict-item-logo.active:hover { box-shadow: 0 0 8px rgba(0,0,0,.55); transform: scale(1.06); }

body.dark-mode .ict-item-logo { background-color: #fff; }
body.dark-mode .ict-item-logo.active { background-color: #fff; box-shadow: 0 0 6px rgba(255,255,255,.45); }
body.dark-mode .ict-item-logo.active:hover { box-shadow: 0 0 9px rgba(255,255,255,.65); }

/* Inputs */
.ict-item-label,
.ict-item-value {
  padding: 0;
  border: none;
  background: transparent;
  font-size: 0.9em;
}

.ict-item-label { line-height: 1.2; font-weight: 600; color: #333; }
.ict-item-value {
  line-height: 1.2;
  min-height: 20px;
  resize: none;
  overflow: hidden;
  width: 100%;
  font-family: inherit;
  color: var(--text-gray);
}

.ict-item-label::placeholder,
.ict-item-value::placeholder { color: #d6dce6; opacity: 1; }

.ict-item-label:focus,
.ict-item-value:focus { outline: none; border-bottom: 1px dashed var(--border-color); }

body.dark-mode .ict-item-label,
body.dark-mode .ict-item-value { background: transparent; color: #e0e0e0; }

body.dark-mode .ict-item-label::placeholder,
body.dark-mode .ict-item-value::placeholder { color: #9aa3b2; opacity: .7; }
.ict-section-drag-pad { flex: 0 0 24px; height: 100%; cursor: grab; user-select: none; }

/* Disabled state for LOSE IT Service modal save button */
#looseItServiceHoursModal .btn:disabled,
#looseItServiceHoursModal .btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}