.modern-universal{
 --bg-color: #4E5B91;
 --text-color: #333333;
 --button-text-color: #ffffff;
 --container-bg: rgba(255, 255, 255, 0.95);
 --section-bg: #f8f9fa;
 --border-color: #e2e8f0;
 --input-bg: #ffffff;
 --shadow: rgba(0,0,0,0.1);
 --error-color: #e53e3e;
 --success-color: #38a169;
 --thead-bg: #4F5B93;
 --thead-color: #ffffff;
 --table-odd: #eceadf;
 --table-even: #ffffff;
 --table-hover: rgba(102, 126, 234, 0.1);
}

.modern-universal[data-theme="dark"]{
 --bg-color: #1a202c;
 --text-color: #e2e8f0;
 --container-bg: rgba(45, 55, 72, 0.95);
 --section-bg: #2d3748;
 --border-color: #4a5568;
 --input-bg: #2d3748;
 --shadow: rgba(0,0,0,0.3);
 --table-odd: #4a5568;
 --table-even: #2d3748;
 --table-hover: rgba(102, 126, 234, 0.2);
}

.modern-universal *{
 box-sizing: border-box;
}

.modern-universal{
 margin: 0;
 padding: 0;
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 background: var(--bg-color);
 color: var(--text-color);
 min-height: 100vh;
}

.modern-universal #content{
 min-height: 100vh;
 padding: clamp(10px, 5vw, 20px);
}

.modern-universal .container{
 background: var(--container-bg);
 border-radius: clamp(12px, 3vw, 20px);
 padding: clamp(20px, 5vw, 30px) clamp(20px, 5vw, 30px) 10px clamp(20px, 5vw, 30px);
 box-shadow: 0 20px 40px var(--shadow);
 backdrop-filter: blur(10px);
 position: relative;
 max-width: clamp(320px, 90vw, 600px);
 margin-left: 0;
}

.modern-universal .header-row{
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: clamp(20px, 4vw, 25px);
 gap: 15px;
}

.modern-universal .header-left{
 display: flex;
 align-items: center;
 gap: clamp(8px, 2vw, 12px);
}

.modern-universal .theme-toggle{
 background: #f8f8f8;
 border: 2px solid var(--border-color);
 border-radius: clamp(6px, 1.5vw, 8px);
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: clamp(16px, 3.5vw, 20px);
 transition: all 0.3s ease;
 color: var(--text-color);
 flex-shrink: 0;
 padding: 0;
 width: clamp(32px, 6vw, 36px);
 height: clamp(32px, 6vw, 36px);
}

.modern-universal[data-theme="dark"] .theme-toggle{
 background: #4a5568;
}

.modern-universal .theme-toggle:hover{
 transform: translateY(-2px);
 box-shadow: 0 5px 15px var(--shadow);
 background: #e2e8f0;
}

.modern-universal[data-theme="dark"] .theme-toggle:hover{
 background: #718096;
}

.modern-universal h1{
 color: var(--text-color);
 font-size: clamp(22px, 4.5vw, 28px);
 margin: 0;
 font-weight: 600;
}

.modern-universal .vanilla-title{
 color: #4C5E8D;
}

.modern-universal .section{
 margin-bottom: clamp(20px, 4vw, 30px);
 padding: clamp(15px, 4vw, 20px);
 background: var(--section-bg);
 border-radius: clamp(8px, 2vw, 12px);
 border-left: 4px solid #667eea;
 transition: background-color 0.3s ease;
}

.modern-universal .input-group{
 margin-bottom: clamp(20px, 4vw, 25px);
 position: relative;
}

.modern-universal .field-container{
 position: relative;
}

.modern-universal label{
 position: absolute;
 left: clamp(10px, 2.5vw, 12px);
 top: 50%;
 transform: translateY(-50%);
 font-weight: 500;
 color: #718096;
 font-size: clamp(14px, 3.5vw, 16px);
 pointer-events: none;
 transition: all 0.3s ease;
 background: var(--input-bg);
 padding: 0 4px;
 z-index: 1;
}

.modern-universal label.floating,
.modern-universal input:focus + label,
.modern-universal input:not(:placeholder-shown) + label,
.modern-universal textarea:focus + label,
.modern-universal textarea:not(:placeholder-shown) + label{
 top: 0;
 transform: translateY(-50%);
 font-size: clamp(11px, 2.5vw, 12px);
 color: #667eea;
 font-weight: 600;
}

.modern-universal label .required{
 color: var(--error-color);
 margin-left: 2px;
}

