/* --- Global --- */
html, body { height: 100%; font-family: Verdana, Arial, sans-serif; margin:0; padding:0; background:#f0f2f5; }
p{ line-height:1.6; margin:0 0 16px 0;}
h1,h2{ margin:0 0 8px 0;}
a{ text-decoration:none; color:#109CEF;}
a:hover{ text-decoration:underline; }

/* --- Container --- */
#main {
    width: 100%;
    max-width: 100%; /* Volledige breedte van scherm */
    margin: 0 auto;
}

#content {
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
}

/* --- Login / Forms --- */
.container{
    background:#fff;
    padding:30px;
    border-radius:6px;
    box-shadow:0 4px 12px rgba(0,0,0,0.2);
    width:95%;          /* bijna volledige breedte */
    max-width:800px;    /* maximaal 800px, past beter op grote schermen */
    min-width:300px;
    margin:50px auto;
    box-sizing:border-box;
}
.container h2{ text-align:center; color:#109CEF; }
.container input, .container select, .container textarea{
    width:100%; padding:8px; margin:5px 0 15px 0; border:1px solid #ccc; border-radius:4px; box-sizing:border-box;
}
.container button{
    background-color:#109CEF; color:#fff; border:none; padding:10px 16px; border-radius:4px; cursor:pointer;
}
.container button:hover{ background-color:#0078c1; }

/* --- Tables --- */
.table-responsive{ width:100%; overflow-x:auto; margin-top:15px; }
table{ width:100%; border-collapse:collapse; }
table th, table td{ padding:8px; border:1px solid #ccc; white-space:nowrap; text-align:left; }
table th{ background:#e8f1ff; color:#109CEF; }
table tr:nth-child(even){ background:#fafafa; }

/* --- Status labels --- */
.status-voorraad{ color:#fff; background:#109CEF; padding:4px 8px; border-radius:4px; display:inline-block; text-align:center; }
.status-verkocht{ color:#fff; background:#94C65A; padding:4px 8px; border-radius:4px; display:inline-block; text-align:center; }

/* --- Dashboard acties --- */
.action-btn, .action-btn-small{
    background:#109CEF; color:#fff; padding:4px 10px; border:none; border-radius:4px; cursor:pointer; margin-right:4px;
    text-decoration:none;
    font-size:0.85em;
}
.action-btn:hover, .action-btn-small:hover{ background:#0078c1; }

/* --- Thumbnails --- */
.img-thumb{ width:100%; max-width:480px; height:auto; object-fit:cover; border-radius:4px; margin-bottom:8px; }

/* --- Responsive Tables & Dashboard --- */
@media (max-width:1200px){
    table th, table td{ font-size:14px; }
}

@media (max-width:992px){
    table th, table td{ font-size:13px; padding:6px; }
    .action-btn, .action-btn-small{ font-size:0.8em; padding:3px 8px; margin:2px 2px 2px 0; display:inline-block; }
}

@media (max-width:768px){
    #main, #content{ padding:10px; }
    table{ font-size:12px; display:block; overflow-x:auto; }
    table th, table td{ white-space:normal; }
    .action-btn, .action-btn-small{ display:block; margin:4px 0; width:100%; text-align:center; }
    .img-thumb{ max-width:100%; height:auto; }
}

@media (max-width:480px){
    .container{ padding:15px; }
    table th, table td{ font-size:11px; padding:4px; }
}