/* IT Student Manager – Frontend CSS */

.itsm-fe-wrap { max-width: 900px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

/* Search card */
.itsm-fe-search-card { background: #f9f9fb; border: 1px solid #e0e0e4; border-radius: 6px; padding: 16px 20px; margin-bottom: 20px; }
.itsm-fe-label { font-weight: 700; font-size: 14px; }
.itsm-fe-search-row input.itsm-fe-input { padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; width: 280px; font-size: 14px; }
.itsm-fe-error-msg { color: #c0392b; margin-top: 8px; font-size: 13px; }

/* Buttons */
.itsm-fe-btn { display: inline-block; padding: 7px 16px; background: #2271b1; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; text-decoration: none; }
.itsm-fe-btn:hover { background: #135e96; color: #fff; }
.itsm-fe-btn-sm { padding: 4px 10px; font-size: 12px; }

/* Notice boxes */
.itsm-fe-notice { padding: 12px 16px; border-radius: 4px; margin-bottom: 16px; }
.itsm-fe-info   { background: #e8f4fd; border-left: 4px solid #2271b1; }
.itsm-fe-error  { background: #fde8e8; border-left: 4px solid #c0392b; }

/* Dossier header */
.itsm-fe-name { display: flex; align-items: center; gap: 14px; font-size: 22px; margin-bottom: 16px; flex-wrap: wrap; }
.itsm-fe-avatar { width: 52px; height: 52px; object-fit: cover; border-radius: 50%; border: 2px solid #ddd; }
.itsm-fe-avatar-placeholder { font-size: 40px; line-height: 1; }
.itsm-fe-badge { background: #2271b1; color: #fff; font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: 12px; }

/* Grid layout */
.itsm-fe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.itsm-fe-card-full { grid-column: 1 / -1; }
@media (max-width: 600px) { .itsm-fe-grid { grid-template-columns: 1fr; } }

/* Cards */
.itsm-fe-card { background: #fff; border: 1px solid #e0e0e4; border-radius: 6px; overflow: hidden; }
.itsm-fe-card-title { margin: 0; padding: 10px 14px; background: #1d2327; color: #fff; font-size: 13px; font-weight: 600; }
.itsm-fe-empty { padding: 12px 14px; color: #999; font-size: 13px; margin: 0; }

/* Info table */
.itsm-fe-info-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.itsm-fe-info-table th { padding: 6px 12px; text-align: left; color: #666; font-weight: 600; width: 40%; background: #fafafa; border-bottom: 1px solid #f0f0f1; }
.itsm-fe-info-table td { padding: 6px 12px; border-bottom: 1px solid #f0f0f1; }
.itsm-fe-info-table code { font-family: monospace; font-size: 12px; background: #f0f0f1; padding: 1px 5px; border-radius: 3px; }

/* Main table */
.itsm-fe-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.itsm-fe-table th { background: #f0f0f1; padding: 7px 12px; text-align: left; border-bottom: 1px solid #dcdcde; }
.itsm-fe-table td { padding: 6px 12px; border-bottom: 1px solid #f5f5f5; }
.itsm-fe-table code { font-family: monospace; font-size: 12px; }

/* Sync badge */
.itsm-fe-sync { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.itsm-fe-sync.synced   { background: #d4edda; color: #155724; }
.itsm-fe-sync.unsynced { background: #f8d7da; color: #721c24; }

/* Notes */
.itsm-fe-note { border: 1px solid #e8e8e8; border-radius: 4px; margin: 0 14px 10px; background: #fafafa; overflow: hidden; }
.itsm-fe-note:first-of-type { margin-top: 10px; }
.itsm-fe-note-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #fff; border-bottom: 1px solid #e8e8e8; flex-wrap: wrap; }
.itsm-fe-note-date { margin-left: auto; font-size: 11px; color: #999; }
.itsm-fe-division { background: #2271b1; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 10px; }
.itsm-fe-note-body { padding: 10px 12px; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }

/* ─── DeviceInfo (v1.2.0) ─────────────────────────────────────────────── */
.itsm-fe-device-row {
    display:flex; align-items:center; gap:12px; padding:9px 0;
    border-bottom:1px solid #eee; flex-wrap:wrap;
}
.itsm-fe-device-row:last-of-type { border-bottom:none; }
.itsm-fe-device-item { width:90px; font-weight:600; font-size:14px; }
.itsm-fe-device-options { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.itsm-fe-swatch {
    width:26px; height:26px; border-radius:50%; cursor:pointer; padding:0;
    background:var(--c, #ccc); border:2px solid transparent;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);
    transition:transform .1s ease, border-color .1s ease;
}
.itsm-fe-swatch:hover { transform:scale(1.12); }
.itsm-fe-swatch.is-active { border-color:#1d2327; box-shadow:none; }
.itsm-fe-swatch-none {
    background:#fff; color:#999; font-size:13px; line-height:1;
    border:2px solid #ddd; box-shadow:none;
}
.itsm-fe-swatch-none.is-active { border-color:#1d2327; color:#1d2327; }
.itsm-fe-swatch[disabled] { opacity:.5; cursor:default; }
.itsm-fe-device-status {
    display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600;
}
.itsm-fe-device-dot { width:14px; height:14px; border-radius:50%; display:inline-block; }
.itsm-fe-device-status-none { color:#999; font-style:italic; font-size:13px; }
.itsm-fe-device-legend {
    display:flex; flex-wrap:wrap; gap:14px; margin-top:14px; padding-top:10px;
    border-top:1px solid #eee; font-size:12px; color:#666;
}
.itsm-fe-legend-item { display:inline-flex; align-items:center; gap:6px; }
.itsm-fe-legend-dot { width:12px; height:12px; border-radius:50%; display:inline-block; }
.itsm-fe-device-status-msg { font-size:12px; margin-top:8px; min-height:16px; font-weight:600; }

/* ═══ DEVICE BEHEER overzicht (shortcode, v1.4.0) ═══════════════════════════ */
.itsm-dm { max-width: 1400px; margin: 0 auto; font-family: inherit; }
.itsm-dm-card {
    background:#fff; border:1px solid #e2e4e7; border-radius:10px;
    padding:20px 24px; margin:0 0 18px; box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.itsm-dm-filter-grid { display:grid; grid-template-columns:1.2fr 1.6fr 1.2fr auto; gap:18px; align-items:end; }
.itsm-dm-field label { display:block; font-size:13px; font-weight:600; color:#1d2327; margin-bottom:6px; }
.itsm-dm-field select, .itsm-dm-field input[type=text] {
    width:100%; height:42px; border:1px solid #c9ccd1; border-radius:7px;
    padding:0 12px; font-size:14px; background:#fff; box-sizing:border-box;
}
.itsm-dm-field-btn { display:flex; align-items:flex-end; }
.itsm-dm-filter-btn {
    height:42px; padding:0 22px; font-size:14px; border-radius:7px; cursor:pointer;
    background:#2d4ed8; color:#fff; border:none; font-weight:600;
}
.itsm-dm-filter-btn:hover { background:#2440c0; }
.itsm-dm-reset {
    height:40px; display:inline-flex; align-items:center; padding:0 18px;
    border-radius:7px; font-weight:600; border:1px solid #c9ccd1; background:#fff;
    color:#2d4ed8; text-decoration:none;
}
.itsm-dm-reset:hover { background:#f6f7f9; }
.itsm-dm-legend { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.itsm-dm-legend-label { font-weight:700; color:#1d2327; margin-right:6px; }
.itsm-dm-pill {
    display:inline-flex; align-items:center; justify-content:center;
    padding:7px 16px; border-radius:9px; font-size:13.5px; font-weight:600;
    border:1px solid transparent; line-height:1; white-space:nowrap;
}
.itsm-dm-pill-ingeleverd { background:#e3f4e8; color:#1e7a34; border-color:#a8d8b5; }
.itsm-dm-pill-vergeten   { background:#fdf0d9; color:#9a6a00; border-color:#f0cd8a; }
.itsm-dm-pill-niet       { background:#fde6e6; color:#c0392b; border-color:#f0b0ac; }
.itsm-dm-pill-kwijt      { background:#efe9fc; color:#6b3fc4; border-color:#cdbef2; }
.itsm-dm-pill-terug      { background:#e4eefb; color:#2f6fcc; border-color:#b3cdf0; }
.itsm-dm-pill-ict        { background:#fcf7cf; color:#8a7400; border-color:#ecdf8a; }
.itsm-dm-pill-none       { background:#f3f4f5; color:#9097a0; border-color:#d8dbdf; }
.itsm-dm-h2 { font-size:20px; font-weight:700; margin:0 0 14px; color:#1d2327; }
.itsm-dm-table-wrap { overflow-x:auto; }
.itsm-dm-table { width:100%; border-collapse:collapse; }
.itsm-dm-table thead th {
    text-align:left; font-size:14px; font-weight:600; color:#1d2327;
    padding:10px 14px; border-bottom:1px solid #e2e4e7;
}
.itsm-dm-table tbody td { padding:12px 14px; border-bottom:1px solid #f0f1f3; font-size:14px; vertical-align:middle; }
.itsm-dm-table tbody tr:hover { background:#fafbfc; }
.itsm-dm-col-nr { color:#646970; }
.itsm-dm-col-upd, .itsm-dm-col-by { color:#646970; font-size:13px; white-space:nowrap; }
.itsm-dm-name { font-weight:600; color:#2271b1; text-decoration:none; }
.itsm-dm-select {
    -webkit-appearance:none; -moz-appearance:none; appearance:none;
    min-width:120px; text-align:center; text-align-last:center;
    padding:8px 16px; border-radius:9px; font-size:13.5px; font-weight:600;
    border:1px solid transparent; cursor:pointer; line-height:1.1; background-image:none;
}
.itsm-dm-select:disabled { opacity:.6; cursor:wait; }
.itsm-dm-select option { color:#1d2327; background:#fff; font-weight:500; }

/* DeviceInfo horizontale kaarten op dossier (v1.5.0) */
.itsm-fe-device-grid {
    display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px;
}
@media (max-width:900px){ .itsm-fe-device-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .itsm-fe-device-grid{ grid-template-columns:1fr; } }
.itsm-fe-device-grid .itsm-fe-device-row {
    display:block; padding:12px 12px 10px; border:1px solid #e6e8ea;
    border-radius:10px; background:#fff;
}
.itsm-fe-device-grid .itsm-fe-device-item {
    display:block; width:auto; text-align:center; font-weight:600; font-size:14px;
    padding-bottom:9px; margin-bottom:10px; border-bottom:1px solid #f0f1f3;
}
.itsm-fe-device-options-v { flex-wrap:wrap; justify-content:center; }

/* Robuuste inkleuring ingevulde pulldowns (v1.6.0) */
.itsm-dm-select.itsm-dm-pill-ingeleverd { background:#e3f4e8; color:#1e7a34; border:1px solid #a8d8b5; }
.itsm-dm-select.itsm-dm-pill-vergeten   { background:#fdf0d9; color:#9a6a00; border:1px solid #f0cd8a; }
.itsm-dm-select.itsm-dm-pill-niet        { background:#fde6e6; color:#c0392b; border:1px solid #f0b0ac; }
.itsm-dm-select.itsm-dm-pill-kwijt       { background:#efe9fc; color:#6b3fc4; border:1px solid #cdbef2; }
.itsm-dm-select.itsm-dm-pill-terug       { background:#e4eefb; color:#2f6fcc; border:1px solid #b3cdf0; }
.itsm-dm-select.itsm-dm-pill-ict         { background:#fcf7cf; color:#8a7400; border:1px solid #ecdf8a; }
.itsm-dm-select.itsm-dm-pill-none        { background:#f3f4f5; color:#9097a0; border:1px solid #d8dbdf; }

/* DeviceInfo: bewerkbare label-knoppen + datum (v1.21.0) */
.itsm-fe-pill-btn {
    width:auto !important; height:auto !important; min-width:0 !important;
    border-radius:14px; padding:3px 12px; font-size:12px; font-weight:600;
    cursor:pointer; line-height:1.5; transition:all .12s ease;
}
.itsm-fe-pill-btn:hover { filter:brightness(.97); }
.itsm-fe-device-options-v { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.itsm-fe-device-date { display:block; font-size:11px; color:#8a8f98; margin-top:5px; }
.itsm-fe-device-legend { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; padding-top:10px; border-top:1px solid #eef0f2; }
.itsm-fe-legend-item { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:#666; }
.itsm-fe-legend-dot { width:11px; height:11px; border-radius:50%; display:inline-block; }

/* Fotoknop naast de leerlingnaam, rechtsonder */
.itsm-fe-name-row { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.itsm-fe-photo-edit-btn { white-space:nowrap; }

/* Wachtwoord-slotje knop (v1.25.0) */
.itsm-fe-pw-toggle {
    background:none; border:none; cursor:pointer; font-size:15px;
    padding:0 0 0 6px; line-height:1; vertical-align:middle;
}
.itsm-fe-pw-toggle:hover { opacity:.7; }