.modern-universal input,
.modern-universal textarea{
 width: 100%;
 padding: clamp(12px, 3vw, 15px) clamp(10px, 2.5vw, 12px);
 border: 2px solid var(--border-color);
 border-radius: clamp(6px, 1.5vw, 8px);
 font-size: clamp(14px, 3.5vw, 16px);
 transition: all 0.3s ease;
 background: var(--input-bg);
 color: var(--text-color);
 outline: none;
}

.modern-universal input::placeholder,
.modern-universal textarea::placeholder{
 opacity: 0.5;
 color: #718096;
}

.modern-universal input:focus,
.modern-universal textarea:focus{
 border-color: #667eea;
 box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.modern-universal input.error,
.modern-universal textarea.error{
 border-color: var(--error-color);
}

.modern-universal input.success,
.modern-universal textarea.success{
 border-color: var(--success-color);
}

.modern-universal .error-message{
 position: absolute;
 left: clamp(10px, 2.5vw, 12px);
 top: 50%;
 transform: translateY(-50%);
 font-weight: 600;
 color: var(--error-color);
 font-size: clamp(11px, 2.5vw, 12px);
 background: var(--input-bg);
 padding: 0 4px;
 z-index: 1;
 opacity: 0;
 transition: all 0.3s ease;
}

.modern-universal textarea + label + .error-message{
 top: 75%;
}

.modern-universal .error-message.show{
 opacity: 1;
 bottom: 2px;
 top: auto;
 transform: translateY(50%);
}

.modern-universal textarea + label + .error-message.show{
 bottom: 5px;
 top: auto;
}

.modern-universal textarea{
 resize: vertical;
 min-height: clamp(80px, 20vw, 100px);
 font-family: inherit;
}

.modern-universal button{
 background: #e2e8f0;
 color: var(--button-text-color);
 border: 2px solid var(--border-color);
 padding: clamp(10px, 2.5vw, 12px) clamp(20px, 5vw, 24px);
 border-radius: clamp(6px, 1.5vw, 8px);
 cursor: pointer;
 font-size: clamp(14px, 3.5vw, 16px);
 font-weight: 600;
 transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.modern-universal button:hover:not(:disabled){
 transform: translateY(-2px);
 box-shadow: 0 5px 15px var(--shadow);
}

.modern-universal button:active{
 transform: translateY(0);
}

.modern-universal button:disabled{
 opacity: 0.6;
 cursor: not-allowed;
}


.modern-universal .btn-blue{
 background: linear-gradient(135deg, #3182ce 0%, #2c5aa0 100%);
 color: var(--button-text-color);
}

.modern-universal .btn-blue:hover:not(:disabled){
 box-shadow: 0 10px 20px rgba(49, 130, 206, 0.3);
}

.modern-universal .btn-red{
 background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
 color: var(--button-text-color);
}

.modern-universal .btn-red:hover:not(:disabled){
 box-shadow: 0 10px 20px rgba(229, 62, 62, 0.3);
}

.modern-universal .btn-green{
 background: linear-gradient(135deg, #38a169 0%, #2f855a 100%);
 color: var(--button-text-color);
}

.modern-universal .btn-green:hover:not(:disabled){
 box-shadow: 0 10px 20px rgba(56, 161, 105, 0.3);
}

.modern-universal .btn-gray{
 background: linear-gradient(135deg, #718096 0%, #4a5568 100%);
 color: var(--button-text-color);
}

.modern-universal .btn-gray:hover:not(:disabled){
 box-shadow: 0 10px 20px rgba(113, 128, 150, 0.3);
}

.modern-universal dialog{
 border: none;
 border-radius: clamp(8px, 2vw, 12px);
 padding: 0;
 max-width: clamp(280px, 80vw, 400px);
 background: var(--container-bg);
 color: var(--text-color);
 box-shadow: 0 20px 40px var(--shadow);
}

.modern-universal dialog::backdrop{
 background: rgba(0, 0, 0, 0.5);
 backdrop-filter: blur(4px);
}

.modern-universal .dialog-content{
 padding: clamp(20px, 5vw, 25px);
 text-align: center;
}

.modern-universal .dialog-title{
 font-size: clamp(18px, 4vw, 20px);
 font-weight: bold;
 margin-bottom: clamp(10px, 2vw, 15px);
 color: var(--success-color);
}

.modern-universal .dialog-message{
 margin-bottom: clamp(15px, 3vw, 20px);
 line-height: 1.5;
 font-size: clamp(14px, 3vw, 16px);
}

.modern-universal .dialog-buttons{
 display: flex;
 gap: 10px;
 justify-content: center;
 margin-top: 20px;
}

.modern-universal .dialog-button{
 color: white;
 border: none;
 padding: clamp(8px, 2vw, 10px) clamp(16px, 4vw, 20px);
 border-radius: clamp(5px, 1vw, 6px);
 cursor: pointer;
 font-size: clamp(14px, 3vw, 16px);
 font-weight: 600;
}

.modern-universal .loading{
 display: inline-block;
 width: clamp(16px, 3vw, 20px);
 height: clamp(16px, 3vw, 20px);
 border: 2px solid #f3f3f3;
 border-top: 2px solid #667eea;
 border-radius: 50%;
 animation: spin 1s linear infinite;
 margin-right: clamp(5px, 1vw, 8px);
}

@keyframes spin{
 0%{transform: rotate(0deg);}
 100%{transform: rotate(360deg);}
}


.modern-universal table.vanilla{
 width: 100%;
 border-collapse: collapse;
 background: var(--section-bg);
 box-shadow: 0 2px 8px var(--shadow);
}

.modern-universal table.vanilla tr{
 border-bottom: 1px solid #000000;
}

.modern-universal table.vanilla thead{
 background-color: var(--thead-bg);
 color: var(--thead-color);
}

.modern-universal table.vanilla th,
.modern-universal table.vanilla td{
 padding: 0 clamp(8px, 2vw, 10px);
 text-align: left;
 font-size: clamp(12px, 3vw, 14px);
 vertical-align: middle;
 height: 40px;
 border: none;
}

.modern-universal table.vanilla th{
 font-weight: 600;
}

.modern-universal table.vanilla tr:nth-child(odd),
.modern-universal table.vanilla tr.odd-row{
 background-color: var(--table-odd);
}

.modern-universal table.vanilla tr:nth-child(even),
.modern-universal table.vanilla tr.even-row{
 background-color: var(--table-even);
}

.modern-universal table.vanilla tr:hover{
 background: var(--table-hover);
}

.modern-universal table.vanilla th.center,
.modern-universal table.vanilla td.center{
 text-align: center;
}


.modern-universal .captcha-canvas{
 border: 2px solid var(--border-color);
 border-radius: clamp(6px, 1.5vw, 8px);
 background: var(--input-bg);
 cursor: pointer;
 transition: border-color 0.3s ease;
}

.modern-universal .captcha-canvas:hover{
 border-color: #667eea;
}

.modern-universal .captcha-container{
 display: flex;
 align-items: center;
 gap: clamp(10px, 2vw, 15px);
 flex-wrap: wrap;
}

.modern-universal .captcha-input{
 width: auto !important;
 min-width: clamp(60px, 15vw, 80px);
 text-align: center;
 font-weight: bold;
 text-transform: uppercase;
}

.modern-universal .refresh-captcha{
 background: #f8f8f8;
 border: 2px solid var(--border-color);
 border-radius: clamp(6px, 1.5vw, 8px);
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: clamp(16px, 3.5vw, 20px);
 transition: all 0.3s ease;
 color: var(--text-color);
 padding: 0;
 width: clamp(32px, 6vw, 36px);
 height: clamp(32px, 6vw, 36px);
}

.modern-universal[data-theme="dark"] .refresh-captcha{
 background: #4a5568;
}

.modern-universal .refresh-captcha:hover{
 transform: translateY(-2px) rotate(180deg);
 box-shadow: 0 5px 15px var(--shadow);
 background: #e2e8f0;
 border-color: #667eea;
}

.modern-universal[data-theme="dark"] .refresh-captcha:hover{
 background: #718096;
}

.modern-universal .theme-toggle,
.modern-universal .refresh-captcha{
 min-width: unset !important;
}


@media (max-width: 480px){
 .modern-universal .captcha-container{
 flex-direction: column;
 align-items: stretch;
}
}


.modern-universal .toolbar{
 display: flex;
 align-items: center;
 gap: clamp(10px, 2vw, 15px);
 margin-bottom: clamp(15px, 3vw, 20px);
 flex-wrap: wrap;
}

.modern-universal .toolbar-left{
 display: flex;
 align-items: center;
 gap: clamp(8px, 2vw, 12px);
 flex: 1;
}

.modern-universal .toolbar-right{
 display: flex;
 align-items: center;
 gap: clamp(8px, 2vw, 12px);
}

.modern-universal .icon-btn{
 background: #f8f8f8;
 border: 2px solid var(--border-color);
 border-radius: clamp(6px, 1.5vw, 8px);
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: clamp(14px, 3vw, 16px);
 transition: all 0.3s ease;
 color: var(--text-color);
 padding: clamp(8px, 2vw, 10px);
 min-width: clamp(32px, 6vw, 36px);
 height: clamp(32px, 6vw, 36px);
}

.modern-universal[data-theme="dark"] .icon-btn{
 background: #4a5568;
}

.modern-universal .icon-btn:hover{
 transform: translateY(-2px);
 box-shadow: 0 5px 15px var(--shadow);
 background: #e2e8f0;
 border-color: #667eea;
}

.modern-universal[data-theme="dark"] .icon-btn:hover{
 background: #718096;
}


.modern-universal .row-actions{
 display: flex;
 gap: 5px;
 justify-content: center;
}

.modern-universal .row-btn{
 background: none;
 border: none;
 cursor: pointer;
 padding: 4px;
 border-radius: 4px;
 transition: all 0.3s ease;
 font-size: 16px;
}

.modern-universal .edit-btn{
 color: #667eea;
}

.modern-universal .edit-btn:hover{
 background: rgba(102, 126, 234, 0.1);
}

.modern-universal .delete-btn{
 color: var(--error-color);
}

.modern-universal .delete-btn:hover{
 background: rgba(229, 62, 62, 0.1);
}


.modern-universal .photo-cell{
 text-align: center;
 width: 30px;
 padding: 0;
}

.modern-universal .photo-placeholder,
.modern-universal .photo-img{
 width: 30px;
 height: 40px;
 object-fit: cover;
 cursor: pointer;
 transition: all 0.3s ease;
 display: block;
 margin: 0;
}

.modern-universal .photo-placeholder:hover,
.modern-universal .photo-img:hover{
 transform: scale(2);
}

.modern-universal .actions-cell{
 text-align: center;
 width: 80px;
 padding: 0;
}


.modern-universal .awesomplete{
 width: 100% !important;
 display: block !important;
}

.modern-universal .awesomplete input{
 width: 100% !important;
 min-width: 100% !important;
 box-sizing: border-box !important;
}

.modern-universal .awesomplete > ul{
 background: var(--input-bg, #ffffff) !important;
 border: 2px solid var(--border-color, #e2e8f0) !important;
 border-radius: clamp(6px, 1.5vw, 8px) !important;
 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
 opacity: 1 !important;
 z-index: 1000 !important;
 max-height: 200px !important;
 overflow-y: auto !important;
}

.modern-universal .awesomplete > ul > li{
 padding: clamp(8px, 2vw, 10px) clamp(10px, 2.5vw, 12px) !important;
 color: var(--text-color, #333333) !important;
 background: transparent !important;
 font-size: clamp(13px, 3vw, 14px) !important;
 border-bottom: 1px solid var(--border-color, #e2e8f0) !important;
 transition: background-color 0.2s ease !important;
}


.modern-universal .awesomplete > ul > li:nth-child(odd){
 background: var(--table-odd, #eceadf) !important;
}

.modern-universal .awesomplete > ul > li:nth-child(even){
 background: var(--table-even, #ffffff) !important;
}


.modern-universal[data-theme="dark"] .awesomplete > ul{
 background: var(--input-bg, #2d3748) !important;
 border-color: var(--border-color, #4a5568) !important;
}

.modern-universal[data-theme="dark"] .awesomplete > ul > li{
 color: var(--text-color, #e2e8f0) !important;
 border-bottom-color: var(--border-color, #4a5568) !important;
}

.modern-universal[data-theme="dark"] .awesomplete > ul > li:nth-child(odd){
 background: var(--table-odd, #4a5568) !important;
}

.modern-universal[data-theme="dark"] .awesomplete > ul > li:nth-child(even){
 background: var(--table-even, #2d3748) !important;
}

.modern-universal .awesomplete > ul > li:hover,
.modern-universal .awesomplete > ul > li[aria-selected="true"]{
 background: rgba(102, 126, 234, 0.1) !important;
}

.modern-universal[data-theme="dark"] .awesomplete > ul > li:hover,
.modern-universal[data-theme="dark"] .awesomplete > ul > li[aria-selected="true"]{
 background: rgba(102, 126, 234, 0.2) !important;
}

#content, #divphp{
 background: var(--container-bg, red);
}

[class*=hint--]:after{
 padding: 5px 5px !important;
 font-size: 12px !important;
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}


@media print{
 .no-print{
 display: none !important;
}
 
 .modern-universal{
 background: white !important;
 color: black !important;
 min-height: auto !important;
}
 
 .modern-universal .huisnamen-container{
 background: white !important;
 box-shadow: none !important;
 border-radius: 0 !important;
 backdrop-filter: none !important;
}
 
 .modern-universal table.vanilla{
 border-collapse: collapse !important;
 width: 100% !important;
}
 
 .modern-universal table.vanilla th,
 .modern-universal table.vanilla td{
 border: 1px solid black !important;
 padding: 5px !important;
 font-size: 12px !important;
}
 
 .modern-universal table.vanilla thead{
 background: white !important;
 color: black !important;
}
}