/* ============================================================
   CRM Light - Custom CSS (Bootstrap 5, div-based layout)
   ============================================================ */

:root {
    --crm-primary:    #3c7bb2;
    --crm-navbar-bg:  #222222;
    --crm-accent:     #92ba27;
    --crm-border:     #d6d6d6;
    --crm-bg-row:     #f4f4f4;
    --crm-text:       #242424;
    --crm-th-bg:      #efefef;
    --crm-input-w:    220px;
}

/* ============================================================
   Global
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 12px;
    color: var(--crm-text);
    background: #f0f2f5;
    margin: 0;
}

a { color: var(--crm-primary); }

h1 {
    color: var(--crm-primary);
    font-size: 22px;
    font-weight: bold;
    border-bottom: 1px solid var(--crm-border);
    margin: 14px 0 12px;
    padding-bottom: 10px;
}

h2 {
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px dotted var(--crm-border);
    margin: 14px 0 10px;
    padding-bottom: 8px;
}

small { font-size: 10px; }
strong { font-weight: bold; }
div.spacer { clear: both; }
div.clean_row { height: 11px; }

/* ============================================================
   Navbar
   ============================================================ */

.crm-navbar {
    background: var(--crm-navbar-bg);
    min-height: 50px;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
    width: 100%;
}

.crm-navbar .navbar-collapse {
    background: var(--crm-navbar-bg);
}

.crm-navbar .navbar-brand img { height: 28px; }

.crm-navbar .nav-link {
    color: #ccc !important;
    font-size: 12px;
    font-weight: bold;
    padding: 6px 14px !important;
    border-radius: 4px;
    transition: background .15s, color .15s;
}
.crm-navbar .nav-link:hover,
.crm-navbar .nav-link.active {
    background: var(--crm-primary);
    color: #fff !important;
}

