/* ============================================================
   RANGER — variable.css
   Vervangt: variable.css + left-top.css relevante onderdelen
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* ── LIGHT MODE ─────────────────────────────────────────── */
:root {
    /* Merkkleur */
    --huisstijlkleur: #1e3a5f;
    --huisstijlkleur-hover: #162d4a;
    --huisstijlkleur-light: #e8eef6;

    /* Typografie */
    --font-family: 'DM Sans', sans-serif;
    --font-size: 14px;

    /* Links & inputs */
    --link-color: #1e3a5f;
    --input-color: #1e3a5f;

    /* Achtergronden */
    --bg-primary: #ffffff;
    --bg-secondary: #f4f5f7;

    /* Tekst */
    --text-primary: #1a1d23;
    --text-secondary: #5a6070;
    --text-dark: #1a1d23;

    /* Knoppen */
    --button-text: #ffffff;
    --button-bg: #1e3a5f;
    --button-bg-hover: #162d4a;

    /* Borders & schaduwen */
    --border-color: #e4e6eb;
    --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.06), 0 4px 16px 0 rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

    /* Inputs */
    --input-bg: #ffffff;
    --input-bg-hover: #f4f5f7;
    --input-border: #d8dbe2;
    --input-text: #1a1d23;
    --box-shadow: 0 1px 2px rgba(0,0,0,0.04), inset 0 0 0 1px rgba(255,255,255,0.8);

    /* Tabel */
    --table-bg: #ffffff;
    --table-border: #e4e6eb;
    --table-header-bg: #f8f9fb;
    --table-header-text: #8a92a0;
    --table-row-hover-bg: #f4f5f7;
    --table-text: #3a3f4b;

    /* Overig */
    --select: #e8eef6;
    --bg-dropdown: #ffffff;
    --disabled: #c2c6cf;
    --helpdesk: #f0f3f8;
    --installed: #2d8c4e;

    /* Sidebar / menu */
    --menu-left-color: #1e3a5f;
    --menu-left-arrow: #ffffff;
    --menu-left-bg-active: #e8eef6;
    --menu-left-bg-hover: #f0f2f5;

    /* Tabs */
    --tab-color: #1e3a5f;
}

/* ── TYPOGRAFIE ─────────────────────────────────────────── */

h1 {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    font-family: var(--font-family);
    color: var(--text-primary);
}

h2 {
    font-size: 17px;
    font-weight: 600;
    margin: 0;
    font-family: var(--font-family);
    color: var(--text-secondary);
}

a {
    color: var(--link-color);
    font-family: var(--font-family);
}

.container-right p {
    font-family: var(--font-family);
    font-size: var(--font-size);
    line-height: 1.6;
    color: var(--text-primary);
}

span, label, li, h4 {
    font-family: var(--font-family);
    color: var(--text-secondary) !important;
    font-size: var(--font-size);
}

/* ── KNOPPEN ────────────────────────────────────────────── */

button {
    font-family: var(--font-family);
    appearance: none;
    background-color: var(--button-bg);
    border: none;
    border-radius: 6px;
    box-sizing: border-box;
    color: var(--button-text);
    display: inline-block;
    font-size: var(--font-size);
    font-weight: 500;
    line-height: 20px;
    padding: 9px 15px;
    position: relative;
    transition: background-color 0.15s ease;
    cursor: pointer;
}

button:hover {
    background-color: var(--button-bg-hover);
    /* color: var(--button-text); */
}

button:hover i,
button:focus i,
button i:hover {
    color: black;
}

button:focus {
    outline: none;
}

button[type="submit"],
button[type="reset"] {
    font-family: var(--font-family);
    box-sizing: border-box;
    display: inline-block;
    font-weight: 500;
    line-height: 20px;
    padding: 9px 15px;
    background-color: var(--button-bg);
    color: var(--button-text);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--font-size);
    appearance: none;
}

input[type="submit"],
input[type="reset"] {
    font-family: var(--font-family);
    box-sizing: border-box;
    display: inline-block;
    font-weight: 500;
    line-height: 20px;
    width: 100%;
    padding: 8px 20px;
    background-color: var(--button-bg);
    color: var(--button-text);
    border: none;
    border-radius: 40px;
    cursor: pointer;
    font-size: var(--font-size);
    appearance: none;
    transition: background-color 0.15s ease;
}

input[type="submit"]:hover,
input[type="reset"]:hover {
    background-color: var(--button-bg-hover);
}

/* ── TABEL ──────────────────────────────────────────────── */

table {
    background: var(--table-bg);
    border: 1px solid var(--table-border);
    border-radius: 6px;
    border-spacing: 0;
    color: var(--table-text);
    font-size: var(--font-size);
    width: 100%;
    box-sizing: border-box;
}

table th,
table td {
    font-family: var(--font-family);
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--table-border);
}

table thead th,
table th {
    background: var(--table-header-bg);
    font-weight: 500;
    color: var(--table-header-text);
}

table tbody tr:hover {
    background-color: var(--table-row-hover-bg);
    transition: background-color 0.15s ease;
}

/* ── SELECT ─────────────────────────────────────────────── */

select {
    font-family: var(--font-family);
    border: 1px solid var(--input-border);
    border-radius: 40px;
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
    display: inline-block;
    font-size: var(--font-size);
    font-weight: 500;
    line-height: 20px;
    padding: 6px 40px 6px 12px;
    position: relative;
    transition: all 0.15s ease;
    color: var(--text-primary);
    background: var(--input-bg) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-width='3' d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center !important;
    appearance: none;
    min-height: 40px;
}

select:hover {
    background-color: var(--input-bg-hover);
    border-color: var(--input-color);
}