.crm-navbar .navbar-toggler {
    border-color: rgba(255,255,255,.3);
}
.crm-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,.7%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.crm-userbar { font-size: 11px; flex-wrap: wrap; gap: 8px !important; }
.crm-question { color: #ccc !important; text-decoration: none; }
.crm-question:hover { color: #fff !important; }
.crm-user { color: #999; white-space: nowrap; }
.crm-logout { color: var(--crm-accent) !important; text-decoration: none; white-space: nowrap; }
.crm-logout:hover { color: #fff !important; }

/* ============================================================
   Content
   ============================================================ */

.crm-content {
    padding: 20px 16px 40px;
    width: 100%;
}

/* ============================================================
   Login
   ============================================================ */

.crm-login-body {
    background: #1a1a2e;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crm-login-wrap {
    width: 100%;
    max-width: 420px;
    padding: 20px;
}

.crm-login-box {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
    overflow: hidden;
}

.crm-login-logo {
    background: var(--crm-navbar-bg);
    padding: 24px;
    text-align: center;
}
.crm-login-logo img { height: 36px; }
.crm-login-box .overview { padding: 24px; }
.crm-login-box .data_form { border: 0; }
.crm-login-box .data_form_con { background: none; border: 0; padding: 0 0 12px; }

/* ============================================================
   Invoervelden
   ============================================================ */

input.text, textarea, select, select.text {
    padding: 5px 10px;
    border: 2px solid var(--crm-border);
    background: #fff;
    color: var(--crm-primary);
    border-radius: 2px;
    font-size: 12px;
    font-family: Verdana, Helvetica, sans-serif;
    width: 100%;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    transition: border-color .15s, box-shadow .15s;
}

input.text:focus, textarea:focus, select:focus {
    background: #f0f7ff;
    outline: none;
    border-color: var(--crm-primary);
    box-shadow: 0 0 0 3px rgba(60,123,178,.15);
}

/* ============================================================
   Knoppen
   ============================================================ */

input.btn_save, input.btn_login, input.btn_cancel,
input.btn_filter, input.btn_reset, input.btn_send,
input.btn_preview, input.btn_data_export {
    height: 30px;
    cursor: pointer;
    border: 0;
    padding: 0 16px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    min-width: 90px;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    width: auto;
}

input.btn_save        { background: #92ba27; color: #fff; }
input.btn_login       { background: var(--crm-primary); color: #fff; }
input.btn_cancel      { background: #aaa; color: #fff; }
input.btn_filter      { background: #92ba27; color: #fff; }
input.btn_reset       { background: #ddd; color: #333; }
input.btn_send        { background: #d14000; color: #fff; }
input.btn_preview     { background: #888; color: #fff; }
input.btn_data_export { background: var(--crm-primary); color: #fff; }

/* ============================================================
   Formulier - div gebaseerd
   ============================================================ */

.crm-form, .crm-search {
    background: #fff;
    border: 1px solid var(--crm-border);
    border-radius: 4px;
    margin-bottom: 16px;
    overflow: hidden;
}

.crm-form-section, .crm-search-section {
    padding: 14px 16px;
    border-bottom: 1px solid var(--crm-border);
    background: #fafafa;
}

.crm-form-section:last-child,
.crm-search-section:last-child {
    border-bottom: 0;
    background: #f4f4f4;
}

/* Rij met velden */
.crm-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 8px;
}

.crm-form-row:last-child { margin-bottom: 0; }

/* Enkel veld */
.crm-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 200px;
    min-width: 160px;
    max-width: 280px;
}

.crm-field.crm-field-sm { flex: 0 1 140px; max-width: 160px; }
.crm-field.crm-field-lg { flex: 1 1 300px; max-width: 400px; }
.crm-field.crm-field-full { flex: 1 1 100%; max-width: 100%; }

.crm-field label {
    font-size: 10px;
    font-weight: bold;
    color: #555;
    text-transform: uppercase;
    letter-spacing: .3px;
    white-space: nowrap;
}

/* Knoppenrij */
.crm-form-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ============================================================
   Search box (oud systeem compat)
   ============================================================ */

div.search, div.data_form {
    background: #fff;
    border: 1px solid var(--crm-border);
    border-radius: 4px;
    margin-bottom: 16px;
}

.search div.search_con,
.data_form div.data_form_con {
    border-bottom: 1px solid var(--crm-border);
    background: #fafafa;
    padding: 10px 12px;
}

/* ============================================================
   Overzicht header
   ============================================================ */

div.overview {
    position: relative;
    margin-bottom: 20px;
    width: 100%;
}

div.overview_action {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

a.btn_link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--crm-primary);
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid var(--crm-border);
    border-radius: 3px;
    background: #fff;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
a.btn_link:hover { background: var(--crm-primary); color: #fff; border-color: var(--crm-primary); }
a.btn_link_add::before    { content: "+ "; font-weight: bold; }
a.btn_link_back::before   { content: "← "; }
a.btn_link_delete::before { content: "× "; }

/* ============================================================
   Data lijst - div gebaseerd
   ============================================================ */

.crm-list {
    width: 100%;
    border: 1px solid var(--crm-border);
    border-radius: 4px;
    overflow: hidden;
}

/* Header rij */
.crm-list-header {
    display: flex;
    background: var(--crm-th-bg);
    border-bottom: 2px solid var(--crm-border);
    font-weight: bold;
    font-size: 11px;
}

.crm-list-header .crm-col {
    padding: 8px 10px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-list-header .crm-col a { color: var(--crm-text); font-weight: bold; text-decoration: none; }
.crm-list-header .crm-col a:hover { color: var(--crm-primary); }
.crm-list-header .crm-col.crm-col-num { flex: 0 0 90px; }
.crm-list-header .crm-col.crm-col-action { flex: 0 0 60px; text-align: center; }

/* Data rij */
.crm-list-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #e8e8e8;
    cursor: pointer;
    transition: background .1s;
}

.crm-list-row:last-child { border-bottom: 0; }
.crm-list-row:hover { background: #ddeaf8; }
.crm-list-row.crm-row-even { background: var(--crm-bg-row); }
.crm-list-row.crm-row-even:hover { background: #ddeaf8; }
.crm-list-row.crm-row-head { background: #e8f0fa; cursor: default; font-weight: bold; color: var(--crm-primary); }
.crm-list-row.crm-row-archive { color: #999; }

.crm-list-row .crm-col {
    padding: 7px 10px;
    flex: 1;
    font-size: 11px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-right: 1px solid #e8e8e8;
}

.crm-list-row .crm-col:last-child { border-right: 0; }
.crm-list-row .crm-col.crm-col-num { flex: 0 0 90px; }
.crm-list-row .crm-col.crm-col-action { flex: 0 0 60px; text-align: center; cursor: default; white-space: nowrap; }
.crm-list-row .crm-col.crm-col-wrap { white-space: normal; }

/* Groep header */
.crm-list-group {
    background: #e8f0fa;
    border-bottom: 1px solid var(--crm-border);
    padding: 6px 10px;
    font-weight: bold;
    color: var(--crm-primary);
    font-size: 11px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Sub lijst */
.crm-sublist {
    background: #f4f4f4;
    border-top: 1px solid var(--crm-border);
    padding: 8px 12px 12px;
}

.crm-sublist .crm-list { border-radius: 3px; }

/* ============================================================
   Berichten
   ============================================================ */

div.message {
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 12px;
    font-size: 12px;
}
div.negative { border: 1px solid #890000; background: #c03535; color: #fff; }
div.positive  { border: 1px solid #607a1a; background: #9ab64f; color: #fff; }
div.neutral   { border: 1px solid #d14000; background: #e86024; color: #fff; }
div.message a { color: #fff; text-decoration: underline; }

/* ============================================================
   Tabel compat (voor modules die nog tabellen gebruiken)
   ============================================================ */

table.data_list {
    width: 100%;
    border: 1px solid var(--crm-border);
    border-collapse: collapse;
    font-size: 11px;
}
.data_list thead th {
    background: var(--crm-th-bg);
    border-bottom: 2px solid var(--crm-border);
    padding: 8px 10px;
    font-weight: bold;
    white-space: nowrap;
    text-align: left;
}
.data_list tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    vertical-align: top;
    font-size: 11px;
    line-height: 16px;
}
.data_list tbody td:last-child { border-right: 0; }
.data_list tbody td.action { cursor: default; text-align: center; }
.data_list tbody td.desc { white-space: normal; }
.data_list tr.even { background: var(--crm-bg-row); }
.data_list tbody tr:hover { background: #ddeaf8; }
.data_list tbody tr.head td { color: var(--crm-primary); font-weight: bold; }
.data_list tbody tr.archive td { color: #999; }
.data_list td.sub_table_con {
    padding: 8px 12px;
    background: #f4f4f4 !important;
    cursor: default;
}
.data_list td.sub_table_con table {
    width: 100%;
    border-top: 0;
}

/* ============================================================
   Mobiel
   ============================================================ */

@media (max-width: 992px) {

    h1 { font-size: 18px; }
    h2 { font-size: 13px; }

    .crm-content { padding: 12px 12px 30px; }

    /* Velden: stapelen */
    .crm-field { flex: 1 1 100%; max-width: 100%; }
    .crm-field.crm-field-sm { flex: 1 1 100%; max-width: 100%; }
    .crm-field.crm-field-lg { flex: 1 1 100%; max-width: 100%; }

    /* Overview action onder header */
    div.overview_action {
        position: static;
        margin-bottom: 8px;
    }

    /* Lijst: card stijl */
    .crm-list-header { display: none; }

    .crm-list-row {
        flex-direction: column;
        border: 1px solid var(--crm-border);
        border-radius: 4px;
        margin-bottom: 8px;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,.08);
    }

    .crm-list-row .crm-col {
        border-right: 0;
        border-bottom: 1px solid #f0f0f0;
        white-space: normal;
        flex: 1 1 100%;
        padding: 6px 12px;
    }

    .crm-list-row .crm-col:last-child { border-bottom: 0; }
    .crm-list-row .crm-col.crm-col-action { text-align: left; flex: 0 0 auto; }

    .crm-list-row.crm-row-head {
        background: #e8f0fa;
        border-radius: 4px;
    }

    /* Tabel compat op mobiel */
    table.data_list, .data_list thead, .data_list tbody,
    .data_list th, .data_list td, .data_list tr { display: block; }
    .data_list thead { display: none; }
    .data_list tbody tr {
        border: 1px solid var(--crm-border);
        border-radius: 4px;
        margin-bottom: 8px;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,.08);
    }
    .data_list tbody td {
        border: 0;
        border-bottom: 1px solid #f0f0f0;
        white-space: normal;
    }
    .data_list tbody td:last-child { border-bottom: 0; }
    .data_list td.sub_table_con { overflow-x: auto; }
    .data_list td.sub_table_con table {
        display: table;
        min-width: 400px;
    }
    .data_list td.sub_table_con thead { display: table-header-group; }
    .data_list td.sub_table_con tbody { display: table-row-group; }
    .data_list td.sub_table_con tr { display: table-row; border: 0; box-shadow: none; margin: 0; border-radius: 0; }
    .data_list td.sub_table_con td { display: table-cell; border-bottom: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8; }
}

@media (max-width: 480px) {
    .crm-userbar .crm-question { display: none; }
}