/* ── INPUTS / FORM ──────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="username"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="tel"],
input[type="search"],
input[type="url"],
textarea {
    font-family: var(--font-family);
    box-sizing: border-box;
    color: var(--input-text);
    display: inline-block;
    font-size: var(--font-size);
    font-weight: 500;
    line-height: 20px;
    transition: all 0.15s ease;
    outline: none;
    appearance: none;
    min-height: 40px;
    background: var(--input-bg);
    box-shadow: var(--shadow-sm);
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: 20px;
}

input[type="search"] {
    flex: 1;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    width: 240px;
}

textarea {
    resize: vertical;
    min-height: 80px;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="username"]:hover,
input[type="number"]:hover,
input[type="date"]:hover,
input[type="tel"]:hover,
input[type="search"]:hover,
input[type="url"]:hover,
textarea:hover {
    border-color: var(--input-color);
    background: var(--input-bg);
    box-shadow: var(--shadow-sm);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus {
    border-color: var(--input-color);
    outline: none;
}

/* ── ZOEKBALK MET ICON ──────────────────────────────────── */

.search-input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 14px;
    color: var(--text-secondary);
    font-size: var(--font-size);
    pointer-events: none;
    z-index: 1;
    transition: color 0.15s ease;
}

.search-input-container input[type="text"] {
    padding-left: 42px;
    width: 100%;
}

.search-input-container:hover .search-icon {
    color: var(--input-color);
}

.search-input-container input[type="text"]:focus ~ .search-icon {
    color: var(--input-color);
}

/* ── CHECKBOX / RADIO ───────────────────────────────────── */

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    margin: 0 0 5px 0;
    padding: 0;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    box-sizing: border-box;
    color: var(--input-text);
    display: inline-block;
    font-size: var(--font-size);
    font-weight: 500;
    line-height: 20px;
    height: 18px;
    width: 18px;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    border-radius: 4px;
    transition: all 0.15s ease;
}

input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    margin: 0 0 5px 0;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    box-sizing: border-box;
    display: inline-block;
    height: 14px;
    width: 14px;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    border-radius: 50%;
    transition: all 0.15s ease;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
    border-color: var(--input-color);
    background-color: var(--input-bg-hover);
}

input[type="checkbox"]:checked {
    background-color: var(--input-color);
    border-color: var(--input-color);
}

input[type="radio"]:checked {
    background-color: var(--input-color);
    border-color: var(--input-color);
}

input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 11px;
    font-weight: bold;
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: none;
}

/* ── DATALIST ───────────────────────────────────────────── */

.input-datalist {
    font-family: var(--font-family);
    border: 1px solid var(--input-border);
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
    font-size: var(--font-size);
    font-weight: 500;
    padding: 6px 40px 6px 12px;
    min-height: 40px;
    background: var(--input-bg);
    color: var(--text-primary);
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-width='3' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

.input-datalist:hover {
    background-color: var(--input-bg-hover);
    border-color: var(--input-color);
}

.input-datalist::-webkit-calendar-picker-indicator {
    opacity: 0;
    display: none;
}

/* ── MULTISELECT ────────────────────────────────────────── */

.multi-items-input input,
.multi-items-input select {
    width: 100% !important;
    outline: none;
    background: none !important;
    padding: 0;
}

.multi-items-input {
    margin-top: 5px;
}

#multiItems option:checked,
#multiItems option:focus {
    background-color: var(--huisstijlkleur) !important;
    color: white !important;
}

#multiItems option {
    padding: 5px 10px;
}

/* ── DARK MODE ──────────────────────────────────────────── */
[data-theme="dark"] {
    --huisstijlkleur: #5b8abf;
    --huisstijlkleur-hover: #7aa3cf;
    --huisstijlkleur-light: #1c2d3f;

    --bg-primary: #141618;
    --bg-secondary: #1e2126;

    --text-primary: #e8eaed;
    --text-secondary: #8a92a0;
    --text-dark: #e8eaed;

    --button-text: #ffffff;
    --button-bg: #5b8abf;
    --button-bg-hover: #7aa3cf;

    --border-color: #2c3038;
    --shadow: 0 1px 4px 0 rgba(0,0,0,0.3);
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.2);

    --input-bg: #1e2126;
    --input-bg-hover: #262b32;
    --input-border: #2c3038;
    --input-text: #e8eaed;
    --box-shadow: none;

    --table-bg: #141618;
    --table-border: #2c3038;
    --table-header-bg: #1e2126;
    --table-header-text: #8a92a0;
    --table-row-hover-bg: #222730;
    --table-text: #c0c6d0;

    --select: #1c2d3f;
    --bg-dropdown: #1e2126;
    --disabled: #3a4050;
    --helpdesk: #1e2126;
    --installed: #3aad68;

    --menu-left-color: #e8eaed;
    --menu-left-arrow: #141618;
    --menu-left-bg-active: #1c2d3f;
    --menu-left-bg-hover: #22272f;

    --tab-color: #5b8abf;

    --link-color: #5b8abf;
    --input-color: #5b8abf;
}

/* ── Scrollbars ─────────────────────────── */

::-webkit-scrollbar {
  width:  8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background:    transparent;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background:    var(--border-color);
  border-radius: 10px;
  border:        1.5px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background:    var(--huisstijlkleur);
  background-clip: content-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}
/* ── iOS: geen auto-zoom bij focus op invoervelden (< 767px) ───────────────
   Safari zoomt automatisch in wanneer een veld een font-size < 16px heeft.
   Op mobiel dwingen we 16px af zodat dat niet gebeurt. Handmatig (pinch)
   zoomen blijft gewoon werken — dat regelt de viewport-meta, niet dit. */
@media (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="username"],
    input[type="number"],
    input[type="tel"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    input[type="month"],
    input[type="week"],
    textarea,
    select,
    .input-datalist {
        font-size: 16px !important;
    }
}