/* =========================================================
   BASE / LAYOUT
========================================================= */
.cgs-cp-app { max-width: 1000px; margin: 20px auto; font-family: Arial, sans-serif; }
.cgs-cp-header { padding: 14px 16px; border: 1px solid #ddd; border-radius: 12px; margin-bottom: 12px; background: #fff; }
.cgs-cp-title { font-size: 20px; font-weight: 700; }
.cgs-cp-subtitle { color: #666; margin-top: 4px; font-size: 13px; }

.cgs-cp-box { border: 1px solid #ddd; border-radius: 12px; padding: 16px; background: #fff; }
.cgs-cp-row { display: flex; gap: 10px; flex-wrap: wrap; }

.cgs-cp-btn { padding: 10px 14px; border: 0; border-radius: 10px; cursor: pointer; background: #1f6feb; color: #fff; font-weight: 700; }
.cgs-cp-btn-wide { width: 100%; margin-top: 10px; }
.cgs-cp-btn-secondary { background: #444; }
.cgs-cp-btn-danger { background: #b30000; }

.cgs-cp-field { margin-bottom: 12px; }
.cgs-cp-field label { display:block; font-weight: 700; margin-bottom: 6px; }
.cgs-cp-field input, .cgs-cp-field textarea { width: 100%; padding: 10px; border-radius: 10px; border: 1px solid #ccc; }

.cgs-cp-hint { margin-top: 10px; color: #666; font-size: 13px; }
.cgs-cp-error { margin-top: 10px; color: #b30000; font-weight: 700; }
.cgs-cp-success { margin-top: 10px; color: #137333; font-weight: 700; }

.cgs-cp-topline { display:flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cgs-cp-muted { color:#666; font-size: 13px; }

.cgs-cp-tiles { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 700px){ .cgs-cp-tiles { grid-template-columns: 1fr; } }

.cgs-cp-tile { padding: 18px; border-radius: 14px; border: 0; cursor:pointer; background: #f1f5ff; font-weight: 800; font-size: 16px; }
.cgs-cp-tile-danger { background: #ffecec; }

.cgs-cp-panel { margin-top: 14px; padding-top: 14px; border-top: 1px solid #eee; }
.cgs-cp-panel-title { font-weight: 900; margin-bottom: 10px; }

.cgs-cp-divider { margin: 12px 0; border-top: 1px dashed #ddd; }

.cgs-cp-loglist { display:flex; flex-direction: column; gap: 8px; }
.cgs-cp-log { padding: 10px; border: 1px solid #eee; border-radius: 10px; background: #fafafa; }
.cgs-cp-time { font-weight: 900; margin-right: 8px; }

.cgs-cp-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
@media (max-width: 700px){ .cgs-cp-grid { grid-template-columns: 1fr; } }
.cgs-cp-row-between { justify-content: space-between; align-items: center; }

/* badge */
.cgs-cp-badge{
  display:inline-block;
  margin-left:8px;
  padding: 2px 8px;
  border-radius: 999px;
  background:#111;
  color:#fff;
  font-weight:900;
  font-size:12px;
}

/* =========================================================
   COMM / TEAMS
========================================================= */
.cgs-cp-team-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
@media (max-width: 900px){
  .cgs-cp-team-grid{ grid-template-columns: 1fr; }
}

.cgs-cp-team-tile{
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
  display:flex;
  flex-direction:column;
}
.cgs-cp-team-top{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.cgs-cp-team-title{ font-weight: 900; font-size: 16px; }
.cgs-cp-team-meta > div{ padding: 3px 0; }

.cgs-cp-team-actions{
  display:flex;
  gap: 10px;
  margin-top:auto; /* knoppen altijd onderaan */
  flex-wrap: wrap;
}

.cgs-cp-team-linked{
  margin-top:6px;
  font-size:14px;
  line-height:1.2;
}

.cgs-cp-status{
  border: 0;
  border-radius: 999px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 900;
  display:flex;
  align-items:center;
  gap: 8px;
}
.cgs-cp-status .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display:inline-block;
}
.cgs-cp-status.available{ background: #e7f6ea; color: #137333; }
.cgs-cp-status.available .dot{ background:#137333; }

.cgs-cp-status.busy{ background: #ffecec; color: #b30000; }
.cgs-cp-status.busy .dot{
    width: 14px;
    height: 14px;

    border-radius: 50%;

    background: #ff0000;

    box-shadow:
        0 0 6px #ff0000,
        0 0 12px #ff0000,
        0 0 22px rgba(255,0,0,.95),
        0 0 38px rgba(255,0,0,.85);

    animation: busyLampPulse 1.2s infinite;
}

.cgs-cp-team-form{
  margin-top: 14px;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 14px;
  background: #fafafa;
}
.cgs-cp-team-form-title{ font-weight: 900; margin-bottom: 10px; }

/* =========================================================
   ALARMS LIST (dit is jouw probleemgebied)
========================================================= */
.cgs-cp-alarm-list{ display:flex; flex-direction:column; gap:10px; }

.alarm-row{
  text-align:left;

  border:1px solid #c96d6d;

  border-radius:12px;

  padding:12px;

  background:
    linear-gradient(145deg, #e59696, #d97f7f);

  cursor:pointer;
}

.alarm-row .alarm-title{ font-weight:900; }
.alarm-row .alarm-meta{
  margin-top:6px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  font-size:13px;
}

/* ONGELEZEN */
.alarm-row.unread{
  border:2px solid #b30000;
  background:linear-gradient(145deg, #efc7c7, #e7b4b4);
}
.alarm-row.unread .alarm-title{
  color:#b30000;
  font-size:16px;
}

/* PRIO pill */
.prio{
  padding:2px 8px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
}
.prio-1{ background:#ffecec; color:#b30000; }
.prio-2{ background:#fff7e6; color:#8a4b00; }
.prio-3{ background:#eef3ff; color:#1f6feb; }

/* IN BEHANDELING (blauw) */
.alarm-row.in-progress{
  background:#1f57c9;      /* jouw blauw */
  border-color:#1f57c9;
}
.alarm-row.in-progress .alarm-title,
.alarm-row.in-progress .alarm-meta,
.alarm-row.in-progress .alarm-meta .status,
.alarm-row.in-progress .alarm-meta .time{
  color:#fff !important;   /* titel/status/tijd wit */
}
/* PRIO pill moet NIET wit worden (die zit in licht vakje) */
.alarm-row.in-progress .prio{
  color: initial !important;
}

/* AFGEHANDELD (groen - iets donkerder) */
.alarm-row.done{
  border:1px solid #b9dec1;
  background:

   linear-gradient(145deg, #8fb59a, #7fa58a);
}
.alarm-row.done .alarm-title,
.alarm-row.done .alarm-meta,
.alarm-row.done .alarm-meta .status,
.alarm-row.done .alarm-meta .time{
  color:#111 !important;   /* alles zwart */
}
/* PRIO pill behoudt eigen kleur */
.alarm-row.done .prio{
  color: initial !important;
}

/* Default (niet in-progress/done): zwart */
.cgs-cp-alarm-list .alarm-row:not(.in-progress):not(.done) .alarm-title,
.cgs-cp-alarm-list .alarm-row:not(.in-progress):not(.done) .alarm-meta,
.cgs-cp-alarm-list .alarm-row:not(.in-progress):not(.done) .alarm-meta span{
  color:#111 !important;
}

/* =========================================================
   TOASTS
========================================================= */
.cgs-cp-toasts{
  position: fixed;
  top: 88px; /* pas aan op headerhoogte */
  left: 12px;
  right: 12px;
  z-index: 99998;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
  width: min(520px, calc(100% - 24px));
}

.cgs-cp-toast{
  pointer-events:auto;
  border: 3px solid #b30000;
  background: #fff6f6;
  border-radius: 12px;
  padding: 14px 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  transform: translateY(-12px);
  opacity: 0;
  transition: all .18s ease;
}
.cgs-cp-toast.show{ transform: translateY(0); opacity: 1; }

.cgs-cp-toast-title{ font-size: 16px; font-weight: 800; color: #111; }
.cgs-cp-toast-meta{ margin-top: 4px; font-size: 13px; color: #111; }
.cgs-cp-toast-right{ display:flex; align-items:center; }

.cgs-cp-toast.pulse{ animation: cgsCpPulse 1.1s ease-in-out infinite; }
@keyframes cgsCpPulse{
  0%   { box-shadow: 0 12px 30px rgba(0,0,0,.18), 0 0 0 0 rgba(179,0,0,.55); }
  70%  { box-shadow: 0 12px 30px rgba(0,0,0,.18), 0 0 0 12px rgba(179,0,0,0); }
  100% { box-shadow: 0 12px 30px rgba(0,0,0,.18), 0 0 0 0 rgba(179,0,0,0); }
}

/* =========================================================
   MODAL
========================================================= */
.cgs-cp-modal{ position:fixed; inset:0; z-index: 99999; display:none; }
.cgs-cp-modal.show{ display:block; }

.cgs-cp-modal-overlay{ position:absolute; inset:0; background: rgba(0,0,0,.45); }

.cgs-cp-modal-card{
  position: relative;
  max-width: 860px;
  width: calc(100% - 28px);
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  max-height: calc(100vh - 120px);
  overflow: auto;
  padding: 14px;
}
@media (max-width: 900px){
  .cgs-cp-modal-card{ top: 0; transform:none; margin: 20px auto; max-height: calc(100vh - 40px); }
}

.cgs-cp-modal-head{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:10px; }
.cgs-cp-modal-title{ font-weight: 900; font-size: 18px; }
.cgs-cp-modal-meta{ margin-top:6px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.cgs-cp-x{ border:0; background:#eee; border-radius:10px; padding:8px 10px; cursor:pointer; font-weight:900; }
.cgs-cp-modal-section{ margin-top: 10px; }
.cgs-cp-section-title{ font-weight: 900; margin-bottom: 6px; }
.cgs-cp-message{ padding:10px; border:1px solid #eee; border-radius:12px; background:#fafafa; }

.cgs-cp-modal-card select,
.cgs-cp-modal-card textarea{
  width:100%;
  padding:10px;
  border-radius:12px;
  border:1px solid #ccc;
}

.cgs-cp-modal-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px; }

/* internal team multi select */
.cgs-cp-team-picks{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
@media (max-width: 700px){
  .cgs-cp-team-picks{ grid-template-columns: 1fr; }
}

.team-pick{
  border:1px solid #eee;
  border-radius: 12px;
  padding:10px;
  display:flex;
  gap:10px;
  align-items:center;
  background:#fff;
}
.team-pick.available{ border-color:#cfe8d3; background:#f1fbf3; }
.team-pick.busy{ border-color:#ffd2d2; background:#fff5f5; }
.team-pick input{ transform: scale(1.1); }

/* =========================================================
   OTP DOCENT LOGIN
========================================================= */

.cgs-cp-login .cgs-otp-inputs {
    display: inline-flex;
    gap: 10px;
}

/* keiharde override van algemene input-regels */
.cgs-cp-login .cgs-otp-inputs input.cgs-otp-input {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 56px !important;

    font-size: 32px !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-transform: uppercase !important;

    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;

    border: 2px solid #444 !important;
    border-radius: 6px !important;

    appearance: none !important;
    -webkit-appearance: none !important;
}

.cgs-cp-login .cgs-otp-inputs input.cgs-otp-input:focus {
    border-color: #1f6feb !important;
    outline: none !important;
}




.cgs-cp-login .cgs-otp-inputs input.otp-input {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 56px !important;

    font-size: 32px !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-transform: uppercase !important;

    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
.cgs-cp-login .cgs-otp-inputs > input.cgs-otp-input {
    width: 44px !important;
    flex: 0 0 44px !important;
}
/* ===============================
   OTP INPUTS � FINAL FIX
=============================== */

.cgs-cp-login .cgs-otp-inputs input {
    all: unset;
    width: 44px;
    height: 56px;
    text-align: center;
    font-size: 32px;
    font-weight: 900;
    border: 2px solid #444;
    border-radius: 6px;
}

.cgs-cp-login #teacher-first-name {
    font-size: 18px;
    font-weight: 700;
    padding: 8px 10px;
}


.cgs-cp-login input[maxlength="1"] {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 56px !important;

    font-size: 32px !important;
    font-weight: 900 !important;
    text-align: center !important;
    text-transform: uppercase !important;

    padding: 0 !important;
    box-sizing: border-box !important;
}


/* herstel ALLEEN het voornaamveld */
.cgs-cp-login input#cgs-cp-first-name {
    width: auto !important;
    min-width: 120px !important;
    max-width: 100% !important;

    font-size: 16px !important;
    font-weight: 500 !important;

    text-align: left !important;
    padding: 6px 10px !important;
}


.cgs-teachers-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.cgs-teachers-table th {
    text-align: left;
    padding: 12px;
    border-bottom: 2px solid #ddd;
}

.cgs-teachers-table td {
    padding: 12px;
    border-bottom: 1px solid #eee;
}

.cgs-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cgs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: #6c7a89;
    color: #fff;
    font-size: 13px;
    line-height: 1;
    box-sizing: border-box;
}

.cgs-btn:hover {
    opacity: 0.85;
}

.cgs-btn.danger {
    background: #c0392b;
}

.cgs-status-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.cgs-status-active {
    background: #2ecc71;
    color: #fff;
}

.cgs-status-pending {
    background: #f39c12;
    color: #fff;
}

.cgs-status-inactive {
    background: #7f8c8d;
    color: #fff;
}


.cgs-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cgs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 36px;
    padding: 0 16px;

    font-size: 14px;
    font-weight: 500;

    border-radius: 6px;
    border: 1px solid transparent;

    box-sizing: border-box;
}

.cgs-btn.resend,
.cgs-btn.toggle {
    background: #6b778c;
    color: #fff;
}

.cgs-btn.danger {
    background: #c0392b;
    color: #fff;
}

.cgs-btn:hover {
    opacity: 0.9;
}

.cgs-popup {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity .3s ease;
}

.cgs-popup.hidden {
    opacity: 0;
    pointer-events: none;
}

.cgs-popup-box {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    width: 360px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,.15);
}

.cgs-popup.error .cgs-popup-box {
    border-top: 5px solid #dc2626;
}

.cgs-popup-box h3 {
    margin-top: 0;
}

.cgs-popup-box button {
    margin-top: 15px;
    padding: 8px 20px;
    border-radius: 6px;
    border: none;
    background: #111827;
    color: white;
    cursor: pointer;
}

.otp-container {
    display:flex;
    gap:10px;
    justify-content:center;
}

/* OTP vakjes geforceerd vierkant */
.otp-input {
    width: 55px !important;
    height: 55px !important;
    text-align: center !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    border: 2px solid #d1d5db !important;
    outline: none !important;
    transition: all 0.2s ease;
}

.otp-input:focus {
    border-color: #1f2937 !important;
    box-shadow: 0 0 0 2px rgba(31,41,55,0.1);
}
/* ===============================
   MODERN LOGIN CARD
================================= */

.cgs-login-wrapper {
    max-width: 420px;
    margin: 80px auto;
    padding: 40px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    text-align: center;
}

.cgs-login-wrapper h2 {
    margin-bottom: 25px;
    font-size: 26px;
    font-weight: 600;
}

.cgs-login-wrapper input[type="text"] {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    margin-bottom: 15px;
    font-size: 15px;
}

.cgs-login-wrapper button {
    padding: 10px 18px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

/* ===============================
   OTP STYLE
================================= */

.otp-container {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 20px 0;
}

.otp-input {
    width: 55px;
    height: 65px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    transition: 0.2s ease;
}

.otp-input:focus {
    border-color: #111827;
    outline: none;
    box-shadow: 0 0 0 3px rgba(17,24,39,0.15);
}

/* ===============================
   STUDENT OTP (6 vakjes)
================================= */

.student-otp {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 20px 0 25px;
}

.student-otp-input {
    width: 52px;
    height: 58px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;

    border: 2px solid #d1d5db;
    border-radius: 10px;

    background: #f8fafc;
    transition: all 0.2s ease;
}

.student-otp-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
    background: #ffffff;
}

/* FOUT STATUS */
.student-otp-input.error {
    border: 2px solid #ef4444 !important;
}

.student-otp.shake {
    animation: shake 0.3s ease;
}

@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    50% { transform: translateX(6px); }
    75% { transform: translateX(-6px); }
    100% { transform: translateX(0); }
}

.cgs-code-display {
    margin-top:15px;
    padding:20px;
    background:#0f172a;
    border:1px solid #1e293b;
    border-radius:10px;
    text-align:center;
}

.cgs-code-number {
    font-size:32px;
    letter-spacing:6px;
    font-weight:700;
    color:#3b82f6;
    margin-bottom:10px;
}

.cgs-code-timer {
    font-size:14px;
    color:#94a3b8;
    margin-bottom:10px;
}

/* ===== DOCENT HEADER ===== */

.cgs-teacher-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

@media (max-width: 640px) {
    .cgs-teacher-header {
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }
}

/* ===== MODERN LOGOUT ===== */

.cgs-logout-btn {
    background:#1e293b;
    color:#cbd5e1;
    border:1px solid #334155;
    padding:8px 14px;
    border-radius:8px;
    font-size:14px;
    transition:all 0.2s ease;
    cursor:pointer;
}

.cgs-logout-btn:hover {
    background:#ef4444;
    border-color:#ef4444;
    color:white;
}

/* ===== BOX OPTIMALISATIE ===== */

.cgs-cp-box {
    padding:24px;
    border-radius:14px;
    background:#ffffff;
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

@media (max-width: 640px) {
    .cgs-cp-box {
        padding:18px;
    }
}

/* ===== CP CODE DISPLAY ===== */

.cgs-code-number {
    font-size: 36px;
    font-weight: 700;
    color: #ffffff !important;   /* force wit */
    letter-spacing: 6px;
}

.cgs-cp-box h3 {
    font-size: 20px;
    font-weight: 600;
}

/* ===============================
   CODE STATS
================================ */

.cgs-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.cgs-stat {
    background: #111827;
    color: #fff;
    padding: 18px;
    border-radius: 12px;
    text-align: center;
}

.stat-number {
    font-size: 26px;
    font-weight: 700;
}

.stat-label {
    font-size: 13px;
    opacity: 0.8;
}

.stat-active { background:#16a34a; }
.stat-used { background:#2563eb; }
.stat-expired { background:#dc2626; }
.stat-total { background:#374151; }

/* ===============================
   CODE TABLE
================================ */

.cgs-code-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.cgs-code-table th {
    background:#111827;
    color:#fff;
    padding:12px;
    text-align:left;
}

.cgs-code-table td {
    padding:12px;
    border-bottom:1px solid #eee;
}

.cgs-code-table tr:hover {
    background:#f9fafb;
}

/* ===============================
   STATUS BADGES
================================ */

.cgs-status-badge {
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.status-new { background:#fbbf24; color:#000; }
.status-used { background:#2563eb; color:#fff; }
.status-expired { background:#dc2626; color:#fff; }
.status-active { background:#16a34a; color:#fff; }

.cgs-actions-cell {
    text-align: right;
}

.cgs-cp-btn-small {
    padding: 6px 10px;
    font-size: 12px;
}

/* ===============================
   ACTIEKNOPPEN (TABLE SAFE)
   - geen flex op <td> (houdt lijnen strak)
================================= */

td.cgs-actions-cell{
  text-align: right;
  white-space: nowrap; /* desktop: knoppen naast elkaar */
  vertical-align: middle;
}

/* knoppen naast elkaar met nette spacing */
td.cgs-actions-cell .cgs-cp-btn{
  display: inline-block;
  margin-left: 10px;
}

/* eerste knop geen extra marge */
td.cgs-actions-cell .cgs-cp-btn:first-child{
  margin-left: 0;
}

/* knop sizing (compact en strak) */
td.cgs-actions-cell .cgs-cp-btn.cgs-cp-btn-small{
  padding: 8px 18px;
  border-radius: 6px;
}

/* VERWIJDEREN = rood (forceer, want er zit al knop-CSS bij jou) */
td.cgs-actions-cell .cgs-delete-cp,
td.cgs-actions-cell .cgs-cp-btn-danger{
  background: #d63b3b !important;
  color: #fff !important;
}

td.cgs-actions-cell .cgs-delete-cp:hover,
td.cgs-actions-cell .cgs-cp-btn-danger:hover{
  background: #b92e2e !important;
}

/* MOBIEL: knoppen onder elkaar, volle breedte */
@media (max-width: 768px){
  td.cgs-actions-cell{
    text-align: left;
    white-space: normal;
  }

  td.cgs-actions-cell .cgs-cp-btn{
    display: block;
    width: 100%;
    margin-left: 0;
    margin-top: 8px;
  }

  td.cgs-actions-cell .cgs-cp-btn:first-child{
    margin-top: 0;
  }
}
.cgs-cp-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.cgs-cp-action-buttons .cgs-cp-btn {
  width: 120px;
  min-width: 120px;
  text-align: center;
}
.cgs-actions-cell {
  text-align: center;
  vertical-align: middle;
}


/* ===============================
   ACTIEKNOPPEN CODE OVERZICHT - FINAL
================================= */

.cgs-code-table th:last-child,
.cgs-code-table td.cgs-actions-cell {
  width: 170px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.cgs-code-table td.cgs-actions-cell {
  white-space: normal !important;
}

.cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 auto !important;
}

.cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-cp-btn {
  width: 120px !important;
  min-width: 120px !important;
  margin: 0 !important;
  text-align: center !important;
}

#cgs-cp-report-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
}

.cgs-report-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

.cgs-report-modal {
  position: relative;
  width: min(1000px, calc(100% - 40px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  margin: 20px auto;
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.cgs-report-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 18px;
}

@media print {
  body * {
    display: none !important;
  }

  #cgs-cp-report-modal,
  #cgs-cp-report-modal *,
  #cgs-report-print-area,
  #cgs-report-print-area * {
    display: block !important;
    visibility: visible !important;
  }

  #cgs-cp-report-modal {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
  }

  .cgs-report-overlay,
  .cgs-report-actions {
    display: none !important;
  }

  .cgs-report-modal {
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  #cgs-report-print-area {
    display: block !important;
    position: static !important;
    width: 100% !important;
    padding: 0 !important;
  }

  #cgs-report-print-area .cgs-cp-box,
  #cgs-report-print-area .cgs-cp-log {
    display: block !important;
    page-break-inside: avoid;
  }
}

/* =========================
   MOBIEL: CODE OVERZICHT ALS KAARTEN
========================= */
@media (max-width: 768px) {

  .cgs-code-table,
  .cgs-code-table tbody,
  .cgs-code-table tr,
  .cgs-code-table td {
    display: block;
    width: 100%;
  }

  .cgs-code-table {
    border: 0;
    overflow: visible;
    white-space: normal;
  }

  .cgs-code-table tr:first-child {
    display: none;
  }

  .cgs-code-table tr {
    margin: 0 0 14px 0;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    box-sizing: border-box;
  }

  .cgs-code-table td {
    padding: 6px 0;
    text-align: left !important;
    border: 0;
  }

  .cgs-code-table td:nth-child(1)::before {
    content: "Code: ";
    font-weight: 800;
  }

  .cgs-code-table td:nth-child(2)::before {
    content: "Status: ";
    font-weight: 800;
  }

  .cgs-code-table td:nth-child(3)::before {
    content: "Aangemaakt: ";
    font-weight: 800;
  }

  .cgs-code-table td:nth-child(4)::before {
    content: "Acties:";
    display: block;
    font-weight: 800;
    margin-bottom: 8px;
  }

  .cgs-actions-cell {
    width: 100% !important;
  }

  .cgs-cp-action-buttons {
    width: 100%;
    display: grid;
    gap: 8px;
  }

  .cgs-cp-action-buttons .cgs-cp-btn,
  .cgs-actions-cell > .cgs-cp-btn {
    width: 100%;
    margin: 0;
  }
}

/* Mobiel: actieve dienst dropdown netter */
@media (max-width: 768px) {

    #alarm-shift-select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 14px;
    }

    #alarm-shift-select option {
        white-space: normal;
    }

}

@media (max-width: 768px) {

    .cgs-cp-action-buttons {
        width: 100%;
    }

    .cgs-actions-cell {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .cgs-code-table tr {
        padding-left: 10px;
        padding-right: 10px;
    }

}


@media (max-width: 768px) {

  .cgs-actions-cell {
    text-align: center !important;
  }

  .cgs-cp-action-buttons {
    align-items: center !important;
  }

  .cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-cp-btn,
  .cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-cp-btn-small {
    width: 98% !important;
    min-width: 98% !important;
    max-width: 98% !important;

    min-height: 46px !important;
    padding: 10px 16px !important;

    font-size: 14px !important;
    font-weight: 800 !important;

    margin: 0 auto !important;
    border-radius: 10px !important;
  }

}

/* MOBIEL: actieknoppen �cht centreren in het kaartvak */
@media (max-width: 768px) {

  .cgs-code-table td.cgs-actions-cell {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .cgs-code-table td.cgs-actions-cell::before {
    align-self: flex-start !important;
    text-align: left !important;
    width: 100% !important;
  }

  .cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }

  .cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-cp-btn {
    width: 98% !important;
    min-width: 98% !important;
    max-width: 98% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

}

/* Desktop: docent login invoerveld kleiner */
@media (min-width: 769px) {

  .cgs-login-wrapper input[type="text"],
  .cgs-cp-login input[type="text"],
  #teacher-first-name,
  #cgs-cp-first-name {
    width: 420px !important;
    max-width: 100% !important;
    display: block;
    margin: 0 auto 15px auto !important;
  }

}

/* Digitale klok CP-dashboard */
.cgs-cp-live-clock {
    text-align: center;
    margin-bottom: 18px;
    padding: 14px;
    border-radius: 14px;
    background: #111827;
    color: #ffffff;
}

#cgs-live-time {
    font-size: 34px;
    font-weight: 900;
    letter-spacing: 2px;
}

#cgs-live-date {
    margin-top: 4px;
    font-size: 15px;
    opacity: 0.85;
    text-transform: capitalize;
}

@media (max-width: 768px) {
    #cgs-live-time {
        font-size: 28px;
    }

    #cgs-live-date {
        font-size: 14px;
    }
}

/* ===============================
   CP DASHBOARD - MODERNERE TEGELS
================================ */

.cgs-cp-tiles {
    gap: 18px !important;
}

.cgs-cp-tile {
    min-height: 74px !important;
    padding: 22px 24px !important;
    border-radius: 16px !important;

    background: linear-gradient(135deg, #1f2937, #334155) !important;
    color: #ffffff !important;

    font-size: 18px !important;
    font-weight: 900 !important;

    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18) !important;
    transition: all 0.2s ease !important;
}

.cgs-cp-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.25) !important;
}

.cgs-cp-tile-danger {
    background: linear-gradient(135deg, #991b1b, #dc2626) !important;
}

.cgs-cp-badge {
    background: #ffffff !important;
    color: #111827 !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
}

#cgs-cp-activate-sound {
    min-width: 220px !important;
    min-height: 48px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}

@media (max-width: 768px) {
    .cgs-cp-tile {
        min-height: 64px !important;
        font-size: 16px !important;
    }
}


/* Gele dashboardtegel */
.cgs-cp-tile-warning {
    background: linear-gradient(135deg, #facc15, #eab308) !important;
    color: #111827 !important;
}

.cgs-cp-tile-warning:hover {
    background: linear-gradient(135deg, #fde047, #facc15) !important;
}

/* ===============================
   CLOCK + CENTRALIST HEADER
================================ */

.cgs-cp-live-clock {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 22px 26px;
    border-radius: 18px;

    background: linear-gradient(135deg, #020817, #0f172a);

    color: #fff;

    margin-bottom: 22px;
}

.cgs-cp-clock-left {
    display: flex;
    flex-direction: column;
}

.cgs-cp-centralist-label {
    font-size: 14px;
    font-weight: 700;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cgs-cp-centralist-name {
    font-size: 24px;
    font-weight: 900;
    line-height: 1.1;
    margin-top: 2px;
}

.cgs-cp-clock-right {
    text-align: right;
}

#cgs-live-time {
    font-size: 52px;
    font-weight: 900;
    line-height: 1;
}

#cgs-live-date {
    margin-top: 8px;
    font-size: 16px;
    opacity: 0.8;
}

/* Mobiel */
@media (max-width: 768px) {

    .cgs-cp-live-clock {
        flex-direction: column;
        gap: 14px;
        text-align: center;
    }

    .cgs-cp-clock-right {
        text-align: center;
    }

    #cgs-live-time {
        font-size: 38px;
    }

    .cgs-cp-centralist-name {
        font-size: 28px;
    }
}


.cgs-cp-live-clock {
    position: relative !important;
}

.cgs-cp-clock-left {
    position: absolute !important;
    left: 26px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.cgs-cp-clock-right {
    width: 100% !important;
    text-align: center !important;
}


/* Alleen pagina ID 81 */
.page-id-81 #cgs-cp-app,
.page-id-81 .cgs-cp-app,
.page-id-81 .cgs-cp-teacher-dashboard {
    position: relative !important;
    top: -160px !important;
    margin-bottom: -160px !important;
}

/* =========================================
   COMM SCHEMA - MODERN CONTROL ROOM STYLE
========================================= */

.cgs-cp-team-tile{
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(145deg, #172033 0%, #24344d 100%) !important;

    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 22px !important;

    padding: 24px !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.05) !important;

    transition: all .25s ease;
}

/* subtiele glow bovenin */
.cgs-cp-team-tile::before{
    content:"";
    position:absolute;
    top:-80px;
    right:-80px;
    width:180px;
    height:180px;
    border-radius:50%;
    background: rgba(59,130,246,.10);
    filter: blur(30px);
}

/* hover effect */
.cgs-cp-team-tile:hover{
    transform: translateY(-3px);
    box-shadow:
        0 18px 40px rgba(0,0,0,.45),
        0 0 20px rgba(59,130,246,.12);
}

/* TEAM TITEL */
.cgs-cp-team-title{
    font-size: 28px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    letter-spacing: .5px;
}

/* META INFO */
.cgs-cp-team-meta{
    margin-top: 18px !important;
    display: grid !important;
    gap: 10px !important;
}

.cgs-cp-team-meta > div{
    color: rgba(255,255,255,.88) !important;
    font-size: 15px !important;
    line-height: 1.4;
}

.cgs-cp-team-meta b{
    color: #8fb8ff !important;
    font-weight: 800 !important;
}

/* STATUS KNOP */
.cgs-cp-status{
    min-width: 165px !important;
    justify-content: center !important;

    border-radius: 14px !important;
    padding: 12px 16px !important;

    font-size: 15px !important;
    font-weight: 800 !important;

    border: 1px solid rgba(255,255,255,.10) !important;

    box-shadow:
        0 6px 20px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.08);
}

/* BESCHIKBAAR */
.cgs-cp-status.available{
    background: linear-gradient(145deg, #12351f, #1c6a39) !important;
    color: #d7ffe3 !important;
}

/* BEZET */
.cgs-cp-status.busy{
    background: linear-gradient(145deg, #4b1111, #b91c1c) !important;
    color: #ffe1e1 !important;
}

/* STATUS DOT */
.cgs-cp-status .dot{
    width: 12px !important;
    height: 12px !important;
    box-shadow: 0 0 12px currentColor;
}

/* GEKOPPELDE MELDING */
.cgs-cp-team-linked{
    margin-top: 18px !important;

    background: rgba(255,255,255,.05) !important;

    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 14px !important;

    padding: 14px !important;

    color: rgba(255,255,255,.88) !important;
}

/* BIJGEWERKT */
.cgs-cp-team-tile .cgs-cp-muted{
    margin-top: 14px !important;
    color: rgba(255,255,255,.45) !important;
    font-size: 13px !important;
}

/* ACTIEKNOPPEN */
.cgs-cp-team-actions{
    margin-top: 22px !important;
    gap: 12px !important;
}

.cgs-cp-team-actions .cgs-cp-btn{
    flex: 1;

    min-height: 48px !important;

    border-radius: 14px !important;

    font-size: 15px !important;
    font-weight: 800 !important;

    transition: all .2s ease;
}

/* WIJZIGEN */
.cgs-cp-team-actions .cgs-cp-btn-secondary{
    background: linear-gradient(145deg, #334155, #475569) !important;
}

/* EINDE DIENST */
.cgs-cp-team-actions .cgs-cp-btn-danger{
    background: linear-gradient(145deg, #991b1b, #dc2626) !important;
}

/* hover buttons */
.cgs-cp-team-actions .cgs-cp-btn:hover{
    transform: translateY(-2px);
}


/* =========================================
   EXTRA PREMIUM STYLING TEAMKAART
========================================= */

/* metallic rand */
.cgs-cp-team-tile{
    border: 1px solid rgba(255,255,255,.22) !important;

    box-shadow:
        0 18px 40px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 0 0 1px rgba(192,192,192,.18) !important;
}

/* minder ruimte tussen regels */
.cgs-cp-team-meta{
    gap: 2px !important;
    margin-top: 10px !important;
}

.cgs-cp-team-meta > div{
    padding: 1px 0 !important;
    line-height: 1.15 !important;
}

/* zilver metallic labels */
.cgs-cp-team-meta b{
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #d6d6d6 35%,
        #f5f5f5 50%,
        #bcbcbc 70%,
        #ffffff 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    font-weight: 900 !important;
}

/* gewone tekst wit */
.cgs-cp-team-meta{
    color: rgba(255,255,255,.96) !important;
}

.cgs-cp-team-meta > div{
    color: rgba(255,255,255,.96) !important;
}

/* gekoppeld aan melding vak */
.cgs-cp-team-linked{
    color: #ffffff !important;
}

/* bijgewerkt wit */
.cgs-cp-team-tile .cgs-cp-muted{
    color: rgba(255,255,255,.75) !important;
}

/* FEL groen meldkamerlampje */
.cgs-cp-status.available .dot{
    background: #32ff72 !important;

    box-shadow:
        0 0 6px #32ff72,
        0 0 12px #32ff72,
        0 0 22px #32ff72,
        0 0 34px rgba(50,255,114,.85) !important;
}

/* status knop nog iets premium */
.cgs-cp-status.available{
    border: 1px solid rgba(80,255,140,.35) !important;

    box-shadow:
        0 0 18px rgba(50,255,114,.16),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* TEAMKAART LETTERS GROTER */

.cgs-cp-team-meta > div{
    font-size: 18px !important;
}

.cgs-cp-team-linked{
    font-size: 17px !important;
}

.cgs-cp-team-tile .cgs-cp-muted{
    font-size: 15px !important;
}

/* status knop iets groter */
.cgs-cp-status{
    font-size: 17px !important;
}

/* Labels weer wit maken */

.cgs-cp-team-meta b{
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
}

/* =========================================
   RAPPORTAGE - PREMIUM ACCENT STYLE
========================================= */

/* textarea */
#report-text{
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;

    border: 1px solid #cbd5e1 !important;
    border-radius: 18px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 8px 20px rgba(15,23,42,.06) !important;

    color: #111827 !important;

    font-size: 17px !important;
    padding: 18px !important;
}

/* focus glow */
#report-text:focus{
    border-color: rgba(59,130,246,.55) !important;

    box-shadow:
        0 0 0 4px rgba(59,130,246,.12),
        0 10px 25px rgba(15,23,42,.08) !important;
}

/* rapport regels */
.cgs-cp-log{
    position: relative;

    background:
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;

    border: 1px solid #dbe3ee !important;
    border-radius: 18px !important;

    padding: 16px 18px !important;

    box-shadow:
        0 10px 22px rgba(15,23,42,.06),
        inset 0 1px 0 rgba(255,255,255,.9) !important;

    transition: all .2s ease;
}

/* hover */
.cgs-cp-log:hover{
    transform: translateY(-2px);

    box-shadow:
        0 16px 30px rgba(15,23,42,.10);
}



/* OPSLAAN + SORTEREN KNOPPEN */
#add-report,
#toggle-sort{
    background:
        linear-gradient(145deg, #172033, #314563) !important;

    border: 1.5px solid rgba(245,158,11,.72) !important;

    color: #ffffff !important;

    border-radius: 14px !important;

    min-height: 48px !important;

    box-shadow:
        0 10px 24px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.06);

    transition: all .2s ease;
}

/* hover */
#add-report:hover,
#toggle-sort:hover{
    transform: translateY(-2px);

    box-shadow:
        0 16px 28px rgba(0,0,0,.28),
        0 0 14px rgba(59,130,246,.14);
}

/* =========================================
   RAPPORTAGE TITEL
========================================= */

.cgs-cp-report-history-title{
    margin-top: 22px;
    margin-bottom: 18px;

    font-size: 24px;
    font-weight: 900;

    color: #172033;
}

#print-report {
    background: linear-gradient(145deg, #172033, #314563) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    color: #ffffff !important;
    border-radius: 14px !important;
    min-height: 48px !important;
    box-shadow:
        0 10px 24px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.06) !important;
    font-weight: 900 !important;
}

#print-report:hover {
    transform: translateY(-2px);
    box-shadow:
        0 16px 28px rgba(0,0,0,.28),
        0 0 14px rgba(59,130,246,.14) !important;
}

.meta {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 24px;
    background: #f7f7f7;
    line-height: 1.7;
}

.print-report-title{
    margin-top: 38px;
    margin-bottom: 24px;

    font-size: 30px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;

    border-bottom: 3px solid #111;
    padding-bottom: 10px;
}

button,
.cgs-cp-btn,
.cgs-cp-tile {
    font-family: 'Syne', Helvetica, Arial, sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px !important;
}

#new-team{
    background:
        linear-gradient(145deg, #172033, #314563) !important;

    border: 1px solid rgba(255,255,255,.10) !important;

    color: #ffffff !important;

    border-radius: 14px !important;

    min-height: 48px !important;

    font-family: 'Syne', Helvetica, Arial, sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px !important;

    box-shadow:
        0 10px 24px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.06);

    transition: all .2s ease;
}

#new-team:hover{
    transform: translateY(-2px);

    box-shadow:
        0 16px 28px rgba(0,0,0,.28),
        0 0 14px rgba(59,130,246,.14);
}

#cgs-cp-sound-test{
    background:
        linear-gradient(145deg, #172033, #314563) !important;

    border: 1px solid rgba(255,255,255,.10) !important;

    color: #ffffff !important;

    border-radius: 14px !important;

    min-height: 48px !important;

    font-family: 'Syne', Helvetica, Arial, sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px !important;

    box-shadow:
        0 10px 24px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.06);

    transition: all .2s ease;
}

#cgs-cp-sound-test:hover{
    transform: translateY(-2px);

    box-shadow:
        0 16px 28px rgba(0,0,0,.28),
        0 0 14px rgba(59,130,246,.14);
}

@keyframes cgsAlarmPulseOutline {
    0% {
        outline: 0 solid rgba(220,38,38,.55);
    }

    70% {
        outline: 12px solid rgba(220,38,38,0);
    }

    100% {
        outline: 0 solid rgba(220,38,38,0);
    }
}

.cgs-cp-tile.alarm-pulse {
    animation: cgsAlarmPulseOutline 1.8s infinite !important;
}

/* =================================
   HANDMATIGE MELDING KNOPPEN
================================= */

#manual-alarm-btn,
#manual-alarm-save,
#manual-alarm-cancel{

    background:
        linear-gradient(145deg, #172033, #314563) !important;

    border: 1px solid rgba(255,255,255,.10) !important;

    color: #ffffff !important;

    border-radius: 14px !important;

    min-height: 48px !important;

    padding: 12px 18px !important;

    font-family: 'Syne', Helvetica, Arial, sans-serif !important;

    font-weight: 800 !important;

    letter-spacing: .2px !important;

    box-shadow:
        0 10px 24px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.06);

    transition: all .2s ease !important;
}

/* Hover effect */
#manual-alarm-btn:hover,
#manual-alarm-save:hover,
#manual-alarm-cancel:hover{

    transform: translateY(-2px);

    box-shadow:
        0 16px 28px rgba(0,0,0,.28),
        0 0 14px rgba(59,130,246,.14);
}

/* Annuleer knop iets neutraler */
#manual-alarm-cancel{

    background:
        linear-gradient(145deg, #2b3446, #49576d) !important;
}

/* =================================
   ALARM ROW PULSE
================================= */

@keyframes unreadAlarmPulse {

    0%{
        box-shadow:
            0 0 0 0 rgba(255,0,0,.35);
    }

    70%{
        box-shadow:
            0 0 0 14px rgba(255,0,0,0);
    }

    100%{
        box-shadow:
            0 0 0 0 rgba(255,0,0,0);
    }
}

/* Pulse voor alle open rode meldingen */
.alarm-row:not(.in-progress):not(.done){

    animation:
        unreadAlarmPulse 1.2s infinite;

}

/* Alarm toolbar compacter */
.cgs-alarm-toolbar{
    display:flex;
    gap:10px;
    align-items:center;
}


.cgs-alarm-toolbar{
    display:flex;
    align-items:center;
    gap:12px;
}

#manual-alarm-btn{
    height:56px !important;
}

.cgs-alarm-header{
    margin-bottom: 24px !important;
    display:flex;

    justify-content:space-between;

    align-items:center;

    width:100%;
}
.cgs-alarm-toolbar{
    margin-left:auto;
}

.cgs-alarm-header{
    margin-top: 34px !important;
}

.cgs-cp-sound-activate-wrap{
    margin-bottom: 32px !important;
}

#alarm-sort-btn{

    background:
        linear-gradient(145deg, #172033, #314563) !important;

    border: 1px solid rgba(255,255,255,.10) !important;

    color: #ffffff !important;

    border-radius: 14px !important;

    min-height: 56px !important;

    padding: 12px 22px !important;

    font-family: 'Syne', Helvetica, Arial, sans-serif !important;

    font-weight: 800 !important;

    letter-spacing: .2px !important;

    box-shadow:
        0 10px 24px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.06);

    transition: all .2s ease !important;
}

#alarm-sort-btn:hover{

    transform: translateY(-2px);

    box-shadow:
        0 16px 28px rgba(0,0,0,.28),
        0 0 14px rgba(59,130,246,.14);
}
/* Alarmgeluid activeren knop zelfde stijl + pulse */
#cgs-cp-activate-sound{
    background:
        linear-gradient(145deg, #172033, #314563) !important;

    border: 1px solid rgba(255,255,255,.10) !important;
    color: #ffffff !important;

    border-radius: 14px !important;
    min-height: 56px !important;
    padding: 12px 22px !important;

    font-family: 'Syne', Helvetica, Arial, sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: .2px !important;

    box-shadow:
        0 10px 24px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.06);

    transition: all .2s ease !important;
}

#cgs-cp-activate-sound:hover{
    transform: translateY(-2px);
}
@keyframes soundActivatePulse {
    0% {
        box-shadow:
            0 0 0 0 rgba(255, 193, 7, .55),
            0 10px 24px rgba(0,0,0,.20);
    }

    70% {
        box-shadow:
            0 0 0 14px rgba(255, 193, 7, 0),
            0 10px 24px rgba(0,0,0,.20);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(255, 193, 7, 0),
            0 10px 24px rgba(0,0,0,.20);
    }
}

#cgs-cp-activate-sound.pulse,
.cgs-cp-tile[data-tile="settings"].pulse{
    animation: soundActivatePulse 1.8s infinite !important;
}
/* Instellingen-tegel laten pulseren zolang alarmgeluid niet actief is */
.cgs-cp-tiles .cgs-cp-tile[data-tile="settings"].pulse {
    animation: soundActivatePulse 1.8s infinite !important;
    position: relative !important;
    z-index: 2 !important;
}
@keyframes cgsSettingsSoundPulse {
    0% {
        outline: 0 solid rgba(255,193,7,.70);
        box-shadow:
            0 10px 24px rgba(0,0,0,.20),
            0 0 0 rgba(255,193,7,0);
    }

    60% {
        outline: 12px solid rgba(255,193,7,0);
        box-shadow:
            0 10px 24px rgba(0,0,0,.20),
            0 0 24px rgba(255,193,7,.45);
    }

    100% {
        outline: 0 solid rgba(255,193,7,0);
        box-shadow:
            0 10px 24px rgba(0,0,0,.20),
            0 0 0 rgba(255,193,7,0);
    }
}

.cgs-cp-tiles button.cgs-cp-tile.sound-warning-pulse {
    animation: cgsSettingsSoundPulse 1.6s infinite !important;
    outline-offset: 3px !important;
}
.cgs-cp-team-toast-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-top:12px;
}

.cgs-cp-team-open-chat{
    border:1px solid rgba(255,255,255,.30);
    background:rgba(255,255,255,.12);
    color:#fff;
    border-radius:999px;
    padding:8px 12px;
    font-weight:900;
    font-size:12px;
    cursor:pointer;
}

.cgs-cp-team-open-chat:hover{
    background:rgba(255,255,255,.22);
}
#cgs-team-chat-modal{
    position:fixed;
    inset:0;
    z-index:1000000;
    display:none;
}

.cgs-team-chat-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(6px);
}

.cgs-team-chat-card{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:min(92vw,720px);
    height:min(82vh,680px);
    background:linear-gradient(180deg,#07152d,#0f172a);
    border-radius:28px;
    padding:22px;
    color:#fff;
    box-shadow:0 24px 90px rgba(0,0,0,.65);
    display:flex;
    flex-direction:column;
}

.cgs-team-chat-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-bottom:16px;
    border-bottom:1px solid rgba(255,255,255,.12);
}

.cgs-team-chat-title{
    font-size:28px;
    font-weight:900;
}

.cgs-team-chat-team{
    color:#8fb8ff;
    font-weight:800;
    margin-top:4px;
}

.cgs-team-chat-close{
    width:42px;
    height:42px;
    border-radius:50%;
    border:0;
    background:#1f2937;
    color:#fff;
    font-size:26px;
    font-weight:900;
    cursor:pointer;
}

.cgs-team-chat-body{
    flex:1;
    overflow:auto;
    padding:18px 0;
}

.cgs-team-chat-placeholder{
    color:#cbd5e1;
    background:rgba(255,255,255,.06);
    border-radius:18px;
    padding:16px;
}

.cgs-team-chat-footer{
    display:flex;
    gap:12px;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.12);
}

.cgs-team-chat-input{
    flex:1;
    min-height:58px;
    border-radius:18px;
    padding:14px;
    background:#0b1220;
    color:#fff;
    border:1px solid rgba(255,255,255,.14);
    resize:none;
}
.cgs-team-chat-tile{
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    padding:14px 16px;
    margin-bottom:12px;
}

.cgs-team-chat-tile-top{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
}

.cgs-team-chat-sender{
    font-weight:900;
    color:#f59e0b;
}

.cgs-team-chat-tile .cgs-team-chat-sender{
    color:#f59e0b;
}

.cgs-team-chat-tile.cp-message .cgs-team-chat-sender{
    color:#ffffff;

    opacity:.75;
}

.cgs-team-chat-date{
    font-size:12px;
    color:#94a3b8;
}

.cgs-team-chat-text{
    color:#fff;
    line-height:1.45;
}
/* TEAM COMM CHAT MODAL */

.cgs-chat-modal{
    position:fixed !important;
    inset:0 !important;
    z-index:999999 !important;
    background:rgba(0,0,0,.72) !important;
    backdrop-filter:blur(6px) !important;
    align-items:flex-start !important;
padding-top:120px !important;
    justify-content:center !important;
    padding:120px 24px 24px 24px !important;
}

.cgs-chat-window{
    width:min(98vw,860px) !important;
    height:min(92vh,980px) !important;

    background:#04163a !important;
    border-radius:28px !important;

    padding:28px !important;

    display:flex !important;
    flex-direction:column !important;

    box-sizing:border-box !important;

    box-shadow:0 25px 80px rgba(0,0,0,.55) !important;
}

.cgs-chat-header{
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    border-bottom:1px solid rgba(255,255,255,.12) !important;
    padding-bottom:16px !important;
    margin-bottom:16px !important;
}

.cgs-chat-title{
    font-size:32px !important;
    font-weight:900 !important;
}

.cgs-chat-subtitle{
    color:#8fb8ff !important;
    font-weight:800 !important;
}

.cgs-chat-close{
    width:52px !important;
    height:52px !important;
    border-radius:999px !important;
    border:0 !important;
    background:#1e293b !important;
    color:#fff !important;
    font-size:26px !important;
    font-weight:900 !important;
    cursor:pointer !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:0 !important;
    line-height:1 !important;
}

.cgs-chat-messages{
    flex:1 !important;
    overflow-y:auto !important;

    padding:16px !important;

    min-height:0 !important;
}

.cgs-chat-empty{
    background:#13213b !important;
    color:#cbd5e1 !important;
    padding:16px !important;
    border-radius:16px !important;
}

.cgs-chat-input-row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 118px !important;
    gap:10px !important;
    border-top:1px solid rgba(255,255,255,.12) !important;
    padding-top:12px !important;
}

#cgs-team-message-input{
    min-height:58px !important;
    height:58px !important;
    padding:12px 14px !important;
    font-size:16px !important;
    resize:none !important;
}

#cgs-team-message-send{
    min-height:58px !important;
    height:58px !important;
    font-size:16px !important;
    padding:0 14px !important;
}
.cgs-chat-extra-actions .cgs-team-comm-btn{
    min-height:44px !important;
    padding:10px 16px !important;
    border-radius:16px !important;
    font-size:16px !important;
    width:auto !important;
}
.cgs-chat-extra-actions{
    margin-top:12px !important;
}
/* TEAM CHAT MESSAGE TILES */

.cgs-chat-msg{
    background:#13213b !important;
    border:1px solid rgba(255,255,255,.10) !important;
    border-radius:18px !important;
    padding:14px 16px !important;
    margin-bottom:12px !important;
}

.cgs-chat-msg.cp-message{
    background:#0b1220 !important;
}

.cgs-chat-msg.team-message{
    background:#172554 !important;
}

.cgs-chat-msg-head{
    display:flex !important;
    justify-content:space-between !important;
    gap:12px !important;
    margin-bottom:8px !important;
}

.cgs-chat-msg-head span{
    font-weight:900 !important;
    color:#f59e0b !important;
}

.cgs-chat-msg.cp-message .cgs-chat-msg-head span{
    color:#ffffff !important;
    opacity:.75 !important;
}

.cgs-chat-msg-head small{
    color:#94a3b8 !important;
    font-size:12px !important;
}

.cgs-chat-msg-text{
    color:#fff !important;
    line-height:1.45 !important;
    font-size:15px !important;
}
/* TEAM CHAT INPUT MODERN STYLE */

#cgs-team-message-input{
    background:#64748b !important;
    color:#ffffff !important;
    border:1px solid rgba(148,163,184,.35) !important;
    border-radius:18px !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.03),
        0 8px 24px rgba(0,0,0,.22) !important;
    font-weight:700 !important;
    outline:none !important;
}

#cgs-team-message-input::placeholder{
    color:rgba(255,255,255,.92) !important;
    font-weight:700 !important;
}

#cgs-team-message-input:focus{
    border-color:#60a5fa !important;
    box-shadow:
        0 0 0 3px rgba(96,165,250,.18),
        0 10px 28px rgba(0,0,0,.28) !important;
}

#cgs-team-message-send{
    background:linear-gradient(135deg,#2563eb,#1d4ed8) !important;
    color:#ffffff !important;
    border:1px solid rgba(147,197,253,.35) !important;
    border-radius:18px !important;
    box-shadow:0 12px 28px rgba(37,99,235,.35) !important;
    font-weight:900 !important;
    letter-spacing:.2px !important;
}

#cgs-team-message-send:hover{
    transform:translateY(-1px) !important;
    box-shadow:0 16px 34px rgba(37,99,235,.45) !important;
}

/* MOBILE CHAT POSITION FIX */

@media (max-width: 768px){

    

   

}
/* MOBILE TEAM CHAT LAYOUT */

@media (max-width:768px){

    .cgs-chat-modal{
   padding:80px 10px 6px 10px !important;
    align-items:flex-start !important;
}

    .cgs-chat-window{
        width:100% !important;
        height:calc(100vh - 165px) !important;
        padding:18px !important;
        border-radius:24px !important;
        overflow:hidden !important;
    }

    .cgs-chat-messages{
        flex:1 !important;
        overflow-y:auto !important;
        min-height:0 !important;
    }

    /* INPUT RIJ */

    .cgs-chat-input-row{
        display:block !important;
        padding:14px 0 0 0 !important;
    }

    #cgs-team-message-input{
        width:100% !important;
        height:68px !important;
        margin-bottom:12px !important;
        border-radius:18px !important;
        box-sizing:border-box !important;
    }

    /* KNOPPEN RIJ */

    .cgs-chat-extra-actions{
    display:grid !important;
    grid-template-columns:.9fr 1.4fr !important;
    gap:10px !important;
    padding:0 !important;
    margin-top:-6px !important;
    align-items:stretch !important;
}

    #cgs-team-message-send,
    .cgs-chat-extra-actions .cgs-team-comm-btn{
        width:100% !important;
        min-height:58px !important;
        border-radius:18px !important;
        font-size:16px !important;
    }

}


#cgs-team-message-send,
.cgs-chat-extra-actions .cgs-team-comm-btn{
    height:58px !important;
    min-height:58px !important;
    border-radius:18px !important;
    font-size:16px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    box-sizing:border-box !important;
    font-weight:900 !important;
}
/* VERSTUUR */

#cgs-team-message-send{
    width:100% !important;

    background:linear-gradient(135deg,#16a34a,#15803d) !important;
    border:1px solid rgba(187,247,208,.35) !important;
    color:#fff !important;

    box-shadow:0 10px 28px rgba(22,163,74,.35) !important;
}

/* FOTO */

.cgs-chat-extra-actions .cgs-team-comm-btn{
    width:100% !important;

    background:linear-gradient(135deg,#fdba74,#fb923c) !important;
    border:1px solid rgba(255,255,255,.18) !important;

    color:#fff !important;

    box-shadow:0 10px 24px rgba(251,146,60,.28) !important;
}
/* TEAM CHAT UNREAD BADGE */

.cgs-team-chat-button{
    position:relative !important;
}

.cgs-team-chat-badge{
    position:absolute !important;
    top:-8px !important;
    right:-8px !important;

    min-width:28px !important;
    height:28px !important;
    padding:0 8px !important;

    border-radius:999px !important;
    background:#dc2626 !important;
    color:#fff !important;

    display:none !important;
    align-items:center !important;
    justify-content:center !important;

    font-size:14px !important;
    font-weight:900 !important;

    box-shadow:0 8px 20px rgba(220,38,38,.45) !important;
}
.cgs-team-chat-badge.show{
    display:flex !important;
}
.cgs-team-chat-image{
    max-width:100% !important;
    border-radius:16px !important;
    display:block !important;
    margin-top:6px !important;
}
.cgs-team-chat-footer-actions{
    display:flex !important;
    align-items:stretch !important;
    gap:10px !important;
}

.cgs-cp-team-photo-btn,
.cgs-team-chat-send{
    height:54px !important;
    min-height:54px !important;
    max-height:54px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:14px !important;
}

.cgs-cp-team-photo-btn{
    width:90px !important;
    height:54px !important;
    padding:0 !important;

    background:#ff9800 !important;
}

.cgs-team-chat-send{
    width:150px !important;
    background:#1fa34a !important;
}

/* FOTO */
.cgs-team-chat-photo-btn{
    background:#ff9800 !important;
    border:none;
    color:#fff;
    font-weight:800;

    min-width:95px;
    height:54px;

    padding:0 18px;

    border-radius:14px;
    cursor:pointer;
    font-size:15px;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:
        0 6px 18px rgba(255,152,0,.35);
}

/* VERSTUUR */
.cgs-team-chat-send{
    background:#1fa34a !important;
    border:none;
    color:#fff;
    font-weight:900;

    min-width:135px;
    height:54px;

    padding:0 28px;

    border-radius:14px;
    cursor:pointer;
    font-size:16px;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:
        0 8px 24px rgba(31,163,74,.35);
}
.cgs-team-chat-footer-actions{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;

    padding-top:8px !important;
}
/* COMM TILE BUTTONS GELIJKTREKKEN */

.cgs-cp-team-actions .cgs-cp-btn{
    background:transparent !important;
    border:2px solid rgba(255,255,255,.35) !important;
    color:#fff !important;

    border-radius:18px !important;

    min-height:56px !important;

    font-weight:800 !important;

    transition:all .2s ease;
}

.cgs-cp-team-actions .cgs-cp-btn:hover{
    background:rgba(255,255,255,.08) !important;
    border-color:rgba(255,255,255,.55) !important;
}
/* QR knop = oranje */

.cgs-cp-team-actions .js-team-qr{
    border-color:#ff9f1a !important;
}

.cgs-cp-team-actions .js-team-qr:hover{
    background:rgba(255,159,26,.12) !important;
    box-shadow:0 0 18px rgba(255,159,26,.35);
}


/* Chat knop = groen */

.cgs-cp-team-actions .js-team-chat{
    border-color:#22c55e !important;
}

.cgs-cp-team-actions .js-team-chat:hover{
    background:rgba(34,197,94,.12) !important;
    box-shadow:0 0 18px rgba(34,197,94,.35);
}
/* Einde dienst knop = rode outline */

.cgs-cp-team-actions .js-end-team{
    border:2px solid #ef4444 !important;
    color:#fff !important;
}

.cgs-cp-team-actions .js-end-team:hover{
    background:rgba(239,68,68,.12) !important;
    box-shadow:0 0 18px rgba(239,68,68,.35);
}








/* =========================================
   NIEUW TEAM FORM MODERN
========================================= */

.cgs-cp-team-form{
    background:linear-gradient(145deg,#13213b,#1a2744) !important;

    border:1px solid rgba(255,255,255,.08);

    border-radius:26px !important;

    padding:28px !important;

    margin-top:22px !important;

    box-shadow:
        0 18px 50px rgba(0,0,0,.28);
}

/* Titel */

.cgs-cp-team-form-title{
    font-size:28px !important;
    font-weight:900 !important;
    color:#fff !important;

    margin-bottom:24px !important;
}

/* Labels */

.cgs-cp-team-form label{
    color:#dbe7ff !important;
    font-weight:700 !important;
    margin-bottom:8px !important;
    display:block;
}

/* Inputs */

.cgs-cp-team-form input{
   background:rgba(255,255,255,.08) !important;

    border:2px solid rgba(255,255,255,.12) !important;

    color:#fff !important;

    border-radius:16px !important;

    min-height:54px !important;

    padding:0 16px !important;

    transition:all .2s ease;
}

.cgs-cp-team-form input:focus{
    border-color:#3b82f6 !important;

    box-shadow:
        0 0 18px rgba(59,130,246,.25);

    outline:none !important;
}

/* Placeholder */

.cgs-cp-team-form input::placeholder{
    color:rgba(255,255,255,.35);
}

/* Knoppen */

.cgs-cp-team-form .cgs-cp-btn{
    background:transparent !important;

    border:2px solid rgba(255,255,255,.35) !important;

    color:#fff !important;

    border-radius:18px !important;

    min-height:56px !important;

    padding:0 24px !important;

    font-weight:800 !important;

    transition:all .2s ease;
}

.cgs-cp-team-form .cgs-cp-btn:hover{
    background:rgba(255,255,255,.08) !important;

    border-color:rgba(255,255,255,.55) !important;
}

/* Toevoegen knop groen */

.cgs-cp-team-form #tf-save{
    border-color:#22c55e !important;
}

.cgs-cp-team-form #tf-save:hover{
    background:rgba(34,197,94,.12) !important;

    box-shadow:
        0 0 18px rgba(34,197,94,.35);
}

/* Sluiten knop rood */

.cgs-cp-team-form #tf-cancel{
    border-color:#ef4444 !important;
}

.cgs-cp-team-form #tf-cancel:hover{
    background:rgba(239,68,68,.12) !important;

    box-shadow:
        0 0 18px rgba(239,68,68,.35);
}
/* Mobiele teamchat berichttekst groter */

.cgs-chat-msg-text{
    font-size:18px !important;
    line-height:1.45 !important;
}
/* Mobiel: CP oranje / team wit */

@media (max-width:768px){

    /* CP = blauwe bubble */
    .cgs-chat-msg.cp-message{
        background:#162454 !important;
        border:1px solid rgba(255,255,255,.08) !important;
    }

    /* Team = donkere bubble */
    .cgs-chat-msg.team-message{
        background:#020817 !important;
        border:1px solid rgba(255,255,255,.08) !important;
    }

    /* CP naam = fel oranje */
    .cgs-chat-msg.cp-message .cgs-chat-msg-head span{
        color:#ff7b00 !important;
        font-weight:900 !important;
        text-shadow:0 0 10px rgba(255,123,0,.45) !important;
    }

    /* Team naam = donkerder grijs */
    .cgs-chat-msg.team-message .cgs-chat-msg-head span{
        color:#9ca3af !important;
        font-weight:900 !important;
    }

}
@media (max-width:768px){

    .cgs-team-comm-app{
        background:transparent !important;
        min-height:auto !important;
        padding:10px !important;
    }

    .cgs-team-comm-card{
        max-width:100% !important;
        margin:0 auto !important;
    }

    /* HEADER TILE */
    .cgs-team-comm-header{
        background:linear-gradient(135deg,#16213e,#0f172a) !important;

        border-radius:22px !important;

        padding:18px 20px !important;

        margin-bottom:12px !important;

        box-shadow:0 8px 24px rgba(0,0,0,.22) !important;
    }

    /* CHAT TILE */
    .cgs-team-comm-panel{
        background:transparent !important;
        min-height:auto !important;
        padding:0 !important;
        box-shadow:none !important;
    }

    .cgs-team-comm-actions{
        gap:0 !important;
    }

    .cgs-team-chat-button{
        width:100% !important;

        min-height:60px !important;

        border-radius:18px !important;

        font-size:18px !important;

        font-weight:900 !important;

        background:linear-gradient(135deg,#2563eb,#1d4ed8) !important;

        box-shadow:0 8px 20px rgba(37,99,235,.30) !important;
    }

    /* Titel kleiner */
    .cgs-team-comm-header h2,
    .cgs-team-comm-header .team-name{
        margin:0 !important;
    }

    /* placeholder weg */
    .cgs-team-comm-feed{
        display:none !important;
    }
}
/* CENTRALIST GLASS MODAL */

#cgs-centralist-modal{
    position:fixed;
    inset:0;
    z-index:1000002;
    display:none;
}

.cgs-centralist-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.68);
    backdrop-filter:blur(8px);
}

.cgs-centralist-card{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);

    width:min(92vw,460px);

    background:linear-gradient(145deg, rgba(15,23,42,.92), rgba(30,41,59,.78));
    border:1px solid rgba(255,255,255,.18);
    border-radius:28px;

    padding:28px;

    color:#fff;

    box-shadow:
        0 25px 80px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.12);
}

.cgs-centralist-title{
    font-size:30px;
    font-weight:900;
    margin-bottom:8px;
}

.cgs-centralist-sub{
    color:#cbd5e1;
    font-weight:700;
    margin-bottom:20px;
}

#cgs-centralist-input{
    width:100%;
    min-height:58px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.10);
    color:#fff;
    padding:0 16px;
    font-size:20px;
    font-weight:800;
    box-sizing:border-box;
    outline:none;
}

#cgs-centralist-input:focus{
    border-color:#60a5fa;
    box-shadow:0 0 0 4px rgba(96,165,250,.18);
}

.cgs-centralist-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:22px;
}

#cgs-centralist-cancel{
    background:transparent !important;
    border:2px solid #ef4444 !important;
    color:#fff !important;
}

#cgs-centralist-save{
    background:transparent !important;
    border:2px solid #22c55e !important;
    color:#fff !important;
}
#cgs-cp-team-sound-test{

    background:
        linear-gradient(145deg, #172033, #314563) !important;

    border: 1px solid rgba(255,255,255,.10) !important;

    color: #ffffff !important;

    border-radius: 14px !important;

    min-height: 56px !important;

    padding: 12px 22px !important;

    font-family: 'Syne', Helvetica, Arial, sans-serif !important;

    font-weight: 800 !important;

    letter-spacing: .2px !important;

    box-shadow:
        0 10px 24px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.06) !important;

    transition: all .2s ease !important;
}

#cgs-cp-team-sound-test:hover{

    transform: translateY(-2px);

    box-shadow:
        0 16px 28px rgba(0,0,0,.28),
        0 0 14px rgba(59,130,246,.14) !important;
}

#cgs-cp-team-sound-test:disabled{

    opacity: 1 !important;

    background:
        linear-gradient(145deg, #172033, #314563) !important;

    color: #ffffff !important;
}


/* ===============================
   SETTINGS - CONTROL ROOM STYLE
================================ */

.cgs-settings-card{

    width:min(680px, 100%);
    margin:0 auto;

    padding:22px 24px;

    border-radius:24px;

    background:
        linear-gradient(
            145deg,
            #16233d,
            #223557
        );

    border:1px solid rgba(255,140,0,.28);

    box-shadow:
        0 12px 40px rgba(0,0,0,.22);

}

.cgs-settings-select{

    width:100%;

    max-width:360px;

    min-height:54px;

    border-radius:16px;

    background:#071225;

    border:1px solid rgba(255,140,0,.55);

    color:#fff;

    padding:0 18px;

    font-size:18px;

    font-weight:700;

    outline:none;

}

.cgs-settings-select:focus{

    border-color:#ff9f1a;

    box-shadow:
        0 0 0 4px rgba(255,159,26,.12);

}

.cgs-settings-label{

    display:block;

    color:#fff;

    font-size:17px;

    font-weight:800;

    margin-bottom:10px;

}

.cgs-settings-hint{

    color:rgba(255,255,255,.78);

    font-size:14px;

    margin-top:10px;

    line-height:1.5;

}

.cgs-settings-divider{

    height:1px;

    background:rgba(255,255,255,.08);

    margin:26px 0;

}

.cgs-settings-card{
    width: 582px !important;
    max-width: 100% !important;
}

.cgs-settings-select,
#cgs-cp-sound-select,
#cgs-cp-team-sound-select{
    border: 1.5px solid rgba(255,159,26,.75) !important;
}

.cgs-settings-select:focus,
#cgs-cp-sound-select:focus,
#cgs-cp-team-sound-select:focus{
    border-color: #ff9f1a !important;
    box-shadow: 0 0 0 4px rgba(255,159,26,.16) !important;
}
#cgs-cp-sound-test{

    border:1.5px solid rgba(255,70,70,.75)!important;

    box-shadow:
        0 0 0 1px rgba(255,70,70,.12),
        0 10px 24px rgba(0,0,0,.20)!important;

}

#cgs-cp-sound-test:hover{

    border-color:#ff4d4d!important;

    box-shadow:
        0 0 0 4px rgba(255,77,77,.14),
        0 10px 24px rgba(0,0,0,.22)!important;

}

#cgs-cp-team-sound-test{

    border:1.5px solid rgba(34,197,94,.75)!important;

    box-shadow:
        0 0 0 1px rgba(34,197,94,.10),
        0 10px 24px rgba(0,0,0,.20)!important;

}

#cgs-cp-team-sound-test:hover{

    border-color:#22c55e!important;

    box-shadow:
        0 0 0 4px rgba(34,197,94,.14),
        0 10px 24px rgba(0,0,0,.22)!important;

}

button#cgs-cp-team-sound-test{

    border:1.5px solid rgba(34,197,94,.75)!important;

    box-shadow:
        0 0 0 1px rgba(34,197,94,.10),
        0 10px 24px rgba(0,0,0,.20)!important;

}
/* ==============================
   DIENST AFSLUITEN - HUISSTIJL
============================== */

#tile-content .cgs-cp-panel-title {
  font-size: 26px;
  font-weight: 900;
  color: #243044;
  margin-bottom: 10px;
}

#tile-content .cgs-cp-hint {
  color: #5f6673;
  font-size: 15px;
  margin-bottom: 18px;
}

#tile-content .cgs-cp-field {
  max-width: 580px;
  background: linear-gradient(145deg, #172033, #24344d);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: 22px 24px;
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
  margin-bottom: 18px;
}

#tile-content .cgs-cp-field label {
  display: block;
  color: #ffffff;
  font-size: 17px;
  font-weight: 900;
  margin-bottom: 10px;
}

#close-confirm {
  width: 100%;
  min-height: 54px;
  background: #0b1220;
  color: #ffffff;
  border: 1.5px solid rgba(245,158,11,.85);
  border-radius: 16px;
  padding: 0 16px;
  font-size: 17px;
  font-weight: 800;
  outline: none;
  box-shadow: 0 0 0 3px rgba(245,158,11,.12);
}

#close-confirm:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245,158,11,.20);
}

#close-shift {
  background: linear-gradient(145deg,#172033,#314563) !important;
  border: 1.5px solid rgba(239,68,68,.85) !important;
  color: #ffffff !important;

  border-radius: 14px !important;

  min-height: 56px !important;

  padding: 12px 22px !important;

  font-weight: 800 !important;

  box-shadow:
    0 10px 24px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.06) !important;

  transition: all .18s ease;
}

#close-shift:hover {
  transform: translateY(-1px);

  box-shadow:
    0 14px 28px rgba(0,0,0,.26),
    0 0 12px rgba(239,68,68,.28),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}
/* =========================
   CLOSE SHIFT ERROR EFFECT
========================= */

#close-confirm.error {
  border-color: #ef4444 !important;
  color: #ef4444 !important;

  animation: cgsShake .28s linear;
}

@keyframes cgsShake {

  0%   { transform: translateX(0); }

  20%  { transform: translateX(-6px); }

  40%  { transform: translateX(6px); }

  60%  { transform: translateX(-5px); }

  80%  { transform: translateX(5px); }

  100% { transform: translateX(0); }

}
.cgs-cp-report-btn{
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}

/* QUICK MANAGER POPUP - nette uitlijning */
#cgs-quick-manager-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
}

.cgs-quick-modal-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,.62) !important;
    backdrop-filter: blur(7px) !important;
}

.cgs-quick-modal-card {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(94vw, 920px) !important;
    max-height: 88vh !important;
    overflow-y: auto !important;

    background: linear-gradient(145deg,#172033,#24344d) !important;
    color: #fff !important;
    border-radius: 26px !important;
    padding: 28px !important;
    box-shadow: 0 24px 80px rgba(0,0,0,.45) !important;
}

.cgs-quick-modal-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 20px !important;
    margin-bottom: 24px !important;
}

.cgs-quick-modal-title {
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
}

.cgs-quick-modal-sub {
    margin-top: 8px !important;
    color: #d8dee8 !important;
    font-size: 15px !important;
}

#cgs-close-quick-manager {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    background: #0b1220 !important;
    color: #fff !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.cgs-quick-edit-row {
    display: grid !important;
    grid-template-columns: 130px 1fr 1fr 1.4fr 110px !important;
    gap: 12px !important;
    align-items: center !important;

    background: rgba(11,18,32,.62) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 18px !important;
    padding: 14px !important;
    margin-bottom: 12px !important;
}

.cgs-quick-edit-title {
    font-weight: 900 !important;
    color: #fff !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

.cgs-quick-edit-row input,
.cgs-quick-edit-row textarea,
.cgs-quick-edit-row select {
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    border: 1px solid rgba(245,158,11,.8) !important;
    background: #0b1220 !important;
    color: #fff !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
}

.cgs-quick-edit-row textarea {
    resize: none !important;
    min-height: 48px !important;
    height: 48px !important;
    padding-top: 12px !important;
    overflow: hidden !important;
    padding-top: 18px !important;
line-height: 1.3 !important;
}

.cgs-quick-edit-row input::placeholder,
.cgs-quick-edit-row textarea::placeholder {
    color: rgba(255,255,255,.55) !important;
}

.cgs-quick-modal-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin-top: 22px !important;
}
/* Opslaan knop groen accent */
#cgs-save-quick-alarms{

    border:2px solid #22c55e !important;

    background:
        linear-gradient(145deg, #172033, #314563) !important;

    color:#ffffff !important;

    box-shadow:
        0 0 0 1px rgba(34,197,94,.12),
        0 10px 24px rgba(0,0,0,.20) !important;
}

#cgs-save-quick-alarms:hover{

    border-color:#22c55e !important;

    box-shadow:
        0 0 0 4px rgba(34,197,94,.14),
        0 10px 24px rgba(0,0,0,.22) !important;

    transform:translateY(-1px);
}
/* Annuleren knop rood accent */
#cgs-cancel-quick-manager{

    border:2px solid #ef4444 !important;

    background:
        linear-gradient(145deg, #172033, #314563) !important;

    color:#ffffff !important;

    box-shadow:
        0 0 0 1px rgba(239,68,68,.12),
        0 10px 24px rgba(0,0,0,.20) !important;
}

#cgs-cancel-quick-manager:hover{

    border-color:#ef4444 !important;

    box-shadow:
        0 0 0 4px rgba(239,68,68,.14),
        0 10px 24px rgba(0,0,0,.22) !important;

    transform:translateY(-1px);
}
/* Mobiel/tablet */
@media (max-width: 850px) {
    .cgs-quick-edit-row {
        grid-template-columns: 1fr !important;
    }

    .cgs-quick-edit-title {
        margin-bottom: 4px !important;
    }
}
#cgs-close-quick-manager {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:1 !important;
    font-family:Arial !important;
}

#cgs-close-quick-manager::before {
    content:"" !important;
    font-size:22px !important;
    font-weight:900 !important;
}
.cgs-quick-hidden{
    display:none !important;
}

#cgs-quick-manager-modal.cgs-quick-hidden{
    display:none !important;
}
#cgs-quick-manager-modal.cgs-quick-open{
    display:block !important;
}
/* FORCE FIX - SNELMELDINGEN POPUP */
#cgs-quick-manager-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
}

#cgs-quick-manager-modal .cgs-quick-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.65) !important;
    backdrop-filter: blur(7px) !important;
}

#cgs-quick-manager-modal .cgs-quick-modal-card {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(94vw, 1050px) !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    background: linear-gradient(145deg,#172033,#24344d) !important;
    color: #fff !important;
    border-radius: 26px !important;
    padding: 28px !important;
    box-shadow: 0 24px 80px rgba(0,0,0,.45) !important;
}

#cgs-quick-manager-modal .cgs-quick-edit-row {
    display: grid !important;
    grid-template-columns: 120px 1fr 1fr 1.3fr 100px !important;
    gap: 10px !important;
    align-items: center !important;
    margin-bottom: 12px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    background: rgba(11,18,32,.65) !important;
}

#cgs-quick-manager-modal input,
#cgs-quick-manager-modal textarea,
#cgs-quick-manager-modal select {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(245,158,11,.85) !important;
    background: #0b1220 !important;
    color: #fff !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
}

#cgs-quick-manager-modal textarea {
    resize: none !important;
    overflow: hidden !important;

    height: 46px !important;
    min-height: 46px !important;

    padding-top: 11px !important;
    padding-bottom: 0 !important;

    line-height: 1.2 !important;
}

#cgs-quick-manager-modal .cgs-quick-edit-title {
    font-size: 14px !important;
    font-weight: 900 !important;
    color: #fff !important;
    white-space: nowrap !important;
}

#cgs-close-quick-manager {
    font-size: 0 !important;
}

#cgs-close-quick-manager {
    font-size: 32px !important;
    color: #fff !important;
    font-family: Arial, sans-serif !important;
    line-height: 1 !important;
}

#cgs-close-quick-manager::before {
    content: none !important;
}
/* SNELMELDINGEN POPUP - onder vaste header */
#cgs-quick-manager-modal .cgs-quick-modal-card {
    top: calc(50% + 45px) !important;
    max-height: calc(88vh - 90px) !important;
}






/* =========================================
   ALLEEN GROTE DOCENT DASHBOARD KNOPPEN
========================================= */

/* grote dashboard knoppen */
.cgs-cp-box > .cgs-cp-btn:not(.cgs-cp-btn-small),
.cgs-cp-box .cgs-cp-btn-wide:not(.cgs-cp-btn-small){

    background:
        linear-gradient(145deg, #172033, #314563) !important;

    border: 1px solid rgba(255,255,255,.10) !important;

    color: #ffffff !important;

    border-radius: 14px !important;

    min-height: 56px !important;

    padding: 12px 22px !important;

    font-family: 'Syne', Helvetica, Arial, sans-serif !important;

    font-weight: 800 !important;

    letter-spacing: .2px !important;

    box-shadow:
        0 10px 24px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.06);

    transition: all .2s ease !important;
}


/* hover */
.cgs-cp-box > .cgs-cp-btn:not(.cgs-cp-btn-small):hover,
.cgs-cp-box .cgs-cp-btn-wide:not(.cgs-cp-btn-small):hover{

    transform: translateY(-2px);

    box-shadow:
        0 16px 28px rgba(0,0,0,.28),
        0 0 14px rgba(59,130,246,.14);
}
/* =========================================
   DOCENT MOBIEL - SPECIFIEKE KNOPPEN FIX
   Raakt NIET de tabelknoppen Deelnemen/Rapportage/Verwijder
========================================= */

/* VERNIEUWEN KNOP */
#alarm-refresh{

    background:
        linear-gradient(145deg, #172033, #314563) !important;

    border: 1px solid rgba(255,255,255,.10) !important;

    color: #ffffff !important;

    border-radius: 14px !important;

    min-height: 56px !important;

    padding: 12px 22px !important;

    font-family: 'Syne', Helvetica, Arial, sans-serif !important;

    font-weight: 800 !important;

    letter-spacing: .2px !important;

    box-shadow:
        0 10px 24px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.06) !important;

    transition: all .2s ease !important;
}

#alarm-refresh:hover{

    transform: translateY(-2px);

    box-shadow:
        0 16px 28px rgba(0,0,0,.28),
        0 0 14px rgba(59,130,246,.14) !important;
}


/* SNELMELDINGEN BLOK */
.cgs-cp-quick-grid{

    display: flex !important;

    flex-wrap: wrap !important;

    gap: 10px !important;

    align-items: center !important;

    margin-top: 8px !important;
}


/* SNELMELDING KNOPPEN */
.cgs-cp-quick-btn{

    background:
        linear-gradient(145deg, #172033, #314563) !important;

    border: 1px solid rgba(255,255,255,.10) !important;

    color: #ffffff !important;

    border-radius: 12px !important;

    min-height: 48px !important;

    padding: 10px 18px !important;

    font-family: 'Syne', Helvetica, Arial, sans-serif !important;

    font-weight: 800 !important;

    letter-spacing: .2px !important;

    box-shadow:
        0 8px 18px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.06) !important;

    transition: all .2s ease !important;
}

.cgs-cp-quick-btn:hover{

    transform: translateY(-2px);

    box-shadow:
        0 12px 24px rgba(0,0,0,.24),
        0 0 12px rgba(59,130,246,.12) !important;
}


/* MOBIEL */
@media (max-width: 768px){

    #alarm-refresh{
        width: auto !important;
        min-width: 178px !important;
    }

    .cgs-cp-quick-grid{
        gap: 8px !important;
    }

    .cgs-cp-quick-btn{
        flex: 0 1 auto !important;
        min-width: 108px !important;
        margin: 0 !important;
    }
}

/* =========================================
   DOCENT DASHBOARD - ALARM FORM VELDEN MODERN
========================================= */

.cgs-cp-teacher-dashboard label,
.cgs-cp-box label{
    font-family: 'Syne', Helvetica, Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #172033 !important;
    margin-bottom: 10px !important;
}

/* Selects + titelveld + tekstveld */
#alarm-shift-select,
#alarm-prio,
#alarm-title,
#alarm-message{
    width: 100% !important;

    background:
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;

    border: 1.5px solid rgba(23,32,51,.18) !important;

    color: #172033 !important;

    border-radius: 16px !important;

    padding: 0 18px !important;

    font-family: 'Syne', Helvetica, Arial, sans-serif !important;

    font-size: 16px !important;

    font-weight: 700 !important;

    box-shadow:
        0 8px 20px rgba(15,23,42,.06),
        inset 0 1px 0 rgba(255,255,255,.90) !important;

    outline: none !important;

    transition: all .2s ease !important;
}

/* Hoogtes */
#alarm-shift-select,
#alarm-prio,
#alarm-title{
    min-height: 54px !important;
}

#alarm-message{
    min-height: 150px !important;
    padding-top: 16px !important;
    resize: vertical !important;
}

/* Focus */
#alarm-shift-select:focus,
#alarm-prio:focus,
#alarm-title:focus,
#alarm-message:focus{
    border-color: rgba(59,130,246,.65) !important;

    box-shadow:
        0 0 0 4px rgba(59,130,246,.13),
        0 12px 26px rgba(15,23,42,.08),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* Placeholder */
#alarm-title::placeholder,
#alarm-message::placeholder{
    color: rgba(23,32,51,.45) !important;
    font-weight: 700 !important;
}

/* Prio select niet onnodig breed */
#alarm-prio{
    width: auto !important;
    min-width: 140px !important;
}

/* Ruimte tussen velden */
.cgs-cp-teacher-dashboard .cgs-cp-field{
    margin-bottom: 22px !important;
}

/* Mobiel iets compacter */
@media (max-width: 768px){

    .cgs-cp-teacher-dashboard label,
    .cgs-cp-box label{
        font-size: 17px !important;
    }

    #alarm-shift-select,
    #alarm-prio,
    #alarm-title{
        min-height: 50px !important;
    }

    #alarm-message{
        min-height: 135px !important;
    }
}

/* =========================================
   BESTAANDE CP OVERNEMEN + UITLOGGEN
   DEFINITIEVE SELECTORS UIT JOUW PLUGIN
========================================= */

/* CP overnemen blok */
#cgs-claim-code{
    width: 360px !important;
    max-width: 100% !important;
    min-height: 56px !important;

    margin: 0 24px 0 0 !important;

    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1.5px solid rgba(23,32,51,.18) !important;
    border-radius: 16px !important;

    color: #172033 !important;
    padding: 0 18px !important;

    font-family: 'Syne', Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;

    box-shadow:
        0 8px 20px rgba(15,23,42,.06),
        inset 0 1px 0 rgba(255,255,255,.90) !important;

    outline: none !important;
    transition: all .2s ease !important;
}

#cgs-claim-code:focus{
    border-color: rgba(59,130,246,.65) !important;
    box-shadow:
        0 0 0 4px rgba(59,130,246,.13),
        0 12px 26px rgba(15,23,42,.08),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
}

#cgs-claim-code::placeholder{
    color: rgba(23,32,51,.45) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
}

/* Koppel aan mij */
#cgs-claim-btn{
    margin-left: 0 !important;
}

/* Uitloggen knop */
#cgs-cp-teacher-logout{
    background: linear-gradient(145deg, #172033, #314563) !important;
    border: 1.5px solid rgba(239,68,68,.85) !important;
    color: #ffffff !important;

    border-radius: 14px !important;
    min-height: 52px !important;
    padding: 12px 22px !important;

    font-family: 'Syne', Helvetica, Arial, sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: .2px !important;

    box-shadow:
        0 0 0 1px rgba(239,68,68,.12),
        0 10px 24px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.06) !important;

    transition: all .2s ease !important;
}

#cgs-cp-teacher-logout:hover{
    transform: translateY(-2px);
    border-color:#ef4444 !important;
    box-shadow:
        0 0 0 4px rgba(239,68,68,.14),
        0 14px 28px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Mobiel */
@media (max-width: 768px){
    #cgs-claim-code{
        width: 100% !important;
        margin: 0 0 16px 0 !important;
    }

    #cgs-claim-btn{
        width: 100% !important;
    }

    #cgs-cp-teacher-logout{
        width: 100% !important;
        margin-top: 24px !important;
    }
}

/* =========================================
   SNELMELDINGEN BEHEREN POSITIE
========================================= */

#cgs-open-quick-manager{

    margin-top: 34px !important;

    margin-bottom: 34px !important;

    position: relative !important;

    z-index: 2;
}



/* =========================================
   SNELMELDINGEN CONTAINER
========================================= */

.cgs-cp-quick-grid{

    display:flex !important;

    flex-wrap:wrap !important;

    gap:14px !important;

    margin-top:16px !important;

    align-items:flex-start !important;
}



/* =========================================
   SNELMELDING KNOPPEN
========================================= */

.cgs-cp-quick-btn{

    min-height:52px !important;

    padding:12px 20px !important;

    border-radius:12px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;
}



/* =========================================
   MOBIEL
========================================= */

@media(max-width:768px){

    /* beheer knop meer ademruimte */
    #cgs-open-quick-manager{

        margin-top: 38px !important;

        margin-bottom: 30px !important;
    }

    /* snelmeldingen onder elkaar */
    .cgs-cp-quick-grid{

        flex-direction:column !important;

        gap:12px !important;

        width:100% !important;
    }

    /* knoppen volledige breedte */
    .cgs-cp-quick-btn{

        width:100% !important;

        min-height:56px !important;

        margin:0 !important;
    }
}

/* =========================================
   MOBIEL - SNELMELDINGEN BEHEREN KNOP
   CENTREREN
========================================= */

@media(max-width:768px){

    #cgs-open-quick-manager{

        display:flex !important;

        justify-content:center !important;

        align-items:center !important;

        margin-left:auto !important;

        margin-right:auto !important;
    }
}
/* =========================================
   CODE OVERZICHT INKLAPBAAR
========================================= */

.cgs-code-collapse-box{
    overflow:hidden !important;
}

.cgs-code-toggle{
    width:100% !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    background:
        linear-gradient(145deg, #172033, #314563) !important;

    border:1.5px solid rgba(255,159,26,.75) !important;

    color:#ffffff !important;

    border-radius:14px !important;

    min-height:58px !important;

    padding:12px 20px !important;

    font-family:'Syne', Helvetica, Arial, sans-serif !important;
    font-size:18px !important;
    font-weight:900 !important;

    box-shadow:
        0 10px 24px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.06) !important;

    cursor:pointer !important;

    transition:all .2s ease !important;
}

.cgs-code-toggle:hover{
    transform:translateY(-2px);

    box-shadow:
        0 0 0 4px rgba(255,159,26,.14),
        0 14px 28px rgba(0,0,0,.26) !important;
}

#cgs-code-toggle-icon{
    width:34px;
    height:34px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:999px;

    background:rgba(255,255,255,.12);

    font-size:28px;
    line-height:1;
    font-weight:900;
}

.cgs-code-collapse-content{
    display:none !important;

    padding-top:22px !important;
}

.cgs-code-collapse-box.open .cgs-code-collapse-content{
    display:block !important;
}

/* Mobiel */
@media(max-width:768px){

    .cgs-code-toggle{
        min-height:56px !important;
        font-size:17px !important;
    }

    .cgs-code-collapse-content{
        padding-top:18px !important;
    }
}
/* =========================================
   ALARMMELDING STUREN INKLAPBAAR
========================================= */

.cgs-alarm-collapse-box{
    overflow:hidden !important;
}

.cgs-alarm-toggle{
    width:100% !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    background:
        linear-gradient(145deg, #172033, #314563) !important;

    border:1.5px solid rgba(255,159,26,.75) !important;

    color:#ffffff !important;

    border-radius:14px !important;

    min-height:58px !important;

    padding:12px 20px !important;

    font-family:'Syne', Helvetica, Arial, sans-serif !important;
    font-size:18px !important;
    font-weight:900 !important;

    box-shadow:
        0 10px 24px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.06) !important;

    cursor:pointer !important;

    transition:all .2s ease !important;
}

.cgs-alarm-toggle:hover{
    transform:translateY(-2px);

    box-shadow:
        0 0 0 4px rgba(255,159,26,.14),
        0 14px 28px rgba(0,0,0,.26) !important;
}

#cgs-alarm-toggle-icon{
    width:34px;
    height:34px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:999px;

    background:rgba(255,255,255,.12);

    font-size:28px;
    line-height:1;
    font-weight:900;
}

.cgs-alarm-collapse-content{
    display:none !important;

    padding-top:22px !important;
}

.cgs-alarm-collapse-box.open .cgs-alarm-collapse-content{
    display:block !important;
}

/* Snelmeldingen beheren binnen uitgeklapt alarmblok */
.cgs-alarm-collapse-content #cgs-open-quick-manager{
    margin-top:28px !important;
    margin-bottom:6px !important;
}

/* Mobiel */
@media(max-width:768px){

    .cgs-alarm-toggle{
        min-height:56px !important;
        font-size:17px !important;
    }

    .cgs-alarm-collapse-content{
        padding-top:18px !important;
    }

    .cgs-alarm-collapse-content #cgs-open-quick-manager{
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;

        margin-left:auto !important;
        margin-right:auto !important;

        margin-top:26px !important;
        margin-bottom:8px !important;
    }
}
/* =========================================
   ALARMBLOK - VERZENDEN + BEHEREN ZELFDE STIJL
========================================= */

#send-alarm,
#cgs-open-quick-manager{
    background:
        linear-gradient(145deg, #172033, #314563) !important;

    border: 1px solid rgba(255,255,255,.10) !important;

    color: #ffffff !important;

    border-radius: 14px !important;

    min-height: 56px !important;

    padding: 12px 22px !important;

    font-family: 'Syne', Helvetica, Arial, sans-serif !important;

    font-weight: 800 !important;

    letter-spacing: .2px !important;

    box-shadow:
        0 10px 24px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.06) !important;

    transition: all .2s ease !important;
}

#send-alarm:hover,
#cgs-open-quick-manager:hover{
    transform: translateY(-2px);

    box-shadow:
        0 16px 28px rgba(0,0,0,.28),
        0 0 14px rgba(59,130,246,.14),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Snelmeldingen beheren iets breder zoals dashboardknop */
#cgs-open-quick-manager{
    min-width: 320px !important;
}

/* Mobiel netjes gecentreerd */
@media(max-width:768px){

    #send-alarm,
    #cgs-open-quick-manager{
        width: 100% !important;
        max-width: 320px !important;

        display:flex !important;
        justify-content:center !important;
        align-items:center !important;

        margin-left:auto !important;
        margin-right:auto !important;
    }
}
/* =========================================
   VERZENDEN KNOP DEFINITIEVE ECHTE SELECTOR
========================================= */

#alarm-send{

    background:
        linear-gradient(145deg, #172033, #314563) !important;

    border: 1px solid rgba(255,255,255,.10) !important;

    color: #ffffff !important;

    border-radius: 14px !important;

    min-height: 56px !important;

    padding: 12px 22px !important;

    font-family: 'Syne', Helvetica, Arial, sans-serif !important;

    font-size: 16px !important;

    font-weight: 800 !important;

    letter-spacing: .2px !important;

    box-shadow:
        0 10px 24px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.06) !important;

    transition: all .2s ease !important;
}

#alarm-send:hover{

    transform: translateY(-2px);

    box-shadow:
        0 16px 28px rgba(0,0,0,.28),
        0 0 14px rgba(59,130,246,.14),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}
/* =========================================
   CODE OVERZICHT ZOEKVELD MODERN
========================================= */

#cgs-shift-search{

    width:100% !important;

    max-width:320px !important;

    min-height:56px !important;

    background:
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;

    border:1.5px solid rgba(23,32,51,.18) !important;

    border-radius:16px !important;

    color:#172033 !important;

    padding:0 18px !important;

    font-family:'Syne', Helvetica, Arial, sans-serif !important;

    font-size:16px !important;

    font-weight:700 !important;

    box-shadow:
        0 8px 20px rgba(15,23,42,.06),
        inset 0 1px 0 rgba(255,255,255,.90) !important;

    outline:none !important;

    transition:all .2s ease !important;
}


/* Focus */

#cgs-shift-search:focus{

    border-color:rgba(59,130,246,.65) !important;

    box-shadow:
        0 0 0 4px rgba(59,130,246,.13),
        0 12px 26px rgba(15,23,42,.08),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
}


/* Placeholder */

#cgs-shift-search::placeholder{

    color:rgba(23,32,51,.45) !important;

    font-weight:700 !important;
}


/* Mobiel */

@media(max-width:768px){

    #cgs-shift-search{

        max-width:100% !important;
    }
}
/* =========================================
   MOBIEL FIX - SNELMELDINGEN BEHEREN
========================================= */

@media(max-width:768px){

    #cgs-open-quick-manager{

        width:auto !important;

        max-width:320px !important;

        min-width:unset !important;

        display:flex !important;

        justify-content:center !important;

        align-items:center !important;

        margin-left:auto !important;

        margin-right:auto !important;

        padding-left:26px !important;

        padding-right:26px !important;
    }
}
/* Oranje rand voor Snelmeldingen beheren */

/* Fellere + dikkere oranje rand */

#cgs-open-quick-manager{

    border:2.5px solid #ff9f1a !important;

    box-shadow:
        0 0 0 1px rgba(255,159,26,.16),
        0 10px 24px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.06) !important;
}

#cgs-open-quick-manager:hover{

    border-color:#ffb347 !important;

    box-shadow:
        0 0 0 5px rgba(255,159,26,.18),
        0 16px 28px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}
/* =========================================
   MOBIEL FIX - SNELMELDINGEN BEHEREN POPUP
========================================= */

@media(max-width:768px){

    #cgs-quick-manager-modal .cgs-quick-modal-card{
        width: calc(100vw - 28px) !important;
        max-width: calc(100vw - 28px) !important;

        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;

        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;

        padding: 22px !important;
        border-radius: 24px !important;

        box-sizing: border-box !important;
    }

    #cgs-quick-manager-modal .cgs-quick-modal-head{
        align-items: flex-start !important;
        gap: 14px !important;
        margin-bottom: 22px !important;
    }

    #cgs-quick-manager-modal .cgs-quick-modal-title{
        font-size: 34px !important;
        line-height: 1.08 !important;
        max-width: 250px !important;
    }

    #cgs-quick-manager-modal .cgs-quick-modal-sub{
        font-size: 17px !important;
        line-height: 1.55 !important;
        max-width: 260px !important;
    }

    #cgs-close-quick-manager{
        width: 58px !important;
        min-width: 58px !important;
        height: 58px !important;
        border-radius: 18px !important;
        font-size: 34px !important;
        flex: 0 0 58px !important;
    }

    /* Elke snelmelding wordt op mobiel een nette kaart */
    #cgs-quick-manager-modal .cgs-quick-edit-row{
        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 12px !important;

        padding: 18px !important;
        margin-bottom: 16px !important;

        border-radius: 22px !important;

        background: rgba(11,18,32,.72) !important;

        box-sizing: border-box !important;
    }

    #cgs-quick-manager-modal .cgs-quick-edit-title{
        font-size: 18px !important;
        margin-bottom: 2px !important;
        white-space: normal !important;
    }

    #cgs-quick-manager-modal input,
    #cgs-quick-manager-modal textarea,
    #cgs-quick-manager-modal select{
        width: 100% !important;
        max-width: 100% !important;

        height: 54px !important;
        min-height: 54px !important;

        border-radius: 16px !important;

        padding: 0 14px !important;

        font-size: 16px !important;
        line-height: 1.2 !important;

        box-sizing: border-box !important;
    }

    #cgs-quick-manager-modal textarea{
        height: 74px !important;
        min-height: 74px !important;
        padding: 14px !important;
        resize: vertical !important;
        overflow: auto !important;
    }

    #cgs-quick-manager-modal select{
        padding-right: 36px !important;
    }

    #cgs-quick-manager-modal .cgs-quick-modal-actions{
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-top: 20px !important;
    }

    #cgs-save-quick-alarms,
    #cgs-cancel-quick-manager{
        width: 100% !important;
        min-height: 56px !important;
    }
}
/* =========================================
   MOBIEL - BESTAANDE CP OVERNEMEN LOS VAN BOVENSTE TILE
========================================= */

@media(max-width:768px){

    .cgs-cp-box:has(#cgs-claim-code){
        margin-top: 28px !important;
    }

}
/* =========================================
   SNELMELDING VERZENDEN CONFIRM POPUP
========================================= */

#cgs-quick-send-confirm{
    position:fixed !important;
    inset:0 !important;
    z-index:1000008 !important;
}

.cgs-quick-send-overlay{
    position:absolute !important;
    inset:0 !important;

    background:rgba(0,0,0,.68) !important;
    backdrop-filter:blur(7px) !important;
}

.cgs-quick-send-card{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%, -50%) !important;

    width:min(92vw, 520px) !important;

    background:linear-gradient(145deg,#172033,#314563) !important;

    border:2.5px solid #ff9f1a !important;
    border-radius:28px !important;

    padding:30px !important;

    color:#fff !important;

    box-shadow:
        0 28px 80px rgba(0,0,0,.55),
        0 0 0 5px rgba(255,159,26,.10),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.cgs-quick-send-title{
    font-family:'Syne', Helvetica, Arial, sans-serif !important;
    font-size:30px !important;
    font-weight:900 !important;
    line-height:1.1 !important;
    margin-bottom:18px !important;
}

.cgs-quick-send-text{
    font-size:18px !important;
    line-height:1.65 !important;
    color:rgba(255,255,255,.82) !important;
    margin-bottom:28px !important;
}

.cgs-quick-send-text strong{
    color:#ffffff !important;
    font-weight:900 !important;
}

.cgs-quick-send-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:14px !important;
}

#cgs-quick-send-cancel{
    background:linear-gradient(145deg,#172033,#314563) !important;
    border:2px solid #ef4444 !important;
    color:#ffffff !important;
    border-radius:16px !important;
    min-height:56px !important;
    font-weight:900 !important;
}

#cgs-quick-send-yes{
    background:linear-gradient(145deg,#172033,#314563) !important;
    border:2px solid #22c55e !important;
    color:#ffffff !important;
    border-radius:16px !important;
    min-height:56px !important;
    font-weight:900 !important;
}

#cgs-quick-send-cancel:hover{
    transform:translateY(-2px) !important;

    box-shadow:
        0 0 0 4px rgba(239,68,68,.16),
        0 14px 30px rgba(0,0,0,.30) !important;
}

#cgs-quick-send-yes:hover{
    transform:translateY(-2px) !important;

    box-shadow:
        0 0 0 4px rgba(34,197,94,.16),
        0 14px 30px rgba(0,0,0,.30) !important;
}


/* Mobiel */
@media(max-width:768px){

    .cgs-quick-send-card{
        width:calc(100vw - 34px) !important;
        padding:24px !important;
        border-radius:24px !important;
    }

    .cgs-quick-send-title{
        font-size:26px !important;
    }

    .cgs-quick-send-text{
        font-size:17px !important;
    }

    .cgs-quick-send-actions{
        grid-template-columns:1fr !important;
    }
}

/* =========================================
   MOBIEL FIX - CONFIRM POPUP NIET TE BREED
========================================= */

@media(max-width:768px){

    .cgs-quick-send-card{
        width: calc(100vw - 64px) !important;
        max-width: 420px !important;
        box-sizing: border-box !important;

        padding: 24px 22px !important;

        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) translateY(-50%) !important;
    }

    .cgs-quick-send-title{
        font-size: 32px !important;
        line-height: 1.1 !important;
    }

    .cgs-quick-send-text{
        font-size: 17px !important;
        line-height: 1.55 !important;
    }

}
/* ================================
   MODERNE WIJZIG-POPUP GEPLAND ALARM
================================ */

.cgs-edit-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
}

.cgs-edit-modal-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, .72) !important;
    backdrop-filter: blur(10px) !important;
    z-index: 1 !important;
}

.cgs-edit-modal-card {
    position: relative !important;
    z-index: 2 !important;
    width: min(94vw, 580px) !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    background: linear-gradient(135deg, rgba(30,41,59,.96), rgba(15,23,42,.98)) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 26px !important;
    padding: 24px !important;
    box-shadow: 0 28px 90px rgba(0,0,0,.6) !important;
}

.cgs-edit-modal-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 22px !important;
}

.cgs-edit-modal-title {
    font-size: 24px !important;
    font-weight: 900 !important;
}

.cgs-edit-modal-sub {
    margin-top: 5px !important;
    color: #cbd5e1 !important;
    font-size: 14px !important;
}

.cgs-edit-modal-close {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    font-size: 26px !important;
    cursor: pointer !important;
}

.cgs-edit-date-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
}

.cgs-edit-modal-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-top: 20px !important;
}

@media (max-width: 600px) {
    .cgs-edit-date-row {
        grid-template-columns: 1fr !important;
    }

    .cgs-edit-modal-card {
        padding: 20px !important;
        border-radius: 22px !important;
    }

    .cgs-edit-modal-actions button {
        width: 100% !important;
    }
}
/* =========================================
   GEPLANDE ALARM TILES
========================================= */

.cgs-scheduled-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.cgs-scheduled-item{

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:18px;

    padding:18px;

    box-shadow:
        0 4px 12px rgba(0,0,0,.04);

    transition:.18s ease;
}

.cgs-scheduled-item:hover{

    border-color:#cbd5e1;

    box-shadow:
        0 8px 18px rgba(0,0,0,.06);

    transform:translateY(-1px);
}

.cgs-scheduled-main{
    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:8px;

    font-size:18px;
    font-weight:800;

    color:#111827;
}

.cgs-scheduled-main span{

    font-size:12px;
    font-weight:700;

    color:#d97706;

    background:#fff7ed;

    border:1px solid #fdba74;

    padding:4px 10px;

    border-radius:999px;
}

.cgs-scheduled-meta{

    color:#4b5563;

    font-size:14px;

    line-height:1.5;

    margin-bottom:14px;
}
/* =========================================
   SCHEDULE ALARM MODAL
========================================= */

.cgs-schedule-card{
    width:min(94vw,620px);
    max-height:90vh;
    overflow-y:auto;
    box-sizing:border-box;
    background:linear-gradient(135deg,#1e293b,#0f172a);
    color:#fff;
    border:1px solid rgba(255,255,255,.16);
    border-radius:26px;
    padding:26px;
    box-shadow:0 28px 90px rgba(0,0,0,.62);
    position:relative;
    z-index:2;
}

.cgs-schedule-title{
    font-size:30px;
    font-weight:900;
    margin-bottom:18px;
}

.cgs-schedule-summary{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:18px;
    margin-bottom:22px;
    line-height:1.7;
}

.cgs-schedule-subtitle{
    font-size:18px;
    font-weight:800;
    margin-bottom:12px;
    margin-top:10px;
}

.cgs-schedule-quick-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:22px;
}

/* Snel plannen knoppen blijven zoals eerder */
.cgs-schedule-quick{
    min-height:48px;
    padding:0 18px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.12);
    background:#273244;
    color:#fff;
    font-weight:800;
    cursor:pointer;
    transition:.2s ease;
}

.cgs-schedule-quick:hover{
    transform:translateY(-1px);
    border-color:#3b82f6;
}

.cgs-schedule-quick.selected{
    background:#2563eb;
    border-color:#60a5fa;
}




.cgs-schedule-grid input{
    min-height:54px;
    border-radius:15px;
    border:1px solid rgba(255,255,255,.12);
    background:#273244;
    color:#fff;
    padding:0 14px;
    box-sizing:border-box;
    color-scheme:dark;
}

.cgs-schedule-date-line{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    margin-top:22px;
    width:100%;
}

.cgs-schedule-date-title{
    font-size:18px;
    font-weight:800;
    color:#fff;
}

.cgs-schedule-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

#cgs-schedule-alarm-modal .cgs-schedule-actions{
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:12px !important;
    width:100% !important;
    margin-top:24px !important;
}

/* Alleen onderste actieknoppen */
#cgs-schedule-cancel{
    border:1px solid #ef4444 !important;
    background:#374151 !important;
    color:#fff !important;
    box-shadow:none !important;
}

#cgs-schedule-save{
    border:1px solid #22c55e !important;
    background:#374151 !important;
    color:#fff !important;
    box-shadow:none !important;
}
/* =========================================
   GELIJKE KNOPBREEDTES DOCENT ALARMEN
========================================= */

/* Verzenden + Inplannen bovenaan */
#alarm-send,
#alarm-schedule{
    width:190px !important;
    min-width:190px !important;
    max-width:190px !important;
    justify-content:center !important;
    text-align:center !important;
}

/* Wijzigen + Verwijderen in geplande alarm tiles */
.cgs-edit-scheduled-alarm,
.cgs-delete-scheduled-alarm{
    width:190px !important;
    min-width:190px !important;
    max-width:190px !important;
    justify-content:center !important;
    text-align:center !important;
}

/* Mobiel: knoppen onder elkaar maar zelfde breedte */
@media (max-width: 520px){

    #alarm-send,
    #alarm-schedule,
    .cgs-edit-scheduled-alarm,
    .cgs-delete-scheduled-alarm{
        width:220px !important;
        min-width:220px !important;
        max-width:220px !important;
    }

}
/* =========================================
   MOBILE CENTER ALIGN DOCENT DASHBOARD
========================================= */

@media (max-width: 768px){

    /* Algemene containers */
    .cgs-cp-row,
    .cgs-cp-quick-grid,
    .cgs-schedule-actions,
    .cgs-scheduled-item > div,
    .cgs-cp-action-buttons{
        justify-content:center !important;
        align-items:center !important;
    }

    /* Alle actieknoppen centreren */
    .cgs-cp-btn,
    .cgs-cp-btn-secondary,
    .cgs-edit-scheduled-alarm,
    .cgs-delete-scheduled-alarm,
    #alarm-send,
    #alarm-schedule,
    .cgs-cp-quick-btn{
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    /* Geplande alarm kaart */
    .cgs-scheduled-item{
        text-align:center !important;
    }

    /* Knoppen onder elkaar */
    .cgs-scheduled-item div[style*="display:flex"]{
        justify-content:center !important;
    }

    /* Snelmeldingen */
    .cgs-cp-quick-grid{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
    }

}
/* =========================================
   MOBILE FIX - LIVE CLOCK CP DASHBOARD
========================================= */
@media (max-width: 600px){

  .cgs-cp-live-clock{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;

    min-height:150px !important;
    padding:18px 12px !important;
    text-align:center !important;
  }

  .cgs-cp-clock-left,
  .cgs-cp-clock-right{
    width:100% !important;
    text-align:center !important;
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    transform:none !important;
  }

  .cgs-cp-centralist-label{
    font-size:13px !important;
    letter-spacing:2px !important;
    margin-bottom:2px !important;
  }

  .cgs-cp-centralist-name{
    font-size:28px !important;
    line-height:1.1 !important;
    margin-bottom:6px !important;
  }

  #cgs-live-time{
    font-size:42px !important;
    line-height:1 !important;
    margin:0 !important;
  }

  #cgs-live-date{
    font-size:15px !important;
    line-height:1.3 !important;
    margin-top:6px !important;
    opacity:.8 !important;
  }

}
/* =========================================
   MOBILE FIX - INSTELLINGEN AUDIO KNOPPEN
========================================= */
@media (max-width: 600px){

  #cgs-cp-activate-sound,
  #cgs-cp-sound-test,
  #cgs-cp-team-sound-test{
    width:260px !important;
    max-width:100% !important;
    min-height:58px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin-left:auto !important;
    margin-right:auto !important;

    text-align:center !important;
    white-space:normal !important;
  }

  #cgs-cp-activate-sound{
    margin-bottom:12px !important;
  }

  #cgs-cp-sound-test{
    margin-bottom:12px !important;
  }

}
/* =========================================
   COMM FORM LABELS FIX
========================================= */
.cgs-cp-team-form label,
.cgs-cp-team-form .cgs-cp-field label{
    color:#ffffff !important;
    opacity:1 !important;
}
/* =========================================
   MOBILE FIX - TEAM CHAT INPUT CP
========================================= */
@media (max-width: 600px){

  #cgs-team-chat-modal .cgs-team-chat-footer{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    padding:16px !important;
  }

  #cgs-team-chat-modal .cgs-team-chat-input{
    width:100% !important;
    min-height:90px !important;
    box-sizing:border-box !important;

    display:block !important;

    background:#1f2937 !important;
    color:#ffffff !important;

    border:1px solid rgba(255,255,255,.18) !important;
    border-radius:18px !important;

    padding:16px !important;

    font-size:16px !important;
    line-height:1.4 !important;

    writing-mode:horizontal-tb !important;
    text-orientation:mixed !important;
    resize:none !important;
  }

  #cgs-team-chat-modal .cgs-team-chat-input::placeholder{
    color:#94a3b8 !important;
  }

  #cgs-team-chat-modal .cgs-team-chat-footer-actions{
    display:flex !important;
    justify-content:center !important;
    gap:14px !important;
    width:100% !important;
  }

  #cgs-team-chat-modal .cgs-cp-team-photo-btn,
  #cgs-team-chat-modal .cgs-team-chat-send{
    min-width:150px !important;
    min-height:58px !important;
  }

}
/* =========================================
   HARD MOBILE FIX - CHAT FOOTER BUTTONS
========================================= */
@media (max-width: 600px){

  #cgs-team-chat-modal .cgs-team-chat-footer-actions{
    display:flex !important;
    width:100% !important;
    gap:12px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  #cgs-team-chat-modal .cgs-team-chat-footer-actions button{
    flex:1 1 0 !important;
    width:0 !important;
    min-width:0 !important;
    max-width:none !important;

    box-sizing:border-box !important;
    padding-left:0 !important;
    padding-right:0 !important;

    text-align:center !important;
    justify-content:center !important;
  }
}
/* =========================================
   MOBILE FIX - ALARMMELDINGEN TOOLBAR
========================================= */
@media (max-width: 600px){

  .cgs-alarm-header{
    display:block !important;
  }

  .cgs-alarm-toolbar{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    width:100% !important;
    margin-top:14px !important;
  }

  #alarm-sort-btn,
  #manual-alarm-btn{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    margin:0 !important;
  }

}
/* =========================================
   MOBILE FIX - HANDMATIGE MELDING BUTTONS
========================================= */
@media (max-width: 600px){

  #manual-alarm-form .cgs-cp-row{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:12px !important;
  }

  #manual-alarm-form .cgs-cp-row .cgs-cp-btn{
    width:320px !important;
    max-width:100% !important;
    min-height:58px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    box-sizing:border-box !important;
  }

}
/* =========================================
   MOBILE FIX - SNELMELDING BEVESTIGING
========================================= */
@media (max-width: 600px){

  #cgs-quick-send-confirm .cgs-quick-send-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
    width:100% !important;
  }

  #cgs-quick-send-confirm #cgs-quick-send-cancel,
  #cgs-quick-send-confirm #cgs-quick-send-yes{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:58px !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }

}


/* =========================================
   SPECIFIEKE RAPPORTAGE - OVERRIDE LIGHT
========================================= */

#specific-report-form-wrap .cgs-cp-team-form {
    background: linear-gradient(145deg, #ffffff, #eef4ff) !important;
    color: #111111 !important;
    border: 2px solid rgba(37, 99, 235, .18) !important;
    border-radius: 28px !important;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .16) !important;
}

#specific-report-form-wrap .cgs-cp-team-form-title,
#specific-report-form-wrap label {
    color: #111111 !important;
}

#specific-report-form-wrap .cgs-cp-field {
    background: rgba(255,255,255,.72) !important;
    border: 1px solid #d9e3f2 !important;
    border-radius: 22px !important;
    padding: 22px !important;
}

#specific-report-form-wrap input,
#specific-report-form-wrap textarea {
    background: #ffffff !important;
    color: #111111 !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 16px !important;
}

#save-specific-report {

    background:#172033 !important;
    color:#ffffff !important;

    border:3px solid #22c55e !important;

    border-radius:16px !important;

    min-height:54px !important;

    padding:0 26px !important;

    font-weight:900 !important;

    box-shadow:
        0 10px 24px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.06) !important;
}

#cancel-specific-report {

    background:#172033 !important;
    color:#ffffff !important;

    border:3px solid #ef4444 !important;

    border-radius:16px !important;

    min-height:54px !important;

    padding:0 26px !important;

    font-weight:900 !important;

    box-shadow:
        0 10px 24px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.06) !important;
}
/* WIJZIGEN knop specifieke rapportage */

.js-edit-specific-report{

    background:#172033 !important;

    color:#ffffff !important;

    border:2px solid #ff9800 !important;

    border-radius:14px !important;

    font-weight:800 !important;

    box-shadow:
        0 10px 24px rgba(0,0,0,.20),
        0 0 14px rgba(255,152,0,.22) !important;

    transition:.2s ease;
}

.js-edit-specific-report:hover{

    transform:translateY(-1px);

    box-shadow:
        0 14px 28px rgba(0,0,0,.24),
        0 0 18px rgba(255,152,0,.35) !important;
}
/* NIEUWE RAPPORTAGE knop */

#new-specific-report{

    background:#172033 !important;

    color:#ffffff !important;

    border:none !important;

    border-radius:14px !important;

    font-weight:800 !important;

    min-height:52px !important;

    padding:0 22px !important;

    box-shadow:
        0 10px 24px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.06) !important;

    transition:.2s ease;
}

#new-specific-report:hover{

    transform:translateY(-1px);

    box-shadow:
        0 14px 28px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}
/* SPECIFIEKE RAPPORT TEKST */

#specific-report-list .cgs-cp-team-tile div[style*="white-space:pre-wrap"]{

    color:#ffffff !important;

    font-size:16px;

    line-height:1.7;

    opacity:.95;
}
/* SPECIFIEKE RAPPORT META */

.specific-report-meta-line{

    margin-top:18px;

    color:rgba(255,255,255,.88);

    font-size:15px;

    line-height:1.6;

    letter-spacing:.2px;
}

.specific-report-meta-line b{

    color:#ffffff;

    font-weight:800;
}
/* Minder ruimte tussen metadata regels */

#specific-report-list .cgs-cp-muted{

    margin-bottom:6px !important;
}

.specific-report-meta-line{

    margin-top:4px !important;
}
/* =========================================================
   TEACHER ALARM OVERVIEW - verzonden alarmmeldingen
========================================================= */

.cgs-teacher-alarm-overview{
    margin:0 0 24px 0;
    padding:22px;
    border-radius:24px;
    background:linear-gradient(145deg,#f8fafc,#ffffff);
    border:1px solid rgba(15,23,42,.10);
    box-shadow:0 14px 36px rgba(15,23,42,.08);
}

.cgs-teacher-alarm-title{
    font-size:24px;
    font-weight:900;
    color:#0f172a;
    margin-bottom:18px;
}

.cgs-teacher-alarm-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:16px;
}

.cgs-teacher-alarm-tile{
    border-radius:20px;
    padding:18px;
    background:linear-gradient(145deg,#172033,#24344d);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 14px 32px rgba(0,0,0,.18);
    color:#fff;
}

.cgs-teacher-alarm-shift{
    font-size:18px;
    font-weight:900;
    margin-bottom:4px;
}

.cgs-teacher-alarm-centralist{
    font-size:14px;
    opacity:.82;
    margin-bottom:14px;
}

.cgs-teacher-alarm-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.cgs-teacher-alarm-line{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px;
    border-radius:14px;
    background:rgba(255,255,255,.08);
}

.cgs-teacher-alarm-line-text{
    font-size:14px;
    line-height:1.35;
}

.cgs-teacher-alarm-time{
    font-weight:900;
}

.cgs-teacher-alarm-dot{
    width:16px;
    height:16px;
    border-radius:999px;
    flex:0 0 16px;
    box-shadow:0 0 0 4px rgba(255,255,255,.08);
}

.cgs-teacher-alarm-dot.open{
    background:#ef4444;
    box-shadow:
        0 0 0 4px rgba(239,68,68,.18),
        0 0 16px rgba(239,68,68,.85);
}

.cgs-teacher-alarm-dot.done{
    background:#22c55e;
    box-shadow:
        0 0 0 4px rgba(34,197,94,.18),
        0 0 16px rgba(34,197,94,.85);
}
/* =========================================================
   TEACHER ALARM LAYOUT - formulier links, overzicht rechts
========================================================= */

.cgs-teacher-alarm-layout{
    display:grid;
    grid-template-columns:minmax(500px, 1.1fr) minmax(420px, .9fr);
    gap:28px;
    align-items:start;
}

.cgs-teacher-alarm-formcol,
.cgs-teacher-alarm-overviewcol{
    min-width:0;
}

.cgs-teacher-alarm-formcol{
    padding:22px;
    border-radius:24px;
    background:linear-gradient(145deg,#ffffff,#f8fafc);
    border:1px solid rgba(15,23,42,.10);
    box-shadow:0 14px 36px rgba(15,23,42,.08);
}

.cgs-teacher-alarm-formcol .cgs-cp-field,
.cgs-teacher-alarm-formcol p{
    margin-bottom:18px;
}

.cgs-teacher-alarm-formcol input,
.cgs-teacher-alarm-formcol textarea,
.cgs-teacher-alarm-formcol select{
    width:100%;
}

.cgs-teacher-alarm-formcol textarea{
    min-height:130px;
}

.cgs-teacher-alarm-formcol .cgs-cp-row{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.cgs-teacher-alarm-formcol .cgs-cp-btn{
    flex:1 1 150px;
}

.cgs-teacher-alarm-overview{
    margin:0;
    height:100%;
}

.cgs-teacher-alarm-grid{
    display:flex;
    flex-direction:column;
    gap:16px;
}

@media (max-width: 900px){

    .cgs-teacher-alarm-layout{
        grid-template-columns:1fr;
    }

    .cgs-teacher-alarm-formcol{
        padding:18px;
    }
}
/* =========================================================
   TEAM ALARM HISTORY - CP comm schema
========================================================= */

.cgs-cp-team-history-title{
    margin-top:14px;
    font-size:15px;
    font-weight:900;
    color:#ffffff;
    margin-bottom:8px;
}

.cgs-cp-team-history-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.cgs-cp-team-history-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px;
    border-radius:14px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);
}

.cgs-cp-team-history-text{
    font-size:14px;
    line-height:1.35;
    color:#ffffff;
}

.cgs-cp-team-history-time{
    font-weight:900;
}

.cgs-cp-team-history-title-text{
    font-weight:700;
}

.cgs-cp-team-history-empty{
    margin-top:14px;
    padding:10px 12px;
    border-radius:14px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
}
/* =========================================================
   TEAM REPEAT CONFIRM POPUP
========================================================= */

#cgs-team-repeat-confirm{
    position:fixed;
    inset:0;
    z-index:9999999;
}

.cgs-team-repeat-overlay{
    position:absolute;
    inset:0;
    background:rgba(3,10,24,.72);
    backdrop-filter:blur(8px);
}

.cgs-team-repeat-card{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:min(92vw,520px);
    background:linear-gradient(145deg,#172033,#24344d);
    color:#fff;
    border-radius:28px;
    padding:30px;
    box-shadow:
        0 28px 90px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.08);
    border:1px solid rgba(245,158,11,.65);
}

.cgs-team-repeat-icon{
    width:54px;
    height:54px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(245,158,11,.16);
    color:#f59e0b;
    font-size:30px;
    font-weight:900;
    margin-bottom:18px;
    box-shadow:
        0 0 0 6px rgba(245,158,11,.08),
        0 0 22px rgba(245,158,11,.35);
}

.cgs-team-repeat-title{
    font-size:28px;
    font-weight:900;
    margin-bottom:14px;
}

.cgs-team-repeat-text{
    font-size:17px;
    line-height:1.5;
    color:rgba(255,255,255,.88);
    margin-bottom:16px;
}

.cgs-team-repeat-question{
    font-size:16px;
    font-weight:800;
    margin-bottom:24px;
}

.cgs-team-repeat-actions{
    display:flex;
    gap:14px;
    justify-content:flex-end;
    flex-wrap:wrap;
}

.cgs-team-repeat-actions .cgs-cp-btn{
    min-height:52px;
    border-radius:16px;
}

.cgs-team-repeat-cancel{
    background:transparent !important;
    border:1.5px solid rgba(255,255,255,.35) !important;
    color:#fff !important;
}

.cgs-team-repeat-yes{
    border:1.8px solid #f59e0b !important;
    background:linear-gradient(135deg,#1e293b,#223a63) !important;
    box-shadow:0 0 18px rgba(245,158,11,.22);
}
/* =========================================================
   AUTOMATISCHE LESREGISSEUR
========================================================= */

.cgs-lesson-regisseur-box{
    margin-top:28px;
}

.cgs-lesson-toggle{
    width:100% !important;
    min-height:58px !important;
    padding:12px 20px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    background:linear-gradient(145deg, #172033, #314563) !important;
    border:1.5px solid rgba(255,159,26,.75) !important;
    border-radius:14px !important;

    color:#ffffff !important;

    font-family:'Syne', Helvetica, Arial, sans-serif !important;
    font-size:18px !important;
    font-weight:900 !important;

    box-shadow:
        0 10px 24px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.06) !important;

    cursor:pointer !important;
}

.cgs-lesson-toggle:hover{
    transform:translateY(-2px);

    box-shadow:
        0 0 0 4px rgba(255,159,26,.14),
        0 14px 28px rgba(0,0,0,.26) !important;
}

#cgs-lesson-toggle-icon{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:999px !important;
    background:rgba(255,255,255,.12) !important;

    color:#ffffff !important;

    font-size:28px !important;
    line-height:1 !important;
    font-weight:900 !important;

    padding:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
}

.cgs-lesson-content{
    display:none;
    margin-top:22px;
}

.cgs-lesson-regisseur-box.open .cgs-lesson-content{
    display:block;
}

.cgs-lesson-intro{
    margin-bottom:22px;
    padding:18px 20px;
    border-radius:18px;
    background:linear-gradient(145deg,#f8fafc,#ffffff);
    border:1px solid rgba(15,23,42,.10);
    color:#334155;
    font-weight:700;
    line-height:1.55;
}

.cgs-lesson-layout{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
    align-items:start;
}

.cgs-lesson-panel{
    min-width:0;
    padding:22px;
    border-radius:24px;
    background:linear-gradient(145deg,#ffffff,#f8fafc);
    border:1px solid rgba(15,23,42,.10);
    box-shadow:0 14px 36px rgba(15,23,42,.08);
}

.cgs-lesson-panel-title{
    font-size:22px;
    font-weight:900;
    color:#0f172a;
    margin-bottom:8px;
}

.cgs-lesson-panel-sub{
    font-size:14px;
    font-weight:700;
    color:#64748b;
    line-height:1.45;
    margin-bottom:18px;
}

.cgs-lesson-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.cgs-lesson-check-card{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:14px;
    border-radius:16px;
    background:#f8fafc;
    border:1px solid rgba(15,23,42,.10);
    cursor:pointer;
}

.cgs-lesson-check-card input{
    margin-top:4px;
    transform:scale(1.15);
}

.cgs-lesson-check-card strong{
    display:block;
    color:#0f172a;
    font-size:15px;
    font-weight:900;
}

.cgs-lesson-check-card small{
    display:block;
    margin-top:4px;
    color:#64748b;
    font-size:12px;
    font-weight:800;
}

.cgs-lesson-case-source-title{
    margin:12px 0 10px;
    font-size:15px;
    font-weight:900;
    color:#0f172a;
}

.cgs-lesson-divider{
    margin:20px 0;
    opacity:.15;
}

.cgs-lesson-manual-case{
    display:grid;
    gap:10px;
}

.cgs-lesson-manual-case input,
.cgs-lesson-manual-case textarea,
.cgs-lesson-manual-case select,
.cgs-lesson-field input{
    width:100%;
    box-sizing:border-box;
    border-radius:14px;
    border:1px solid rgba(15,23,42,.16);
    padding:12px 14px;
    font-weight:700;
}

.cgs-lesson-manual-list{
    margin-top:14px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.cgs-lesson-manual-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border-radius:14px;
    background:#eef2ff;
    border:1px solid rgba(59,130,246,.18);
}

.cgs-lesson-manual-item strong{
    display:block;
    font-weight:900;
    color:#0f172a;
}

.cgs-lesson-manual-item small{
    display:block;
    color:#64748b;
    font-weight:800;
    margin-top:3px;
}

.cgs-lesson-remove-manual{
    border:1px solid rgba(239,68,68,.45);
    background:#fff;
    color:#dc2626;
    border-radius:12px;
    padding:8px 12px;
    font-weight:900;
    cursor:pointer;
}

.cgs-lesson-rule{
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding:14px;
    margin-bottom:10px;
    border-radius:16px;
    background:#f8fafc;
    border:1px solid rgba(15,23,42,.10);
    color:#0f172a;
    font-weight:800;
    line-height:1.4;
}

.cgs-lesson-rule input{
    margin-top:4px;
    transform:scale(1.15);
}

.cgs-lesson-field{
    margin:18px 0;
}

.cgs-lesson-field label{
    display:block;
    margin-bottom:8px;
    font-weight:900;
    color:#0f172a;
}

.cgs-lesson-wait-row{
    display:flex;
    align-items:center;
    gap:10px;
}

.cgs-lesson-wait-row input{
    max-width:120px;
}

.cgs-lesson-status-box{
    margin:18px 0;
    padding:14px;
    border-radius:16px;
    background:#fff7ed;
    border:1px solid rgba(249,115,22,.25);
    color:#9a3412;
    font-weight:800;
    line-height:1.45;
}

#cgs-lesson-preview-result{
    margin-top:14px;
}

@media (max-width:1100px){

    .cgs-lesson-layout{
        grid-template-columns:1fr;
    }

}
/* =========================================================
   LESREGISSEUR - TEAMS PER CP
========================================================= */

.cgs-lesson-team-preview{
    margin-top:18px;
    padding:16px;
    border-radius:18px;
    background:#f8fafc;
    border:1px solid rgba(15,23,42,.10);
}

.cgs-lesson-teams-title{
    font-size:17px;
    font-weight:900;
    color:#0f172a;
    margin-bottom:12px;
}

.cgs-lesson-teams-list{
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
}

.cgs-lesson-shift-team-card{
    border-radius:16px;
    padding:14px;
    background:#ffffff;
    border:1px solid rgba(15,23,42,.10);
}

.cgs-lesson-shift-team-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
    margin-bottom:12px;
}

.cgs-lesson-shift-team-head strong{
    color:#0f172a;
    font-size:15px;
    font-weight:900;
}

.cgs-lesson-shift-team-head span{
    color:#64748b;
    font-size:13px;
    font-weight:800;
}

.cgs-lesson-team-chip-wrap{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:10px !important;
}
@media (max-width: 900px){

    .cgs-lesson-teams-list{
        grid-template-columns:1fr;
    }

    .cgs-lesson-team-chip-wrap{
        grid-template-columns:1fr;
    }
}
.cgs-lesson-team-chip{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    gap:6px !important;

    padding:10px 8px !important;
    min-height:96px !important;

    border-radius:16px !important;
    background:#f1f5f9 !important;
    border:1px solid rgba(15,23,42,.08) !important;

    text-align:center !important;
    box-sizing:border-box !important;
}
.cgs-lesson-team-chip strong{
    font-size:14px !important;
    line-height:1.1 !important;
    word-break:normal !important;
}

.cgs-lesson-team-chip small{
    font-size:12px !important;
    line-height:1.2 !important;
    word-break:normal !important;
}

.cgs-lesson-team-status{
    margin-top:4px !important;
    padding:5px 9px !important;
    border-radius:999px !important;
    font-size:11px !important;
    font-weight:900 !important;
}
@media (max-width: 600px){

    .cgs-lesson-team-chip-wrap{
        grid-template-columns:1fr !important;
    }

}

.cgs-lesson-team-chip strong{
    display:block;
    font-size:14px;
    font-weight:900;
    color:#0f172a;
}

.cgs-lesson-team-chip small{
    display:block;
    margin-top:3px;
    color:#64748b;
    font-size:12px;
    font-weight:700;
}

.cgs-lesson-team-status{
    flex:0 0 auto;
    padding:5px 9px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
}

.cgs-lesson-team-status.available{
    background:#dcfce7;
    color:#166534;
}

.cgs-lesson-team-status.busy{
    background:#fee2e2;
    color:#991b1b;
}

.cgs-lesson-team-total{
    margin-top:14px;
    padding:12px;
    border-radius:14px;
    background:#eef2ff;
    color:#1e3a8a;
    font-size:14px;
    font-weight:800;
    line-height:1.5;
}
/* =========================================================
   LESREGISSEUR - TAKENMATRIX
========================================================= */

#cgs-lesson-create-round-btn{
    margin-top:12px;
    width:100%;
}

#cgs-lesson-round-result{
    margin-top:16px;
}

.cgs-lesson-matrix{
    margin-top:18px;
    padding:18px;
    border-radius:20px;
    background:#f8fafc;
    border:1px solid rgba(15,23,42,.10);
}

.cgs-lesson-matrix-title{
    font-size:20px;
    font-weight:900;
    color:#0f172a;
    margin-bottom:16px;
}

.cgs-lesson-matrix-shift{
    margin-bottom:18px;
    padding:16px;
    border-radius:18px;
    background:#ffffff;
    border:1px solid rgba(15,23,42,.10);
}

.cgs-lesson-matrix-shift-title{
    display:flex;
    justify-content:space-between;
    gap:12px;
    font-size:16px;
    font-weight:900;
    color:#0f172a;
    margin-bottom:14px;
}

.cgs-lesson-matrix-shift-title span{
    color:#64748b;
    font-size:13px;
    font-weight:800;
}

.cgs-lesson-matrix-team{
    margin-top:12px;
    padding:14px;
    border-radius:16px;
    background:#f1f5f9;
    border:1px solid rgba(15,23,42,.08);
}

.cgs-lesson-matrix-team-title{
    font-size:15px;
    font-weight:900;
    color:#0f172a;
    margin-bottom:10px;
}

.cgs-lesson-matrix-task-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.cgs-lesson-matrix-task{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px;
    border-radius:13px;
    border:1px solid rgba(15,23,42,.08);
    background:#ffffff;
}

.cgs-lesson-matrix-task span{
    font-size:14px;
    font-weight:900;
    color:#0f172a;
}

.cgs-lesson-matrix-task small{
    font-size:12px;
    font-weight:800;
    color:#64748b;
}

.cgs-lesson-matrix-task.pending{
    border-left:4px solid #f59e0b;
}
/* =========================================================
   Takenmatrix lesronde - volledige kleur per casusstatus
========================================================= */

/* Wachtend blijft wit met oranje zijstreep */
.cgs-lesson-matrix-task.pending {
    background: #ffffff;
    border-left: 4px solid #f59e0b;
}

/* Casus verzonden naar CP, maar nog niet gekoppeld */
.cgs-lesson-matrix-task.active-unassigned {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #111827 !important;
}

/* Casus actief gekoppeld / team is bezig */
.cgs-lesson-matrix-task.active {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #111827 !important;
}

/* Casus afgehandeld */
.cgs-lesson-matrix-task.done {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: #052e16 !important;
}

/* Eventueel overgeslagen */
.cgs-lesson-matrix-task.skipped {
    background: #e5e7eb !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}

/* Tekst binnen gekleurde tegels dezelfde kleur geven */
.cgs-lesson-matrix-task.active span,
.cgs-lesson-matrix-task.active small,
.cgs-lesson-matrix-task.active-unassigned span,
.cgs-lesson-matrix-task.active-unassigned small,
.cgs-lesson-matrix-task.done span,
.cgs-lesson-matrix-task.done small,
.cgs-lesson-matrix-task.skipped span,
.cgs-lesson-matrix-task.skipped small {
    color: inherit !important;
}
/* =========================================================
   LESREGISSEUR - STATUSBEDIENING
========================================================= */

.cgs-lesson-control-panel{
    margin-top:18px;
    padding:18px;
    border-radius:20px;
    background:linear-gradient(145deg,#172033,#24344d);
    color:#fff;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 14px 36px rgba(15,23,42,.18);
}

.cgs-lesson-control-title{
    font-size:20px;
    font-weight:900;
    margin-bottom:8px;
}

.cgs-lesson-current-status{
    margin-bottom:14px;
    color:#cbd5e1;
    font-weight:800;
}

.cgs-lesson-current-status strong{
    color:#86efac;
}

.cgs-lesson-control-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.cgs-lesson-status-btn{
    flex:1 1 140px;
    min-height:52px;
}

.cgs-lesson-pause-btn{
    border:1.5px solid #f59e0b !important;
}

.cgs-lesson-stop-btn{
    border:1.5px solid #ef4444 !important;
}

.cgs-lesson-status-btn:disabled{
    opacity:.45;
    cursor:not-allowed;
    filter:grayscale(1);
}

#cgs-lesson-status-result{
    margin-top:14px;
}
/* =========================================================
   LESREGISSEUR - PREVIEW VOLGENDE TAAK
========================================================= */

#cgs-lesson-next-task-result{
    margin-top:16px;
}

#cgs-lesson-preview-next-task{
    border:1.5px solid #38bdf8 !important;
}

.cgs-lesson-next-task-card{
    margin-top:14px;
    padding:18px;
    border-radius:20px;
    background:linear-gradient(145deg,#0f172a,#1e293b);
    color:#fff;
    border:1px solid rgba(56,189,248,.45);
    box-shadow:
        0 16px 40px rgba(15,23,42,.25),
        0 0 22px rgba(56,189,248,.16);
}

.cgs-lesson-next-task-label{
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#7dd3fc;
    font-weight:900;
    margin-bottom:8px;
}

.cgs-lesson-next-task-main{
    font-size:25px;
    font-weight:900;
    margin-bottom:14px;
}

.cgs-lesson-next-task-meta{
    display:grid;
    gap:6px;
    font-size:15px;
    color:#cbd5e1;
}

.cgs-lesson-next-task-meta strong{
    color:#fff;
}
/* =========================================================
   LESREGISSEUR - GESCHIKTE TEAMS PREVIEW
========================================================= */

.cgs-lesson-next-teams{
    margin-top:16px;
    padding:14px;
    border-radius:16px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
}

.cgs-lesson-next-teams-title{
    font-size:14px;
    font-weight:900;
    color:#7dd3fc;
    margin-bottom:10px;
}

.cgs-lesson-next-team-chip{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    padding:10px 12px;
    border-radius:13px;
    background:rgba(255,255,255,.08);
    margin-bottom:8px;
}

.cgs-lesson-next-team-chip:last-child{
    margin-bottom:0;
}

.cgs-lesson-next-team-chip strong{
    color:#fff;
    font-weight:900;
}

.cgs-lesson-next-team-chip small{
    color:#cbd5e1;
    font-weight:800;
}

.cgs-lesson-next-task-note{
    margin-top:16px;
    padding:12px;
    border-radius:14px;
    background:rgba(249,115,22,.13);
    border:1px solid rgba(249,115,22,.35);
    color:#fed7aa;
    font-size:14px;
    font-weight:800;
    line-height:1.45;
}
/* =========================================================
   LESREGISSEUR - CASUS VERZENDEN ZONDER TEAM
========================================================= */

#cgs-lesson-dispatch-next-case{
    border:1.5px solid #22c55e !important;
}

.cgs-lesson-next-task-card.dispatched{
    border-color:rgba(34,197,94,.55);
    box-shadow:
        0 16px 40px rgba(15,23,42,.25),
        0 0 22px rgba(34,197,94,.20);
}

.cgs-lesson-next-task-card.dispatched .cgs-lesson-next-task-label{
    color:#86efac;
}

.cgs-lesson-matrix-task.active-unassigned{
    border-left:4px solid #38bdf8;
    background:#ecfeff;
}
/* =========================================================
   LESREGISSEUR - AUTOMATISCHE MOTOR
========================================================= */

.cgs-lesson-engine-status{
    margin-top:16px;
    padding:15px 16px;
    border-radius:18px;
    font-size:14px;
    font-weight:800;
    line-height:1.55;
    border:1px solid rgba(15,23,42,.12);
}

.cgs-lesson-engine-status.is-idle{
    background:#f8fafc;
    color:#334155;
    border-color:rgba(15,23,42,.12);
}

.cgs-lesson-engine-status.is-running{
    background:#eff6ff;
    color:#1d4ed8;
    border-color:rgba(59,130,246,.25);
}

.cgs-lesson-engine-status.is-success{
    background:#ecfdf5;
    color:#047857;
    border-color:rgba(34,197,94,.25);
}

.cgs-lesson-engine-status.is-paused{
    background:#fff7ed;
    color:#9a3412;
    border-color:rgba(249,115,22,.28);
}

.cgs-lesson-engine-status.is-error{
    background:#fef2f2;
    color:#b91c1c;
    border-color:rgba(239,68,68,.28);
}

.cgs-lesson-engine-status span{
    display:inline-block;
    margin-top:4px;
    opacity:.85;
}
/* =========================================================
   LESREGISSEUR - LIVE VOORTGANG
========================================================= */

.cgs-lesson-progress{
    margin-top:18px;
    padding:18px;
    border-radius:22px;
    background:linear-gradient(145deg,#ffffff,#f8fafc);
    border:1px solid rgba(15,23,42,.10);
    box-shadow:0 14px 36px rgba(15,23,42,.08);
}

.cgs-lesson-progress-title{
    font-size:21px;
    font-weight:900;
    color:#0f172a;
    margin-bottom:14px;
}

.cgs-lesson-progress-cards{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-bottom:18px;
}
.cgs-lesson-progress-card{
    min-height:96px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.cgs-lesson-progress-card span{
    white-space:normal;
    word-break:normal;
    overflow-wrap:normal;
    line-height:1.25;
}

.cgs-lesson-progress-card strong{
    margin-top:4px;
}
.cgs-lesson-progress-card{
    padding:14px;
    border-radius:18px;
    border:1px solid rgba(15,23,42,.10);
    background:#f8fafc;
}

.cgs-lesson-progress-card span{
    display:block;
    font-size:12px;
    font-weight:900;
    color:#64748b;
    margin-bottom:6px;
}

.cgs-lesson-progress-card strong{
    display:block;
    font-size:28px;
    font-weight:900;
    color:#0f172a;
}

.cgs-lesson-progress-card.active{
    background:#eff6ff;
    border-color:rgba(59,130,246,.25);
}

.cgs-lesson-progress-card.pending{
    background:#fff7ed;
    border-color:rgba(249,115,22,.25);
}

.cgs-lesson-progress-card.done{
    background:#ecfdf5;
    border-color:rgba(34,197,94,.25);
}

.cgs-lesson-progress-card.total{
    background:#f1f5f9;
    border-color:rgba(15,23,42,.12);
}

.cgs-lesson-progress-subtitle{
    font-size:15px;
    font-weight:900;
    color:#0f172a;
    margin-bottom:10px;
}

.cgs-lesson-progress-active-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.cgs-lesson-progress-active-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border-radius:16px;
    background:#172033;
    color:#fff;
    border:1px solid rgba(255,255,255,.10);
}

.cgs-lesson-progress-active-item strong{
    display:block;
    font-size:15px;
    font-weight:900;
}

.cgs-lesson-progress-active-item small{
    display:block;
    margin-top:3px;
    color:#cbd5e1;
    font-size:12px;
    font-weight:800;
}

.cgs-lesson-progress-active-item span{
    flex:0 0 auto;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(56,189,248,.15);
    color:#7dd3fc;
    font-size:12px;
    font-weight:900;
}

.cgs-lesson-progress-empty{
    padding:12px 14px;
    border-radius:16px;
    background:#f8fafc;
    color:#64748b;
    font-weight:800;
    border:1px solid rgba(15,23,42,.08);
}



  
@media (max-width:900px){

    .cgs-lesson-progress-cards{
        grid-template-columns:1fr;
    }

    .cgs-lesson-progress-active-item{
        align-items:flex-start;
        flex-direction:column;
    }
}
/* =========================================================
   LESREGISSEUR - DEBUGPANEEL
========================================================= */

.cgs-lesson-debug-panel{
    margin-top:14px;
}

.cgs-lesson-debug-toggle{
    width:100%;
    border:1px solid rgba(148,163,184,.45);
    background:rgba(255,255,255,.06);
    color:#cbd5e1;
    border-radius:16px;
    min-height:44px;
    padding:10px 14px;
    font-weight:900;
    cursor:pointer;
}

.cgs-lesson-debug-toggle:hover{
    background:rgba(255,255,255,.10);
    color:#ffffff;
}

.cgs-lesson-debug-content{
    display:none;
    margin-top:12px;
    padding:14px;
    border-radius:18px;
    background:rgba(15,23,42,.42);
    border:1px solid rgba(148,163,184,.25);
}

.cgs-lesson-debug-content.open{
    display:block;
}

.cgs-lesson-debug-text{
    color:#cbd5e1;
    font-size:13px;
    font-weight:800;
    line-height:1.45;
    margin-bottom:12px;
}

.cgs-lesson-debug-content .cgs-cp-btn{
    width:100%;
    margin-top:10px;
}

#cgs-lesson-preview-next-task{
    border:1.5px solid #38bdf8 !important;
}

#cgs-lesson-dispatch-next-case{
    border:1.5px solid #22c55e !important;
}
/* =========================================================
   LESREGISSEUR - CONTROL CENTER TILE
========================================================= */

.cgs-lesson-control-center{
    margin-top:18px;
    padding:22px;
    border-radius:28px;
    background:
        radial-gradient(circle at top right, rgba(56,189,248,.12), transparent 34%),
        linear-gradient(145deg,#101827,#1d2b44);
    color:#fff;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:
        0 24px 70px rgba(15,23,42,.22),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.cgs-lesson-control-center-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:18px;
    margin-bottom:20px;
}

.cgs-lesson-control-kicker{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.09em;
    font-weight:900;
    color:#7dd3fc;
    margin-bottom:5px;
}

.cgs-lesson-control-title-main{
    font-size:26px;
    font-weight:900;
    color:#fff;
    line-height:1.15;
}

.cgs-lesson-control-status-pill{
    flex:0 0 auto;
    padding:10px 15px;
    border-radius:999px;
    font-size:13px;
    font-weight:900;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.08);
}

.cgs-lesson-control-status-pill.running{
    color:#86efac;
    background:rgba(34,197,94,.13);
    border-color:rgba(34,197,94,.35);
}

.cgs-lesson-control-status-pill.paused,
.cgs-lesson-control-status-pill.draft{
    color:#fed7aa;
    background:rgba(249,115,22,.13);
    border-color:rgba(249,115,22,.35);
}

.cgs-lesson-control-status-pill.stopped{
    color:#fecaca;
    background:rgba(239,68,68,.13);
    border-color:rgba(239,68,68,.35);
}

.cgs-lesson-control-center-grid{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
    gap:18px;
    align-items:start;
}

.cgs-lesson-control-main{
    min-width:0;
}

.cgs-lesson-control-side{
    min-width:0;
}

/* Binnen de donkere control-tile de bestaande witte blokken iets compacter maken */
.cgs-lesson-control-center .cgs-lesson-progress,
.cgs-lesson-control-center .cgs-lesson-matrix{
    margin-top:0;
    background:rgba(255,255,255,.96);
    box-shadow:none;
}

.cgs-lesson-control-center .cgs-lesson-matrix{
    margin-top:18px;
}

/* Bedieningspaneel passend maken in rechterkolom */
.cgs-lesson-control-center .cgs-lesson-control-panel{
    margin-top:0;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:none;
}

.cgs-lesson-control-center .cgs-lesson-control-title{
    font-size:20px;
}

.cgs-lesson-control-center .cgs-lesson-current-status{
    color:#cbd5e1;
}

/* Knoppen in rechter paneel overzichtelijk onder elkaar */
.cgs-lesson-control-center .cgs-lesson-control-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.cgs-lesson-control-center .cgs-lesson-status-btn,
.cgs-lesson-control-center #cgs-lesson-preview-next-task,
.cgs-lesson-control-center #cgs-lesson-dispatch-next-case{
    width:100%;
}

/* Matrix iets rustiger binnen control-center */
.cgs-lesson-control-center .cgs-lesson-matrix-title,
.cgs-lesson-control-center .cgs-lesson-progress-title{
    color:#0f172a;
}

@media (max-width:1100px){

    .cgs-lesson-control-center-grid{
        grid-template-columns:1fr;
    }

    .cgs-lesson-control-side{
        order:-1;
    }
}

@media (max-width:700px){

    .cgs-lesson-control-center{
        padding:16px;
        border-radius:22px;
    }

    .cgs-lesson-control-center-header{
        flex-direction:column;
    }

    .cgs-lesson-control-title-main{
        font-size:22px;
    }
}
/* =========================================================
   LESREGISSEUR - BREED CONTROL CENTER
========================================================= */

.cgs-lesson-dashboard-wide{
    width:100%;
    margin-top:26px;
}

.cgs-lesson-dashboard-wide .cgs-lesson-control-center{
    width:100%;
    max-width:none;
}

.cgs-lesson-control-center-grid{
    grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr) !important;
}

.cgs-lesson-control-main,
.cgs-lesson-control-side{
    min-width:0;
}

.cgs-lesson-control-center .cgs-lesson-progress-cards{
    grid-template-columns:repeat(4,minmax(120px,1fr));
}

@media (max-width:1200px){

    .cgs-lesson-control-center-grid{
        grid-template-columns:1fr !important;
    }

    .cgs-lesson-control-center .cgs-lesson-progress-cards{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:700px){

    .cgs-lesson-control-center .cgs-lesson-progress-cards{
        grid-template-columns:1fr;
    }
}
/* =========================================================
   LESREGISSEUR - BEDIENINGSKNOPPEN COMPACT
========================================================= */

.cgs-lesson-control-panel-inline .cgs-lesson-control-actions{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.cgs-lesson-control-panel-inline .cgs-lesson-status-btn{
    width:100%;
    min-height:52px !important;
    height:52px !important;
    padding:0 18px !important;
    border-radius:16px !important;
    font-size:17px !important;
    font-weight:900 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:1.2 !important;
}

/* Startknop */
.cgs-lesson-control-panel-inline .cgs-lesson-status-btn[data-status="running"]{
    border:1.5px solid #22c55e !important;
}

/* Pauzeknop */
.cgs-lesson-control-panel-inline .cgs-lesson-status-btn[data-status="paused"]{
    border:1.5px solid #f59e0b !important;
}

/* Stopknop */
.cgs-lesson-control-panel-inline .cgs-lesson-status-btn[data-status="stopped"]{
    border:1.5px solid #ef4444 !important;
}

/* Disabled knoppen wel leesbaar houden */
.cgs-lesson-control-panel-inline .cgs-lesson-status-btn:disabled{
    opacity:.45 !important;
    cursor:not-allowed !important;
}
/* Debugopties standaard volledig verbergen */
.cgs-lesson-control-panel-inline .cgs-lesson-debug-panel{
    display:none !important;
}
.cgs-lesson-control-panel-inline .cgs-lesson-engine-status{
    min-height:auto !important;
    padding:14px 16px !important;
    border-radius:16px !important;
    font-size:14px !important;
    line-height:1.45 !important;
}
/* =========================================================
   LESREGISSEUR - FORCE COMPACTE BEDIENINGSKNOPPEN
========================================================= */

.cgs-lesson-control-panel-inline .cgs-lesson-control-actions{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    align-items:stretch !important;
}

.cgs-lesson-control-panel-inline button.cgs-cp-btn.cgs-lesson-status-btn,
.cgs-lesson-control-center button.cgs-cp-btn.cgs-lesson-status-btn{
    width:100% !important;

    height:54px !important;
    min-height:54px !important;
    max-height:54px !important;

    padding:0 18px !important;
    margin:0 !important;

    flex:0 0 54px !important;
    align-self:stretch !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:16px !important;

    font-size:17px !important;
    font-weight:900 !important;
    line-height:1.1 !important;
}

/* Zorg dat de oude grote knopstijl niet doorwerkt */
.cgs-lesson-control-panel-inline button.cgs-cp-btn.cgs-lesson-status-btn *{
    line-height:1.1 !important;
}
/* =========================================================
   LESREGISSEUR - VOORBEREIDINGSPANEEL
========================================================= */

.cgs-lesson-prepare-text{
    padding:22px;
    border-radius:22px;
    background:rgba(255,255,255,.96);
    color:#0f172a;
    font-size:17px;
    font-weight:800;
    line-height:1.55;
}

.cgs-lesson-create-round-inline{
    width:100% !important;
    min-height:54px !important;
    height:54px !important;
    max-height:54px !important;
    padding:0 18px !important;
    border-radius:16px !important;
    font-size:17px !important;
    font-weight:900 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1.5px solid #38bdf8 !important;
    background:linear-gradient(135deg,#1e293b,#223a63) !important;
    color:#fff !important;
    box-shadow:0 10px 26px rgba(0,0,0,.20);
}

.cgs-lesson-create-round-inline:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 32px rgba(0,0,0,.26);
}
/* =========================================================
   Takenmatrix - volledige kleur per casusstatus
   ========================================================= */

/* Actieve casus: volledig oranje */
.cgs-lesson-matrix .cgs-task-tile.active,
.cgs-lesson-matrix .cgs-task-tile.active_unassigned,
.cgs-lesson-matrix .cgs-task-tile[data-status="active"],
.cgs-lesson-matrix .cgs-task-tile[data-status="active_unassigned"] {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #111827 !important;
}

/* Afgehandelde casus: volledig groen */
.cgs-lesson-matrix .cgs-task-tile.done,
.cgs-lesson-matrix .cgs-task-tile[data-status="done"] {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: #052e16 !important;
}

/* Tekst in actieve/afgehandelde tegels goed leesbaar houden */
.cgs-lesson-matrix .cgs-task-tile.active *,
.cgs-lesson-matrix .cgs-task-tile.active_unassigned *,
.cgs-lesson-matrix .cgs-task-tile.done *,
.cgs-lesson-matrix .cgs-task-tile[data-status="active"] *,
.cgs-lesson-matrix .cgs-task-tile[data-status="active_unassigned"] *,
.cgs-lesson-matrix .cgs-task-tile[data-status="done"] * {
    color: inherit !important;
}

/* Oranje zijstreep weghalen zodra de hele tegel gekleurd is */
.cgs-lesson-matrix .cgs-task-tile.active::before,
.cgs-lesson-matrix .cgs-task-tile.active_unassigned::before,
.cgs-lesson-matrix .cgs-task-tile.done::before,
.cgs-lesson-matrix .cgs-task-tile[data-status="active"]::before,
.cgs-lesson-matrix .cgs-task-tile[data-status="active_unassigned"]::before,
.cgs-lesson-matrix .cgs-task-tile[data-status="done"]::before {
    display: none !important;
}
/* =========================================================
   CP alarm-popup knoppen
========================================================= */

.cgs-cp-alarm-action-buttons {
    display: flex;
    gap: 22px;
    align-items: center;
    justify-content: flex-start;
    margin-top: 18px;
}

/* Melding in behandeling - blauw */
#btn-progress {
    background: #2563eb !important;
    border: 2px solid #2563eb !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

#btn-progress:hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}

/* Melding afgehandeld - wit met groene rand */
#btn-done {
    background: #ffffff !important;
    border: 2px solid #22c55e !important;
    color: #111827 !important;
    box-shadow: none !important;
}

#btn-done:hover {
    background: #f0fdf4 !important;
    border-color: #16a34a !important;
    color: #111827 !important;
}
@media (max-width: 520px) {
    .cgs-cp-alarm-action-buttons {
        gap: 12px;
        justify-content: space-between;
    }

    .cgs-cp-alarm-action-buttons .cgs-cp-btn {
        flex: 1;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 14px;
    }
}
/* Alarm popup - actieknoppen volgorde, afstand en kleur */
.cgs-cp-alarm-action-buttons {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 36px !important;
    margin-top: 20px !important;
}

/* Melding in behandeling - blauw */
.cgs-cp-alarm-action-buttons #btn-progress {
    order: 1 !important;
    background: #2563eb !important;
    border: 2px solid #2563eb !important;
    color: #ffffff !important;
}

/* Melding afgehandeld - wit, zwarte tekst, groene rand */
.cgs-cp-alarm-action-buttons #btn-done {
    order: 2 !important;
    background: #ffffff !important;
    border: 2px solid #22c55e !important;
    color: #111827 !important;
}

/* Hover */
.cgs-cp-alarm-action-buttons #btn-progress:hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

.cgs-cp-alarm-action-buttons #btn-done:hover {
    background: #f0fdf4 !important;
    border-color: #16a34a !important;
    color: #111827 !important;
}
/* =========================================================
   Automatische lesregisseur - zelfde look als hoofdaccordions
========================================================= */

.cgs-lesson-regisseur-box {
    padding: 36px !important;
}

/* De derde balk dezelfde stijl geven als de twee bovenste */
.cgs-lesson-toggle.cgs-main-accordion-look {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    background: linear-gradient(135deg, #162033 0%, #2d415f 100%) !important;
    color: #ffffff !important;

    border: 1.5px solid #f59e0b !important;
    border-radius: 18px !important;

    padding: 28px 32px !important;
    margin: 0 0 28px 0 !important;

    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12) !important;
    cursor: pointer !important;
    text-align: left !important;
}

/* Titel */
.cgs-lesson-toggle.cgs-main-accordion-look span:first-child {
    color: #ffffff !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

/* Plus/min knop rechts */
.cgs-lesson-toggle.cgs-main-accordion-look #cgs-lesson-toggle-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 18px !important;

    background: rgba(255, 255, 255, 0.12) !important;
    color: #f59e0b !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 34px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

/* Hover */
.cgs-lesson-toggle.cgs-main-accordion-look:hover {
    filter: brightness(1.04);
}

.cgs-lesson-toggle.cgs-main-accordion-look:hover #cgs-lesson-toggle-icon {
    background: rgba(255, 255, 255, 0.18) !important;
}
/* =========================================================
   Automatische lesregisseur - zelfde look als bovenste accordionbalken
========================================================= */

.cgs-cp-box.cgs-lesson-regisseur-box {
    padding: 36px !important;
}

.cgs-cp-box.cgs-lesson-regisseur-box button#cgs-lesson-toggle.cgs-lesson-toggle.cgs-main-accordion-look {
    width: 100% !important;
    min-height: 90px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    background: linear-gradient(135deg, #172238 0%, #2d415f 100%) !important;
    border: 1.5px solid #f59e0b !important;
    border-radius: 18px !important;

    padding: 0 32px !important;
    margin: 0 0 28px 0 !important;

    color: #ffffff !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12) !important;

    cursor: pointer !important;
    text-align: left !important;
}

.cgs-cp-box.cgs-lesson-regisseur-box button#cgs-lesson-toggle.cgs-lesson-toggle.cgs-main-accordion-look span:first-child {
    color: #ffffff !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

.cgs-cp-box.cgs-lesson-regisseur-box button#cgs-lesson-toggle.cgs-lesson-toggle.cgs-main-accordion-look #cgs-lesson-toggle-icon {
    width: 52px !important;
    height: 52px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.12) !important;

    color: #f59e0b !important;
    font-size: 34px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

/* Lesregisseur toggle dezelfde icon-look geven als alarm-toggle */
#cgs-lesson-toggle.cgs-alarm-toggle #cgs-lesson-toggle-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 18px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;

    font-size: 34px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}
/* =========================================================
   Lesregisseurbalk exact gelijk trekken met hoofdaccordions
========================================================= */

/* Witte box rondom de lesregisseur minder laten inspringen */
.cgs-cp-box.cgs-lesson-regisseur-box {
    padding: 36px !important;
}

/* De lesregisseur-knop zelf */
.cgs-cp-box.cgs-lesson-regisseur-box button#cgs-lesson-toggle.cgs-alarm-toggle.cgs-lesson-toggle {
    width: 100% !important;
    max-width: none !important;
    min-height: 90px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    margin: 0 !important;
    padding: 0 32px !important;
    box-sizing: border-box !important;

    background: linear-gradient(135deg, #172238 0%, #2d415f 100%) !important;
    border: 1.5px solid #f59e0b !important;
    border-radius: 18px !important;

    color: #ffffff !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12) !important;
    text-align: left !important;
    cursor: pointer !important;
}

/* Titel exact wit en stevig */
.cgs-cp-box.cgs-lesson-regisseur-box button#cgs-lesson-toggle span:first-child {
    color: #ffffff !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
}

/* Plus/min rondje rechts exact rond maken */
.cgs-cp-box.cgs-lesson-regisseur-box button#cgs-lesson-toggle #cgs-lesson-toggle-icon {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.12) !important;

    color: #ffffff !important;
    font-size: 34px !important;
    font-weight: 900 !important;
    line-height: 52px !important;

    box-sizing: border-box !important;
    text-align: center !important;
}

/* Hover gelijkwaardig houden */
.cgs-cp-box.cgs-lesson-regisseur-box button#cgs-lesson-toggle:hover {
    filter: brightness(1.04);
}

.cgs-cp-box.cgs-lesson-regisseur-box button#cgs-lesson-toggle:hover #cgs-lesson-toggle-icon {
    background: rgba(255, 255, 255, 0.18) !important;
}
/* =========================================================
   DEFINITIEVE FIX - Automatische lesregisseur hoogte
   Deze moet helemaal onderaan cp.css blijven staan
========================================================= */

button#cgs-lesson-toggle.cgs-lesson-toggle {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;

    padding: 0 20px !important;

    border-radius: 14px !important;

    font-size: 18px !important;
    line-height: 1.2 !important;

    box-sizing: border-box !important;
}

button#cgs-lesson-toggle.cgs-lesson-toggle span:first-child {
    font-size: 18px !important;
    line-height: 1.2 !important;
}

button#cgs-lesson-toggle.cgs-lesson-toggle #cgs-lesson-toggle-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;

    border-radius: 999px !important;

    font-size: 28px !important;
    line-height: 1 !important;

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
}

/* =========================================================
   LESREGISSEUR - TEAM PREVIEW RECHTS COMPACT
========================================================= */

.cgs-lesson-team-preview-side {
    margin-top: 16px !important;
    padding: 14px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: none !important;
}

.cgs-lesson-team-preview-side .cgs-lesson-teams-title {
    color: #ffffff !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
}

.cgs-lesson-team-preview-side .cgs-lesson-teams-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.cgs-lesson-team-preview-side .cgs-lesson-shift-team-card {
    padding: 10px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.94) !important;
}

.cgs-lesson-team-preview-side .cgs-lesson-shift-team-head {
    margin-bottom: 8px !important;
    align-items: center !important;
}

.cgs-lesson-team-preview-side .cgs-lesson-shift-team-head strong {
    font-size: 13px !important;
}

.cgs-lesson-team-preview-side .cgs-lesson-shift-team-head span {
    font-size: 12px !important;
}

.cgs-lesson-team-preview-side .cgs-lesson-team-chip-wrap {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
}

.cgs-lesson-team-preview-side .cgs-lesson-team-chip {
    min-height: 72px !important;
    padding: 7px 5px !important;
    border-radius: 13px !important;
    text-align: center !important;
}

.cgs-lesson-team-preview-side .cgs-lesson-team-chip strong {
    font-size: 12px !important;
    line-height: 1.1 !important;
}

.cgs-lesson-team-preview-side .cgs-lesson-team-chip small {
    font-size: 10px !important;
    line-height: 1.15 !important;
}

.cgs-lesson-team-preview-side .cgs-lesson-team-status {
    margin-top: 4px !important;
    padding: 4px 7px !important;
    font-size: 10px !important;
}

.cgs-lesson-team-preview-side .cgs-lesson-team-total {
    margin-top: 10px !important;
    padding: 10px !important;
    font-size: 12px !important;
    border-radius: 13px !important;
}

@media (max-width: 1200px) {
    .cgs-lesson-team-preview-side .cgs-lesson-team-chip-wrap {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   TAKENMATRIX - MODERNE TILEWEERGAVE
   Compacte tegels met zwarte/donkere tekst.
========================================================= */

.cgs-lesson-matrix-tilemode {
    padding: 16px !important;
    border-radius: 22px !important;
    background: #f8fafc !important;
    border: 1px solid rgba(15,23,42,.10) !important;
    color: #020617 !important;
    overflow: hidden !important;
}

.cgs-lesson-matrix-tilemode,
.cgs-lesson-matrix-tilemode * {
    box-sizing: border-box !important;
    min-width: 0 !important;
    color: #020617 !important;
    text-shadow: none !important;
}

.cgs-lesson-matrix-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
}

.cgs-lesson-matrix-tilemode .cgs-lesson-matrix-title {
    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 950 !important;
    margin: 0 !important;
    color: #020617 !important;
}

.cgs-lesson-matrix-subtitle {
    margin-top: 4px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    color: #64748b !important;
}

.cgs-lesson-matrix-legend {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: flex-end !important;
}

.cgs-lesson-matrix-legend span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    border: 1px solid rgba(15,23,42,.10) !important;
}

.cgs-lesson-matrix-legend .pending {
    background: #ffffff !important;
    color: #475569 !important;
    border-left: 4px solid #f59e0b !important;
}

.cgs-lesson-matrix-legend .active {
    background: #f59e0b !important;
    color: #111827 !important;
    border-color: #d97706 !important;
}

.cgs-lesson-matrix-legend .done {
    background: #22c55e !important;
    color: #052e16 !important;
    border-color: #16a34a !important;
}

.cgs-lesson-matrix-shift-tileblock {
    margin-bottom: 14px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15,23,42,.10) !important;
    box-shadow: 0 12px 26px rgba(15,23,42,.06) !important;
}

.cgs-lesson-matrix-shift-tileblock:last-child {
    margin-bottom: 0 !important;
}

.cgs-lesson-matrix-shift-tilehead {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}

.cgs-lesson-matrix-shift-tilehead strong {
    font-size: 16px !important;
    font-weight: 950 !important;
    color: #020617 !important;
}

.cgs-lesson-matrix-shift-tilehead span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 26px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: #eaf2ff !important;
    color: #1e3a8a !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

/* Teamkaarten netjes als tiles */
.cgs-lesson-matrix-team-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
    gap: 10px !important;
    align-items: start !important;
}

.cgs-lesson-matrix-team-tilecard {
    padding: 10px !important;
    border-radius: 16px !important;
    background: #f1f5f9 !important;
    border: 1px solid rgba(15,23,42,.10) !important;
    overflow: hidden !important;
}

.cgs-lesson-matrix-team-tiletitle {
    margin-bottom: 8px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 950 !important;
    color: #020617 !important;
}

/* Casussen als compacte tegels */
.cgs-lesson-matrix-case-tiles {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)) !important;
    gap: 7px !important;
}

.cgs-lesson-matrix-case-tile {
    min-height: 48px !important;
    padding: 8px 9px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(15,23,42,.10) !important;
    background: #ffffff !important;
    color: #020617 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45) !important;
}

.cgs-lesson-matrix-case-tile .case-title {
    font-size: 12px !important;
    line-height: 1.15 !important;
    font-weight: 950 !important;
    color: #020617 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.cgs-lesson-matrix-case-tile .case-meta {
    font-size: 10px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    color: #334155 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Statuskleuren met zwarte/donkere tekst */
.cgs-lesson-matrix-case-tile.pending {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    border-left: 5px solid #f59e0b !important;
}

.cgs-lesson-matrix-case-tile.active-unassigned {
    background: #dbeafe !important;
    border-color: #93c5fd !important;
}

.cgs-lesson-matrix-case-tile.active {
    background: #f59e0b !important;
    border-color: #d97706 !important;
}

.cgs-lesson-matrix-case-tile.done {
    background: #22c55e !important;
    border-color: #16a34a !important;
}

.cgs-lesson-matrix-case-tile.skipped {
    background: #e5e7eb !important;
    border-color: #cbd5e1 !important;
}

.cgs-lesson-matrix-case-tile.active .case-title,
.cgs-lesson-matrix-case-tile.active .case-meta {
    color: #111827 !important;
}

.cgs-lesson-matrix-case-tile.done .case-title,
.cgs-lesson-matrix-case-tile.done .case-meta {
    color: #052e16 !important;
}

.cgs-lesson-matrix-case-tile.active-unassigned .case-title,
.cgs-lesson-matrix-case-tile.active-unassigned .case-meta {
    color: #1e3a8a !important;
}

.cgs-lesson-matrix-case-tile:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 18px rgba(15,23,42,.12) !important;
}

@media (max-width: 760px) {
    .cgs-lesson-matrix-head {
        flex-direction: column !important;
    }

    .cgs-lesson-matrix-legend {
        justify-content: flex-start !important;
    }

    .cgs-lesson-matrix-case-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 460px) {
    .cgs-lesson-matrix-case-tiles {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   LESREGISSEUR - COCKPIT VOORBEREIDING
   Zelfde stijlrichting als Lesronde control center.
========================================================= */

.cgs-lesson-layout {
    gap: 18px !important;
    align-items: start !important;
}

/* De drie hoofdpanelen krijgen dezelfde cockpitbasis als control center */
.cgs-lesson-panel {
    position: relative !important;
    overflow: hidden !important;

    background:
        radial-gradient(circle at 18% 0%, rgba(125, 211, 252, .14), transparent 34%),
        linear-gradient(145deg, #101c2d 0%, #233750 100%) !important;

    border: 1px solid rgba(148, 163, 184, .26) !important;
    border-radius: 24px !important;

    padding: 0 !important;

    box-shadow:
        0 24px 54px rgba(2, 6, 23, .28),
        inset 0 1px 0 rgba(255,255,255,.08) !important;

    color: #ffffff !important;
}

/* Headerlaag per paneel */
.cgs-lesson-panel-title {
    display: block !important;

    margin: 0 !important;
    padding: 22px 24px 8px 24px !important;

    color: #ffffff !important;
    font-size: 22px !important;
    line-height: 1.15 !important;
    font-weight: 950 !important;
    letter-spacing: -.02em !important;
}

.cgs-lesson-panel-sub {
    margin: 0 !important;
    padding: 0 24px 18px 24px !important;

    color: #cbd5e1 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 800 !important;
}

/* Alles na de introductie krijgt een lichte body in het donkere panel */
.cgs-lesson-panel .cgs-lesson-list,
.cgs-lesson-panel .cgs-lesson-case-source-title,
.cgs-lesson-panel .cgs-lesson-manual-case,
.cgs-lesson-panel .cgs-lesson-rule,
.cgs-lesson-panel .cgs-lesson-field,
.cgs-lesson-panel .cgs-lesson-status-box,
.cgs-lesson-panel .cgs-lesson-divider,
.cgs-lesson-panel .cgs-lesson-manual-list {
    margin-left: 24px !important;
    margin-right: 24px !important;
}

.cgs-lesson-panel .cgs-lesson-list {
    margin-bottom: 20px !important;
}

/* Sectietitels binnen de panelen */
.cgs-lesson-case-source-title,
.cgs-lesson-field label {
    color: #ffffff !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 950 !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

/* CP- en casusselecties als moderne lichte cards met zwarte tekst */
.cgs-lesson-check-card {
    background: rgba(255,255,255,.94) !important;
    border: 1px solid rgba(203,213,225,.85) !important;
    border-radius: 18px !important;
    padding: 14px 16px !important;

    color: #020617 !important;

    box-shadow:
        0 12px 26px rgba(2,6,23,.18),
        inset 0 1px 0 rgba(255,255,255,.82) !important;

    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease !important;
}

.cgs-lesson-check-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(56,189,248,.75) !important;
    box-shadow:
        0 16px 34px rgba(2,6,23,.24),
        0 0 0 4px rgba(56,189,248,.12) !important;
}

.cgs-lesson-check-card input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #0ea5e9 !important;
}

.cgs-lesson-check-card strong {
    color: #020617 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 950 !important;
}

.cgs-lesson-check-card small {
    color: #475569 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 850 !important;
}

/* Geselecteerde cards krijgen control-center blauwe rand */
.cgs-lesson-check-card:has(input:checked) {
    background: #f8fbff !important;
    border-color: rgba(56,189,248,.90) !important;
    box-shadow:
        0 16px 34px rgba(2,6,23,.25),
        0 0 0 4px rgba(56,189,248,.15),
        inset 0 1px 0 rgba(255,255,255,.90) !important;
}

/* Verdeelregels compacter en moderner */
.cgs-lesson-rule {
    background: rgba(255,255,255,.94) !important;
    border: 1px solid rgba(203,213,225,.85) !important;
    border-radius: 18px !important;

    padding: 14px 16px !important;
    gap: 14px !important;

    color: #020617 !important;

    box-shadow:
        0 12px 26px rgba(2,6,23,.18),
        inset 0 1px 0 rgba(255,255,255,.82) !important;

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease !important;
}

.cgs-lesson-rule:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(56,189,248,.75) !important;
    box-shadow:
        0 16px 34px rgba(2,6,23,.24),
        0 0 0 4px rgba(56,189,248,.12) !important;
}

.cgs-lesson-rule input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #0ea5e9 !important;
    flex: 0 0 auto !important;
}

.cgs-lesson-rule span {
    color: #020617 !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
}

.cgs-lesson-rule:has(input:checked) {
    background: #f8fbff !important;
    border-color: rgba(56,189,248,.90) !important;
    box-shadow:
        0 16px 34px rgba(2,6,23,.25),
        0 0 0 4px rgba(56,189,248,.15),
        inset 0 1px 0 rgba(255,255,255,.90) !important;
}

/* Handmatige casus toevoegen als subkaart in het donkere panel */
.cgs-lesson-manual-case {
    background: rgba(15,23,42,.30) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 18px !important;
    padding: 14px !important;
    margin-bottom: 20px !important;
}

.cgs-lesson-manual-case input,
.cgs-lesson-manual-case textarea,
.cgs-lesson-manual-case select,
.cgs-lesson-wait-row input {
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(148,163,184,.70) !important;
    border-radius: 14px !important;

    color: #020617 !important;
    font-size: 14px !important;
    font-weight: 850 !important;

    box-shadow:
        inset 0 1px 2px rgba(15,23,42,.08),
        0 8px 18px rgba(2,6,23,.16) !important;
}

.cgs-lesson-manual-case input::placeholder,
.cgs-lesson-manual-case textarea::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
}

.cgs-lesson-manual-case input:focus,
.cgs-lesson-manual-case textarea:focus,
.cgs-lesson-manual-case select:focus,
.cgs-lesson-wait-row input:focus {
    outline: none !important;
    border-color: #38bdf8 !important;
    box-shadow:
        0 0 0 4px rgba(56,189,248,.20),
        inset 0 1px 2px rgba(15,23,42,.08) !important;
}

/* Wachttijdblok */
.cgs-lesson-field {
    margin-top: 18px !important;
}

.cgs-lesson-wait-row {
    align-items: center !important;
    gap: 12px !important;
}

.cgs-lesson-wait-row span {
    color: #cbd5e1 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
}

/* Statusbox als control-center melding */
.cgs-lesson-status-box {
    background: rgba(15,23,42,.35) !important;
    border: 1px solid rgba(125,211,252,.20) !important;
    border-radius: 18px !important;

    color: #dbeafe !important;
    padding: 14px 16px !important;
    margin-top: 18px !important;
    margin-bottom: 20px !important;
}

.cgs-lesson-status-box strong {
    color: #7dd3fc !important;
}

/* Divider subtiel */
.cgs-lesson-divider {
    border: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent) !important;
    margin-top: 18px !important;
    margin-bottom: 18px !important;
}

/* Meldingen in donkere panelen */
.cgs-lesson-panel .cgs-cp-muted {
    color: #cbd5e1 !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 16px !important;
    padding: 14px !important;
}

/* Laatste panel onderaan lucht geven */
.cgs-lesson-panel > :last-child {
    margin-bottom: 24px !important;
}

/* Mobiel */
@media (max-width: 760px) {
    .cgs-lesson-panel-title {
        padding: 18px 18px 8px 18px !important;
        font-size: 20px !important;
    }

    .cgs-lesson-panel-sub {
        padding: 0 18px 16px 18px !important;
    }

    .cgs-lesson-panel .cgs-lesson-list,
    .cgs-lesson-panel .cgs-lesson-case-source-title,
    .cgs-lesson-panel .cgs-lesson-manual-case,
    .cgs-lesson-panel .cgs-lesson-rule,
    .cgs-lesson-panel .cgs-lesson-field,
    .cgs-lesson-panel .cgs-lesson-status-box,
    .cgs-lesson-panel .cgs-lesson-divider,
    .cgs-lesson-panel .cgs-lesson-manual-list {
        margin-left: 18px !important;
        margin-right: 18px !important;
    }

    .cgs-lesson-check-card strong,
    .cgs-lesson-rule span {
        font-size: 15px !important;
    }
}

/* =========================================================
   FORCE FIX - LESREGISSEUR VOORBEREIDING ALS CONTROL CENTER
   Deze selectors zijn extra specifiek zodat ze bestaande CSS overschrijven.
========================================================= */

.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel {
    position: relative !important;
    overflow: hidden !important;

    background:
        radial-gradient(circle at 18% 0%, rgba(125, 211, 252, .16), transparent 34%),
        linear-gradient(145deg, #101c2d 0%, #243852 100%) !important;

    border: 1px solid rgba(148, 163, 184, .28) !important;
    border-radius: 24px !important;

    padding: 0 !important;

    box-shadow:
        0 24px 54px rgba(2, 6, 23, .28),
        inset 0 1px 0 rgba(255,255,255,.08) !important;

    color: #ffffff !important;
}

.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-panel-title {
    margin: 0 !important;
    padding: 22px 24px 8px 24px !important;

    color: #ffffff !important;
    font-size: 22px !important;
    line-height: 1.15 !important;
    font-weight: 950 !important;
    letter-spacing: -.02em !important;
}

.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-panel-sub {
    margin: 0 !important;
    padding: 0 24px 18px 24px !important;

    color: #cbd5e1 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 800 !important;
}

.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-list,
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-case-source-title,
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-manual-case,
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-rule,
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-field,
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-status-box,
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-divider,
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-manual-list {
    margin-left: 24px !important;
    margin-right: 24px !important;
}

.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-case-source-title,
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-field label {
    color: #ffffff !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 950 !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-check-card,
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-rule {
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(203,213,225,.90) !important;
    border-radius: 18px !important;
    padding: 14px 16px !important;
    color: #020617 !important;

    box-shadow:
        0 12px 26px rgba(2,6,23,.18),
        inset 0 1px 0 rgba(255,255,255,.82) !important;
}

.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-check-card:hover,
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-rule:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(56,189,248,.75) !important;
    box-shadow:
        0 16px 34px rgba(2,6,23,.24),
        0 0 0 4px rgba(56,189,248,.12) !important;
}

.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-check-card:has(input:checked),
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-rule:has(input:checked) {
    background: #f8fbff !important;
    border-color: rgba(56,189,248,.92) !important;
    box-shadow:
        0 16px 34px rgba(2,6,23,.25),
        0 0 0 4px rgba(56,189,248,.15),
        inset 0 1px 0 rgba(255,255,255,.90) !important;
}

.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-check-card strong,
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-rule span {
    color: #020617 !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
}

.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-check-card small {
    color: #475569 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 850 !important;
}

.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #0ea5e9 !important;
}

.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-manual-case {
    background: rgba(15,23,42,.30) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 18px !important;
    padding: 14px !important;
    margin-bottom: 20px !important;
}

.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-manual-case input,
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-manual-case textarea,
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-manual-case select,
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-wait-row input {
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(148,163,184,.70) !important;
    border-radius: 14px !important;

    color: #020617 !important;
    font-size: 14px !important;
    font-weight: 850 !important;

    box-shadow:
        inset 0 1px 2px rgba(15,23,42,.08),
        0 8px 18px rgba(2,6,23,.16) !important;
}

.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-wait-row span {
    color: #cbd5e1 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
}

.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-status-box {
    background: rgba(15,23,42,.35) !important;
    border: 1px solid rgba(125,211,252,.20) !important;
    border-radius: 18px !important;

    color: #dbeafe !important;
    padding: 14px 16px !important;
    margin-top: 18px !important;
    margin-bottom: 20px !important;
}

.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-divider {
    border: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent) !important;
    margin-top: 18px !important;
    margin-bottom: 18px !important;
}

/* =========================================================
   FORCE FIX - VOORBEREIDING TILES BREED EN GESTAPELD
   Verfijning op cockpitstijl: lagere brede tegels + mooie casusknop.
========================================================= */

/* Cards binnen de drie voorbereidingspanelen breed, laag en horizontaal */
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-check-card,
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-rule {
    width: 100% !important;
    min-height: 74px !important;

    display: grid !important;
    grid-template-columns: 28px 1fr !important;
    align-items: center !important;
    column-gap: 14px !important;

    padding: 13px 16px !important;
    margin-bottom: 12px !important;

    border-radius: 18px !important;
}

/* Zorg dat tekst binnen de tiles niet als hoge blokken gaat ogen */
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-check-card > span,
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-rule > span {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
}

/* CP/casus titel compact en goed leesbaar */
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-check-card strong {
    display: block !important;
    color: #020617 !important;

    font-size: 16px !important;
    line-height: 1.15 !important;
    font-weight: 950 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-check-card small {
    display: block !important;
    color: #475569 !important;

    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 850 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Verdeelregels: breed, minder hoog, geen enorme tekstblokken */
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-rule span {
    color: #020617 !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
}

/* Checkbox visueel gelijkmatig */
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-check-card input[type="checkbox"],
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-rule input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    justify-self: center !important;
    align-self: center !important;
    accent-color: #0ea5e9 !important;
}

/* Casussenlijst dichter op elkaar, maar niet propperig */
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

/* Handmatige casus toevoegen: strakker cockpitvlak */
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-manual-case {
    display: grid !important;
    grid-template-columns: 120px 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
}

/* Tekstveld titel over breedte, textarea over hele breedte */
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel #cgs-lesson-manual-message {
    grid-column: 1 / -1 !important;
    min-height: 86px !important;
    resize: vertical !important;
}

/* Casus toevoegen knop modern maken */
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel #cgs-lesson-add-manual-case {
    grid-column: 1 / -1 !important;

    min-height: 48px !important;
    width: 100% !important;

    border: 1.5px solid rgba(245, 158, 11, .95) !important;
    border-radius: 16px !important;

    background:
        linear-gradient(145deg, #172033 0%, #2d415f 100%) !important;

    color: #ffffff !important;

    font-size: 15px !important;
    font-weight: 950 !important;
    letter-spacing: .01em !important;

    box-shadow:
        0 14px 28px rgba(2,6,23,.26),
        inset 0 1px 0 rgba(255,255,255,.08) !important;

    cursor: pointer !important;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel #cgs-lesson-add-manual-case:hover {
    transform: translateY(-2px) !important;
    border-color: #f59e0b !important;
    box-shadow:
        0 18px 36px rgba(2,6,23,.32),
        0 0 0 4px rgba(245,158,11,.14),
        inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* Wachttijdveld mooier in verhouding */
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-wait-row {
    display: grid !important;
    grid-template-columns: 120px auto !important;
    align-items: center !important;
    gap: 12px !important;
}

.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-wait-row input {
    width: 120px !important;
    min-height: 44px !important;
    text-align: center !important;
}

/* Extra compact op kleinere schermen */
@media (max-width: 900px) {
    .cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-manual-case {
        grid-template-columns: 1fr !important;
    }

    .cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-wait-row {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   LESREGISSEUR - OPNIEUW INGEDEELD VOLGENS SCHETS
   3 brede secties onder elkaar, tegels per sectie in 2 kolommen.
========================================================= */

/* De drie eenheden niet meer naast elkaar, maar onder elkaar */
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
    align-items: stretch !important;
}

/* Elk voorbereiding-paneel wordt een breed horizontaal blok */
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel {
    width: 100% !important;
    max-width: none !important;
    min-height: auto !important;

    border-radius: 28px !important;
    padding-bottom: 24px !important;
}

/* Header iets meer als sectietitel in breed vak */
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-panel-title {
    padding: 24px 28px 6px 28px !important;
    font-size: 24px !important;
}

.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-panel-sub {
    padding: 0 28px 18px 28px !important;
    max-width: 780px !important;
}

/* Binnen de secties: tegels in twee kolommen */
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
    gap: 14px !important;

    margin-left: 28px !important;
    margin-right: 28px !important;
    margin-bottom: 20px !important;
}

/* Snelmeldingen titel moet boven de grid blijven */
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-case-source-title {
    margin-left: 28px !important;
    margin-right: 28px !important;
}

/* Tegels zelf breder, lager en horizontaal */
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-check-card {
    min-height: 72px !important;
    margin-bottom: 0 !important;

    display: grid !important;
    grid-template-columns: 30px 1fr !important;
    align-items: center !important;
    column-gap: 14px !important;

    padding: 13px 16px !important;
}

/* Verdeelregels ook in twee kolommen */
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-rule-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
    gap: 14px !important;

    margin-left: 28px !important;
    margin-right: 28px !important;
    margin-bottom: 18px !important;
}

.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-rule-grid .cgs-lesson-rule {
    margin: 0 !important;
    min-height: 72px !important;
}

/* Als er nog oude losse rule-marges bestaan: neutraliseren binnen grid */
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-rule {
    display: grid !important;
    grid-template-columns: 30px 1fr !important;
    align-items: center !important;
    column-gap: 14px !important;
}

/* De derde regel mag netjes volle breedte pakken als het mooier uitkomt */
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-rule-grid .cgs-lesson-rule:nth-child(3) {
    grid-column: 1 / -1 !important;
}

/* Handmatige casus toevoegen ook in breed cockpitblok */
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-manual-case {
    margin-left: 28px !important;
    margin-right: 28px !important;

    display: grid !important;
    grid-template-columns: 140px 1fr auto !important;
    gap: 12px !important;
    align-items: stretch !important;
}

.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel #cgs-lesson-manual-message {
    grid-column: 1 / -1 !important;
    min-height: 90px !important;
}

.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel #cgs-lesson-add-manual-case {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
}

/* Wachttijd en status netjes onder de regels */
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-field,
.cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-status-box {
    margin-left: 28px !important;
    margin-right: 28px !important;
}

/* Responsief: op smaller scherm terug naar 1 kolom */
@media (max-width: 900px) {
    .cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-list,
    .cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-rule-grid {
        grid-template-columns: 1fr !important;
        margin-left: 20px !important;
        margin-right: 20px !important;
    }

    .cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-rule-grid .cgs-lesson-rule:nth-child(3) {
        grid-column: auto !important;
    }

    .cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-manual-case {
        grid-template-columns: 1fr !important;
        margin-left: 20px !important;
        margin-right: 20px !important;
    }

    .cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-field,
    .cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-status-box,
    .cgs-cp-box.cgs-lesson-regisseur-box.open #cgs-lesson-content .cgs-lesson-layout > .cgs-lesson-panel .cgs-lesson-case-source-title {
        margin-left: 20px !important;
        margin-right: 20px !important;
    }
}

/* =========================================================
   OPLEIDING KEUZE BIJ CP-CODE
========================================================= */

.cgs-cp-opleiding-card {
    margin: 16px 0 18px 0 !important;
    padding: 18px !important;
    border-radius: 20px !important;
    background: linear-gradient(145deg, #172033, #24344d) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 16px 34px rgba(15,23,42,.16) !important;
}

.cgs-cp-opleiding-title {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    margin-bottom: 12px !important;
}

.cgs-cp-opleiding-options {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.cgs-cp-opleiding-option {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 46px !important;
    padding: 10px 16px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(203,213,225,.85) !important;
    color: #020617 !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.cgs-cp-opleiding-option input {
    width: 18px !important;
    height: 18px !important;
    accent-color: #0ea5e9 !important;
}

.cgs-code-opleiding {
    margin-top: 6px !important;
    color: #334155 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

.cgs-opleiding-badge {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    border: 1px solid rgba(15,23,42,.10) !important;
}

.cgs-opleiding-badge.beveiliging {
    background: #e0f2fe !important;
    color: #075985 !important;
}

.cgs-opleiding-badge.handhaving {
    background: #fef3c7 !important;
    color: #92400e !important;
}

/* =========================================================
   STUDENT LOGIN - 6 CODEVAKJES COMPACT
   Overschrijft generieke input width:100% regels.
========================================================= */

.cgs-login-wrapper .otp-container.student-otp {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    margin: 20px auto 25px !important;
}

.cgs-login-wrapper .otp-container.student-otp .student-otp-input {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    flex: 0 0 46px !important;

    padding: 0 !important;
    margin: 0 !important;

    text-align: center !important;
    font-size: 20px !important;
    font-weight: 800 !important;

    border-radius: 10px !important;
    box-sizing: border-box !important;
}

@media (max-width: 430px) {
    .cgs-login-wrapper .otp-container.student-otp {
        gap: 7px !important;
    }

    .cgs-login-wrapper .otp-container.student-otp .student-otp-input {
        width: 39px !important;
        min-width: 39px !important;
        max-width: 39px !important;
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
        flex-basis: 39px !important;
        font-size: 18px !important;
    }
}

/* =========================================================
   HTV COMBIBON - MOBIELVRIENDELIJKE FORMULIERTEGELS
========================================================= */

.cgs-combibon-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(2, 6, 23, .62) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 10000001 !important;
}

.cgs-combibon-modal,
.cgs-combibon-form-modal {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(94vw, 780px) !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    background: linear-gradient(145deg, rgba(15,23,42,.96), rgba(30,41,59,.96)) !important;
    border: 1.5px solid rgba(249, 115, 22, .85) !important;
    border-radius: 26px !important;
    padding: 20px !important;
    z-index: 10000002 !important;
    color: #fff !important;
    box-shadow: 0 26px 90px rgba(0,0,0,.55), 0 0 35px rgba(249,115,22,.15) !important;
    box-sizing: border-box !important;
}

.cgs-combibon-form-modal {
    width: min(96vw, 920px) !important;
    padding: 0 18px 18px !important;
}

.cgs-combibon-modal-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 18px !important;
}

.cgs-combibon-modal-head.sticky {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    padding: 18px 0 !important;
    background: linear-gradient(145deg, rgba(15,23,42,.98), rgba(30,41,59,.98)) !important;
}

.cgs-combibon-title {
    font-size: 28px !important;
    line-height: 1.1 !important;
    font-weight: 950 !important;
    color: #fff !important;
}

.cgs-combibon-sub {
    margin-top: 5px !important;
    color: #cbd5e1 !important;
    font-size: 13px !important;
    font-weight: 750 !important;
}

#cgs-team-combibon-close,
#cgs-team-combibon-form-close {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    background: rgba(255,255,255,.07) !important;
    color: #fff !important;
    font-size: 30px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.cgs-combibon-list {
    margin-top: 16px !important;
}

.cgs-combibon-empty,
.cgs-combibon-list-item {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 18px !important;
    padding: 16px !important;
    color: #cbd5e1 !important;
    font-weight: 800 !important;
}

.cgs-combibon-list-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.cgs-combibon-list-item strong {
    display: block !important;
    color: #fff !important;
    font-size: 18px !important;
}

.cgs-combibon-list-item small {
    display: block !important;
    margin-top: 5px !important;
    color: #94a3b8 !important;
    font-weight: 750 !important;
}

.cgs-combibon-list-item button,
.cgs-combibon-signature button {
    border: 1px solid rgba(249,115,22,.55) !important;
    background: rgba(249,115,22,.16) !important;
    color: #fdba74 !important;
    border-radius: 13px !important;
    padding: 10px 14px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.cgs-combibon-section {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 20px !important;
    padding: 16px !important;
    margin-bottom: 14px !important;
}

.cgs-combibon-section h3 {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    margin: 0 0 14px !important;
}

.cgs-combibon-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.cgs-combibon-field,
.cgs-combibon-check {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    color: #fff !important;
    font-weight: 850 !important;
}

.cgs-combibon-field-full {
    grid-column: 1 / -1 !important;
}

.cgs-combibon-field span,
.cgs-combibon-signature span {
    color: #cbd5e1 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.cgs-combibon-field input,
.cgs-combibon-field select,
.cgs-combibon-field textarea {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(203,213,225,.45) !important;
    background: rgba(255,255,255,.94) !important;
    color: #020617 !important;
    padding: 10px 12px !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    box-sizing: border-box !important;
}

.cgs-combibon-money-wrap {
    position: relative !important;
    width: 100% !important;
}

.cgs-combibon-money-wrap .cgs-combibon-euro-prefix {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #020617 !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.cgs-combibon-money-wrap input[data-combibon-field="sanctiebedrag"] {
    padding-left: 36px !important;
}

.cgs-combibon-field textarea {
    min-height: 120px !important;
    resize: vertical !important;
    line-height: 1.5 !important;
}

.cgs-combibon-checkrow {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
}

.cgs-combibon-checkrow.vertical {
    flex-direction: column !important;
}

.cgs-combibon-check {
    flex-direction: row !important;
    align-items: center !important;
    background: rgba(255,255,255,.92) !important;
    color: #020617 !important;
    border-radius: 999px !important;
    padding: 8px 11px !important;
    border: 1px solid rgba(203,213,225,.75) !important;
}

.cgs-combibon-check input {
    width: 18px !important;
    height: 18px !important;
    accent-color: #0ea5e9 !important;
}

.cgs-combibon-check span {
    color: #020617 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

.cgs-combibon-signature {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
}

.cgs-combibon-signature canvas {
    width: 100% !important;
    height: 150px !important;
    background: #fff !important;
    border: 1px solid rgba(203,213,225,.85) !important;
    border-radius: 14px !important;
    touch-action: none !important;
}

.cgs-combibon-savebar {
    position: sticky !important;
    bottom: 0 !important;
    background: linear-gradient(180deg, rgba(15,23,42,.10), rgba(15,23,42,.98) 35%) !important;
    padding: 16px 0 0 !important;
}

@media (max-width: 680px) {
    .cgs-combibon-modal,
    .cgs-combibon-form-modal {
        width: 96vw !important;
        max-height: 90vh !important;
        border-radius: 22px !important;
        padding: 16px !important;
    }

    .cgs-combibon-form-modal {
        padding: 0 12px 12px !important;
    }

    .cgs-combibon-title {
        font-size: 23px !important;
    }

    .cgs-combibon-grid {
        grid-template-columns: 1fr !important;
    }

    .cgs-combibon-list-item {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .cgs-combibon-list-item button {
        width: 100% !important;
    }
}

/* =========================================================
   CP CODE GENEREREN - KNOP RECHTS IN OPLEIDINGSVAK
========================================================= */

.cgs-cp-opleiding-card.cgs-cp-opleiding-card-with-button {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 20px !important;
}

.cgs-cp-opleiding-left {
    min-width: 0 !important;
}

.cgs-cp-opleiding-action {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.cgs-generate-code-in-card {
    min-height: 58px !important;
    padding: 0 26px !important;
    border: 2px solid #f59e0b !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, #101827 0%, #263b58 100%) !important;
    color: #ffffff !important;
    box-shadow:
        0 18px 36px rgba(2,6,23,.32),
        0 0 0 5px rgba(245,158,11,.12),
        inset 0 1px 0 rgba(255,255,255,.10) !important;
    white-space: nowrap !important;
}

.cgs-generate-code-in-card:hover {
    border-color: #ffb020 !important;
    transform: translateY(-1px) !important;
    box-shadow:
        0 22px 42px rgba(2,6,23,.38),
        0 0 0 6px rgba(245,158,11,.18),
        inset 0 1px 0 rgba(255,255,255,.12) !important;
}

@media (max-width: 760px) {
    .cgs-cp-opleiding-card.cgs-cp-opleiding-card-with-button {
        grid-template-columns: 1fr !important;
    }

    .cgs-cp-opleiding-action {
        justify-content: stretch !important;
    }

    .cgs-generate-code-in-card {
        width: 100% !important;
    }
}

/* =========================================================
   TEAM DASHBOARD - SECURITY PDA LOOK OP MOBIEL
========================================================= */

.cgs-team-pda-topline {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.cgs-team-pda-label {
    font-size: 42px !important;
    line-height: .9 !important;
    font-weight: 1000 !important;
    letter-spacing: .04em !important;
    color: #ffffff !important;
    text-shadow:
        0 0 14px rgba(125,211,252,.35),
        0 2px 0 rgba(0,0,0,.25) !important;
}

.cgs-team-pda-live {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    background: rgba(34,197,94,.14) !important;
    border: 1px solid rgba(34,197,94,.45) !important;
    color: #86efac !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
}

@media (max-width: 768px) {

    html:has(.cgs-team-comm-app),
    body:has(.cgs-team-comm-app) {
        background:
            radial-gradient(circle at 50% -10%, rgba(59,130,246,.20), transparent 34%),
            linear-gradient(180deg, #020617 0%, #0b1220 100%) !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
    }

    .cgs-team-comm-app {
        min-height: 100vh !important;
        padding: 14px !important;
        background:
            linear-gradient(180deg, rgba(15,23,42,.96), rgba(2,6,23,.98)) !important;
        color: #ffffff !important;
    }

    .cgs-team-comm-card {
        width: 100% !important;
        max-width: 430px !important;
        min-height: calc(100vh - 28px) !important;
        margin: 0 auto !important;
        padding: 12px !important;
        border-radius: 30px !important;
        background:
            radial-gradient(circle at 20% 0%, rgba(56,189,248,.18), transparent 28%),
            linear-gradient(180deg, #0f172a 0%, #020617 100%) !important;
        border: 2px solid rgba(148,163,184,.28) !important;
        box-shadow:
            0 28px 70px rgba(0,0,0,.55),
            inset 0 1px 0 rgba(255,255,255,.08) !important;
    }

    .cgs-team-comm-header {
        border-radius: 24px !important;
        padding: 18px !important;
        margin-bottom: 14px !important;
        background:
            linear-gradient(145deg, rgba(30,41,59,.96), rgba(15,23,42,.96)) !important;
        border: 1px solid rgba(125,211,252,.18) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.08),
            0 14px 30px rgba(0,0,0,.35) !important;
    }

    .cgs-team-pda-label {
        font-size: 48px !important;
    }

    .cgs-team-comm-title {
        margin-top: 4px !important;
        font-size: 28px !important;
        font-weight: 950 !important;
        color: #ffffff !important;
    }

    .cgs-team-comm-sub {
        margin-top: 4px !important;
        color: #93c5fd !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        letter-spacing: .02em !important;
    }

    .cgs-team-comm-status {
        display: inline-flex !important;
        align-items: center !important;
        margin-top: 12px !important;
        min-height: 30px !important;
        padding: 6px 11px !important;
        border-radius: 999px !important;
        background: rgba(34,197,94,.14) !important;
        border: 1px solid rgba(34,197,94,.38) !important;
        color: #86efac !important;
        font-size: 12px !important;
        font-weight: 950 !important;
    }

    .cgs-team-comm-panel {
        padding: 0 !important;
        background: transparent !important;
    }

    .cgs-team-comm-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .cgs-team-comm-btn {
        min-height: 64px !important;
        width: 100% !important;
        border-radius: 20px !important;
        border: 1px solid rgba(125,211,252,.24) !important;
        background:
            linear-gradient(145deg, #14233a 0%, #263b58 100%) !important;
        color: #ffffff !important;
        font-size: 18px !important;
        font-weight: 950 !important;
        letter-spacing: .02em !important;
        box-shadow:
            0 14px 28px rgba(0,0,0,.34),
            inset 0 1px 0 rgba(255,255,255,.08) !important;
    }

    .cgs-team-comm-btn:active {
        transform: translateY(1px) scale(.99) !important;
    }

    .cgs-team-chat-button {
        background:
            linear-gradient(145deg, #0f2a44 0%, #075985 100%) !important;
        border-color: rgba(56,189,248,.42) !important;
    }

    #cgs-team-open-combibon {
        border-color: rgba(245,158,11,.58) !important;
        box-shadow:
            0 14px 28px rgba(0,0,0,.34),
            0 0 0 4px rgba(245,158,11,.10),
            inset 0 1px 0 rgba(255,255,255,.08) !important;
    }

    .cgs-team-comm-feed {
        display: none !important;
    }

    .cgs-chat-modal,
    .cgs-team-report-modal,
    .cgs-team-combibon-modal {
        border-radius: 26px !important;
    }
}

/* =========================================================
   TEAM DASHBOARD - PDA APP ICONS + KLOK
========================================================= */

.cgs-team-pda-date {
    margin-top: 7px !important;
    color: #a8c7ff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
    text-transform: capitalize !important;
}

.cgs-team-pda-clock-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 7px !important;
}

.cgs-team-pda-clock {
    font-size: 28px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    color: #ffffff !important;
    letter-spacing: .02em !important;
    text-shadow: 0 0 14px rgba(56,189,248,.35) !important;
}

.cgs-team-pda-app-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(86px, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
}

.cgs-team-pda-app {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    min-height: 124px !important;
    padding: 14px 10px 12px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
}

.cgs-team-pda-icon {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 66px !important;
    height: 66px !important;
    border-radius: 21px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow:
        0 15px 28px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.cgs-team-pda-icon svg {
    width: 34px !important;
    height: 34px !important;
    fill: #ffffff !important;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.28)) !important;
}

.cgs-team-pda-icon-chat {
    background:
        radial-gradient(circle at 26% 18%, rgba(255,255,255,.36), transparent 28%),
        linear-gradient(145deg, #38bdf8 0%, #2563eb 100%) !important;
}

.cgs-team-pda-icon-report {
    background:
        radial-gradient(circle at 26% 18%, rgba(255,255,255,.35), transparent 28%),
        linear-gradient(145deg, #34d399 0%, #059669 100%) !important;
}

.cgs-team-pda-icon-combibon {
    background:
        radial-gradient(circle at 26% 18%, rgba(255,255,255,.36), transparent 28%),
        linear-gradient(145deg, #fbbf24 0%, #f97316 100%) !important;
}

/* v26: PDA meldingen-driehoek rood maken zonder PDA-layout te veranderen */
.cgs-team-pda-icon-alarm {
    background:
        radial-gradient(circle at 26% 18%, rgba(255,255,255,.30), transparent 28%),
        linear-gradient(145deg, rgba(239,68,68,.22) 0%, rgba(127,29,29,.32) 100%) !important;
    border-color: rgba(239,68,68,.55) !important;
}
.cgs-team-pda-icon-alarm svg {
    fill: #ef4444 !important;
    filter: drop-shadow(0 0 8px rgba(239,68,68,.65)) drop-shadow(0 2px 5px rgba(0,0,0,.28)) !important;
}

.cgs-team-pda-app-label {
    display: block !important;
    max-width: 100% !important;
    color: #eaf2ff !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    letter-spacing: .01em !important;
    text-shadow: 0 2px 6px rgba(0,0,0,.35) !important;
    overflow-wrap: anywhere !important;
}

.cgs-team-pda-badge {
    position: absolute !important;
    top: -6px !important;
    right: -7px !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    background: #ef4444 !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    line-height: 18px !important;
}

@media (max-width: 768px) {
    .cgs-team-comm-card {
        max-width: min(100%, 520px) !important;
        width: 100% !important;
        min-height: calc(100vh - 18px) !important;
        padding: 14px !important;
    }

    .cgs-team-comm-app {
        padding: 9px !important;
    }

    .cgs-team-comm-header {
        padding: 18px !important;
        margin-bottom: 18px !important;
    }

    .cgs-team-pda-label {
        font-size: 54px !important;
    }

    .cgs-team-pda-clock {
        font-size: 30px !important;
    }

    .cgs-team-comm-title {
        font-size: 24px !important;
    }

    .cgs-team-pda-app-grid {
        grid-template-columns: repeat(3, minmax(82px, 1fr)) !important;
        gap: 18px 12px !important;
        padding: 10px 4px !important;
    }

    .cgs-team-pda-app {
        min-height: 118px !important;
        padding: 8px 4px 10px !important;
    }

    .cgs-team-pda-icon {
        width: 68px !important;
        height: 68px !important;
        border-radius: 22px !important;
    }
}

@media (max-width: 390px) {
    .cgs-team-pda-app-grid {
        gap: 14px 8px !important;
    }

    .cgs-team-pda-icon {
        width: 60px !important;
        height: 60px !important;
        border-radius: 19px !important;
    }

    .cgs-team-pda-icon svg {
        width: 31px !important;
        height: 31px !important;
    }

    .cgs-team-pda-app-label {
        font-size: 12px !important;
    }

    .cgs-team-pda-label {
        font-size: 48px !important;
    }

    .cgs-team-pda-clock {
        font-size: 25px !important;
    }
}

/* =========================================================
   TEAM DASHBOARD - PDA BREED/HOGER + DATUM/TIJD SAMEN
========================================================= */

.cgs-team-pda-brand {
    min-width: 0 !important;
}

.cgs-team-pda-timebox {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    min-width: 118px !important;
}

.cgs-team-pda-timebox .cgs-team-pda-date {
    margin-top: 0 !important;
    text-align: right !important;
    max-width: 150px !important;
    line-height: 1.15 !important;
}

@media (max-width: 768px) {

    .cgs-team-comm-app {
        padding: 4px !important;
        min-height: 100dvh !important;
    }

    .cgs-team-comm-card {
        max-width: 100% !important;
        width: calc(100vw - 8px) !important;
        min-height: calc(100dvh - 8px) !important;
        margin: 0 auto !important;
        padding: 10px !important;
        border-radius: 28px !important;
    }

    .cgs-team-comm-header {
        padding: 17px 17px 18px !important;
        border-radius: 23px !important;
        margin-bottom: 14px !important;
    }

    .cgs-team-pda-topline {
        align-items: flex-start !important;
        margin-bottom: 14px !important;
    }

    .cgs-team-pda-label {
        font-size: clamp(50px, 15vw, 68px) !important;
        letter-spacing: .02em !important;
    }

    .cgs-team-pda-timebox {
        min-width: 120px !important;
        padding-top: 2px !important;
    }

    .cgs-team-pda-clock {
        font-size: clamp(28px, 8vw, 38px) !important;
    }

    .cgs-team-pda-date {
        font-size: 11px !important;
        color: #bfd6ff !important;
    }

    .cgs-team-pda-live {
        min-height: 25px !important;
        padding: 4px 9px !important;
        font-size: 10px !important;
    }

    .cgs-team-comm-title {
        font-size: clamp(29px, 9vw, 42px) !important;
        margin-top: 8px !important;
    }

    .cgs-team-comm-sub {
        font-size: 13px !important;
        margin-top: 7px !important;
    }

    .cgs-team-comm-status {
        margin-top: 13px !important;
    }

    .cgs-team-pda-app-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
        padding: 12px 2px 0 !important;
    }

    .cgs-team-pda-app {
        min-height: 122px !important;
        padding: 7px 2px 10px !important;
    }

    .cgs-team-pda-icon {
        width: clamp(64px, 18vw, 78px) !important;
        height: clamp(64px, 18vw, 78px) !important;
        border-radius: 23px !important;
    }

    .cgs-team-pda-icon svg {
        width: clamp(31px, 9vw, 39px) !important;
        height: clamp(31px, 9vw, 39px) !important;
    }

    .cgs-team-pda-app-label {
        font-size: clamp(12px, 3.6vw, 15px) !important;
        line-height: 1.08 !important;
    }
}

@media (max-width: 390px) {
    .cgs-team-comm-card {
        width: calc(100vw - 6px) !important;
        min-height: calc(100dvh - 6px) !important;
        padding: 8px !important;
        border-radius: 24px !important;
    }

    .cgs-team-comm-app {
        padding: 3px !important;
    }

    .cgs-team-comm-header {
        padding: 15px !important;
    }

    .cgs-team-pda-timebox {
        min-width: 108px !important;
    }

    .cgs-team-pda-date {
        max-width: 118px !important;
        font-size: 10px !important;
    }

    .cgs-team-pda-app-grid {
        gap: 10px !important;
    }
}

/* =========================================================
   TEAM DASHBOARD - PDA POSITION + DATUM FIX
   Voorkomt afsnijden rechts en maakt datum duidelijker.
========================================================= */

@media (max-width: 768px) {

    html:has(.cgs-team-comm-app),
    body:has(.cgs-team-comm-app) {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .cgs-team-comm-app {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100dvh !important;
        padding: 6px !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .cgs-team-comm-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: calc(100dvh - 12px) !important;
        margin: 0 auto !important;
        padding: 9px !important;
        border-radius: 26px !important;
        box-sizing: border-box !important;
        transform: none !important;
        overflow: hidden !important;
    }

    .cgs-team-comm-header {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 16px !important;
        border-radius: 22px !important;
        overflow: hidden !important;
    }

    .cgs-team-pda-topline {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .cgs-team-pda-label {
        font-size: clamp(46px, 14vw, 58px) !important;
        line-height: .9 !important;
        max-width: 100% !important;
        white-space: nowrap !important;
    }

    .cgs-team-pda-timebox {
        min-width: 0 !important;
        width: auto !important;
        max-width: 145px !important;
        align-items: flex-end !important;
        justify-content: flex-start !important;
        text-align: right !important;
        gap: 5px !important;
        padding-top: 1px !important;
    }

    .cgs-team-pda-clock {
        font-size: clamp(28px, 8.5vw, 36px) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .cgs-team-pda-date,
    .cgs-team-pda-timebox .cgs-team-pda-date {
        display: block !important;
        margin: 0 !important;
        max-width: 145px !important;
        color: #d7e7ff !important;
        font-size: clamp(13px, 3.3vw, 16px) !important;
        line-height: 1.15 !important;
        font-weight: 900 !important;
        text-align: right !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
    }

    .cgs-team-pda-live {
        margin-top: 2px !important;
        min-height: 24px !important;
        padding: 4px 9px !important;
        font-size: 10px !important;
    }

    .cgs-team-comm-title {
        font-size: clamp(28px, 8.5vw, 38px) !important;
        line-height: 1.05 !important;
    }

    .cgs-team-pda-app-grid {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        padding: 10px 0 0 !important;
        overflow: hidden !important;
    }

    .cgs-team-pda-app {
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 116px !important;
        padding: 6px 2px 9px !important;
    }

    .cgs-team-pda-icon {
        width: clamp(58px, 17vw, 72px) !important;
        height: clamp(58px, 17vw, 72px) !important;
        border-radius: 21px !important;
    }

    .cgs-team-pda-app-label {
        max-width: 100% !important;
        font-size: clamp(12px, 3.5vw, 14px) !important;
        line-height: 1.08 !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }
}

@media (max-width: 390px) {

    .cgs-team-comm-app {
        padding: 4px !important;
    }

    .cgs-team-comm-card {
        min-height: calc(100dvh - 8px) !important;
        padding: 8px !important;
        border-radius: 24px !important;
    }

    .cgs-team-comm-header {
        padding: 14px !important;
    }

    .cgs-team-pda-timebox {
        max-width: 128px !important;
    }

    .cgs-team-pda-date,
    .cgs-team-pda-timebox .cgs-team-pda-date {
        max-width: 128px !important;
        font-size: 12px !important;
    }

    .cgs-team-pda-clock {
        font-size: 29px !important;
    }

    .cgs-team-pda-app-grid {
        gap: 8px !important;
    }
}

/* =========================================================
   TEAM DASHBOARD - PDA HOGER OVER PAGINATITEL
   Trekt het PDA-scherm op mobiel omhoog over de paginatitel heen.
========================================================= */

@media (max-width: 768px) {

    body:has(.cgs-team-comm-app) .entry-title,
    body:has(.cgs-team-comm-app) .page-title,
    body:has(.cgs-team-comm-app) h1.entry-title,
    body:has(.cgs-team-comm-app) h1.wp-block-post-title,
    body:has(.cgs-team-comm-app) .wp-block-post-title {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    body:has(.cgs-team-comm-app) .entry-content,
    body:has(.cgs-team-comm-app) .wp-block-post-content,
    body:has(.cgs-team-comm-app) main,
    body:has(.cgs-team-comm-app) .site-main {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .cgs-team-comm-app {
        margin-top: -76px !important;
        padding-top: 4px !important;
        position: relative !important;
        z-index: 20 !important;
    }

    .cgs-team-comm-card {
        margin-top: 0 !important;
        min-height: calc(100dvh - 8px) !important;
    }
}

@media (max-width: 430px) {
    .cgs-team-comm-app {
        margin-top: -86px !important;
    }
}



/* =========================================================
   TEAM DASHBOARD - PDA EXTRA OMHOOG
========================================================= */

@media (max-width: 768px) {

    .cgs-team-comm-app {
        margin-top: -145px !important;
        padding-top: 0 !important;
    }

    .cgs-team-comm-card {
        min-height: calc(100dvh + 40px) !important;
    }
}

@media (max-width: 430px) {

    .cgs-team-comm-app {
        margin-top: -165px !important;
    }
}


/* =========================================================
   PDA FINETUNE MOBILE
========================================================= */

@media (max-width: 768px) {

    .cgs-team-comm-app {
        margin-top: -125px !important; /* iets zakken */
        width: calc(100vw - 10px) !important;
        max-width: calc(100vw - 10px) !important;
        margin-left: -5px !important;
    }

    .cgs-team-comm-card {
        width: calc(100vw - 10px) !important;
        max-width: calc(100vw - 10px) !important;
        border-radius: 32px !important;
    }
}

@media (max-width: 430px) {

    .cgs-team-comm-app {
        margin-top: -138px !important;
        width: calc(100vw - 6px) !important;
        max-width: calc(100vw - 6px) !important;
        margin-left: -3px !important;
    }

    .cgs-team-comm-card {
        width: calc(100vw - 6px) !important;
        max-width: calc(100vw - 6px) !important;
    }
}

/* =========================================================
   PDA FINAL FIT - SCHERMVULLEND EN ICONEN BINNEN BEELD
========================================================= */

@media (max-width: 768px) {

    .cgs-team-comm-app {
        margin-top: -152px !important;
        padding: 2px !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .cgs-team-comm-card {
        width: calc(100vw - 4px) !important;
        max-width: calc(100vw - 4px) !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding: 7px !important;
        border-radius: 28px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .cgs-team-comm-header {
        padding: 15px !important;
        border-radius: 22px !important;
        margin-bottom: 12px !important;
    }

    .cgs-team-pda-app-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px 0 0 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .cgs-team-pda-app {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 108px !important;
        padding: 6px 2px 8px !important;
        border-radius: 18px !important;
        box-sizing: border-box !important;
    }

    .cgs-team-pda-icon {
        width: clamp(54px, 15.5vw, 68px) !important;
        height: clamp(54px, 15.5vw, 68px) !important;
        border-radius: 20px !important;
    }

    .cgs-team-pda-icon svg {
        width: clamp(27px, 8vw, 34px) !important;
        height: clamp(27px, 8vw, 34px) !important;
    }

    .cgs-team-pda-app-label {
        font-size: clamp(11px, 3.2vw, 13px) !important;
        line-height: 1.05 !important;
        max-width: 100% !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }

    .cgs-team-pda-label {
        font-size: clamp(44px, 13vw, 56px) !important;
    }

    .cgs-team-pda-clock {
        font-size: clamp(27px, 8vw, 34px) !important;
    }

    .cgs-team-pda-date,
    .cgs-team-pda-timebox .cgs-team-pda-date {
        font-size: clamp(12px, 3vw, 15px) !important;
    }
}

@media (max-width: 430px) {

    .cgs-team-comm-app {
        margin-top: -162px !important;
        padding: 1px !important;
    }

    .cgs-team-comm-card {
        width: calc(100vw - 2px) !important;
        max-width: calc(100vw - 2px) !important;
        padding: 6px !important;
        border-radius: 26px !important;
    }

    .cgs-team-comm-header {
        padding: 14px !important;
    }

    .cgs-team-pda-app-grid {
        gap: 6px !important;
    }

    .cgs-team-pda-app {
        min-height: 104px !important;
    }
}



/* =========================================================
   PDA RESPONSIVE OVERFLOW FIX
========================================================= */

@media (max-width: 768px) {

    .cgs-team-comm-app {
        overflow-x: hidden !important;
    }

    .cgs-team-comm-card {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
        margin: 0 auto !important;
        overflow: hidden !important;
    }

    .cgs-team-comm-header {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        align-items: start !important;
        gap: 10px !important;
        overflow: hidden !important;
    }

    .cgs-team-pda-label {
        font-size: clamp(42px, 12vw, 58px) !important;
        line-height: 1 !important;
    }

    .cgs-team-pda-timebox {
        text-align: right !important;
        min-width: 0 !important;
    }

    .cgs-team-pda-clock {
        font-size: clamp(22px, 7vw, 32px) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .cgs-team-pda-date {
        font-size: clamp(11px, 2.9vw, 14px) !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    .cgs-team-pda-app-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .cgs-team-pda-app {
        min-width: 0 !important;
        width: 100% !important;
        padding: 10px 4px !important;
    }

    .cgs-team-pda-app-label {
        font-size: 11px !important;
        line-height: 1.1 !important;
        word-break: break-word !important;
    }

    .cgs-team-pda-icon {
        width: 62px !important;
        height: 62px !important;
    }
}

@media (max-width: 430px) {

    .cgs-team-comm-card {
        width: calc(100vw - 6px) !important;
        max-width: calc(100vw - 6px) !important;
    }

    .cgs-team-pda-clock {
        font-size: 20px !important;
    }

    .cgs-team-pda-date {
        font-size: 10px !important;
    }

    .cgs-team-pda-icon {
        width: 56px !important;
        height: 56px !important;
    }

    .cgs-team-pda-app {
        min-height: 100px !important;
    }
}


/* =========================================================
   PDA HEADER REBUILD
========================================================= */

@media (max-width: 768px) {

    .cgs-team-comm-app {
        margin-top: -138px !important;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .cgs-team-comm-card {
        width: calc(100vw - 8px) !important;
        max-width: calc(100vw - 8px) !important;
        margin: 0 auto !important;
        padding: 8px !important;
        overflow: hidden !important;
    }

    .cgs-team-comm-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 18px !important;
        position: relative !important;
    }

    .cgs-team-pda-topbar {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        width: 100% !important;
    }

    .cgs-team-pda-label {
        font-size: 72px !important;
        line-height: .9 !important;
        margin: 0 !important;
    }

    .cgs-team-pda-timebox {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 4px !important;
        margin-top: 6px !important;
    }

    .cgs-team-pda-clock {
        font-size: 34px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .cgs-team-pda-date {
        font-size: 15px !important;
        white-space: nowrap !important;
        opacity: .95 !important;
    }

    .cgs-team-pda-live {
        margin-top: 4px !important;
        align-self: flex-end !important;
    }

    .cgs-team-pda-teamname {
        font-size: 48px !important;
        line-height: 1 !important;
        margin-top: 10px !important;
    }

    .cgs-team-pda-status-text {
        font-size: 16px !important;
        margin-top: 4px !important;
    }

    .cgs-team-pda-connection {
        margin-top: 6px !important;
        align-self: flex-start !important;
    }

    .cgs-team-pda-app-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .cgs-team-pda-app {
        width: 100% !important;
        min-width: 0 !important;
        padding: 10px 4px !important;
        min-height: 108px !important;
    }

    .cgs-team-pda-icon {
        width: 58px !important;
        height: 58px !important;
    }

    .cgs-team-pda-app-label {
        font-size: 12px !important;
        line-height: 1.1 !important;
        word-break: break-word !important;
    }
}

@media (max-width: 430px) {

    .cgs-team-pda-label {
        font-size: 64px !important;
    }

    .cgs-team-pda-teamname {
        font-size: 42px !important;
    }

    .cgs-team-pda-clock {
        font-size: 30px !important;
    }

    .cgs-team-pda-date {
        font-size: 13px !important;
    }

    .cgs-team-pda-icon {
        width: 54px !important;
        height: 54px !important;
    }
}


/* =========================================================
   CGS CP v16 - HARD MOBILE PDA + REPORT/MUTATION WIDTH FIX
   Basis: cgs-central-post-12-pda-layout-rebuild.zip
   Let op: chatpositie bewust NIET aangepast.
========================================================= */
@media (max-width: 600px){
  html, body{ overflow-x:hidden !important; }

  .cgs-team-comm-app{
    width:100% !important; max-width:100vw !important; box-sizing:border-box !important;
    padding:8px 10px 18px !important; overflow-x:hidden !important;
  }
  .cgs-team-comm-card{
    width:100% !important; max-width:calc(100vw - 20px) !important; margin:0 auto !important;
    box-sizing:border-box !important; overflow:hidden !important;
  }
  .cgs-team-comm-header{
    width:100% !important; box-sizing:border-box !important; padding:16px 14px !important;
    border-radius:20px !important; margin-bottom:12px !important; overflow:hidden !important;
  }
  .cgs-team-pda-topline{
    display:flex !important; align-items:flex-start !important; justify-content:space-between !important;
    gap:10px !important; width:100% !important; min-width:0 !important;
  }
  .cgs-team-pda-label{
    font-size:54px !important; line-height:.9 !important; max-width:58vw !important; overflow:hidden !important;
  }
  .cgs-team-pda-timebox{ min-width:0 !important; max-width:42vw !important; text-align:right !important; }
  .cgs-team-pda-clock{ font-size:26px !important; line-height:1 !important; white-space:nowrap !important; }
  .cgs-team-pda-date{ font-size:11px !important; line-height:1.2 !important; white-space:normal !important; }
  .cgs-team-comm-title, .cgs-team-pda-teamname{
    font-size:34px !important; line-height:1.02 !important; word-break:break-word !important; overflow-wrap:anywhere !important;
  }
  .cgs-team-comm-panel{
    width:100% !important; max-width:100% !important; box-sizing:border-box !important; overflow:hidden !important;
  }
  .cgs-team-pda-app-grid,
  .cgs-team-comm-actions.cgs-team-pda-app-grid{
    width:100% !important; max-width:100% !important; display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:7px !important;
    box-sizing:border-box !important; overflow:hidden !important;
  }
  .cgs-team-pda-app,
  .cgs-team-comm-actions.cgs-team-pda-app-grid .cgs-team-comm-btn{
    width:100% !important; min-width:0 !important; max-width:100% !important; box-sizing:border-box !important;
    padding:9px 3px !important; min-height:92px !important; border-radius:16px !important; overflow:hidden !important;
  }
  .cgs-team-pda-icon{ width:48px !important; height:48px !important; max-width:48px !important; max-height:48px !important; }
  .cgs-team-pda-app-label{
    font-size:11px !important; line-height:1.05 !important; max-width:100% !important; white-space:normal !important; overflow-wrap:anywhere !important;
  }

  #cgs-team-report-screen > div:nth-child(2){
    top:12px !important; left:50% !important; transform:translateX(-50%) !important;
    width:calc(100vw - 48px) !important; max-width:370px !important; min-width:0 !important;
    max-height:calc(100dvh - 24px) !important; overflow-y:auto !important; box-sizing:border-box !important;
    padding:16px !important; border-radius:20px !important;
  }
  #cgs-team-report-screen #cgs-team-report-list{
    max-height:calc(100dvh - 210px) !important; padding:12px !important; box-sizing:border-box !important;
  }
  #cgs-team-report-screen #cgs-team-new-report{
    min-height:52px !important; padding:12px !important; font-size:16px !important;
  }

  #cgs-team-report-form > div:nth-child(2){
    top:8px !important; left:50% !important; transform:translateX(-50%) !important;
    width:calc(100vw - 48px) !important; max-width:370px !important; min-width:0 !important;
    max-height:calc(100dvh - 16px) !important; overflow-y:auto !important; box-sizing:border-box !important;
    padding:15px !important; border-radius:20px !important;
  }
  #cgs-team-report-form input,
  #cgs-team-report-form textarea{
    width:100% !important; max-width:100% !important; box-sizing:border-box !important; font-size:16px !important;
  }
  #cgs-team-report-form textarea#cgs-report-text{
    min-height:34dvh !important; max-height:44dvh !important; line-height:1.45 !important;
  }
  #cgs-team-report-form #cgs-save-report-btn{ min-height:52px !important; margin-top:12px !important; }

  #specific-report-form-wrap{
    width:100% !important; max-width:100% !important; box-sizing:border-box !important; margin-top:6px !important;
  }
  #specific-report-form-wrap .cgs-cp-team-form{
    width:calc(100vw - 42px) !important; max-width:360px !important; min-width:0 !important;
    margin:0 auto 14px !important; box-sizing:border-box !important; padding:14px !important; border-radius:20px !important;
  }
  #specific-report-form-wrap .cgs-cp-field{
    padding:12px !important; border-radius:16px !important; margin-bottom:10px !important;
  }
  #specific-report-form-wrap input,
  #specific-report-form-wrap textarea{
    width:100% !important; max-width:100% !important; box-sizing:border-box !important; font-size:16px !important;
  }
  #specific-report-form-wrap textarea#specific-report-text{ min-height:34dvh !important; max-height:44dvh !important; }
  #specific-report-form-wrap .cgs-cp-row{
    display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; width:100% !important;
  }
  #save-specific-report,
  #cancel-specific-report{
    width:100% !important; min-width:0 !important; max-width:100% !important; padding:0 8px !important; box-sizing:border-box !important;
  }
}

@media (max-width: 390px){
  #cgs-team-report-screen > div:nth-child(2),
  #cgs-team-report-form > div:nth-child(2){ width:calc(100vw - 34px) !important; max-width:340px !important; }
  .cgs-team-pda-label{ font-size:48px !important; }
  .cgs-team-pda-icon{ width:44px !important; height:44px !important; }
}


/* =========================================================
   CGS CP v17 - RESPONSIVE MOBILE PDA WIDTH + CENTER MUTATIES
   Basis: v16. Chatpositie bewust ongemoeid gelaten.
========================================================= */
@media (max-width: 600px){
  /* Hoofdscherm: iets ruimer, maar nog steeds veilig binnen elk mobiel scherm */
  .cgs-team-comm-app{
    width:100% !important;
    max-width:100vw !important;
    padding-left:6px !important;
    padding-right:6px !important;
    box-sizing:border-box !important;
    overflow-x:hidden !important;
  }

  .cgs-team-comm-card{
    width:min(100%, 430px) !important;
    max-width:calc(100vw - 12px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  .cgs-team-comm-header,
  .cgs-team-comm-panel{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  .cgs-team-pda-app-grid,
  .cgs-team-comm-actions.cgs-team-pda-app-grid{
    width:100% !important;
    max-width:100% !important;
    gap:8px !important;
    box-sizing:border-box !important;
  }

  .cgs-team-pda-app,
  .cgs-team-comm-actions.cgs-team-pda-app-grid .cgs-team-comm-btn{
    min-height:96px !important;
    padding-left:4px !important;
    padding-right:4px !important;
  }

  /* Mutaties / rapportage popup: weer gecentreerd i.p.v. bovenin */
  #cgs-team-report-screen > div:nth-child(2),
  #cgs-team-report-form > div:nth-child(2){
    left:50% !important;
    top:50% !important;
    transform:translate(-50%, -50%) !important;
    width:calc(100vw - 36px) !important;
    max-width:390px !important;
    min-width:0 !important;
    max-height:calc(100dvh - 42px) !important;
    overflow-y:auto !important;
    box-sizing:border-box !important;
  }

  #cgs-team-report-screen #cgs-team-report-list{
    max-height:calc(100dvh - 280px) !important;
  }

  #cgs-team-report-form textarea#cgs-report-text{
    min-height:28dvh !important;
    max-height:36dvh !important;
  }
}

@media (max-width: 390px){
  .cgs-team-comm-app{
    padding-left:5px !important;
    padding-right:5px !important;
  }

  .cgs-team-comm-card{
    max-width:calc(100vw - 10px) !important;
  }

  #cgs-team-report-screen > div:nth-child(2),
  #cgs-team-report-form > div:nth-child(2){
    width:calc(100vw - 24px) !important;
    max-width:366px !important;
    max-height:calc(100dvh - 30px) !important;
  }
}


/* =========================================================
   CGS CP v19 - TERUG NAAR v17 + ALLEEN HOOFDSCHERM IETS BREEDER
   Chat, mutatie-popup en statusmeldingen bewust ongemoeid gelaten.
========================================================= */
@media (max-width: 600px){
  .cgs-team-comm-app{
    width:min(96dvw, 440px) !important;
    max-width:calc(100dvw - 12px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:4px !important;
    padding-right:4px !important;
    box-sizing:border-box !important;
    overflow-x:hidden !important;
  }

  .cgs-team-comm-card{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
}

@media (min-width: 391px) and (max-width: 600px){
  .cgs-team-comm-app{
    width:min(97dvw, 452px) !important;
    max-width:calc(100dvw - 10px) !important;
  }
}

@media (max-width: 360px){
  .cgs-team-comm-app{
    width:calc(100dvw - 12px) !important;
    max-width:calc(100dvw - 12px) !important;
  }
}


/* =========================================================
   CGS CP v20 - HOOFDSCHERM MOBIEL IETS NAAR LINKS
   Basis: v19. Afmetingen blijven gelijk; alleen horizontale positie.
========================================================= */
@media (max-width: 600px){
  .cgs-team-comm-app{
    position:relative !important;
    left:-8px !important;
  }
}

@media (max-width: 360px){
  .cgs-team-comm-app{
    left:-5px !important;
  }
}


/* =========================================================
   CGS CP v21 - HOOFDSCHERM MOBIEL NOG IETS VERDER NAAR LINKS
   Basis: v20. Afmetingen blijven gelijk; alleen horizontale positie.
========================================================= */
@media (max-width: 600px){
  .cgs-team-comm-app{
    position:relative !important;
    left:-14px !important;
  }
}

@media (max-width: 360px){
  .cgs-team-comm-app{
    left:-9px !important;
  }
}

/* v30 - Modern algemeen bericht scherm */
.cgs-broadcast-shell {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 0 22px;
}
.cgs-broadcast-card {
  width: min(980px, 100%);
  box-sizing: border-box;
  background: linear-gradient(145deg, rgba(15, 23, 42, .98), rgba(30, 41, 59, .96));
  color: #fff;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 28px;
  padding: 26px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
}
.cgs-broadcast-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}
.cgs-broadcast-kicker {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(245, 158, 11, .16);
  border: 1px solid rgba(245, 158, 11, .36);
  color: #fcd34d;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cgs-broadcast-title {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 950;
  letter-spacing: -.04em;
  line-height: 1.05;
}
.cgs-broadcast-subtitle {
  margin-top: 10px;
  max-width: 720px;
  color: #cbd5e1;
  font-size: 16px;
  line-height: 1.55;
}
.cgs-broadcast-back,
.cgs-broadcast-send {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-weight: 950;
  transition: transform .15s ease, filter .15s ease, opacity .15s ease;
}
.cgs-broadcast-back {
  flex: 0 0 auto;
  padding: 13px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #e2e8f0;
}
.cgs-broadcast-back:hover,
.cgs-broadcast-send:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}
.cgs-broadcast-form {
  display: grid;
  gap: 18px;
  max-width: 760px;
}
.cgs-broadcast-field {
  display: grid;
  gap: 8px;
  font-weight: 950;
  color: #e5e7eb;
}
.cgs-broadcast-field span {
  font-size: 18px;
}
.cgs-broadcast-field input[type="text"],
.cgs-broadcast-field textarea,
.cgs-broadcast-field input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, .32);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  padding: 15px 16px;
  font-size: 16px;
  outline: none;
}
.cgs-broadcast-field input::placeholder,
.cgs-broadcast-field textarea::placeholder {
  color: rgba(226, 232, 240, .58);
}
.cgs-broadcast-field textarea {
  min-height: 170px;
  resize: vertical;
  line-height: 1.55;
}
.cgs-broadcast-upload {
  padding: 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .045);
  border: 1px dashed rgba(148, 163, 184, .38);
}
.cgs-broadcast-upload-help,
.cgs-broadcast-file-name {
  color: #cbd5e1;
  font-size: 14px;
  font-weight: 800;
}
.cgs-broadcast-file-name {
  color: #93c5fd;
}
.cgs-broadcast-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cgs-broadcast-send {
  min-width: min(100%, 300px);
  padding: 16px 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  box-shadow: 0 18px 36px rgba(239, 68, 68, .22);
}
.cgs-broadcast-send:disabled {
  opacity: .6;
  cursor: wait;
  transform: none;
}
.cgs-broadcast-result {
  min-height: 24px;
  font-weight: 950;
}
.cgs-broadcast-success { color: #86efac; }
.cgs-broadcast-error { color: #fca5a5; }
.cgs-broadcast-busy { color: #bfdbfe; }

@media (max-width: 720px) {
  .cgs-broadcast-card {
    padding: 18px;
    border-radius: 24px;
  }
  .cgs-broadcast-head {
    flex-direction: column;
  }
  .cgs-broadcast-back,
  .cgs-broadcast-send {
    width: 100%;
  }
  .cgs-broadcast-title {
    font-size: 30px;
  }
  .cgs-broadcast-subtitle {
    font-size: 14px;
  }
}

/* =========================================================
   CGS CP v31 - Veilige finetune: checkbox alignment, PDA-subtitel,
   licht algemeen bericht scherm en afbeelding fallback
========================================================= */
.cgs-alarm-team-pick{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  margin:8px 0 !important;
  padding:12px 14px !important;
  border-radius:16px !important;
  background:rgba(15,23,42,.04) !important;
}
.cgs-alarm-team-checkline,
.cgs-share-alarm-team{
  display:grid !important;
  grid-template-columns:24px minmax(0,1fr) !important;
  column-gap:14px !important;
  align-items:center !important;
  margin:0 !important;
  width:100% !important;
  box-sizing:border-box !important;
}
.cgs-alarm-team-checkline input,
.cgs-share-alarm-team input{
  width:20px !important;
  height:20px !important;
  margin:0 auto !important;
  justify-self:center !important;
}
.cgs-share-alarm-team{
  font-size:13px !important;
  font-weight:900 !important;
  color:#475569 !important;
}
.cgs-share-alarm-team span,
.cgs-alarm-team-checkline span{
  min-width:0 !important;
  text-align:left !important;
}

.cgs-team-pda-brand{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:3px !important;
}
.cgs-team-pda-subtitle{
  color:rgba(226,232,240,.78) !important;
  font-size:10px !important;
  font-weight:850 !important;
  letter-spacing:.06em !important;
  line-height:1.05 !important;
  text-transform:uppercase !important;
  margin-left:2px !important;
}

.cgs-broadcast-card{
  background:linear-gradient(145deg,#ffffff,#f8fafc) !important;
  color:#0f172a !important;
  border:1px solid rgba(148,163,184,.38) !important;
  box-shadow:0 18px 55px rgba(15,23,42,.14) !important;
}
.cgs-broadcast-kicker{
  background:rgba(245,158,11,.12) !important;
  border-color:rgba(245,158,11,.34) !important;
  color:#92400e !important;
}
.cgs-broadcast-title{
  color:#0f172a !important;
}
.cgs-broadcast-subtitle{
  color:#334155 !important;
}
.cgs-broadcast-back{
  background:#e2e8f0 !important;
  border:1px solid #cbd5e1 !important;
  color:#0f172a !important;
  box-shadow:0 8px 20px rgba(15,23,42,.08) !important;
}
.cgs-broadcast-field{
  color:#0f172a !important;
}
.cgs-broadcast-field span{
  color:#0f172a !important;
}
.cgs-broadcast-field input[type="text"],
.cgs-broadcast-field textarea,
.cgs-broadcast-field input[type="file"]{
  background:#fff !important;
  color:#0f172a !important;
  border:1px solid #cbd5e1 !important;
  box-shadow:0 4px 14px rgba(15,23,42,.04) !important;
}
.cgs-broadcast-field input::placeholder,
.cgs-broadcast-field textarea::placeholder{
  color:#64748b !important;
}
.cgs-broadcast-upload{
  background:#f8fafc !important;
  border:1px dashed #94a3b8 !important;
}
.cgs-broadcast-upload-help{
  color:#475569 !important;
}
.cgs-broadcast-file-name{
  color:#2563eb !important;
}
.cgs-broadcast-send{
  background:linear-gradient(135deg,#f59e0b,#dc2626) !important;
  color:#fff !important;
  box-shadow:0 14px 30px rgba(220,38,38,.18) !important;
}
.cgs-broadcast-success{color:#15803d !important;}
.cgs-broadcast-error{color:#b91c1c !important;}
.cgs-broadcast-busy{color:#1d4ed8 !important;}

@media (max-width:720px){
  .cgs-team-pda-subtitle{
    font-size:9px !important;
  }
}

/* =========================================================
   CGS CP v32 - Broadcast knoppen terug naar huisstijl
   en combibon print zonder nieuw tabblad
========================================================= */
.cgs-broadcast-actions{
  margin-top:4px !important;
}
.cgs-broadcast-back,
.cgs-broadcast-send{
  border-radius:18px !important;
  font-weight:950 !important;
  letter-spacing:.01em !important;
}
.cgs-broadcast-back{
  background:#1e293b !important;
  border:1px solid rgba(245,158,11,.55) !important;
  color:#ffffff !important;
  box-shadow:0 12px 26px rgba(15,23,42,.18) !important;
}
.cgs-broadcast-back:hover{
  background:#24324a !important;
  border-color:rgba(245,158,11,.82) !important;
}
.cgs-broadcast-send{
  background:#1e293b !important;
  border:1px solid rgba(245,158,11,.70) !important;
  color:#ffffff !important;
  box-shadow:0 16px 34px rgba(15,23,42,.20) !important;
}
.cgs-broadcast-send:hover{
  background:#24324a !important;
  border-color:#f59e0b !important;
  filter:none !important;
}
.cgs-broadcast-send:disabled{
  background:#94a3b8 !important;
  border-color:#94a3b8 !important;
  color:#ffffff !important;
  box-shadow:none !important;
}

@media (max-width:720px){
  .cgs-broadcast-back,
  .cgs-broadcast-send{
    min-height:54px !important;
  }
}

/* =========================================================
   CGS CP v33 - Herstel CP functies + broadcast in huisstijl
========================================================= */
#cgs-open-broadcast.cgs-cp-btn,
#cgs-open-broadcast.cgs-cp-btn-secondary{
  background:linear-gradient(145deg,#172033,#263a59) !important;
  color:#ffffff !important;
  border:1.5px solid rgba(245,158,11,.70) !important;
  border-radius:18px !important;
  min-height:58px !important;
  padding:14px 24px !important;
  box-shadow:0 16px 34px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.06) !important;
  font-weight:950 !important;
}
#cgs-open-broadcast.cgs-cp-btn:hover,
#cgs-open-broadcast.cgs-cp-btn-secondary:hover{
  background:linear-gradient(145deg,#1e2c46,#304666) !important;
  border-color:#f59e0b !important;
  transform:translateY(-1px) !important;
}

.cgs-broadcast-shell{
  padding:8px 0 24px !important;
}
.cgs-broadcast-card{
  width:min(980px,100%) !important;
  background:linear-gradient(145deg,#172033,#233653) !important;
  color:#ffffff !important;
  border:1.5px solid rgba(148,163,184,.42) !important;
  border-radius:26px !important;
  padding:30px !important;
  box-shadow:0 24px 60px rgba(15,23,42,.26), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.cgs-broadcast-kicker{
  background:rgba(245,158,11,.14) !important;
  border:1px solid rgba(245,158,11,.60) !important;
  color:#facc15 !important;
}
.cgs-broadcast-title{
  color:#ffffff !important;
  text-shadow:0 2px 8px rgba(0,0,0,.18) !important;
}
.cgs-broadcast-subtitle{
  color:#e2e8f0 !important;
}
.cgs-broadcast-subtitle b{
  color:#ffffff !important;
}
.cgs-broadcast-form{
  max-width:760px !important;
}
.cgs-broadcast-field,
.cgs-broadcast-field span{
  color:#ffffff !important;
}
.cgs-broadcast-field input[type="text"],
.cgs-broadcast-field textarea,
.cgs-broadcast-field input[type="file"]{
  background:rgba(255,255,255,.94) !important;
  color:#0f172a !important;
  border:1px solid rgba(203,213,225,.88) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.16) !important;
}
.cgs-broadcast-field input::placeholder,
.cgs-broadcast-field textarea::placeholder{
  color:#64748b !important;
}
.cgs-broadcast-upload{
  background:rgba(15,23,42,.22) !important;
  border:1px dashed rgba(203,213,225,.50) !important;
}
.cgs-broadcast-upload-help,
.cgs-broadcast-file-name{
  color:#e2e8f0 !important;
}
.cgs-broadcast-back,
.cgs-broadcast-send{
  background:linear-gradient(145deg,#172033,#263a59) !important;
  color:#ffffff !important;
  border:1.5px solid rgba(245,158,11,.70) !important;
  border-radius:18px !important;
  box-shadow:0 16px 34px rgba(15,23,42,.26), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.cgs-broadcast-back:hover,
.cgs-broadcast-send:hover{
  background:linear-gradient(145deg,#1e2c46,#304666) !important;
  border-color:#f59e0b !important;
  filter:none !important;
}
.cgs-broadcast-result{
  color:#ffffff !important;
}
.cgs-broadcast-success{color:#86efac !important;}
.cgs-broadcast-error{color:#fca5a5 !important;}
.cgs-broadcast-busy{color:#bfdbfe !important;}

.cgs-alarm-team-pick{
  align-items:stretch !important;
}
.cgs-alarm-team-checkline,
.cgs-share-alarm-team{
  display:grid !important;
  grid-template-columns:28px minmax(0,1fr) !important;
  column-gap:14px !important;
  align-items:center !important;
  justify-items:start !important;
  width:100% !important;
  max-width:420px !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
}
.cgs-alarm-team-checkline input,
.cgs-share-alarm-team input{
  justify-self:center !important;
  margin:0 !important;
}
.cgs-alarm-team-checkline span,
.cgs-share-alarm-team span{
  justify-self:start !important;
  text-align:left !important;
}

@media (max-width:720px){
  .cgs-broadcast-card{
    padding:20px !important;
    border-radius:22px !important;
  }
  .cgs-broadcast-form{
    max-width:100% !important;
  }
}


/* =========================================================
   CGS CP v34 - Nieuw team rand + teamdocumentatie
========================================================= */
#new-team.cgs-cp-btn,
#new-team{
  border:1.5px solid rgba(245,158,11,.78) !important;
}
#new-team:hover{
  border-color:#f59e0b !important;
}


/* =========================================================
   CGS CP v35 - huisstijl correcties
   - felgele rand nieuw team
   - korte teamdocument-knoppen
   - specifieke rapportage in huisstijl
   - instellingen labels leesbaar
========================================================= */
#new-team.cgs-cp-btn,
#new-team{
  border:2.5px solid #ffea00 !important;
  box-shadow:0 14px 30px rgba(15,23,42,.18), 0 0 0 1px rgba(255,234,0,.15) !important;
}
#new-team:hover,
#new-team:focus{
  border-color:#fff200 !important;
  box-shadow:0 16px 34px rgba(15,23,42,.22), 0 0 0 3px rgba(255,234,0,.18) !important;
}

.cgs-cp-team-mutations-btn{
  white-space:normal !important;
  line-height:1.08 !important;
  font-size:15px !important;
  padding-left:8px !important;
  padding-right:8px !important;
  min-height:54px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

.cgs-specific-report-editor{
  background:linear-gradient(145deg,#172033,#24344d) !important;
  border:1px solid rgba(245,158,11,.65) !important;
  border-radius:24px !important;
  padding:24px !important;
  box-shadow:0 18px 42px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.07) !important;
  color:#ffffff !important;
  max-width:780px !important;
}
.cgs-specific-report-editor .cgs-cp-team-form-title{
  color:#ffffff !important;
  font-size:26px !important;
  font-weight:900 !important;
  letter-spacing:.2px !important;
  margin-bottom:18px !important;
}
.cgs-specific-report-editor .cgs-cp-field{
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:20px !important;
  padding:18px !important;
  margin-bottom:18px !important;
}
.cgs-specific-report-editor .cgs-cp-field label{
  color:#ffffff !important;
  opacity:1 !important;
  font-weight:900 !important;
  margin-bottom:10px !important;
}
.cgs-specific-report-editor input,
.cgs-specific-report-editor textarea{
  background:#ffffff !important;
  color:#0f172a !important;
  border:2px solid #cbd5e1 !important;
  border-radius:16px !important;
  box-shadow:inset 0 1px 0 rgba(15,23,42,.04) !important;
}
.cgs-specific-report-editor input:focus,
.cgs-specific-report-editor textarea:focus{
  border-color:#f59e0b !important;
  box-shadow:0 0 0 3px rgba(245,158,11,.18) !important;
  outline:none !important;
}

.cgs-settings-card .cgs-settings-label,
.cgs-settings-card label,
.cgs-settings-label{
  color:#ffffff !important;
  opacity:1 !important;
  text-shadow:none !important;
}
.cgs-settings-card .cgs-settings-hint,
.cgs-settings-card .cgs-settings-help,
.cgs-settings-card p,
.cgs-settings-hint{
  color:rgba(255,255,255,.88) !important;
}
.cgs-settings-card select,
.cgs-settings-select{
  color:#ffffff !important;
}

/* =========================================================
   CGS CP v36 - verfijning knoppen, specifieke rapportage en combibon docent
========================================================= */
#new-team.cgs-cp-btn,
#new-team{
  border:3px solid #ffff00 !important;
  box-shadow:0 14px 30px rgba(15,23,42,.18), 0 0 0 2px rgba(255,255,0,.24) !important;
}
#new-team:hover,
#new-team:focus{
  border-color:#ffff00 !important;
  box-shadow:0 16px 34px rgba(15,23,42,.22), 0 0 0 4px rgba(255,255,0,.22) !important;
}

.cgs-cp-action-buttons .cgs-cp-team-mutations-btn,
.cgs-cp-team-mutations-btn{
  font-size:13.5px !important;
  line-height:1.12 !important;
  letter-spacing:.01em !important;
  padding:9px 8px !important;
  min-height:52px !important;
  white-space:normal !important;
}

#specific-report-form-wrap .cgs-cp-team-form.cgs-specific-report-editor,
#specific-report-form-wrap .cgs-specific-report-editor,
.cgs-specific-report-editor{
  background:linear-gradient(145deg,#172033,#24344d) !important;
  color:#ffffff !important;
  border:2px solid #1e293b !important;
  outline:1px solid rgba(245,158,11,.35) !important;
  border-radius:26px !important;
  box-shadow:0 18px 42px rgba(15,23,42,.24), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

#specific-report-form-wrap .cgs-cp-team-form.cgs-specific-report-editor .cgs-cp-team-form-title,
#specific-report-form-wrap .cgs-specific-report-editor .cgs-cp-team-form-title,
#specific-report-form-wrap .cgs-specific-report-editor label,
.cgs-specific-report-editor .cgs-cp-team-form-title,
.cgs-specific-report-editor label{
  color:#ffffff !important;
}

#specific-report-form-wrap .cgs-specific-report-editor .cgs-cp-field,
.cgs-specific-report-editor .cgs-cp-field{
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.11) !important;
  border-radius:20px !important;
}

#specific-report-form-wrap .cgs-specific-report-editor input,
#specific-report-form-wrap .cgs-specific-report-editor textarea,
.cgs-specific-report-editor input,
.cgs-specific-report-editor textarea{
  background:#ffffff !important;
  color:#0f172a !important;
  border:2px solid #1e293b !important;
}

#specific-report-form-wrap .cgs-specific-report-editor input:focus,
#specific-report-form-wrap .cgs-specific-report-editor textarea:focus,
.cgs-specific-report-editor input:focus,
.cgs-specific-report-editor textarea:focus{
  border-color:#f59e0b !important;
  box-shadow:0 0 0 3px rgba(245,158,11,.18) !important;
}

/* =========================================================
   CGS CP v41 - knoptekst Teammutaties/Teamrapporten gelijk trekken
========================================================= */
.cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-cp-team-mutations-btn,
.cgs-cp-action-buttons .cgs-cp-team-mutations-btn,
.cgs-cp-team-mutations-btn{
  font-size:14px !important;
  line-height:1.12 !important;
  font-weight:800 !important;
  letter-spacing:.2px !important;
}

@media (max-width:768px){
  .cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-cp-team-mutations-btn,
  .cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-cp-btn.cgs-cp-team-mutations-btn,
  .cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-cp-btn-small.cgs-cp-team-mutations-btn{
    font-size:14px !important;
    line-height:1.12 !important;
    font-weight:800 !important;
  }
}


/* =========================================================
   CGS CP v42 - Teamdocumentatie knoptekst hard gelijk trekken
   Deze override raakt alleen de knoppen Team mutaties / Team rapporten.
========================================================= */
.cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-cp-team-mutations-btn,
.cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons button.cgs-cp-btn.cgs-cp-btn-small.cgs-cp-team-mutations-btn,
.cgs-cp-action-buttons .cgs-cp-team-mutations-btn,
button.cgs-cp-team-mutations-btn{
  font-size:13px !important;
  line-height:1.08 !important;
  font-weight:800 !important;
  letter-spacing:.1px !important;
}
.cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-cp-team-mutations-btn .cgs-teamdoc-btn-text,
.cgs-cp-team-mutations-btn .cgs-teamdoc-btn-text{
  display:block !important;
  font-size:13px !important;
  line-height:1.08 !important;
  font-weight:800 !important;
  letter-spacing:.1px !important;
  transform:none !important;
}
@media (max-width:768px){
  .cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-cp-team-mutations-btn,
  .cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons button.cgs-cp-btn.cgs-cp-btn-small.cgs-cp-team-mutations-btn,
  .cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-cp-team-mutations-btn .cgs-teamdoc-btn-text,
  .cgs-cp-team-mutations-btn .cgs-teamdoc-btn-text{
    font-size:13px !important;
    line-height:1.08 !important;
    font-weight:800 !important;
  }
}

/* =========================================================
   v43 - Automatische lesregisseur even breed als hoofdaccordions
   Houdt dezelfde knophoogte/uiterlijk, maar verwijdert de extra inspringing.
========================================================= */
.cgs-cp-box.cgs-lesson-regisseur-box{
    padding:24px !important;
}

.cgs-cp-box.cgs-lesson-regisseur-box button#cgs-lesson-toggle.cgs-lesson-toggle{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
}

@media (max-width:640px){
    .cgs-cp-box.cgs-lesson-regisseur-box{
        padding:18px !important;
    }
}


/* =========================================================
   v44 - Automatische lesregisseur werkelijk even breed maken
   De vorige wijziging was te klein zichtbaar: horizontale
   padding wordt nu volledig weggehaald voor deze sectie.
========================================================= */
.cgs-cp-box.cgs-lesson-regisseur-box{
    padding-left:0 !important;
    padding-right:0 !important;
}

.cgs-cp-box.cgs-lesson-regisseur-box > button#cgs-lesson-toggle.cgs-lesson-toggle,
.cgs-lesson-regisseur-box > button#cgs-lesson-toggle.cgs-lesson-toggle{
    display:flex !important;
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box !important;
}

@media (min-width:769px){
    .cgs-cp-box.cgs-lesson-regisseur-box{
        padding-top:24px !important;
        padding-bottom:24px !important;
    }
}

@media (max-width:768px){
    .cgs-cp-box.cgs-lesson-regisseur-box{
        padding-left:0 !important;
        padding-right:0 !important;
    }
}

/* =========================================================
   V45 - Lesregisseur buitenrand onzichtbaar maken
   Alleen de grijze rand rond de lesregisseur-sectie verwijderen
========================================================= */
.cgs-cp-box.cgs-lesson-regisseur-box {
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
}


/* =========================================================
   v46 - Bovenste CP-code opleidingsvlak even breed als accordions
   Alleen het blauwe genereervlak smaller maken, zodat het visueel
   dezelfde lijn volgt als Code overzicht / Alarmmelding / Lesregisseur.
========================================================= */
@media (min-width: 761px) {
    .cgs-cp-box > .cgs-cp-opleiding-card.cgs-cp-opleiding-card-with-button {
        margin-left: 38px !important;
        margin-right: 38px !important;
        width: auto !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 760px) {
    .cgs-cp-box > .cgs-cp-opleiding-card.cgs-cp-opleiding-card-with-button {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: auto !important;
    }
}

/* =========================================================
   v47 - Oranje rand om bovenste CP-code opleidingsvlak
   Alleen het betreffende blauwe vlak bij Nieuwe CP-code genereren.
========================================================= */
.cgs-cp-box > .cgs-cp-opleiding-card.cgs-cp-opleiding-card-with-button {
    border: 2px solid #f59e0b !important;
}

/* =========================================================
   v48 - Bovenste CP-code blauwe vlak iets minder hoog
   Alleen het opleidingsvlak bij Nieuwe CP-code genereren.
========================================================= */
.cgs-cp-box > .cgs-cp-opleiding-card.cgs-cp-opleiding-card-with-button {
    padding: 12px 18px !important;
    min-height: 0 !important;
}

.cgs-cp-box > .cgs-cp-opleiding-card.cgs-cp-opleiding-card-with-button .cgs-cp-opleiding-title {
    margin-bottom: 8px !important;
    line-height: 1.2 !important;
}

.cgs-cp-box > .cgs-cp-opleiding-card.cgs-cp-opleiding-card-with-button .cgs-cp-opleiding-option {
    min-height: 38px !important;
    padding: 7px 14px !important;
}

.cgs-cp-box > .cgs-cp-opleiding-card.cgs-cp-opleiding-card-with-button .cgs-generate-code-in-card {
    min-height: 48px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* =========================================================
   v49 - Docent dashboard naar boven schuiven
   Minder witruimte tussen paginatitel en dashboardinhoud.
   Alleen docentdashboard / CP-code omgeving.
========================================================= */
.page-id-81 #cgs-cp-app,
.page-id-81 .cgs-cp-app,
.page-id-81 .cgs-cp-teacher-dashboard {
    position: relative !important;
    top: -255px !important;
    margin-bottom: -255px !important;
}

/* Fallback wanneer WordPress/Kubio geen page-id-81 class meegeeft */
.cgs-cp-teacher-dashboard {
    margin-top: -90px !important;
}

@media (max-width: 760px) {
    .page-id-81 #cgs-cp-app,
    .page-id-81 .cgs-cp-app,
    .page-id-81 .cgs-cp-teacher-dashboard {
        top: -120px !important;
        margin-bottom: -120px !important;
    }

    .cgs-cp-teacher-dashboard {
        margin-top: -45px !important;
    }
}


/* =========================================================
   v50 - Opleidingskeuze knoppen iets kleiner
   Alleen de knoppen Beveiliging / Handhaving in het bovenste blauwe vlak.
========================================================= */
.cgs-cp-box > .cgs-cp-opleiding-card.cgs-cp-opleiding-card-with-button .cgs-cp-opleiding-options {
    gap: 10px !important;
}

.cgs-cp-box > .cgs-cp-opleiding-card.cgs-cp-opleiding-card-with-button .cgs-cp-opleiding-option {
    min-height: 32px !important;
    padding: 6px 12px !important;
    border-radius: 14px !important;
    gap: 8px !important;
}

.cgs-cp-box > .cgs-cp-opleiding-card.cgs-cp-opleiding-card-with-button .cgs-cp-opleiding-option span {
    font-size: 18px !important;
    line-height: 1.1 !important;
    letter-spacing: .01em !important;
}

.cgs-cp-box > .cgs-cp-opleiding-card.cgs-cp-opleiding-card-with-button .cgs-cp-opleiding-option input {
    width: 16px !important;
    height: 16px !important;
}

@media (max-width: 760px) {
    .cgs-cp-box > .cgs-cp-opleiding-card.cgs-cp-opleiding-card-with-button .cgs-cp-opleiding-option {
        min-height: 30px !important;
        padding: 5px 10px !important;
        border-radius: 13px !important;
    }

    .cgs-cp-box > .cgs-cp-opleiding-card.cgs-cp-opleiding-card-with-button .cgs-cp-opleiding-option span {
        font-size: 16px !important;
    }
}

/* PDA live/offline verbindingsbewaking */
.cgs-team-pda-live.cgs-team-pda-offline {
    background: rgba(239,68,68,.16) !important;
    border-color: rgba(239,68,68,.65) !important;
    color: #fca5a5 !important;
}
.cgs-team-pda-offline-banner {
    margin: 22px 0 16px 0 !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    background: rgba(127,29,29,.38) !important;
    border: 1px solid rgba(248,113,113,.55) !important;
    color: #fee2e2 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.45 !important;
}
body.cgs-team-pda-is-offline .cgs-team-needs-live {
    filter: grayscale(1) brightness(.62) !important;
    opacity: .62 !important;
}

/* PDA foto-lightbox */
body.cgs-pda-lightbox-open{
    overflow:hidden !important;
}
#cgs-pda-image-lightbox{
    position:fixed !important;
    inset:0 !important;
    z-index:10000080 !important;
}
.cgs-pda-image-lightbox-backdrop{
    position:absolute !important;
    inset:0 !important;
    background:rgba(2,6,23,.76) !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
}
.cgs-pda-image-lightbox-stage{
    position:absolute !important;
    inset:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:22px !important;
    box-sizing:border-box !important;
}
.cgs-pda-image-lightbox-img{
    max-width:min(96vw, 980px) !important;
    max-height:88dvh !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
    border-radius:22px !important;
    background:rgba(255,255,255,.06) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    box-shadow:0 26px 90px rgba(0,0,0,.66), 0 0 38px rgba(255,255,255,.08) !important;
}
.cgs-pda-image-lightbox-close{
    position:fixed !important;
    right:18px !important;
    top:18px !important;
    width:48px !important;
    height:48px !important;
    border-radius:999px !important;
    border:1px solid rgba(255,255,255,.72) !important;
    background:rgba(255,255,255,.72) !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
    color:#dc2626 !important;
    font-size:34px !important;
    line-height:42px !important;
    font-weight:950 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    box-shadow:0 14px 38px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.85) !important;
    z-index:10000082 !important;
}
.cgs-pda-click-image{
    transition:transform .16s ease, filter .16s ease !important;
}
.cgs-pda-click-image:active{
    transform:scale(.985) !important;
    filter:brightness(1.08) !important;
}
@media (max-width:600px){
    .cgs-pda-image-lightbox-stage{
        padding:12px !important;
    }
    .cgs-pda-image-lightbox-img{
        max-width:96dvw !important;
        max-height:86dvh !important;
        border-radius:18px !important;
    }
    .cgs-pda-image-lightbox-close{
        right:12px !important;
        top:12px !important;
        width:46px !important;
        height:46px !important;
        font-size:32px !important;
    }
}

/* PDA offline/live-required glass popup */
#cgs-pda-glass-notice{
    position:fixed !important;
    inset:0 !important;
    z-index:2147483500 !important;
}
.cgs-pda-glass-notice-backdrop{
    position:fixed !important;
    inset:0 !important;
    background:rgba(2,6,23,.58) !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
}
.cgs-pda-glass-notice-card{
    position:fixed !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    width:min(88vw,430px) !important;
    box-sizing:border-box !important;
    border-radius:28px !important;
    padding:26px 24px 24px !important;
    color:#fff !important;
    background:linear-gradient(145deg, rgba(15,23,42,.88), rgba(30,41,59,.72)) !important;
    border:1px solid rgba(255,255,255,.22) !important;
    box-shadow:0 28px 90px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.18), 0 0 38px rgba(220,38,38,.18) !important;
    backdrop-filter:blur(18px) saturate(1.25) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.25) !important;
}
.cgs-pda-glass-notice-close{
    position:absolute !important;
    right:16px !important;
    top:16px !important;
    width:42px !important;
    height:42px !important;
    border-radius:999px !important;
    border:1px solid rgba(255,255,255,.74) !important;
    background:rgba(255,255,255,.76) !important;
    color:#dc2626 !important;
    font-size:30px !important;
    line-height:36px !important;
    font-weight:950 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    box-shadow:0 12px 34px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.cgs-pda-glass-notice-kicker{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 0 13px !important;
    padding:7px 12px !important;
    border-radius:999px !important;
    border:1px solid rgba(248,113,113,.45) !important;
    background:rgba(127,29,29,.28) !important;
    color:#fecaca !important;
    font-size:12px !important;
    letter-spacing:.12em !important;
    font-weight:950 !important;
}
.cgs-pda-glass-notice-title{
    padding-right:48px !important;
    font-size:25px !important;
    line-height:1.12 !important;
    font-weight:950 !important;
    color:#fff !important;
    margin:0 0 12px !important;
}
.cgs-pda-glass-notice-text{
    font-size:16px !important;
    line-height:1.55 !important;
    font-weight:700 !important;
    color:#dbeafe !important;
    margin:0 !important;
}
@media (max-width:600px){
    .cgs-pda-glass-notice-card{
        width:calc(100vw - 34px) !important;
        border-radius:26px !important;
        padding:24px 22px 22px !important;
    }
    .cgs-pda-glass-notice-title{
        font-size:23px !important;
    }
    .cgs-pda-glass-notice-text{
        font-size:15.5px !important;
    }
}


/* =========================================================
   CGS CP v60.1 - subtieler geel + studentdienst in huisstijl
========================================================= */
#new-team.cgs-cp-btn,
#new-team{
  border:2px solid rgba(217, 218, 72, .82) !important;
  box-shadow:0 14px 30px rgba(15,23,42,.18), 0 0 0 1px rgba(217,218,72,.10) !important;
}
#new-team:hover,
#new-team:focus{
  border-color:rgba(232, 232, 92, .95) !important;
  box-shadow:0 16px 34px rgba(15,23,42,.22), 0 0 0 3px rgba(217,218,72,.14) !important;
}

#cgs-cp-student-login .cgs-login-wrapper{
  max-width:520px !important;
  margin:52px auto !important;
  padding:34px 36px 38px !important;
  background:linear-gradient(145deg, rgba(23,32,51,.98), rgba(36,52,77,.96)) !important;
  border:1px solid rgba(217,218,72,.28) !important;
  border-radius:26px !important;
  box-shadow:0 24px 55px rgba(15,23,42,.28), inset 0 1px 0 rgba(255,255,255,.08) !important;
  color:#ffffff !important;
  text-align:center !important;
}

#cgs-cp-student-login .cgs-login-wrapper h2{
  color:#ffffff !important;
  font-size:30px !important;
  font-weight:900 !important;
  letter-spacing:.5px !important;
  margin:0 0 26px !important;
}

#cgs-cp-student-login .cgs-cp-field{
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:20px !important;
  padding:18px !important;
  margin-bottom:18px !important;
}

#cgs-cp-student-login .cgs-cp-field label{
  color:#ffffff !important;
  font-size:17px !important;
  font-weight:900 !important;
  margin-bottom:10px !important;
}

#cgs-cp-student-login .cgs-login-wrapper input[type="text"]{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  min-height:58px !important;
  padding:14px 18px !important;
  border-radius:15px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(255,255,255,.94) !important;
  color:#172033 !important;
  font-size:17px !important;
  font-weight:700 !important;
  box-sizing:border-box !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65) !important;
}

#cgs-cp-student-login .cgs-login-wrapper input[type="text"]::placeholder{
  color:rgba(23,32,51,.52) !important;
  font-weight:600 !important;
}

#cgs-cp-student-login .cgs-login-wrapper input[type="text"]:focus{
  outline:none !important;
  border-color:rgba(217,218,72,.75) !important;
  box-shadow:0 0 0 3px rgba(217,218,72,.16), inset 0 1px 0 rgba(255,255,255,.65) !important;
}

#cgs-cp-student-login .cgs-login-wrapper .cgs-cp-btn{
  min-height:56px !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(217,218,72,.42) !important;
  color:#ffffff !important;
  font-size:17px !important;
  font-weight:900 !important;
  letter-spacing:.2px !important;
  box-shadow:0 14px 28px rgba(15,23,42,.20) !important;
}

#cgs-cp-student-login .cgs-login-wrapper #cp-create{
  background:linear-gradient(135deg,#22314a,#111827) !important;
  border-color:rgba(217,218,72,.55) !important;
}

#cgs-cp-student-login .cgs-login-wrapper .cgs-cp-btn-secondary,
#cgs-cp-student-login .cgs-login-wrapper #cp-back{
  background:rgba(148,163,184,.22) !important;
  border-color:rgba(255,255,255,.14) !important;
}

#cgs-cp-student-login .cgs-login-wrapper .cgs-cp-btn:hover,
#cgs-cp-student-login .cgs-login-wrapper .cgs-cp-btn:focus{
  transform:translateY(-1px) !important;
  border-color:rgba(217,218,72,.72) !important;
  box-shadow:0 18px 34px rgba(15,23,42,.25), 0 0 0 3px rgba(217,218,72,.10) !important;
}

#cgs-cp-student-login .cgs-cp-error{
  background:rgba(220,38,38,.12) !important;
  border:1px solid rgba(248,113,113,.35) !important;
  color:#fecaca !important;
  border-radius:14px !important;
  padding:12px 14px !important;
}

@media (max-width:600px){
  #cgs-cp-student-login .cgs-login-wrapper{
    margin:28px 14px !important;
    padding:26px 18px 28px !important;
    border-radius:22px !important;
  }
  #cgs-cp-student-login .cgs-login-wrapper h2{
    font-size:25px !important;
  }
}

/* =========================================================
   Security QR Engine v1 - lesregisseur + PDA
========================================================= */
.cgs-security-qr-builder{
  display:grid;
  gap:16px;
  margin-top:12px;
}
.cgs-security-qr-card{
  background:rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.12);
  border-radius:18px;
  padding:16px;
}
.cgs-security-qr-title{
  font-weight:900;
  margin-bottom:10px;
}
.cgs-security-qr-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}
.cgs-security-qr-form input,
.cgs-security-qr-form select{
  min-height:44px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.18);
  padding:0 12px;
  box-sizing:border-box;
}
.cgs-security-qr-form .cgs-cp-btn{
  min-height:44px;
}
.cgs-security-qr-row,
.cgs-security-qr-assignment{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px;
  border-radius:14px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(15,23,42,.08);
  margin-bottom:8px;
}
.cgs-security-qr-assignment{
  align-items:flex-start;
  flex-direction:column;
}
.cgs-security-qr-assignment small{
  opacity:.76;
}
.cgs-security-qr-table{
  width:100%;
  border-collapse:collapse;
  margin:10px 0;
}
.cgs-security-qr-table th,
.cgs-security-qr-table td{
  padding:10px;
  border-bottom:1px solid rgba(15,23,42,.12);
  text-align:left;
}
@media(max-width:700px){
  .cgs-security-qr-form{ grid-template-columns:1fr; }
  .cgs-security-qr-row{ align-items:flex-start; flex-direction:column; }
}

/* Student login OTP vakken stabiel centreren */
#cgs-cp-student-login .otp-container.student-otp{
  display:grid !important;
  grid-template-columns:repeat(6, 1fr) !important;
  gap:8px !important;
  width:100% !important;
  max-width:360px !important;
  margin:0 auto 18px !important;
}
#cgs-cp-student-login .otp-container.student-otp .student-otp-input{
  width:100% !important;
  min-width:0 !important;
  height:56px !important;
  min-height:56px !important;
  padding:0 !important;
  margin:0 !important;
  text-align:center !important;
  font-size:24px !important;
  font-weight:900 !important;
  line-height:56px !important;
  border-radius:14px !important;
  box-sizing:border-box !important;
}
@media(max-width:390px){
  #cgs-cp-student-login .otp-container.student-otp{ gap:6px !important; }
  #cgs-cp-student-login .otp-container.student-otp .student-otp-input{
    height:50px !important;
    min-height:50px !important;
    font-size:21px !important;
    border-radius:12px !important;
  }
}

/* Security QR PDA polish + robust notification badges */
.cgs-team-pda-app,
.cgs-team-pda-icon{
  overflow: visible !important;
}
.cgs-team-pda-badge,
.cgs-team-chat-badge,
.cgs-team-alarm-badge{
  position: absolute !important;
  top: -9px !important;
  right: -9px !important;
  min-width: 28px !important;
  height: 28px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg,#ef4444,#b91c1c) !important;
  border: 2px solid rgba(255,255,255,.95) !important;
  color: #fff !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  z-index: 20 !important;
  box-shadow: 0 0 0 4px rgba(239,68,68,.18), 0 12px 24px rgba(185,28,28,.45) !important;
}
.cgs-team-pda-badge.show,
.cgs-team-chat-badge.show,
.cgs-team-alarm-badge.show{
  display: flex !important;
}
.cgs-security-qr-pda-actions{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}
.cgs-security-qr-pda-actions input{
  width: 100% !important;
  min-height: 54px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(148,163,184,.28) !important;
  background: rgba(255,255,255,.96) !important;
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  box-sizing: border-box !important;
}
.cgs-security-qr-modern-btn{
  width: 100% !important;
  min-height: 54px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #fff !important;
  font-weight: 950 !important;
  letter-spacing: .02em !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.cgs-security-qr-scan-btn{ background: linear-gradient(135deg,#2563eb,#1d4ed8) !important; }
.cgs-security-qr-check-btn{ background: linear-gradient(135deg,#f59e0b,#dc2626) !important; }
.cgs-security-qr-scanner-modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
  box-sizing: border-box !important;
}
.cgs-security-qr-scanner-backdrop{
  position:absolute !important;
  inset:0 !important;
  background: rgba(2,6,23,.78) !important;
  backdrop-filter: blur(12px) !important;
}
.cgs-security-qr-scanner-card{
  position: relative !important;
  width: min(94vw, 520px) !important;
  border-radius: 28px !important;
  padding: 18px !important;
  background: linear-gradient(145deg,rgba(15,23,42,.96),rgba(2,6,23,.94)) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.16) !important;
}
.cgs-security-qr-scanner-head{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}
.cgs-security-qr-scanner-title{
  color:#fff !important;
  font-size: 22px !important;
  font-weight: 950 !important;
}
.cgs-security-qr-scanner-sub{
  color:#bfdbfe !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}
.cgs-security-qr-scanner-x{
  width: 46px !important;
  height: 46px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
  font-size: 30px !important;
  line-height: 1 !important;
}
.cgs-security-qr-camera-frame{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  background: #000 !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  min-height: 320px !important;
}
.cgs-security-qr-camera-frame video{
  width: 100% !important;
  height: min(62vh, 430px) !important;
  min-height: 320px !important;
  display: block !important;
  object-fit: cover !important;
  background: #000 !important;
}
.cgs-security-qr-scan-corners{
  position:absolute !important;
  inset: 12% !important;
  border-radius: 18px !important;
  border: 3px solid rgba(251,191,36,.85) !important;
  box-shadow: 0 0 35px rgba(251,191,36,.28), inset 0 0 28px rgba(251,191,36,.12) !important;
  pointer-events:none !important;
}
.cgs-security-qr-cancel-btn{
  width: 100% !important;
  min-height: 54px !important;
  margin-top: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(248,113,113,.55) !important;
  background: rgba(127,29,29,.35) !important;
  color: #fecaca !important;
  font-weight: 950 !important;
  font-size: 16px !important;
}
@media (min-width: 520px){
  .cgs-security-qr-pda-actions{ grid-template-columns: 1fr 1fr !important; }
  .cgs-security-qr-pda-actions input{ grid-column: 1 / -1 !important; }
}

/* v20 - Codeoverzicht stop/hervat knoppen in dezelfde stijl */
.cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-resume-cp,
.cgs-cp-action-buttons .cgs-resume-cp{
  background: rgba(34, 197, 94, 0.10) !important;
  border: 2px solid #22c55e !important;
  color: #bbf7d0 !important;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.15), 0 0 16px rgba(34, 197, 94, 0.12) !important;
}
.cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-resume-cp:hover,
.cgs-cp-action-buttons .cgs-resume-cp:hover{
  background: rgba(34, 197, 94, 0.18) !important;
  color: #dcfce7 !important;
}
.cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-stop-cp,
.cgs-cp-action-buttons .cgs-stop-cp{
  background: rgba(220, 38, 38, 0.10) !important;
  border: 2px solid #ef4444 !important;
  color: #fecaca !important;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.15), 0 0 16px rgba(239, 68, 68, 0.12) !important;
}
.cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-stop-cp:hover,
.cgs-cp-action-buttons .cgs-stop-cp:hover{
  background: rgba(220, 38, 38, 0.18) !important;
  color: #fee2e2 !important;
}
.status-closed { background:#6b7280; color:#fff; }

/* v21 - beter leesbare stop/hervat-knoppen + glassy team popups */
.cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-resume-cp,
.cgs-cp-action-buttons .cgs-resume-cp{
  color: #166534 !important;
  background: rgba(34, 197, 94, 0.14) !important;
  border-color: #22c55e !important;
  text-shadow: none !important;
}
.cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-resume-cp:hover,
.cgs-cp-action-buttons .cgs-resume-cp:hover{
  color: #14532d !important;
  background: rgba(34, 197, 94, 0.22) !important;
}
.cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-stop-cp,
.cgs-cp-action-buttons .cgs-stop-cp{
  color: #991b1b !important;
  background: rgba(239, 68, 68, 0.14) !important;
  border-color: #ef4444 !important;
  text-shadow: none !important;
}
.cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-stop-cp:hover,
.cgs-cp-action-buttons .cgs-stop-cp:hover{
  color: #7f1d1d !important;
  background: rgba(239, 68, 68, 0.22) !important;
}

.cgs-glass-modal{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}
.cgs-glass-modal-overlay{
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cgs-glass-modal-card{
  position: relative;
  width: min(760px, 96vw);
  max-height: 88vh;
  overflow: auto;
  border-radius: 28px;
  padding: 26px;
  background:
    radial-gradient(circle at 20% 0%, rgba(59, 130, 246, .22), transparent 34%),
    linear-gradient(145deg, rgba(15, 23, 42, .92), rgba(30, 41, 59, .82));
  border: 1px solid rgba(148, 163, 184, .30);
  box-shadow: 0 28px 70px rgba(2, 6, 23, .55), inset 0 1px 0 rgba(255,255,255,.08);
  color: #f8fafc;
}
.cgs-glass-modal-card-danger{
  background:
    radial-gradient(circle at 18% 0%, rgba(239, 68, 68, .22), transparent 34%),
    linear-gradient(145deg, rgba(15, 23, 42, .94), rgba(30, 41, 59, .84));
  border-color: rgba(248, 113, 113, .34);
}
.cgs-glass-modal-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.cgs-glass-modal-kicker{
  color: #f59e0b;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.cgs-glass-modal-title{
  font-size: 27px;
  line-height: 1.1;
  font-weight: 950;
  letter-spacing: .2px;
}
.cgs-glass-modal-text{
  color: #dbeafe;
  background: rgba(15, 23, 42, .42);
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 18px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.cgs-glass-modal-x{
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .35);
  background: rgba(148, 163, 184, .14);
  color: #e5e7eb;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.cgs-glass-modal-x:hover{
  background: rgba(248, 113, 113, .20);
  border-color: rgba(248, 113, 113, .45);
}
.cgs-glass-modal .cgs-cp-field label{
  color: #e0f2fe;
  font-weight: 850;
}
.cgs-glass-modal .cgs-cp-field input,
.cgs-glass-modal .cgs-cp-field textarea,
.cgs-glass-modal .cgs-cp-field select{
  background: rgba(248, 250, 252, .96) !important;
  color: #0f172a !important;
  border: 1px solid rgba(147, 197, 253, .55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 0 0 1px rgba(59,130,246,.08) !important;
}
.cgs-glass-modal-actions{
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 22px;
}
.cgs-glass-modal-actions .cgs-cp-btn{
  min-width: 145px;
  min-height: 48px;
  border-radius: 18px !important;
}
.cgs-team-form-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 700px){
  .cgs-glass-modal{
    align-items: flex-start;
    padding: 12px;
    padding-top: 22px;
  }
  .cgs-glass-modal-card{
    width: 100%;
    padding: 20px;
    border-radius: 22px;
  }
  .cgs-team-form-grid{
    grid-template-columns: 1fr;
  }
  .cgs-glass-modal-actions{
    flex-direction: column-reverse;
  }
  .cgs-glass-modal-actions .cgs-cp-btn{
    width: 100%;
  }
}

/* =========================================================
   V22 - Comm schema modal spacing, outline buttons, CP live status
========================================================= */

/* CP-dashboard iets lager zodat de zwarte header niet tegen de site-header aankruipt */
#cgs-cp-app > .cgs-cp-box,
#cgs-cp-screen > .cgs-cp-box{
  margin-top: 42px !important;
}

/* Communicatieschema-popup: velden ruimer uit elkaar */
.cgs-team-form-modal .cgs-glass-modal-card{
  width: min(1220px, 94vw) !important;
  padding: 38px 40px !important;
}
.cgs-team-form-modal .cgs-team-form-grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 34px 36px !important;
  align-items: end !important;
}
.cgs-team-form-modal .cgs-cp-field{
  margin: 0 !important;
  min-width: 0 !important;
}
.cgs-team-form-modal .cgs-cp-field label,
.cgs-team-end-modal .cgs-cp-field label{
  display: block !important;
  margin-bottom: 10px !important;
}
.cgs-team-form-modal .cgs-cp-field input{
  width: 100% !important;
  min-height: 56px !important;
}

/* Knoppen zoals de gewenste outline-stijl */
.cgs-glass-modal-actions.cgs-glass-modal-actions-outline{
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) !important;
  gap: 18px !important;
  justify-content: stretch !important;
  align-items: center !important;
  margin-top: 34px !important;
}
.cgs-glass-modal-actions-outline .cgs-glass-btn-outline{
  width: 100% !important;
  min-height: 58px !important;
  border-radius: 12px !important;
  background: rgba(15, 23, 42, .42) !important;
  color: #f8fafc !important;
  box-shadow: none !important;
  font-weight: 900 !important;
  letter-spacing: .2px !important;
}
.cgs-glass-modal-actions-outline .cgs-glass-btn-red{
  border: 2px solid #ef4444 !important;
}
.cgs-glass-modal-actions-outline .cgs-glass-btn-red:hover{
  background: rgba(239, 68, 68, .18) !important;
}
.cgs-glass-modal-actions-outline .cgs-glass-btn-green{
  border: 2px solid #22c55e !important;
}
.cgs-glass-modal-actions-outline .cgs-glass-btn-green:hover{
  background: rgba(34, 197, 94, .16) !important;
}
.cgs-glass-modal-actions-outline .cgs-glass-btn-red-fill{
  border: 2px solid #ef4444 !important;
  background: rgba(185, 28, 28, .74) !important;
}
.cgs-glass-modal-actions-outline .cgs-glass-btn-red-fill:hover{
  background: rgba(220, 38, 38, .88) !important;
}

/* Einde dienst: klein JA-veld */
.cgs-team-end-modal .cgs-glass-modal-card{
  width: min(900px, 94vw) !important;
}
.cgs-team-end-modal .cgs-cp-field{
  margin-top: 18px !important;
}
.cgs-team-end-modal #cgs-team-end-confirm{
  width: 140px !important;
  max-width: 140px !important;
  min-height: 52px !important;
  text-align: center !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
}

/* LIVE-verbinding in de zwarte balk */
.cgs-cp-live-clock{
  position: relative !important;
  min-height: 132px !important;
  padding-right: 178px !important;
}
.cgs-cp-connection-wrap{
  position: absolute;
  right: 22px;
  top: 22px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.cgs-cp-connection-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 76px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .08em;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 12px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.14);
}
.cgs-cp-connection-badge::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.cgs-cp-connection-badge.is-live{
  color: #22c55e;
  background: rgba(22, 101, 52, .22);
  border-color: rgba(34, 197, 94, .42);
}
.cgs-cp-connection-badge.is-offline{
  color: #ef4444;
  background: rgba(127, 29, 29, .34);
  border-color: rgba(239, 68, 68, .54);
  animation: cgsConnectionPulse 1s ease-in-out infinite;
}
@keyframes cgsConnectionPulse{
  0%,100%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(239,68,68,.45), inset 0 1px 0 rgba(255,255,255,.14); }
  50%{ transform: scale(1.035); box-shadow: 0 0 0 10px rgba(239,68,68,0), inset 0 1px 0 rgba(255,255,255,.14); }
}

/* Glassy geen-verbinding-popup */
.cgs-connection-lost-modal{
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}
.cgs-connection-lost-overlay{
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, .62);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
}
.cgs-connection-lost-card{
  position: relative;
  width: min(660px, 94vw);
  border-radius: 28px;
  padding: 34px;
  text-align: center;
  color: #f8fafc;
  background:
    radial-gradient(circle at 18% 0%, rgba(239, 68, 68, .28), transparent 36%),
    linear-gradient(145deg, rgba(15, 23, 42, .94), rgba(30, 41, 59, .86));
  border: 1px solid rgba(248, 113, 113, .34);
  box-shadow: 0 34px 85px rgba(2, 6, 23, .62), inset 0 1px 0 rgba(255,255,255,.08);
}
.cgs-connection-lost-x{
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(248, 113, 113, .35);
  background: rgba(15, 23, 42, .42);
  color: #fecaca;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.cgs-connection-lost-icon{
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.cgs-connection-triangle{
  width: 0;
  height: 0;
  border-left: 48px solid transparent;
  border-right: 48px solid transparent;
  border-bottom: 86px solid #ef4444;
  position: relative;
  filter: drop-shadow(0 0 18px rgba(239,68,68,.42));
  color: #fff;
  font-weight: 950;
  font-size: 45px;
  line-height: 1;
}
.cgs-connection-triangle::after{
  content: "!";
  position: absolute;
  left: -9px;
  top: 32px;
  color: #fff;
}
.cgs-connection-lost-title{
  font-size: 34px;
  font-weight: 950;
  margin-bottom: 10px;
}
.cgs-connection-lost-text{
  font-size: 20px;
  font-weight: 850;
  line-height: 1.45;
  color: #fee2e2;
}
.cgs-connection-lost-subtext{
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 18px;
  color: #dbeafe;
  background: rgba(15, 23, 42, .46);
  border: 1px solid rgba(148, 163, 184, .22);
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 700px){
  #cgs-cp-app > .cgs-cp-box,
  #cgs-cp-screen > .cgs-cp-box{
    margin-top: 28px !important;
  }
  .cgs-team-form-modal .cgs-glass-modal-card{
    padding: 24px 20px !important;
  }
  .cgs-team-form-modal .cgs-team-form-grid{
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .cgs-glass-modal-actions.cgs-glass-modal-actions-outline{
    grid-template-columns: 1fr !important;
  }
  .cgs-cp-live-clock{
    padding-right: 22px !important;
    padding-top: 70px !important;
  }
  .cgs-cp-connection-wrap{
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: 18px;
  }
}

/* v23 - klok exact gecentreerd ondanks LIVE-badge */
.cgs-cp-live-clock{
  position: relative !important;
  padding-left: 26px !important;
  padding-right: 26px !important;
}
.cgs-cp-live-clock .cgs-cp-clock-right{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  min-width: 360px !important;
  text-align: center !important;
  pointer-events: none !important;
}
.cgs-cp-live-clock .cgs-cp-clock-left{
  z-index: 2 !important;
}
.cgs-cp-live-clock .cgs-cp-connection-wrap{
  z-index: 3 !important;
}

/* v23 - snelmeldingen in 8 groepen */
.cgs-cp-quick-headline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}
.cgs-quick-manage-inline{
  min-height:42px !important;
  padding:0 16px !important;
  border-radius:14px !important;
}
.cgs-quick-group-tabs,
.cgs-quick-manager-tabs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:12px 0 16px;
}
.cgs-quick-group-tab,
.cgs-quick-manager-tab{
  min-height:44px;
  border-radius:14px;
  border:1.5px solid rgba(245,158,11,.45);
  background:linear-gradient(135deg,rgba(15,23,42,.86),rgba(30,41,59,.76));
  color:#f8fafc;
  font-weight:900;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(2,6,23,.16);
}
.cgs-quick-group-tab.is-active,
.cgs-quick-manager-tab.is-active{
  border-color:#f59e0b;
  background:linear-gradient(135deg,rgba(245,158,11,.24),rgba(30,41,59,.88));
  box-shadow:0 0 0 2px rgba(245,158,11,.16), inset 0 1px 0 rgba(255,255,255,.12);
}
.cgs-quick-group-name-row{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:12px;
  align-items:center;
  margin:8px 0 16px;
  padding:14px;
  border-radius:18px;
  background:rgba(15,23,42,.34);
  border:1px solid rgba(148,163,184,.18);
}
.cgs-quick-group-name-row label{
  color:#e2e8f0;
  font-weight:950;
}
.cgs-quick-group-name-row input{
  min-height:48px;
  border-radius:14px;
}
.cgs-quick-modal-card{
  max-height:86vh !important;
  overflow:auto !important;
}
.cgs-lesson-quick-tabs{
  margin-top:0 !important;
}

/* v23 - docentpopup bij offline CP/OC */
.cgs-teacher-offline-modal{
  position:fixed;
  inset:0;
  z-index:1000001;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
}
.cgs-teacher-offline-overlay{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.62);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.cgs-teacher-offline-card{
  position:relative;
  width:min(760px,94vw);
  border-radius:30px;
  padding:34px 38px;
  color:#f8fafc;
  background:radial-gradient(circle at 15% 0%,rgba(239,68,68,.24),transparent 34%),linear-gradient(145deg,rgba(15,23,42,.96),rgba(30,41,59,.88));
  border:1px solid rgba(248,113,113,.35);
  box-shadow:0 34px 90px rgba(2,6,23,.64), inset 0 1px 0 rgba(255,255,255,.08);
}
.cgs-teacher-offline-x{
  position:absolute;
  top:16px;
  right:16px;
  width:46px;
  height:46px;
  border-radius:999px;
  border:1px solid rgba(248,113,113,.35);
  background:rgba(15,23,42,.45);
  color:#fecaca;
  font-size:30px;
  line-height:1;
  cursor:pointer;
}
.cgs-teacher-offline-title{
  color:#f59e0b;
  font-size:14px;
  font-weight:950;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.cgs-teacher-offline-text{
  font-size:22px;
  line-height:1.45;
  font-weight:800;
}
.cgs-teacher-offline-text strong{
  color:#fff;
  font-weight:950;
}
.cgs-teacher-offline-text u{
  text-underline-offset:4px;
  text-decoration-thickness:2px;
}

/* v23 - QR-blok docentzijde tijdelijk verbergen */
.cgs-security-qr-teacher-hidden,
.cgs-security-qr-teacher-hidden *{
  display:none !important;
}

@media (max-width: 780px){
  .cgs-cp-live-clock .cgs-cp-clock-right{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    min-width:0 !important;
    width:100% !important;
    margin-top:10px !important;
  }
  .cgs-quick-group-tabs,
  .cgs-quick-manager-tabs{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .cgs-quick-group-name-row{
    grid-template-columns:1fr;
  }
}


/* v24 - herstel snelmelding tabs + modernere groepknoppen */
#cgs-alarm-toggle,
.cgs-alarm-toggle{
  pointer-events:auto !important;
}
.cgs-quick-group-tabs,
.cgs-quick-manager-tabs,
.cgs-lesson-quick-tabs{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(120px,1fr)) !important;
  gap:12px !important;
  margin:14px 0 18px !important;
}
.cgs-quick-group-tab,
.cgs-quick-manager-tab,
.cgs-lesson-quick-tab{
  min-height:42px !important;
  padding:8px 14px !important;
  border-radius:999px !important;
  border:1.5px solid rgba(148,163,184,.34) !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(255,255,255,.10), transparent 35%),
    linear-gradient(135deg, rgba(15,23,42,.76), rgba(30,41,59,.58)) !important;
  color:#f8fafc !important;
  font-size:14px !important;
  font-weight:900 !important;
  letter-spacing:.02em !important;
  cursor:pointer !important;
  box-shadow:
    0 10px 24px rgba(2,6,23,.18),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.cgs-quick-group-tab:hover,
.cgs-quick-manager-tab:hover,
.cgs-lesson-quick-tab:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(245,158,11,.70) !important;
  box-shadow:0 0 0 3px rgba(245,158,11,.10), 0 12px 26px rgba(2,6,23,.24) !important;
}
.cgs-quick-group-tab.is-active,
.cgs-quick-manager-tab.is-active,
.cgs-lesson-quick-tab.is-active{
  border-color:#f59e0b !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(245,158,11,.28), transparent 38%),
    linear-gradient(135deg, rgba(30,41,59,.88), rgba(15,23,42,.78)) !important;
  box-shadow:0 0 0 3px rgba(245,158,11,.16), 0 12px 28px rgba(2,6,23,.26), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
.cgs-cp-quick-grid{
  align-items:stretch !important;
}
.cgs-cp-quick-btn{
  display:flex;
}
.cgs-cp-quick-btn[style*="display: none"]{
  display:none !important;
}
@media(max-width:900px){
  .cgs-quick-group-tabs,
  .cgs-quick-manager-tabs,
  .cgs-lesson-quick-tabs{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* v25 - rustigere weergave snelmeldingen docent + werkende beheer-tabs */
.cgs-cp-quick-actions{
  padding:26px 30px 30px !important;
  border-radius:24px !important;
  background:linear-gradient(145deg, rgba(255,255,255,.92), rgba(248,250,252,.86)) !important;
  border:1px solid rgba(148,163,184,.22) !important;
  box-shadow:0 18px 44px rgba(15,23,42,.10) !important;
}
.cgs-cp-quick-headline{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  margin:0 0 18px !important;
}
.cgs-cp-quick-title{
  font-size:24px !important;
  line-height:1.1 !important;
  font-weight:950 !important;
  color:#0f172a !important;
  margin:0 !important;
}
#cgs-open-quick-manager,
.cgs-quick-manage-inline{
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  min-height:42px !important;
  margin:0 !important;
  padding:10px 18px !important;
  border-radius:999px !important;
  border:1.5px solid #f59e0b !important;
  background:linear-gradient(145deg, #1e293b, #334155) !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:900 !important;
  box-shadow:0 10px 24px rgba(15,23,42,.16), 0 0 0 3px rgba(245,158,11,.08) !important;
}
.cgs-cp-quick-actions > .cgs-quick-group-tabs{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
  margin:0 0 20px !important;
  padding:12px !important;
  border-radius:22px !important;
  background:rgba(15,23,42,.05) !important;
  border:1px solid rgba(148,163,184,.20) !important;
}
.cgs-cp-quick-actions .cgs-quick-group-tab{
  min-height:46px !important;
  padding:9px 16px !important;
  border-radius:999px !important;
  border:1px solid rgba(148,163,184,.34) !important;
  background:linear-gradient(145deg, #475569, #334155) !important;
  color:#f8fafc !important;
  font-size:15px !important;
  font-weight:900 !important;
  box-shadow:0 8px 18px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.cgs-cp-quick-actions .cgs-quick-group-tab.is-active{
  border-color:#f59e0b !important;
  background:linear-gradient(145deg, #1f2937, #334155) !important;
  box-shadow:0 0 0 3px rgba(245,158,11,.16), 0 10px 22px rgba(15,23,42,.18) !important;
}
.cgs-cp-quick-actions .cgs-cp-quick-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(220px,1fr)) !important;
  gap:14px !important;
  margin-top:0 !important;
  align-items:stretch !important;
}
.cgs-cp-quick-actions .cgs-cp-quick-btn{
  width:100% !important;
  min-height:66px !important;
  justify-content:flex-start !important;
  text-align:left !important;
  padding:16px 20px !important;
  border-radius:18px !important;
  border:1px solid rgba(15,23,42,.08) !important;
  background:linear-gradient(145deg, #172033, #26364f) !important;
  color:#fff !important;
  font-size:18px !important;
  font-weight:900 !important;
  box-shadow:0 12px 26px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.cgs-cp-quick-actions .cgs-cp-quick-btn:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(14,165,233,.28) !important;
  box-shadow:0 16px 30px rgba(15,23,42,.20), 0 0 0 3px rgba(14,165,233,.10) !important;
}
.cgs-cp-quick-actions .cgs-quick-group-empty{
  grid-column:1/-1 !important;
  padding:18px 20px !important;
  border-radius:18px !important;
  background:rgba(15,23,42,.05) !important;
  color:#334155 !important;
  font-weight:800 !important;
}
#cgs-quick-manager-modal .cgs-quick-manager-tabs{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
  margin:14px 0 20px !important;
  padding:12px !important;
  border-radius:22px !important;
  background:rgba(15,23,42,.32) !important;
  border:1px solid rgba(148,163,184,.18) !important;
}
#cgs-quick-manager-modal .cgs-quick-manager-tab{
  min-height:42px !important;
  border-radius:999px !important;
  border:1px solid rgba(148,163,184,.34) !important;
  background:linear-gradient(145deg, rgba(71,85,105,.86), rgba(30,41,59,.78)) !important;
  color:#f8fafc !important;
  font-size:14px !important;
  font-weight:900 !important;
}
#cgs-quick-manager-modal .cgs-quick-manager-tab.is-active{
  border-color:#f59e0b !important;
  box-shadow:0 0 0 3px rgba(245,158,11,.16) !important;
}
#cgs-quick-manager-modal .cgs-quick-group-editor{
  width:100% !important;
}
#cgs-quick-manager-modal .cgs-quick-edit-row{
  border-radius:18px !important;
  margin-bottom:12px !important;
  padding:14px !important;
}
@media(max-width:900px){
  .cgs-cp-quick-headline{align-items:flex-start !important; flex-direction:column !important;}
  .cgs-cp-quick-actions > .cgs-quick-group-tabs,
  #cgs-quick-manager-modal .cgs-quick-manager-tabs{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .cgs-cp-quick-actions .cgs-cp-quick-grid{grid-template-columns:1fr !important;}
}

/* v27 - strakkere en kleinere groepknoppen in de automatische lesregisseur */
.cgs-lesson-quick-tabs,
.cgs-lesson-quick-groups .cgs-quick-group-tabs{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
  margin:14px 0 18px !important;
}
.cgs-lesson-quick-tab,
.cgs-lesson-quick-groups .cgs-quick-group-tab{
  min-height:42px !important;
  height:auto !important;
  padding:8px 14px !important;
  border-radius:999px !important;
  font-size:14px !important;
  font-weight:900 !important;
  line-height:1.1 !important;
  background:linear-gradient(145deg, rgba(30,41,59,.92), rgba(51,65,85,.86)) !important;
  border:1px solid rgba(148,163,184,.35) !important;
  color:#f8fafc !important;
  box-shadow:0 8px 18px rgba(15,23,42,.20), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.cgs-lesson-quick-tab.is-active,
.cgs-lesson-quick-groups .cgs-quick-group-tab.is-active{
  border-color:#f59e0b !important;
  box-shadow:0 0 0 3px rgba(245,158,11,.15), 0 10px 22px rgba(15,23,42,.22) !important;
}
#cgs-quick-manager-modal .cgs-quick-group-editor:not(.is-active){
  display:none !important;
}
#cgs-quick-manager-modal .cgs-quick-group-editor.is-active{
  display:block !important;
}
#cgs-save-quick-alarms.is-saving{
  opacity:.72 !important;
  cursor:wait !important;
}
@media(max-width:900px){
  .cgs-lesson-quick-tabs,
  .cgs-lesson-quick-groups .cgs-quick-group-tabs{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}


/* v28 - hardfix snelmeldingen beheer + lesregisseur tabs */
#cgs-close-quick-manager{
  pointer-events:auto !important;
  cursor:pointer !important;
}
#cgs-quick-manager-modal .cgs-quick-group-editor{
  width:100% !important;
}
#cgs-quick-manager-modal .cgs-quick-group-editor.is-active{
  display:block !important;
}
#cgs-quick-manager-modal .cgs-quick-group-editor:not(.is-active){
  display:none !important;
}
#cgs-quick-manager-modal .cgs-quick-modal-card{
  width:min(94vw, 1180px) !important;
}
.cgs-lesson-quick-groups .cgs-quick-group-tabs,
.cgs-lesson-quick-tabs{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:8px !important;
  margin:10px 0 14px !important;
}
.cgs-lesson-quick-groups .cgs-quick-group-tab,
.cgs-lesson-quick-tab{
  min-height:36px !important;
  padding:7px 12px !important;
  font-size:13px !important;
}
.cgs-lesson-quick-case-card[style*="display: none"]{
  display:none !important;
}


/* v29 - herstel snelmeldingen popup: nooit zichtbaar zonder open-class */
#cgs-quick-manager-modal.cgs-quick-hidden{display:none !important;}
#cgs-quick-manager-modal:not(.cgs-quick-open){display:none !important;}
#cgs-quick-manager-modal.cgs-quick-open{display:block !important;}
#cgs-quick-manager-modal.cgs-quick-open .cgs-quick-modal-card{display:block !important;}
#cgs-quick-manager-modal .cgs-quick-group-editor:not(.is-active){display:none !important;}
#cgs-quick-manager-modal .cgs-quick-group-editor.is-active{display:block !important;}

/* v30: stabiele snelmelding-modal en tabfix */
#cgs-quick-manager-modal.cgs-quick-hidden,
#cgs-quick-manager-modal:not(.cgs-quick-open){
  display:none !important;
}
#cgs-quick-manager-modal.cgs-quick-open{
  display:block !important;
}
#cgs-quick-manager-modal .cgs-quick-group-editor{
  display:none !important;
}
#cgs-quick-manager-modal .cgs-quick-group-editor.is-active{
  display:block !important;
}
#cgs-open-quick-manager{
  position:relative;
  z-index:2;
  pointer-events:auto !important;
}
#cgs-save-quick-alarms,
#cgs-cancel-quick-manager,
#cgs-close-quick-manager,
#cgs-quick-manager-modal .cgs-quick-manager-tab{
  pointer-events:auto !important;
}

/* v32 - quicktabs popup: kaart boven overlay + compacte groepsnaam */
#cgs-quick-manager-modal.cgs-quick-open{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}
#cgs-quick-manager-modal .cgs-quick-modal-overlay{
  z-index:1 !important;
  pointer-events:auto !important;
}
#cgs-quick-manager-modal .cgs-quick-modal-card{
  z-index:2 !important;
  pointer-events:auto !important;
}
#cgs-quick-manager-modal .cgs-quick-manager-tab,
#cgs-quick-manager-modal .cgs-quick-group-editor,
#cgs-quick-manager-modal .cgs-quick-group-editor *,
.cgs-lesson-quick-groups .cgs-quick-group-tab,
.cgs-lesson-quick-groups .cgs-lesson-quick-tab{
  pointer-events:auto !important;
}
#cgs-quick-manager-modal .cgs-quick-group-name-row{
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  flex-wrap:wrap !important;
}
#cgs-quick-manager-modal .cgs-quick-group-name-row label{
  min-width:140px !important;
  margin:0 !important;
}
#cgs-quick-manager-modal .cgs-quick-group-name{
  width:min(100%, 420px) !important;
  max-width:420px !important;
  min-height:44px !important;
}
#cgs-quick-manager-modal .cgs-quick-group-editor:not(.is-active){
  display:none !important;
}
#cgs-quick-manager-modal .cgs-quick-group-editor.is-active{
  display:block !important;
}


/* v37 quicktabs clean fix */
#cgs-quick-manager-modal.cgs-quick-open {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#cgs-quick-manager-modal .cgs-quick-modal-overlay {
  z-index: 1 !important;
}
#cgs-quick-manager-modal .cgs-quick-modal-card {
  z-index: 2 !important;
  pointer-events: auto !important;
}
#cgs-quick-manager-modal .cgs-quick-group-name {
  max-width: 520px !important;
  width: min(520px, 100%) !important;
}
#cgs-quick-manager-modal .cgs-quick-group-name-row {
  justify-content: flex-start !important;
}
.cgs-lesson-quick-tabs .cgs-quick-group-tab,
.cgs-lesson-quick-tabs .cgs-lesson-quick-tab {
  min-height: 44px !important;
  padding: 10px 18px !important;
}

/* =========================================================
   V38 - Compactere knoppen in commschema glass popups
   ========================================================= */
.cgs-team-form-modal .cgs-glass-modal-actions.cgs-glass-modal-actions-outline,
.cgs-team-end-modal .cgs-glass-modal-actions.cgs-glass-modal-actions-outline{
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 30px !important;
}
.cgs-team-form-modal .cgs-glass-modal-actions-outline .cgs-glass-btn-outline,
.cgs-team-end-modal .cgs-glass-modal-actions-outline .cgs-glass-btn-outline{
  width: 220px !important;
  max-width: 220px !important;
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 0 18px !important;
  border-radius: 12px !important;
}
@media (max-width: 700px){
  .cgs-team-form-modal .cgs-glass-modal-actions.cgs-glass-modal-actions-outline,
  .cgs-team-end-modal .cgs-glass-modal-actions.cgs-glass-modal-actions-outline{
    flex-direction: column-reverse !important;
    align-items: stretch !important;
  }
  .cgs-team-form-modal .cgs-glass-modal-actions-outline .cgs-glass-btn-outline,
  .cgs-team-end-modal .cgs-glass-modal-actions-outline .cgs-glass-btn-outline{
    width: 100% !important;
    max-width: none !important;
  }
}

/* =========================================================
   V39 - Compactere knoppen in Nieuw team / Einde dienst popups
   ========================================================= */
.cgs-team-form-modal .cgs-glass-modal-actions.cgs-glass-modal-actions-outline,
.cgs-team-end-modal .cgs-glass-modal-actions.cgs-glass-modal-actions-outline{
  gap: 12px !important;
  margin-top: 24px !important;
}
.cgs-team-form-modal .cgs-glass-modal-actions-outline .cgs-glass-btn-outline,
.cgs-team-end-modal .cgs-glass-modal-actions-outline .cgs-glass-btn-outline{
  width: 160px !important;
  max-width: 160px !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
}
@media (max-width: 700px){
  .cgs-team-form-modal .cgs-glass-modal-actions-outline .cgs-glass-btn-outline,
  .cgs-team-end-modal .cgs-glass-modal-actions-outline .cgs-glass-btn-outline{
    width: 100% !important;
    max-width: none !important;
  }
}

/* V40 - Docentfeedback: rapportageknop terug + nette verwerkingspopup snelmeldingen */
.cgs-quick-save-progress-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  pointer-events: auto !important;
}
.cgs-quick-save-progress-modal.is-open {
  display: flex !important;
}
.cgs-quick-save-progress-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(2, 6, 23, 0.68) !important;
  backdrop-filter: blur(8px) !important;
}
.cgs-quick-save-progress-card {
  position: relative !important;
  width: min(520px, 92vw) !important;
  border-radius: 28px !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.92)) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45) !important;
  color: #fff !important;
  padding: 34px 36px !important;
  text-align: center !important;
}
.cgs-quick-save-spinner {
  width: 58px !important;
  height: 58px !important;
  margin: 0 auto 18px auto !important;
  border-radius: 999px !important;
  border: 5px solid rgba(148, 163, 184, 0.28) !important;
  border-top-color: #22c55e !important;
  animation: cgsQuickSaveSpin 0.85s linear infinite !important;
}
.cgs-quick-save-progress-modal.is-error .cgs-quick-save-spinner {
  border-top-color: #ef4444 !important;
}
.cgs-quick-save-title {
  font-size: 28px !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
  margin-bottom: 10px !important;
}
.cgs-quick-save-text {
  color: #cbd5e1 !important;
  font-size: 18px !important;
  line-height: 1.45 !important;
}
.cgs-quick-save-countdown {
  margin-top: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 190px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(34, 197, 94, 0.55) !important;
  color: #bbf7d0 !important;
  background: rgba(22, 163, 74, 0.12) !important;
  font-weight: 900 !important;
}
.cgs-quick-save-progress-modal.is-error .cgs-quick-save-countdown {
  border-color: rgba(239, 68, 68, 0.65) !important;
  color: #fecaca !important;
  background: rgba(127, 29, 29, 0.22) !important;
}
@keyframes cgsQuickSaveSpin {
  to { transform: rotate(360deg); }
}

/* Zorg dat de acties in het codeoverzicht compact blijven als Rapportage terug is */
.cgs-cp-action-buttons .cgs-cp-report-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* v41 - Docentendashboard thema popups voor codeoverzicht */
#cgs-teacher-theme-dialog,
.cgs-teacher-theme-dialog{
  position:fixed;
  inset:0;
  z-index:2147483400;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  box-sizing:border-box;
}
.cgs-teacher-theme-dialog__overlay{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.68);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.cgs-teacher-theme-dialog__card{
  position:relative;
  width:min(92vw,720px);
  background:linear-gradient(135deg,rgba(15,31,53,.96),rgba(17,24,39,.96));
  color:#f8fafc;
  border:1.5px solid rgba(148,163,184,.24);
  box-shadow:0 26px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  border-radius:28px;
  padding:28px;
  box-sizing:border-box;
}
.cgs-teacher-theme-dialog.is-danger .cgs-teacher-theme-dialog__card{
  border-color:rgba(239,68,68,.48);
  box-shadow:0 26px 90px rgba(0,0,0,.55),0 0 40px rgba(239,68,68,.14), inset 0 1px 0 rgba(255,255,255,.08);
}
.cgs-teacher-theme-dialog__x{
  position:absolute;
  right:24px;
  top:22px;
  width:58px;
  height:58px;
  border-radius:22px;
  border:1px solid rgba(148,163,184,.32);
  background:rgba(15,23,42,.62);
  color:#f8fafc;
  font-size:34px;
  font-weight:950;
  line-height:1;
  cursor:pointer;
}
.cgs-teacher-theme-dialog__eyebrow{
  color:#f59e0b;
  font-size:13px;
  font-weight:950;
  letter-spacing:.28em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.cgs-teacher-theme-dialog__title{
  max-width:calc(100% - 80px);
  font-size:34px;
  line-height:1.1;
  font-weight:950;
  margin-bottom:18px;
}
.cgs-teacher-theme-dialog__message{
  background:rgba(15,23,42,.42);
  border:1px solid rgba(148,163,184,.18);
  border-radius:18px;
  padding:16px 18px;
  color:#e5e7eb;
  font-size:17px;
  line-height:1.55;
  font-weight:700;
}
.cgs-teacher-theme-dialog__message p{margin:0;}
.cgs-teacher-theme-dialog__actions{
  display:flex;
  gap:16px;
  justify-content:flex-end;
  align-items:center;
  margin-top:24px;
  flex-wrap:wrap;
}
.cgs-teacher-theme-dialog__btn{
  min-width:170px;
  min-height:56px;
  border-radius:16px;
  padding:12px 24px;
  font-size:17px;
  font-weight:950;
  cursor:pointer;
  background:rgba(15,23,42,.42);
  color:#f8fafc;
  border:2px solid rgba(148,163,184,.35);
}
.cgs-teacher-theme-dialog__btn--cancel{
  border-color:#ef4444;
  color:#fecaca;
}
.cgs-teacher-theme-dialog__btn--confirm{
  border-color:#22c55e;
  color:#bbf7d0;
}
.cgs-teacher-theme-dialog__btn--danger{
  border-color:#ef4444;
  background:rgba(185,28,28,.78);
  color:#fff;
}
@media (max-width:640px){
  .cgs-teacher-theme-dialog__card{padding:22px;border-radius:22px;}
  .cgs-teacher-theme-dialog__title{font-size:28px;}
  .cgs-teacher-theme-dialog__actions{flex-direction:column-reverse;align-items:stretch;}
  .cgs-teacher-theme-dialog__btn{width:100%;}
}

/* v46 - Lesregisseur theme popup en compacte melding */
.cgs-lesson-theme-modal{position:fixed;inset:0;z-index:2147483000;}
.cgs-lesson-theme-modal .cgs-glass-modal-card{max-width:760px;}
.cgs-lesson-theme-message{display:flex;gap:16px;align-items:flex-start;margin:20px 0;padding:18px 20px;border:1px solid rgba(255,255,255,.14);background:rgba(15,23,42,.48);border-radius:22px;color:#e5eefb;font-weight:800;line-height:1.55;}
.cgs-lesson-theme-icon{width:46px!important;height:46px!important;min-width:46px!important;max-width:46px!important;max-height:46px!important;border-radius:14px;display:flex!important;align-items:center!important;justify-content:center!important;background:rgba(56,189,248,.16);border:1px solid rgba(56,189,248,.42);color:#7dd3fc;font-weight:950;font-size:22px;line-height:1;overflow:hidden!important;}
.cgs-lesson-theme-icon svg{width:24px!important;height:24px!important;max-width:24px!important;max-height:24px!important;display:block!important;}
.cgs-lesson-theme-icon.is-danger{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.55);color:#ef4444;}
.cgs-lesson-theme-icon .cgs-warning-triangle{position:relative!important;display:block!important;width:32px!important;height:28px!important;min-width:32px!important;max-width:32px!important;max-height:28px!important;background:#fecaca!important;clip-path:polygon(50% 0%, 100% 100%, 0% 100%)!important;filter:drop-shadow(0 0 8px rgba(239,68,68,.30));}
.cgs-lesson-theme-icon .cgs-warning-bang{position:absolute!important;left:50%!important;top:55%!important;transform:translate(-50%,-50%)!important;color:#dc2626!important;font-size:19px!important;font-weight:1000!important;line-height:1!important;font-family:Arial, sans-serif!important;}
.cgs-lesson-theme-modal .cgs-glass-modal-actions{justify-content:flex-end;gap:14px;}
.cgs-lesson-theme-modal .cgs-glass-modal-actions .cgs-cp-btn{min-width:190px;max-width:260px;padding:16px 20px;}
@media (max-width: 720px){.cgs-lesson-theme-message{flex-direction:column}.cgs-lesson-theme-modal .cgs-glass-modal-actions{flex-direction:column}.cgs-lesson-theme-modal .cgs-glass-modal-actions .cgs-cp-btn{width:100%;max-width:none;}}


/* =========================================================
   CGS CP v50 - Codeoverzicht knoppen en handhaving rapport-labels
========================================================= */
.cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons{
  gap:7px !important;
}
.cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-cp-btn{
  min-height:42px !important;
}
.cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-cp-team-mutations-btn .cgs-teamdoc-btn-text{
  line-height:1.12 !important;
}


/* =========================================================
   CGS CP v51 - Codeoverzicht knoppen / handhaving rapporten
========================================================= */
.cgs-code-table td.cgs-actions-cell{
  width:220px !important;
  min-width:220px !important;
}
.cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:7px !important;
  align-items:stretch !important;
}
.cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-cp-btn,
.cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-cp-btn-small{
  width:100% !important;
  min-width:0 !important;
  min-height:40px !important;
  padding:8px 9px !important;
  font-size:13px !important;
  line-height:1.12 !important;
  white-space:normal !important;
}
.cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-cp-report-btn,
.cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-cp-specific-reports-btn,
.cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-cp-team-mutations-btn,
.cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-cp-combibon-btn{
  letter-spacing:.01em !important;
}
@media (max-width: 760px){
  .cgs-code-table td.cgs-actions-cell{
    width:auto !important;
    min-width:0 !important;
  }
  .cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons{
    grid-template-columns:1fr !important;
  }
}


/* CGS v52 - stabiele docent alarmmelding/inplannen popup */
.cgs-alarm-stable-modal{position:fixed;inset:0;z-index:99999999;display:flex;align-items:center;justify-content:center;padding:22px;box-sizing:border-box;}
.cgs-alarm-stable-overlay{position:absolute;inset:0;background:rgba(2,6,23,.72);backdrop-filter:blur(9px);}
.cgs-alarm-stable-card{position:relative;z-index:2;width:min(94vw,680px);max-height:92vh;overflow:auto;background:linear-gradient(135deg,rgba(30,41,59,.96),rgba(15,23,42,.98));border:1px solid rgba(255,255,255,.14);border-radius:28px;color:#fff;box-shadow:0 32px 90px rgba(0,0,0,.58);padding:28px;}
.cgs-alarm-stable-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px;}
.cgs-alarm-stable-kicker{text-transform:uppercase;letter-spacing:.25em;color:#f59e0b;font-weight:950;font-size:13px;margin-bottom:6px;}
.cgs-alarm-stable-head h2{margin:0;font-size:30px;line-height:1.1;color:#fff;}
.cgs-alarm-stable-x{width:58px;height:58px;border-radius:20px;border:1px solid rgba(255,255,255,.14);background:rgba(15,23,42,.75);color:#fff;font-size:34px;font-weight:900;cursor:pointer;}
.cgs-alarm-stable-summary{border:1px solid rgba(255,255,255,.12);background:rgba(15,23,42,.48);border-radius:18px;padding:16px 18px;margin-bottom:18px;color:#e5e7eb;display:grid;gap:6px;}
.cgs-alarm-stable-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px;}
.cgs-alarm-stable-quick button{border:1px solid rgba(148,163,184,.42);background:rgba(51,65,85,.72);color:#fff;border-radius:16px;padding:14px 10px;font-weight:850;cursor:pointer;}
.cgs-alarm-stable-quick button.is-active{border-color:#f59e0b;box-shadow:0 0 0 1px rgba(245,158,11,.4),0 0 18px rgba(245,158,11,.18);}
.cgs-alarm-stable-label{display:block;color:#e5e7eb;font-weight:850;margin:4px 0 8px;}
.cgs-alarm-stable-input{width:100%;height:56px;border-radius:16px;border:1px solid rgba(245,158,11,.7);background:#020617;color:#fff;padding:0 16px;font-weight:800;box-sizing:border-box;}
.cgs-alarm-stable-result{min-height:32px;margin-top:14px;}
.cgs-alarm-stable-actions{display:flex;justify-content:flex-end;gap:14px;margin-top:18px;flex-wrap:wrap;}
.cgs-alarm-stable-actions .cgs-cp-btn{min-width:180px;}
@media(max-width:760px){.cgs-alarm-stable-quick{grid-template-columns:repeat(2,minmax(0,1fr));}.cgs-alarm-stable-card{padding:20px}.cgs-alarm-stable-head h2{font-size:24px}.cgs-alarm-stable-actions .cgs-cp-btn{min-width:0;flex:1 1 160px;}}

/* V53 - Docent alarm inplannen: duidelijkere datum/tijdkeuze */
.cgs-alarm-stable-manual{
  margin-top:18px;
  padding:16px;
  border:1px solid rgba(148,163,184,.24);
  border-radius:20px;
  background:rgba(15,23,42,.46);
}
.cgs-alarm-stable-manual-title{
  color:#f8fafc;
  font-weight:950;
  font-size:18px;
  margin:0 0 12px;
}
.cgs-alarm-stable-dategrid{
  display:grid;
  grid-template-columns:1fr 180px;
  gap:14px;
  align-items:end;
}
.cgs-alarm-stable-dategrid label{
  display:grid;
  gap:7px;
  color:#cbd5e1;
  font-weight:900;
  font-size:14px;
}
.cgs-alarm-stable-dategrid label span{
  letter-spacing:.02em;
}
.cgs-alarm-stable-dategrid .cgs-alarm-stable-input{
  height:58px;
  font-size:18px;
  letter-spacing:.02em;
  color:#fff;
  background:#020617;
  border:1.5px solid rgba(245,158,11,.78);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 10px 24px rgba(0,0,0,.18);
}
.cgs-alarm-stable-dategrid input[type="date"]::-webkit-calendar-picker-indicator,
.cgs-alarm-stable-dategrid input[type="time"]::-webkit-calendar-picker-indicator{
  filter:invert(1);
  opacity:.9;
  cursor:pointer;
}
.cgs-alarm-stable-preview{
  margin-top:12px;
  color:#bbf7d0;
  font-weight:900;
  border:1px solid rgba(34,197,94,.24);
  background:rgba(34,197,94,.09);
  border-radius:14px;
  padding:12px 14px;
}
.cgs-teacher-alarm-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:104px;
  border-radius:999px;
  padding:7px 10px;
  font-weight:900;
  font-size:12px;
  border:1px solid rgba(148,163,184,.35);
  color:#334155;
  background:#f8fafc;
}
.cgs-teacher-alarm-status.open{border-color:rgba(239,68,68,.35);color:#991b1b;background:#fee2e2;}
.cgs-teacher-alarm-status.progress{border-color:rgba(245,158,11,.45);color:#92400e;background:#fef3c7;}
.cgs-teacher-alarm-status.done{border-color:rgba(34,197,94,.35);color:#166534;background:#dcfce7;}
.cgs-teacher-alarm-prio{
  margin-left:8px;
  color:#64748b;
  font-weight:900;
  font-size:12px;
}
@media(max-width:760px){
  .cgs-alarm-stable-dategrid{grid-template-columns:1fr;}
}


/* =========================================================
   TEACHER PLANNED ALARMS - tile weergave
========================================================= */
.cgs-teacher-scheduled-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:16px;
    margin-top:8px;
}
.cgs-teacher-scheduled-tile{
    border-radius:22px;
    padding:20px 22px;
    background:linear-gradient(145deg,#ffffff,#f8fafc);
    border:1px solid rgba(15,23,42,.10);
    box-shadow:0 16px 34px rgba(15,23,42,.10);
    color:#0f172a;
}
.cgs-teacher-scheduled-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:10px;
}
.cgs-teacher-scheduled-title{
    font-size:23px;
    line-height:1.15;
    font-weight:950;
    color:#0f172a;
}
.cgs-teacher-scheduled-prio{
    flex:0 0 auto;
    font-size:16px;
    line-height:1;
    font-weight:900;
    color:#92400e;
    background:#fef3c7;
    border:1px solid #f59e0b;
    border-radius:999px;
    padding:8px 12px;
}
.cgs-teacher-scheduled-time{
    font-size:18px;
    font-weight:750;
    color:#334155;
    margin-top:8px;
}
.cgs-teacher-scheduled-message{
    margin-top:12px;
    font-size:16px;
    line-height:1.45;
    color:#475569;
}
.cgs-teacher-scheduled-status{
    margin-top:14px;
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    padding:7px 12px;
    font-size:14px;
    font-weight:900;
    color:#0369a1;
    background:#e0f2fe;
    border:1px solid #7dd3fc;
}
@media (max-width:700px){
    .cgs-teacher-scheduled-grid{grid-template-columns:1fr;}
    .cgs-teacher-scheduled-title{font-size:20px;}
    .cgs-teacher-scheduled-time{font-size:16px;}
}

/* v55 - geselecteerde snelmelding markeren nadat deze in het formulier is geladen */
.cgs-cp-quick-actions .cgs-cp-quick-btn.is-loaded{
  border-color:#22c55e !important;
  box-shadow:0 16px 30px rgba(15,23,42,.20), 0 0 0 3px rgba(34,197,94,.18) !important;
  background:linear-gradient(145deg, #172033, #1f3a32) !important;
}

/* v56 - snelmelding keuze-popup: direct verzenden of inplannen */
.cgs-quick-action-modal{
  position:fixed !important;
  inset:0 !important;
  z-index:9999999 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:24px !important;
  box-sizing:border-box !important;
}
.cgs-quick-action-overlay{
  position:absolute !important;
  inset:0 !important;
  background:rgba(2,6,23,.68) !important;
  backdrop-filter:blur(8px) !important;
}
.cgs-quick-action-card{
  position:relative !important;
  width:min(760px, 96vw) !important;
  max-height:92vh !important;
  overflow:auto !important;
  border-radius:28px !important;
  padding:28px !important;
  background:linear-gradient(145deg, rgba(15,23,42,.96), rgba(30,41,59,.94)) !important;
  border:1px solid rgba(148,163,184,.28) !important;
  box-shadow:0 30px 80px rgba(0,0,0,.45) !important;
  color:#f8fafc !important;
}
.cgs-quick-action-head{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:18px !important;
  margin-bottom:18px !important;
}
.cgs-quick-action-kicker{
  color:#f59e0b !important;
  text-transform:uppercase !important;
  letter-spacing:.22em !important;
  font-size:14px !important;
  font-weight:950 !important;
  margin-bottom:6px !important;
}
.cgs-quick-action-head h2{
  margin:0 !important;
  font-size:34px !important;
  line-height:1.1 !important;
  color:#fff !important;
}
.cgs-quick-action-x{
  width:62px !important;
  height:62px !important;
  border-radius:22px !important;
  border:1px solid rgba(148,163,184,.35) !important;
  background:rgba(15,23,42,.55) !important;
  color:#fff !important;
  font-size:36px !important;
  font-weight:900 !important;
  cursor:pointer !important;
}
.cgs-quick-action-summary{
  border:1px solid rgba(148,163,184,.24) !important;
  background:rgba(15,23,42,.42) !important;
  border-radius:20px !important;
  padding:16px 18px !important;
  display:grid !important;
  gap:7px !important;
  color:#e5e7eb !important;
  font-size:17px !important;
  line-height:1.4 !important;
  margin-bottom:18px !important;
}
.cgs-quick-action-modes{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:14px !important;
  margin-bottom:16px !important;
}
.cgs-quick-action-mode{
  border-radius:18px !important;
  min-height:58px !important;
  padding:0 18px !important;
  border:1px solid rgba(148,163,184,.38) !important;
  background:rgba(51,65,85,.72) !important;
  color:#f8fafc !important;
  font-size:18px !important;
  font-weight:900 !important;
  cursor:pointer !important;
}
.cgs-quick-action-mode.is-active[data-mode="send"]{
  border-color:#22c55e !important;
  box-shadow:0 0 0 3px rgba(34,197,94,.16) !important;
}
.cgs-quick-action-mode.is-active[data-mode="schedule"]{
  border-color:#f59e0b !important;
  box-shadow:0 0 0 3px rgba(245,158,11,.16) !important;
}
.cgs-quick-action-schedule{
  opacity:.45 !important;
  pointer-events:none !important;
  border:1px solid rgba(245,158,11,.25) !important;
  background:rgba(15,23,42,.36) !important;
  border-radius:20px !important;
  padding:16px !important;
  margin-bottom:14px !important;
}
.cgs-quick-action-schedule.is-active{
  opacity:1 !important;
  pointer-events:auto !important;
}
.cgs-quick-action-schedule-title{
  color:#fff !important;
  font-size:18px !important;
  font-weight:950 !important;
  margin-bottom:12px !important;
}
.cgs-quick-action-dategrid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:14px !important;
}
.cgs-quick-action-dategrid label span{
  display:block !important;
  color:#cbd5e1 !important;
  font-weight:850 !important;
  margin:0 0 8px !important;
}
.cgs-quick-action-dategrid input{
  width:100% !important;
  box-sizing:border-box !important;
  min-height:54px !important;
  border-radius:14px !important;
  border:1px solid rgba(245,158,11,.75) !important;
  background:#020617 !important;
  color:#f8fafc !important;
  padding:0 14px !important;
  font-size:17px !important;
  font-weight:850 !important;
}
.cgs-quick-action-preview{
  margin-top:12px !important;
  color:#fde68a !important;
  font-size:16px !important;
  font-weight:850 !important;
}
.cgs-quick-action-result{
  min-height:30px !important;
  margin:10px 0 14px !important;
}
.cgs-quick-action-actions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:14px !important;
}
.cgs-quick-action-actions .cgs-cp-btn{
  min-height:58px !important;
  border-radius:16px !important;
}
@media (max-width:700px){
  .cgs-quick-action-card{padding:22px !important;border-radius:22px !important;}
  .cgs-quick-action-head h2{font-size:28px !important;}
  .cgs-quick-action-modes,.cgs-quick-action-dategrid,.cgs-quick-action-actions{grid-template-columns:1fr !important;}
}


.cgs-quick-action-service-block{
  display:grid !important;
  gap:8px !important;
  margin-bottom:6px !important;
}
.cgs-quick-action-service-block label{
  color:#e5e7eb !important;
  font-size:17px !important;
  font-weight:900 !important;
}
#cgs-quick-action-shift{
  width:100% !important;
  min-height:54px !important;
  border-radius:16px !important;
  border:1.5px solid rgba(245,158,11,.72) !important;
  background:rgba(2,6,23,.86) !important;
  color:#f8fafc !important;
  padding:0 16px !important;
  font-size:17px !important;
  font-weight:850 !important;
  outline:none !important;
}
#cgs-quick-action-shift:focus{
  border-color:#f59e0b !important;
  box-shadow:0 0 0 3px rgba(245,158,11,.18) !important;
}
.cgs-quick-action-service-label{
  color:#94a3b8 !important;
  font-size:14px !important;
  font-weight:750 !important;
}


/* v58 - snelmelding popup: rustiger keuze, preview titel/prio/tekst */
.cgs-quick-action-alert-preview{
  margin-top:10px !important;
  padding:14px 16px !important;
  border-radius:18px !important;
  background:rgba(2,6,23,.36) !important;
  border:1px solid rgba(148,163,184,.18) !important;
}
.cgs-quick-action-title-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  margin-bottom:10px !important;
}
.cgs-quick-action-alert-title{
  color:#f8fafc !important;
  font-size:22px !important;
  line-height:1.2 !important;
  font-weight:950 !important;
}
.cgs-quick-action-prio-badge{
  flex:0 0 auto !important;
  border-radius:999px !important;
  padding:8px 14px !important;
  background:rgba(245,158,11,.16) !important;
  border:1px solid rgba(245,158,11,.45) !important;
  color:#fde68a !important;
  font-size:16px !important;
  font-weight:950 !important;
}
.cgs-quick-action-alert-text{
  color:#e5e7eb !important;
  font-size:20px !important;
  line-height:1.35 !important;
  font-weight:800 !important;
}
.cgs-quick-action-alert-text.is-empty{
  color:#94a3b8 !important;
  font-style:italic !important;
  font-weight:700 !important;
}
.cgs-quick-action-choice-label{
  color:#e5e7eb !important;
  font-size:18px !important;
  font-weight:950 !important;
  margin:6px 0 10px !important;
}
.cgs-quick-action-mode{
  background:rgba(30,41,59,.70) !important;
  border:1.5px solid rgba(34,197,94,.70) !important;
  box-shadow:none !important;
}
.cgs-quick-action-mode.is-active[data-mode="send"],
.cgs-quick-action-mode.is-active[data-mode="schedule"]{
  background:rgba(37,99,235,.18) !important;
  border-color:#22c55e !important;
  box-shadow:0 0 0 3px rgba(34,197,94,.14) !important;
}
.cgs-quick-action-actions .cgs-cp-btn{
  background:rgba(30,41,59,.72) !important;
  box-shadow:none !important;
}
.cgs-quick-action-actions .cgs-cp-btn-outline-red{
  border:2px solid #ef4444 !important;
  color:#f8fafc !important;
}
.cgs-quick-action-actions .cgs-cp-btn-outline-green{
  border:2px solid #22c55e !important;
  color:#f8fafc !important;
}
@media (max-width:700px){
  .cgs-quick-action-title-row{align-items:flex-start !important;flex-direction:column !important;}
  .cgs-quick-action-alert-title{font-size:20px !important;}
  .cgs-quick-action-alert-text{font-size:18px !important;}
}


/* v59 - snelmelding popup: keuze-knoppen rustiger/grijs, geen gekleurde rand */
.cgs-quick-action-mode,
.cgs-quick-action-mode.is-active[data-mode="send"],
.cgs-quick-action-mode.is-active[data-mode="schedule"]{
  background:linear-gradient(145deg, rgba(71,85,105,.56), rgba(51,65,85,.46)) !important;
  border:1px solid rgba(148,163,184,.32) !important;
  color:#f8fafc !important;
  box-shadow:none !important;
  filter:none !important;
}
.cgs-quick-action-mode:not(.is-active){
  background:linear-gradient(145deg, rgba(71,85,105,.38), rgba(51,65,85,.30)) !important;
  color:rgba(226,232,240,.62) !important;
  border-color:rgba(148,163,184,.18) !important;
  filter:grayscale(1) opacity(.62) !important;
}
.cgs-quick-action-mode.is-active{
  background:linear-gradient(145deg, rgba(100,116,139,.62), rgba(71,85,105,.52)) !important;
  border-color:rgba(203,213,225,.42) !important;
}
.cgs-quick-action-mode:focus,
.cgs-quick-action-mode:focus-visible{
  outline:2px solid rgba(226,232,240,.42) !important;
  outline-offset:3px !important;
  box-shadow:none !important;
}
.cgs-quick-action-mode:hover{
  background:linear-gradient(145deg, rgba(100,116,139,.58), rgba(71,85,105,.48)) !important;
}
.cgs-quick-action-mode:not(.is-active):hover{
  filter:grayscale(1) opacity(.78) !important;
}

/* v60 - snelmelding popup: titel vet, tekst rustiger/kleiner */
.cgs-quick-action-alert-preview .cgs-quick-action-alert-title{
  font-weight:950 !important;
  font-size:22px !important;
  line-height:1.22 !important;
}
.cgs-quick-action-alert-preview .cgs-quick-action-alert-text{
  font-weight:500 !important;
  font-size:18px !important;
  line-height:1.35 !important;
  color:#dbe4ef !important;
}
.cgs-quick-action-alert-preview .cgs-quick-action-alert-text.is-empty{
  font-weight:500 !important;
  font-size:17px !important;
  color:#94a3b8 !important;
}
@media (max-width:700px){
  .cgs-quick-action-alert-preview .cgs-quick-action-alert-title{font-size:20px !important;}
  .cgs-quick-action-alert-preview .cgs-quick-action-alert-text{font-size:16px !important;}
}


/* v61 - commschema actieknoppen onder elkaar */
.cgs-comm-action-stack{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:14px !important;
  width:min(280px,100%) !important;
}
.cgs-comm-action-stack .cgs-cp-btn{
  width:100% !important;
  margin:0 !important;
}

/* v61 - codeoverzicht knoppen netter in grid */
.cgs-code-table th:last-child,
.cgs-code-table td.cgs-actions-cell{
  width:300px !important;
}
.cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(112px, 1fr)) !important;
  gap:10px !important;
  align-items:stretch !important;
  justify-items:stretch !important;
  width:min(280px,100%) !important;
  margin:0 auto !important;
}
.cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-cp-btn{
  width:100% !important;
  min-width:0 !important;
  min-height:54px !important;
  margin:0 !important;
  padding:9px 10px !important;
  border-radius:10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1.08 !important;
  text-align:center !important;
  box-sizing:border-box !important;
}
.cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons .cgs-delete-cp{
  background:#dc3545 !important;
  color:#fff !important;
}
@media (max-width:900px){
  .cgs-code-table th:last-child,
  .cgs-code-table td.cgs-actions-cell{ width:auto !important; }
  .cgs-code-table td.cgs-actions-cell .cgs-cp-action-buttons{
    grid-template-columns:repeat(2, minmax(104px, 1fr)) !important;
    width:100% !important;
  }
}

/* v61 - toast dempen knop */
.cgs-cp-toast-right{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  align-items:stretch !important;
}
.cgs-cp-toast .cgs-cp-toast-mute{
  background:#1e3a5f !important;
  color:#fff !important;
  border:2px solid #f59e0b !important;
  box-shadow:none !important;
  border-radius:12px !important;
  padding:10px 14px !important;
}
.cgs-cp-alarm-list .alarm-row.muted-unaccepted{
  color:#fff !important;
  border-color:#b91c1c !important;
  background:#7f1d1d !important;
  animation:cgs-muted-alarm-soft-blink 1.8s ease-in-out infinite !important;
}
.cgs-cp-alarm-list .alarm-row.muted-unaccepted .alarm-title,
.cgs-cp-alarm-list .alarm-row.muted-unaccepted .alarm-meta,
.cgs-cp-alarm-list .alarm-row.muted-unaccepted .status{
  color:#fff !important;
}
@keyframes cgs-muted-alarm-soft-blink{
  0%,100%{background:#7f1d1d; box-shadow:0 0 0 rgba(239,68,68,0);}
  50%{background:#b91c1c; box-shadow:0 0 18px rgba(239,68,68,.32);}
}

/* v61 - inactiviteit popup */
.cgs-inactivity-modal{
  z-index:1000002 !important;
}
.cgs-inactivity-card{
  max-width:620px !important;
}
.cgs-inactivity-message{
  margin-top:18px;
  padding:18px 20px;
  border-radius:18px;
  background:rgba(15,23,42,.45);
  border:1px solid rgba(148,163,184,.22);
  color:#e5e7eb;
  font-size:20px;
  font-weight:850;
  line-height:1.45;
}
.cgs-inactivity-count-wrap{
  margin-top:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#fff;
  font-size:20px;
  font-weight:900;
}
#cgs-inactivity-count{
  width:68px;
  height:68px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(239,68,68,.18);
  border:2px solid rgba(239,68,68,.75);
  color:#fecaca;
  font-size:34px;
  box-shadow:0 16px 42px rgba(239,68,68,.18);
}


/* === CGS v63: echte alarmtoast-knopgroottes + gedempte alarmbalk pulse === */
/* Binnenkomende alarmtoast: Behandelen duidelijk groter dan Dempen */
.cgs-cp-toast .cgs-cp-toast-right{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    align-items:stretch !important;
    min-width:170px !important;
}
.cgs-cp-toast .cgs-cp-toast-right .js-toast-handle,
.cgs-cp-toast .cgs-cp-toast-right .cgs-alarm-handle{
    min-height:66px !important;
    height:66px !important;
    padding:16px 22px !important;
    font-size:1.12rem !important;
    font-weight:950 !important;
    line-height:1.1 !important;
    border-radius:14px !important;
}
.cgs-cp-toast .cgs-cp-toast-right .js-toast-mute,
.cgs-cp-toast .cgs-cp-toast-right .cgs-alarm-mute{
    min-height:44px !important;
    height:44px !important;
    padding:10px 18px !important;
    font-size:.94rem !important;
    font-weight:850 !important;
    line-height:1.1 !important;
    border-radius:13px !important;
}

/* De echte alarmlijst gebruikt .alarm-row, niet .cgs-alarm-row */
@keyframes cgsAlarmMutedPulseV63{
    0%,100%{
        background:#7f1119 !important;
        border-color:#dc2626 !important;
        box-shadow:0 0 0 rgba(220,38,38,0) !important;
    }
    50%{
        background:#b91c1c !important;
        border-color:#ef4444 !important;
        box-shadow:0 0 20px rgba(239,68,68,.28) !important;
    }
}
.alarm-row.muted-unaccepted,
.alarm-row.is-muted-unaccepted,
.alarm-row.cgs-muted-unaccepted,
.alarm-row[data-muted="1"],
.alarm-row[data-cgs-muted="1"]{
    animation:cgsAlarmMutedPulseV63 2.4s ease-in-out infinite !important;
    color:#fff !important;
    background:#7f1119 !important;
    border:2px solid #dc2626 !important;
}
.alarm-row.muted-unaccepted *,
.alarm-row.is-muted-unaccepted *,
.alarm-row.cgs-muted-unaccepted *,
.alarm-row[data-muted="1"] *,
.alarm-row[data-cgs-muted="1"] *{
    color:#fff !important;
}
.alarm-row.muted-unaccepted .alarm-title,
.alarm-row.is-muted-unaccepted .alarm-title,
.alarm-row.cgs-muted-unaccepted .alarm-title,
.alarm-row[data-muted="1"] .alarm-title,
.alarm-row[data-cgs-muted="1"] .alarm-title,
.alarm-row.muted-unaccepted .status,
.alarm-row.is-muted-unaccepted .status,
.alarm-row.cgs-muted-unaccepted .status,
.alarm-row[data-muted="1"] .status,
.alarm-row[data-cgs-muted="1"] .status,
.alarm-row.muted-unaccepted .time,
.alarm-row.is-muted-unaccepted .time,
.alarm-row.cgs-muted-unaccepted .time,
.alarm-row[data-muted="1"] .time,
.alarm-row[data-cgs-muted="1"] .time{
    color:#fff !important;
    opacity:1 !important;
}
.alarm-row.muted-unaccepted .prio,
.alarm-row.is-muted-unaccepted .prio,
.alarm-row.cgs-muted-unaccepted .prio,
.alarm-row[data-muted="1"] .prio,
.alarm-row[data-cgs-muted="1"] .prio{
    background:#fee2e2 !important;
    color:#7f1d1d !important;
    border-color:rgba(255,255,255,.35) !important;
}
@media (prefers-reduced-motion: reduce){
    .alarm-row.muted-unaccepted,
    .alarm-row.is-muted-unaccepted,
    .alarm-row.cgs-muted-unaccepted,
    .alarm-row[data-muted="1"],
    .alarm-row[data-cgs-muted="1"]{
        animation:none !important;
    }
}


/* === CGS v64: stronger alarm mute visual + toast button hierarchy === */
.cgs-cp-toast .cgs-cp-toast-right{min-width:190px!important;display:flex!important;flex-direction:column!important;gap:10px!important;align-items:stretch!important;}
.cgs-cp-toast .cgs-cp-toast-right .js-toast-handle{min-height:76px!important;height:76px!important;padding:18px 24px!important;font-size:1.18rem!important;font-weight:950!important;border-radius:14px!important;}
.cgs-cp-toast .cgs-cp-toast-right .js-toast-mute{min-height:38px!important;height:38px!important;padding:8px 16px!important;font-size:.88rem!important;font-weight:850!important;border-radius:12px!important;}
@keyframes cgsAlarmMutedPulseV64{0%,100%{background:#7f1119!important;border-color:#dc2626!important;box-shadow:0 0 0 rgba(220,38,38,0)!important;}50%{background:#b91c1c!important;border-color:#ef4444!important;box-shadow:0 0 22px rgba(239,68,68,.30)!important;}}
.cgs-cp-alarm-list .alarm-row.muted-unaccepted,.cgs-cp-alarm-list .alarm-row.is-muted-unaccepted,.cgs-cp-alarm-list .alarm-row.cgs-muted-unaccepted,.cgs-cp-alarm-list .alarm-row[data-muted="1"],.cgs-cp-alarm-list .alarm-row[data-cgs-muted="1"]{animation:cgsAlarmMutedPulseV64 2.4s ease-in-out infinite!important;background:#7f1119!important;border:2px solid #dc2626!important;color:#fff!important;}
.cgs-cp-alarm-list .alarm-row.muted-unaccepted .alarm-title,.cgs-cp-alarm-list .alarm-row.muted-unaccepted .alarm-meta,.cgs-cp-alarm-list .alarm-row.muted-unaccepted .alarm-meta span,.cgs-cp-alarm-list .alarm-row.is-muted-unaccepted .alarm-title,.cgs-cp-alarm-list .alarm-row.is-muted-unaccepted .alarm-meta,.cgs-cp-alarm-list .alarm-row.is-muted-unaccepted .alarm-meta span,.cgs-cp-alarm-list .alarm-row.cgs-muted-unaccepted .alarm-title,.cgs-cp-alarm-list .alarm-row.cgs-muted-unaccepted .alarm-meta,.cgs-cp-alarm-list .alarm-row.cgs-muted-unaccepted .alarm-meta span,.cgs-cp-alarm-list .alarm-row[data-muted="1"] .alarm-title,.cgs-cp-alarm-list .alarm-row[data-muted="1"] .alarm-meta,.cgs-cp-alarm-list .alarm-row[data-muted="1"] .alarm-meta span,.cgs-cp-alarm-list .alarm-row[data-cgs-muted="1"] .alarm-title,.cgs-cp-alarm-list .alarm-row[data-cgs-muted="1"] .alarm-meta,.cgs-cp-alarm-list .alarm-row[data-cgs-muted="1"] .alarm-meta span{color:#fff!important;opacity:1!important;}
.cgs-cp-alarm-list .alarm-row.muted-unaccepted .prio,.cgs-cp-alarm-list .alarm-row.is-muted-unaccepted .prio,.cgs-cp-alarm-list .alarm-row.cgs-muted-unaccepted .prio,.cgs-cp-alarm-list .alarm-row[data-muted="1"] .prio,.cgs-cp-alarm-list .alarm-row[data-cgs-muted="1"] .prio{background:#fee2e2!important;color:#7f1d1d!important;border-color:rgba(255,255,255,.35)!important;}


/* === CGS v66: corrected alarm toast + live muted alarm row === */
.cgs-cp-toast .cgs-cp-toast-right{min-width:185px!important;display:flex!important;flex-direction:column!important;gap:10px!important;align-items:stretch!important;justify-content:center!important;}
.cgs-cp-toast .cgs-cp-toast-right .js-toast-handle,.cgs-cp-toast .cgs-cp-toast-right .cgs-alarm-handle{min-height:56px!important;height:56px!important;max-height:56px!important;padding:10px 22px!important;font-size:1.02rem!important;font-weight:900!important;border-radius:14px!important;line-height:1.1!important;flex:0 0 56px!important;}
.cgs-cp-toast .cgs-cp-toast-right .js-toast-mute,.cgs-cp-toast .cgs-cp-toast-right .cgs-alarm-mute{min-height:42px!important;height:42px!important;max-height:42px!important;padding:8px 18px!important;font-size:.92rem!important;font-weight:850!important;border-radius:12px!important;line-height:1.1!important;flex:0 0 42px!important;}
@keyframes cgsAlarmMutedPulseV66{0%,100%{background:#7f1119!important;border-color:#dc2626!important;box-shadow:0 0 0 rgba(220,38,38,0)!important;}50%{background:#b91c1c!important;border-color:#ef4444!important;box-shadow:0 0 18px rgba(239,68,68,.25)!important;}}
.cgs-cp-alarm-list .alarm-row.muted-unaccepted,.cgs-cp-alarm-list .alarm-row.is-muted-unaccepted,.cgs-cp-alarm-list .alarm-row.cgs-muted-unaccepted,.cgs-cp-alarm-list .alarm-row[data-muted="1"],.cgs-cp-alarm-list .alarm-row[data-cgs-muted="1"]{animation:cgsAlarmMutedPulseV66 2.4s ease-in-out infinite!important;background:#7f1119!important;border:2px solid #dc2626!important;color:#fff!important;}
.cgs-cp-alarm-list .alarm-row.muted-unaccepted *,.cgs-cp-alarm-list .alarm-row.is-muted-unaccepted *,.cgs-cp-alarm-list .alarm-row.cgs-muted-unaccepted *,.cgs-cp-alarm-list .alarm-row[data-muted="1"] *,.cgs-cp-alarm-list .alarm-row[data-cgs-muted="1"] *{color:#fff!important;opacity:1!important;}
.cgs-cp-alarm-list .alarm-row.muted-unaccepted .prio,.cgs-cp-alarm-list .alarm-row.is-muted-unaccepted .prio,.cgs-cp-alarm-list .alarm-row.cgs-muted-unaccepted .prio,.cgs-cp-alarm-list .alarm-row[data-muted="1"] .prio,.cgs-cp-alarm-list .alarm-row[data-cgs-muted="1"] .prio{background:#fee2e2!important;color:#7f1d1d!important;border-color:rgba(255,255,255,.35)!important;}


/* === CGS v67: decisive muted alarm visuals + balanced toast buttons === */
.cgs-cp-toast .cgs-cp-toast-right .js-toast-handle,
.cgs-cp-toast .cgs-cp-toast-right .cgs-alarm-handle{
  width:210px!important;max-width:210px!important;height:58px!important;min-height:58px!important;max-height:58px!important;padding:0 24px!important;font-size:20px!important;font-weight:900!important;border-radius:14px!important;line-height:1.1!important;flex:0 0 58px!important;
}
.cgs-cp-toast .cgs-cp-toast-right .js-toast-mute,
.cgs-cp-toast .cgs-cp-toast-right .cgs-alarm-mute{
  width:210px!important;max-width:210px!important;height:44px!important;min-height:44px!important;max-height:44px!important;padding:0 20px!important;font-size:16px!important;font-weight:850!important;border-radius:12px!important;line-height:1.1!important;flex:0 0 44px!important;
}
@keyframes cgsAlarmMutedPulseV67{0%,100%{background:#7f1119!important;border-color:#dc2626!important;box-shadow:0 0 0 rgba(220,38,38,0)!important;}50%{background:#b91c1c!important;border-color:#ef4444!important;box-shadow:0 0 18px rgba(239,68,68,.25)!important;}}
.cgs-cp-alarm-list .alarm-row.muted-unaccepted,
.cgs-cp-alarm-list .alarm-row.is-muted-unaccepted,
.cgs-cp-alarm-list .alarm-row.cgs-muted-unaccepted,
.cgs-cp-alarm-list .alarm-row[data-muted="1"],
.cgs-cp-alarm-list .alarm-row[data-cgs-muted="1"]{
  animation:cgsAlarmMutedPulseV67 2.4s ease-in-out infinite!important;background:#7f1119!important;border:2px solid #dc2626!important;color:#fff!important;
}
.cgs-cp-alarm-list .alarm-row.muted-unaccepted *,
.cgs-cp-alarm-list .alarm-row.is-muted-unaccepted *,
.cgs-cp-alarm-list .alarm-row.cgs-muted-unaccepted *,
.cgs-cp-alarm-list .alarm-row[data-muted="1"] *,
.cgs-cp-alarm-list .alarm-row[data-cgs-muted="1"] *{color:#fff!important;opacity:1!important;}
.cgs-cp-alarm-list .alarm-row.muted-unaccepted .prio,
.cgs-cp-alarm-list .alarm-row.is-muted-unaccepted .prio,
.cgs-cp-alarm-list .alarm-row.cgs-muted-unaccepted .prio,
.cgs-cp-alarm-list .alarm-row[data-muted="1"] .prio,
.cgs-cp-alarm-list .alarm-row[data-cgs-muted="1"] .prio{background:#fee2e2!important;color:#7f1d1d!important;border-color:rgba(255,255,255,.35)!important;}


/* === CGS v68: restore alarm list style + smaller toast handle button === */

/* Alarmtoast: Behandelen wel belangrijk, maar niet overdreven groot */
.cgs-alarm-toast .js-toast-handle,
.cgs-alarm-popin .js-toast-handle,
.cgs-alarm-popup .js-toast-handle,
.cgs-alarm-toast-actions .js-toast-handle,
.cgs-alarm-toast button.js-toast-handle,
.cgs-alarm-popin button.js-toast-handle {
    min-height: 52px !important;
    height: 52px !important;
    max-height: 56px !important;
    padding: 0 28px !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    border-radius: 14px !important;
}

.cgs-alarm-toast .js-toast-mute,
.cgs-alarm-popin .js-toast-mute,
.cgs-alarm-popup .js-toast-mute,
.cgs-alarm-toast-actions .js-toast-mute,
.cgs-alarm-toast button.js-toast-mute,
.cgs-alarm-popin button.js-toast-mute {
    min-height: 44px !important;
    height: 44px !important;
    max-height: 48px !important;
    padding: 0 24px !important;
    font-size: .95rem !important;
    font-weight: 850 !important;
    border-radius: 12px !important;
}

/* Herstel: geen geforceerde witte tekst/knipper-CSS meer op alarmrijen.
   Laat de bestaande/oudere styling van de alarmlijst leidend zijn. */
.alarm-row.muted-unaccepted,
.alarm-row.cgs-muted-unaccepted,
.alarm-row.is-muted-unaccepted,
.alarm-row[data-cgs-muted="1"],
.alarm-row[data-muted="1"],
.alarm-row[data-muted="true"],
.cgs-alarm-row.muted-unaccepted,
.cgs-alarm-row.cgs-muted-unaccepted,
.cgs-alarm-row.is-muted-unaccepted,
.cgs-alarm-row[data-cgs-muted="1"],
.cgs-alarm-row[data-muted="1"],
.cgs-alarm-row[data-muted="true"],
.cgs-alarm-item.muted-unaccepted,
.cgs-alarm-item.cgs-muted-unaccepted,
.cgs-alarm-item.is-muted-unaccepted,
.cgs-alarm-item[data-cgs-muted="1"],
.cgs-alarm-item[data-muted="1"],
.cgs-alarm-item[data-muted="true"] {
    animation: none !important;
}

/* Zorg dat inline force-styling uit v67 niet blijft plakken wanneer een alarmrij opnieuw live wordt gemarkeerd. */
.alarm-row.muted-unaccepted *,
.alarm-row.cgs-muted-unaccepted *,
.alarm-row.is-muted-unaccepted *,
.alarm-row[data-cgs-muted="1"] *,
.alarm-row[data-muted="1"] *,
.alarm-row[data-muted="true"] *,
.cgs-alarm-row.muted-unaccepted *,
.cgs-alarm-row.cgs-muted-unaccepted *,
.cgs-alarm-row.is-muted-unaccepted *,
.cgs-alarm-row[data-cgs-muted="1"] *,
.cgs-alarm-row[data-muted="1"] *,
.cgs-alarm-row[data-muted="true"] *,
.cgs-alarm-item.muted-unaccepted *,
.cgs-alarm-item.cgs-muted-unaccepted *,
.cgs-alarm-item.is-muted-unaccepted *,
.cgs-alarm-item[data-cgs-muted="1"] *,
.cgs-alarm-item[data-muted="1"] *,
.cgs-alarm-item[data-muted="true"] * {
    color: inherit !important;
}



/* === CGS v69: definitief alarmrijen terug naar oude stijl + normale toastknoppen === */
.cgs-cp-toast .cgs-cp-toast-right{
  min-width: 178px !important;
  gap: 10px !important;
}
.cgs-cp-toast .cgs-cp-toast-right .js-toast-handle,
.cgs-cp-toast .cgs-cp-toast-right .cgs-alarm-handle{
  width: 180px !important;
  max-width: 180px !important;
  min-height: 50px !important;
  height: 50px !important;
  max-height: 50px !important;
  padding: 0 18px !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  border-radius: 13px !important;
  line-height: 1.1 !important;
  flex: 0 0 50px !important;
}
.cgs-cp-toast .cgs-cp-toast-right .js-toast-mute,
.cgs-cp-toast .cgs-cp-toast-right .cgs-alarm-mute{
  width: 180px !important;
  max-width: 180px !important;
  min-height: 40px !important;
  height: 40px !important;
  max-height: 40px !important;
  padding: 0 16px !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  border-radius: 12px !important;
  line-height: 1.1 !important;
  flex: 0 0 40px !important;
}

/* Gedempte maar onbehandelde alarmen krijgen dezelfde rustige roze/rode basis als ongelezen meldingen. */
.cgs-cp-alarm-list .alarm-row.muted-unaccepted,
.cgs-cp-alarm-list .alarm-row.is-muted-unaccepted,
.cgs-cp-alarm-list .alarm-row.cgs-muted-unaccepted,
.cgs-cp-alarm-list .alarm-row[data-muted="1"],
.cgs-cp-alarm-list .alarm-row[data-cgs-muted="1"]{
  animation: none !important;
  border: 2px solid #b30000 !important;
  background: linear-gradient(145deg, #efc7c7, #e7b4b4) !important;
  color: #111 !important;
  box-shadow: none !important;
}
.cgs-cp-alarm-list .alarm-row.muted-unaccepted *,
.cgs-cp-alarm-list .alarm-row.is-muted-unaccepted *,
.cgs-cp-alarm-list .alarm-row.cgs-muted-unaccepted *,
.cgs-cp-alarm-list .alarm-row[data-muted="1"] *,
.cgs-cp-alarm-list .alarm-row[data-cgs-muted="1"] *{
  color: #111 !important;
  opacity: 1 !important;
}
.cgs-cp-alarm-list .alarm-row.muted-unaccepted .alarm-title,
.cgs-cp-alarm-list .alarm-row.is-muted-unaccepted .alarm-title,
.cgs-cp-alarm-list .alarm-row.cgs-muted-unaccepted .alarm-title,
.cgs-cp-alarm-list .alarm-row[data-muted="1"] .alarm-title,
.cgs-cp-alarm-list .alarm-row[data-cgs-muted="1"] .alarm-title{
  color: #111 !important;
}
.cgs-cp-alarm-list .alarm-row.muted-unaccepted .prio,
.cgs-cp-alarm-list .alarm-row.is-muted-unaccepted .prio,
.cgs-cp-alarm-list .alarm-row.cgs-muted-unaccepted .prio,
.cgs-cp-alarm-list .alarm-row[data-muted="1"] .prio,
.cgs-cp-alarm-list .alarm-row[data-cgs-muted="1"] .prio{
  color: #b30000 !important;
  background: #fff !important;
}

/* =========================================================
   V70 - gerichte correcties popup team toevoegen + alarmtoast
   ========================================================= */

/* Nieuw team / team wijzigen: popup weer normaal compact en invoertekst leesbaar */
.cgs-team-form-modal .cgs-glass-modal-card{
  width: min(820px, 94vw) !important;
  padding: 24px 26px !important;
  border-radius: 22px !important;
}

.cgs-team-form-modal .cgs-team-form-grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px 18px !important;
  align-items: start !important;
}

.cgs-team-form-modal .cgs-cp-field label{
  margin-bottom: 6px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

.cgs-team-form-modal .cgs-cp-field input{
  min-height: 42px !important;
  height: 42px !important;
  padding: 8px 12px !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  border-radius: 11px !important;
}

.cgs-team-form-modal .cgs-glass-modal-head{
  margin-bottom: 16px !important;
}

.cgs-team-form-modal .cgs-glass-modal-title{
  font-size: 23px !important;
}

@media (max-width: 700px){
  .cgs-team-form-modal .cgs-glass-modal-card{
    width: calc(100vw - 24px) !important;
    padding: 20px 18px !important;
  }
  .cgs-team-form-modal .cgs-team-form-grid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .cgs-team-form-modal .cgs-cp-field input{
    min-height: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
  }
}

/* Binnenkomende alarmtoast: Behandelen iets kleiner, Dempen blijft compact.
   Dempen behoudt de bestaande v69-functie: toast weg, geluid stopt en alarmrij knippert in het alarmoverzicht. */
.cgs-cp-toast .cgs-cp-toast-right{
  min-width: 150px !important;
  gap: 8px !important;
}

.cgs-cp-toast .cgs-cp-toast-right .js-toast-handle,
.cgs-cp-toast .cgs-cp-toast-right .cgs-alarm-handle{
  min-height: 52px !important;
  height: 52px !important;
  padding: 11px 18px !important;
  font-size: 1.02rem !important;
  border-radius: 13px !important;
  line-height: 1.05 !important;
}

.cgs-cp-toast .cgs-cp-toast-right .js-toast-mute,
.cgs-cp-toast .cgs-cp-toast-right .cgs-alarm-mute{
  min-height: 40px !important;
  height: 40px !important;
  padding: 8px 16px !important;
  font-size: .9rem !important;
  border-radius: 12px !important;
}

/* v71 - Gedempt alarm direct pulserend in alarmoverzicht, zonder handmatige refresh */
.cgs-cp-alarm-list .alarm-row.muted-unaccepted,
.cgs-cp-alarm-list .alarm-row.is-muted-unaccepted,
.cgs-cp-alarm-list .alarm-row.cgs-muted-unaccepted,
.cgs-cp-alarm-list .alarm-row[data-muted="1"],
.cgs-cp-alarm-list .alarm-row[data-cgs-muted="1"]{
  animation:cgsAlarmMutedPulseV71 1.6s ease-in-out infinite !important;
  background:#7f1119 !important;
  border:2px solid #ef4444 !important;
  color:#fff !important;
  box-shadow:0 0 0 rgba(239,68,68,0) !important;
}
.cgs-cp-alarm-list .alarm-row.muted-unaccepted *,
.cgs-cp-alarm-list .alarm-row.is-muted-unaccepted *,
.cgs-cp-alarm-list .alarm-row.cgs-muted-unaccepted *,
.cgs-cp-alarm-list .alarm-row[data-muted="1"] *,
.cgs-cp-alarm-list .alarm-row[data-cgs-muted="1"] *{
  color:#fff !important;
  opacity:1 !important;
}
.cgs-cp-alarm-list .alarm-row.muted-unaccepted .prio,
.cgs-cp-alarm-list .alarm-row.is-muted-unaccepted .prio,
.cgs-cp-alarm-list .alarm-row.cgs-muted-unaccepted .prio,
.cgs-cp-alarm-list .alarm-row[data-muted="1"] .prio,
.cgs-cp-alarm-list .alarm-row[data-cgs-muted="1"] .prio{
  background:#fee2e2 !important;
  color:#7f1d1d !important;
  border-color:rgba(255,255,255,.45) !important;
}
@keyframes cgsAlarmMutedPulseV71{
  0%,100%{background:#7f1119 !important;border-color:#dc2626 !important;box-shadow:0 0 0 rgba(239,68,68,0) !important;}
  50%{background:#b91c1c !important;border-color:#f87171 !important;box-shadow:0 0 26px rgba(239,68,68,.38) !important;}
}

/* =========================================================
   V72 - directe demp-refresh + compactere communicatieschema-popup
   ========================================================= */

/* Alarmrij die via Dempen is geparkeerd: zichtbaar knipperen/pulseren, ook na directe redraw. */
.cgs-cp-alarm-list .alarm-row.muted-unaccepted,
.cgs-cp-alarm-list .alarm-row.is-muted-unaccepted,
.cgs-cp-alarm-list .alarm-row.cgs-muted-unaccepted,
.cgs-cp-alarm-list .alarm-row[data-muted="1"],
.cgs-cp-alarm-list .alarm-row[data-cgs-muted="1"]{
  animation: cgsAlarmMutedPulseV72 1.15s ease-in-out infinite !important;
  background: #7f1119 !important;
  border: 3px solid #ff3b3b !important;
  color: #fff !important;
  box-shadow: 0 0 0 rgba(239,68,68,0) !important;
}
@keyframes cgsAlarmMutedPulseV72{
  0%,100%{
    background:#7f1119 !important;
    border-color:#dc2626 !important;
    box-shadow:0 0 0 rgba(239,68,68,0) !important;
    transform:translateZ(0) scale(1);
  }
  50%{
    background:#d30f1d !important;
    border-color:#ff8585 !important;
    box-shadow:0 0 30px rgba(239,68,68,.48) !important;
    transform:translateZ(0) scale(1.004);
  }
}

/* Communicatieschema - Nieuw team/team wijzigen: kaart en velden smaller. */
.cgs-team-form-modal.cgs-glass-modal{
  padding: 18px !important;
}
.cgs-team-form-modal .cgs-glass-modal-card{
  width: min(720px, 92vw) !important;
  max-width: 720px !important;
  padding: 22px 24px !important;
  border-radius: 22px !important;
}
.cgs-team-form-modal .cgs-team-form-grid{
  grid-template-columns: repeat(2, minmax(0, 300px)) !important;
  justify-content: start !important;
  gap: 14px 16px !important;
}
.cgs-team-form-modal .cgs-cp-field{
  max-width: 300px !important;
}
.cgs-team-form-modal .cgs-cp-field input{
  width: 100% !important;
  max-width: 300px !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 8px 11px !important;
  font-size: 17px !important;
  line-height: 1.25 !important;
}
.cgs-team-form-modal #tf-locatie{
  max-width: 300px !important;
}
.cgs-team-form-modal .cgs-glass-modal-actions.cgs-glass-modal-actions-outline{
  max-width: 600px !important;
  grid-template-columns: repeat(2, minmax(180px, 1fr)) !important;
  gap: 16px !important;
  margin-top: 26px !important;
}
@media (max-width: 760px){
  .cgs-team-form-modal .cgs-glass-modal-card{
    width: calc(100vw - 24px) !important;
    max-width: none !important;
    padding: 20px 18px !important;
  }
  .cgs-team-form-modal .cgs-team-form-grid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .cgs-team-form-modal .cgs-cp-field,
  .cgs-team-form-modal .cgs-cp-field input,
  .cgs-team-form-modal #tf-locatie{
    max-width: none !important;
  }
}


/* =========================================================
   V73 - harde fix: gedempte/ongelezen alarmen pulseren altijd
   + Nieuw team popup velden raken elkaar niet meer
   ========================================================= */

/* Alarmoverzicht: elke onbehandelde/ongelezen rij die rood is, moet zichtbaar pulseren.
   Dit vangt ook het geval af waarin de browser/CP opnieuw is ververst en alleen de status
   'unread/ongelezen' nog uit de server komt. */
.cgs-cp-alarm-list button.alarm-row.unread,
.cgs-cp-alarm-list button.alarm-row.muted-unaccepted,
.cgs-cp-alarm-list button.alarm-row.is-muted-unaccepted,
.cgs-cp-alarm-list button.alarm-row.cgs-muted-unaccepted,
.cgs-cp-alarm-list button.alarm-row[data-muted="1"],
.cgs-cp-alarm-list button.alarm-row[data-cgs-muted="1"]{
  animation: cgsAlarmUnreadPulseV73 1.05s ease-in-out infinite !important;
  background: #7f1119 !important;
  border: 3px solid #ff3b3b !important;
  color: #ffffff !important;
  transform-origin: center center !important;
  will-change: background, box-shadow, transform !important;
}
.cgs-cp-alarm-list button.alarm-row.unread *,
.cgs-cp-alarm-list button.alarm-row.muted-unaccepted *,
.cgs-cp-alarm-list button.alarm-row.is-muted-unaccepted *,
.cgs-cp-alarm-list button.alarm-row.cgs-muted-unaccepted *,
.cgs-cp-alarm-list button.alarm-row[data-muted="1"] *,
.cgs-cp-alarm-list button.alarm-row[data-cgs-muted="1"] *{
  color:#ffffff !important;
  opacity:1 !important;
}
.cgs-cp-alarm-list button.alarm-row.unread .prio,
.cgs-cp-alarm-list button.alarm-row.muted-unaccepted .prio,
.cgs-cp-alarm-list button.alarm-row.is-muted-unaccepted .prio,
.cgs-cp-alarm-list button.alarm-row.cgs-muted-unaccepted .prio,
.cgs-cp-alarm-list button.alarm-row[data-muted="1"] .prio,
.cgs-cp-alarm-list button.alarm-row[data-cgs-muted="1"] .prio{
  background:#fee2e2 !important;
  color:#7f1d1d !important;
  border-color:rgba(255,255,255,.45) !important;
}
@keyframes cgsAlarmUnreadPulseV73{
  0%,100%{
    background:#7f1119 !important;
    border-color:#dc2626 !important;
    box-shadow:0 0 0 rgba(239,68,68,0) !important;
    transform:scale(1) translateZ(0);
  }
  50%{
    background:#d30f1d !important;
    border-color:#ffb4b4 !important;
    box-shadow:0 0 32px rgba(239,68,68,.58), 0 0 0 3px rgba(239,68,68,.18) !important;
    transform:scale(1.006) translateZ(0);
  }
}

/* Nieuw team / Team wijzigen: hoogste specificiteit op het echte modal-ID.
   De velden krijgen vaste kolommen met echte tussenruimte en border-box, zodat ze niet meer in elkaar lopen. */
#cgs-cp-team-form-modal.cgs-team-form-modal .cgs-glass-modal-card{
  width: min(760px, 92vw) !important;
  max-width: 760px !important;
  padding: 24px 30px 28px !important;
  overflow-x: hidden !important;
}
#cgs-cp-team-form-modal.cgs-team-form-modal .cgs-team-form-grid{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: 28px !important;
  row-gap: 18px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#cgs-cp-team-form-modal.cgs-team-form-modal .cgs-cp-field{
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
#cgs-cp-team-form-modal.cgs-team-form-modal .cgs-cp-field label{
  display:block !important;
  margin:0 0 8px 0 !important;
  font-size:15px !important;
  line-height:1.15 !important;
}
#cgs-cp-team-form-modal.cgs-team-form-modal .cgs-cp-field input,
#cgs-cp-team-form-modal.cgs-team-form-modal #tf-locatie{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:42px !important;
  min-height:42px !important;
  padding:8px 12px !important;
  font-size:18px !important;
  line-height:1.25 !important;
  box-sizing:border-box !important;
  border-radius:12px !important;
}
#cgs-cp-team-form-modal.cgs-team-form-modal .cgs-glass-modal-actions.cgs-glass-modal-actions-outline{
  width:100% !important;
  max-width:620px !important;
  margin:28px auto 0 !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:24px !important;
}
#cgs-cp-team-form-modal.cgs-team-form-modal .cgs-glass-modal-actions .cgs-cp-btn{
  min-height:46px !important;
  height:46px !important;
  padding:10px 18px !important;
  font-size:17px !important;
  box-sizing:border-box !important;
}
@media (max-width: 760px){
  #cgs-cp-team-form-modal.cgs-team-form-modal .cgs-glass-modal-card{
    width:calc(100vw - 24px) !important;
    max-width:none !important;
    padding:20px 18px 24px !important;
  }
  #cgs-cp-team-form-modal.cgs-team-form-modal .cgs-team-form-grid{
    grid-template-columns:1fr !important;
    column-gap:0 !important;
    row-gap:14px !important;
  }
  #cgs-cp-team-form-modal.cgs-team-form-modal .cgs-glass-modal-actions.cgs-glass-modal-actions-outline{
    grid-template-columns:1fr !important;
    gap:12px !important;
    max-width:none !important;
  }
}


/* =========================================================
   v74 - Herstel v50 alarm-pulse + compacte team-popup
========================================================= */
@keyframes cgsCpAlarmRowPulseV50 {
  0%   { box-shadow: 0 0 0 0 rgba(255,0,0,.35); }
  70%  { box-shadow: 0 0 0 14px rgba(255,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,0,0,0); }
}
.cgs-cp-alarm-list button.alarm-row.unread,
.cgs-cp-alarm-list button.alarm-row:not(.in-progress):not(.done),
.cgs-cp-alarm-list button.alarm-row.muted-unaccepted,
.cgs-cp-alarm-list button.alarm-row.is-muted-unaccepted,
.cgs-cp-alarm-list button.alarm-row.cgs-muted-unaccepted,
.cgs-cp-alarm-list button.alarm-row[data-muted="1"],
.cgs-cp-alarm-list button.alarm-row[data-cgs-muted="1"]{
  border:2px solid #b30000 !important;
  background:linear-gradient(145deg, #efc7c7, #e7b4b4) !important;
  color:#111 !important;
  animation:cgsCpAlarmRowPulseV50 1.2s ease-in-out infinite !important;
  transform:none !important;
}
.cgs-cp-alarm-list button.alarm-row.unread *,
.cgs-cp-alarm-list button.alarm-row:not(.in-progress):not(.done) *,
.cgs-cp-alarm-list button.alarm-row.muted-unaccepted *,
.cgs-cp-alarm-list button.alarm-row.is-muted-unaccepted *,
.cgs-cp-alarm-list button.alarm-row.cgs-muted-unaccepted *,
.cgs-cp-alarm-list button.alarm-row[data-muted="1"] *,
.cgs-cp-alarm-list button.alarm-row[data-cgs-muted="1"] *{
  color:#111 !important;
  opacity:1 !important;
}
.cgs-cp-alarm-list button.alarm-row.unread .alarm-title,
.cgs-cp-alarm-list button.alarm-row:not(.in-progress):not(.done) .alarm-title{
  color:#b30000 !important;
  font-size:16px !important;
  font-weight:900 !important;
}
.cgs-cp-alarm-list button.alarm-row.unread .prio,
.cgs-cp-alarm-list button.alarm-row:not(.in-progress):not(.done) .prio{
  background:#ffecec !important;
  color:#b30000 !important;
}
#cgs-cp-team-form-modal.cgs-team-form-modal .cgs-glass-modal-card{
  width:min(740px, 92vw) !important;
  max-width:740px !important;
  padding:24px 30px 28px !important;
}
#cgs-cp-team-form-modal.cgs-team-form-modal .cgs-team-form-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 300px)) !important;
  justify-content:start !important;
  column-gap:42px !important;
  row-gap:20px !important;
  width:auto !important;
  max-width:642px !important;
}
#cgs-cp-team-form-modal.cgs-team-form-modal .cgs-cp-field{
  width:300px !important;
  max-width:300px !important;
  min-width:0 !important;
}
#cgs-cp-team-form-modal.cgs-team-form-modal .cgs-cp-field input,
#cgs-cp-team-form-modal.cgs-team-form-modal #tf-locatie{
  width:300px !important;
  max-width:300px !important;
  height:44px !important;
  min-height:44px !important;
  font-size:18px !important;
  box-sizing:border-box !important;
}
@media (max-width:760px){
  #cgs-cp-team-form-modal.cgs-team-form-modal .cgs-team-form-grid{
    grid-template-columns:1fr !important;
    max-width:100% !important;
    column-gap:0 !important;
  }
  #cgs-cp-team-form-modal.cgs-team-form-modal .cgs-cp-field,
  #cgs-cp-team-form-modal.cgs-team-form-modal .cgs-cp-field input,
  #cgs-cp-team-form-modal.cgs-team-form-modal #tf-locatie{
    width:100% !important;
    max-width:100% !important;
  }
}

/* =========================================================
   v75 - alarmtitels zwart/vet + kleinere Behandelen-knop
========================================================= */
.cgs-cp-alarm-list button.alarm-row.unread .alarm-title,
.cgs-cp-alarm-list button.alarm-row:not(.in-progress):not(.done) .alarm-title,
.cgs-cp-alarm-list button.alarm-row.muted-unaccepted .alarm-title,
.cgs-cp-alarm-list button.alarm-row.is-muted-unaccepted .alarm-title,
.cgs-cp-alarm-list button.alarm-row.cgs-muted-unaccepted .alarm-title,
.cgs-cp-alarm-list button.alarm-row[data-muted="1"] .alarm-title,
.cgs-cp-alarm-list button.alarm-row[data-cgs-muted="1"] .alarm-title{
  color:#050505 !important;
  font-weight:950 !important;
}
.cgs-cp-toast .cgs-cp-toast-right .js-toast-handle,
.cgs-cp-toast .cgs-cp-toast-right .cgs-alarm-handle,
.cgs-alarm-toast .js-toast-handle,
.cgs-alarm-popin .js-toast-handle,
.cgs-alarm-popup .js-toast-handle,
.cgs-alarm-toast-actions .js-toast-handle,
.cgs-alarm-toast button.js-toast-handle,
.cgs-alarm-popin button.js-toast-handle{
  min-height:34px !important;
  height:34px !important;
  max-height:34px !important;
  width:118px !important;
  min-width:118px !important;
  max-width:118px !important;
  padding:5px 12px !important;
  font-size:.76rem !important;
  font-weight:900 !important;
  line-height:1 !important;
  border-radius:10px !important;
  flex:0 0 34px !important;
  align-self:center !important;
}

/* =========================================================
   v76 - Behandelen-knop: net iets groter dan Dempen
   Dempen blijft ongemoeid.
========================================================= */
.cgs-cp-toast .cgs-cp-toast-right .js-toast-handle,
.cgs-cp-toast .cgs-cp-toast-right .cgs-alarm-handle,
.cgs-alarm-toast .js-toast-handle,
.cgs-alarm-popin .js-toast-handle,
.cgs-alarm-popup .js-toast-handle,
.cgs-alarm-toast-actions .js-toast-handle,
.cgs-alarm-toast button.js-toast-handle,
.cgs-alarm-popin button.js-toast-handle{
  min-height:54px !important;
  height:54px !important;
  max-height:54px !important;
  width:calc(100% + 12px) !important;
  min-width:calc(100% + 12px) !important;
  max-width:calc(100% + 12px) !important;
  padding:0 24px !important;
  font-size:1rem !important;
  font-weight:950 !important;
  line-height:1.05 !important;
  border-radius:14px !important;
  flex:0 0 54px !important;
  align-self:center !important;
}


/* =========================================================
   v77 - Behandelen-knop binnen popup houden
   Dempen behoudt bestaande formaat.
========================================================= */
.cgs-cp-toast{
  box-sizing:border-box !important;
  overflow:hidden !important;
}
.cgs-cp-toast .cgs-cp-toast-right{
  box-sizing:border-box !important;
  overflow:visible !important;
  align-items:center !important;
}
.cgs-cp-toast .cgs-cp-toast-right .js-toast-handle,
.cgs-cp-toast .cgs-cp-toast-right .cgs-alarm-handle,
.cgs-alarm-toast .js-toast-handle,
.cgs-alarm-popin .js-toast-handle,
.cgs-alarm-popup .js-toast-handle,
.cgs-alarm-toast-actions .js-toast-handle,
.cgs-alarm-toast button.js-toast-handle,
.cgs-alarm-popin button.js-toast-handle{
  min-height:52px !important;
  height:52px !important;
  max-height:52px !important;
  width:calc(100% - 10px) !important;
  min-width:0 !important;
  max-width:100% !important;
  padding:0 22px !important;
  font-size:1rem !important;
  font-weight:950 !important;
  line-height:1.05 !important;
  border-radius:14px !important;
  flex:0 0 52px !important;
  align-self:center !important;
  box-sizing:border-box !important;
}


/* =========================================================
   v93 - Lesronde tijdmeldingen (los van lesregisseur-knop)
========================================================= */
.cgs-lesson-time-overlay-v93{
  position:fixed !important;
  inset:0 !important;
  z-index:999999 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:18px !important;
  background:rgba(6,18,32,.34) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
}
.cgs-lesson-time-card-v93{
  width:min(440px, calc(100vw - 32px)) !important;
  border:1px solid rgba(255,255,255,.34) !important;
  border-radius:24px !important;
  padding:24px 22px 20px !important;
  background:linear-gradient(145deg, rgba(255,255,255,.90), rgba(232,242,255,.76)) !important;
  box-shadow:0 24px 60px rgba(15,32,56,.28), inset 0 1px 0 rgba(255,255,255,.72) !important;
  color:#111827 !important;
  text-align:center !important;
  box-sizing:border-box !important;
}
.cgs-lesson-time-kicker-v93{
  font-size:.78rem !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  color:#d97706 !important;
  margin-bottom:8px !important;
}
.cgs-lesson-time-title-v93{
  font-size:1.5rem !important;
  line-height:1.15 !important;
  font-weight:950 !important;
  color:#0f172a !important;
  margin-bottom:10px !important;
}
.cgs-lesson-time-text-v93{
  font-size:1rem !important;
  line-height:1.45 !important;
  font-weight:650 !important;
  color:#334155 !important;
  margin-bottom:16px !important;
}
.cgs-lesson-time-count-v93{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:150px !important;
  padding:10px 18px !important;
  margin:0 auto 18px !important;
  border-radius:18px !important;
  background:rgba(15,23,42,.92) !important;
  color:#fff !important;
  font-size:2rem !important;
  line-height:1 !important;
  font-weight:950 !important;
  font-variant-numeric:tabular-nums !important;
  box-shadow:0 14px 30px rgba(15,23,42,.24) !important;
}
.cgs-lesson-time-ok-v93{
  min-height:42px !important;
  padding:0 26px !important;
  border-radius:14px !important;
  font-weight:900 !important;
}
@media (max-width:600px){
  .cgs-lesson-time-card-v93{ padding:22px 18px 18px !important; border-radius:22px !important; }
  .cgs-lesson-time-title-v93{ font-size:1.28rem !important; }
  .cgs-lesson-time-count-v93{ font-size:1.7rem !important; min-width:130px !important; }
}

/* v94 - Lesregisseur verzendtimers in docentdashboard */
.cgs-lesson-timers{
  margin:14px 0;
  padding:14px;
  border:1px solid rgba(15,23,42,.14);
  border-radius:18px;
  background:rgba(255,255,255,.78);
  box-shadow:0 10px 26px rgba(15,23,42,.08);
}
.cgs-lesson-timers-title{
  font-weight:900;
  color:#111827;
  margin-bottom:10px;
  letter-spacing:-.01em;
}
.cgs-lesson-timers-list{
  display:grid;
  gap:9px;
}
.cgs-lesson-timer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 12px;
  border:1px solid rgba(107,114,128,.28);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(249,250,251,.96), rgba(243,244,246,.92));
}
.cgs-lesson-timer-main{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.cgs-lesson-timer-main strong{
  color:#111827;
  font-weight:900;
  font-size:13px;
}
.cgs-lesson-timer-main span,
.cgs-lesson-timer-main small{
  color:#374151;
  font-size:12px;
  line-height:1.25;
}
.cgs-lesson-timer-clock{
  flex:0 0 auto;
  min-width:58px;
  padding:7px 9px;
  border-radius:999px;
  background:#111827;
  color:#fff;
  font-weight:900;
  text-align:center;
  font-variant-numeric:tabular-nums;
  box-shadow:0 6px 15px rgba(17,24,39,.18);
}
.cgs-lesson-timer-row.is-ready .cgs-lesson-timer-clock{
  background:#166534;
}
@media (max-width: 760px){
  .cgs-lesson-timer-row{align-items:flex-start;}
  .cgs-lesson-timer-clock{min-width:52px;}
}

/* v103 - afbeeldingen bij alarmmeldingen */
.cgs-alarm-image-field input[type="file"],
.cgs-lesson-manual-image-field input[type="file"],
#manual-alarm-image{
  width:100%;
  box-sizing:border-box;
  min-height:46px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.18);
  background:#f8fafc;
}
.cgs-quick-image-tools{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:8px;
}
.cgs-quick-image-upload,
.cgs-quick-image-remove{
  border:1px solid rgba(148,163,184,.45);
  background:#111827;
  color:#fff;
  border-radius:12px;
  padding:9px 12px;
  font-weight:850;
  cursor:pointer;
}
.cgs-quick-image-remove{
  background:#fff;
  color:#991b1b;
  border-color:#fecaca;
}
.cgs-quick-image-status{
  font-size:12px;
  font-weight:800;
  color:#64748b;
}
.cgs-alarm-image-pill{
  display:inline-flex;
  margin-left:8px;
  padding:2px 8px;
  border-radius:999px;
  background:#dbeafe;
  color:#1e3a8a;
  font-size:12px;
  font-weight:950;
  vertical-align:middle;
}
.cgs-alarm-image-block{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.cgs-alarm-image-block img{
  width:100%;
  max-height:360px;
  object-fit:contain;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  cursor:zoom-in;
}
.cgs-alarm-image-download,
.cgs-alarm-image-viewer-download{
  display:inline-flex;
  align-self:flex-start;
  text-decoration:none;
  border-radius:999px;
  padding:9px 13px;
  background:#0f172a;
  color:#fff !important;
  font-weight:900;
  border:1px solid rgba(255,255,255,.18);
}
.cgs-alarm-image-viewer{
  position:fixed;
  inset:0;
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.cgs-alarm-image-viewer-backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.74);
  backdrop-filter:blur(8px);
}
.cgs-alarm-image-viewer-card{
  position:relative;
  z-index:1;
  max-width:min(1100px,94vw);
  max-height:92vh;
  border-radius:24px;
  background:rgba(15,23,42,.92);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 28px 90px rgba(0,0,0,.45);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.cgs-alarm-image-viewer-card img{
  max-width:100%;
  max-height:74vh;
  object-fit:contain;
  border-radius:16px;
  background:#fff;
}
.cgs-alarm-image-viewer-close{
  position:absolute;
  top:10px;
  right:10px;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(15,23,42,.9);
  color:#fff;
  font-size:28px;
  font-weight:900;
  cursor:pointer;
}

/* v104 - mooiere afbeeldingbeheer UI in snelmeldingen */
#cgs-quick-manager-modal .cgs-quick-image-tools{
  grid-column:1 / -1;
  width:100%;
  display:grid !important;
  grid-template-columns:86px minmax(0, 1fr);
  align-items:center;
  gap:14px;
  margin-top:12px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.20);
  background:rgba(15,23,42,.30);
}
#cgs-quick-manager-modal .cgs-quick-image-preview{
  width:86px;
  height:64px;
  border-radius:16px;
  border:1px solid rgba(245,158,11,.55);
  background:rgba(2,6,23,.45);
  padding:0;
  overflow:hidden;
  cursor:zoom-in;
  box-shadow:0 14px 28px rgba(0,0,0,.20);
}
#cgs-quick-manager-modal .cgs-quick-image-preview[hidden]{
  display:none !important;
}
#cgs-quick-manager-modal .cgs-quick-image-preview img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
#cgs-quick-manager-modal .cgs-quick-image-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  min-width:0;
}
#cgs-quick-manager-modal .cgs-quick-image-upload,
#cgs-quick-manager-modal .cgs-quick-image-remove{
  min-height:40px;
  border-radius:999px;
  padding:9px 16px;
  font-size:13px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:.02em;
  border:1px solid rgba(245,158,11,.70);
  background:linear-gradient(135deg, rgba(245,158,11,.18), rgba(245,158,11,.08));
  color:#f8fafc;
  box-shadow:0 10px 22px rgba(0,0,0,.16);
}
#cgs-quick-manager-modal .cgs-quick-image-remove{
  border-color:rgba(248,113,113,.70);
  background:linear-gradient(135deg, rgba(239,68,68,.18), rgba(127,29,29,.10));
  color:#fecaca;
}
#cgs-quick-manager-modal .cgs-quick-image-remove[hidden]{
  display:none !important;
}
#cgs-quick-manager-modal .cgs-quick-image-status{
  flex-basis:100%;
  color:#cbd5e1;
  font-size:12px;
  font-weight:850;
  opacity:.95;
}
#cgs-quick-manager-modal .cgs-quick-image-tools:not(.has-image){
  grid-template-columns:minmax(0, 1fr);
}
#cgs-quick-manager-modal .cgs-quick-image-tools.is-uploading-image{
  outline:2px solid rgba(245,158,11,.35);
}
.cgs-quick-image-viewer{
  position:fixed;
  inset:0;
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(2,6,23,.72);
  backdrop-filter:blur(12px);
}
.cgs-quick-image-viewer-card{
  position:relative;
  max-width:min(92vw, 1100px);
  max-height:88vh;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(15,23,42,.82);
  box-shadow:0 28px 80px rgba(0,0,0,.45);
  padding:18px;
}
.cgs-quick-image-viewer-card img{
  display:block;
  max-width:calc(92vw - 36px);
  max-height:calc(88vh - 36px);
  object-fit:contain;
  border-radius:18px;
}
.cgs-quick-image-viewer-close{
  position:absolute;
  top:-18px;
  right:-18px;
  width:46px;
  height:46px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(15,23,42,.95);
  color:#fff;
  font-size:28px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  box-shadow:0 18px 36px rgba(0,0,0,.35);
}
@media (max-width:700px){
  #cgs-quick-manager-modal .cgs-quick-image-tools{
    grid-template-columns:74px minmax(0, 1fr);
    gap:10px;
  }
  #cgs-quick-manager-modal .cgs-quick-image-preview{
    width:74px;
    height:58px;
  }
  #cgs-quick-manager-modal .cgs-quick-image-upload,
  #cgs-quick-manager-modal .cgs-quick-image-remove{
    width:100%;
  }
}


/* v111 - mobiel docent-alarm: aparte knoppen voor foto kiezen en direct foto maken */
.cgs-alarm-image-choice-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin:6px 0 10px;
}
.cgs-alarm-image-choice-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.42);
  background:linear-gradient(135deg, rgba(15,23,42,.92), rgba(30,58,138,.86));
  color:#fff;
  font-weight:900;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(15,23,42,.16);
  user-select:none;
}
.cgs-alarm-image-choice-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(15,23,42,.22);
}
.cgs-alarm-image-camera-btn{
  border-color:rgba(245,158,11,.72);
  box-shadow:0 10px 24px rgba(245,158,11,.13);
}
.cgs-alarm-image-input{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
@media (max-width:640px){
  .cgs-alarm-image-choice-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }
  .cgs-alarm-image-choice-btn{
    width:100%;
    min-height:44px;
    font-size:13.5px;
    padding:0 10px;
  }
}

/* v112 - docent alarm afbeelding: nette knoppen + camera alleen op mobiel/tablet */
.cgs-alarm-image-field .cgs-alarm-image-choice-row{
  display:flex !important;
  gap:14px !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  margin:10px 0 12px !important;
}
.cgs-alarm-image-field .cgs-alarm-image-choice-btn{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  min-width:170px !important;
  min-height:50px !important;
  padding:0 22px !important;
  border-radius:18px !important;
  border:1.8px solid rgba(59,130,246,.55) !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.18), transparent 30%),
    linear-gradient(135deg,#17243a 0%,#1e3a63 55%,#243f6f 100%) !important;
  color:#ffffff !important;
  font-weight:900 !important;
  font-size:15px !important;
  letter-spacing:.01em !important;
  line-height:1 !important;
  text-shadow:0 1px 1px rgba(0,0,0,.35) !important;
  cursor:pointer !important;
  box-shadow:0 12px 24px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.14) !important;
  user-select:none !important;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, filter .15s ease !important;
}
.cgs-alarm-image-field .cgs-alarm-image-choice-btn::before{
  content:"🖼️";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  font-size:14px;
  line-height:1;
}
.cgs-alarm-image-field .cgs-alarm-image-camera-btn::before{
  content:"📷";
}
.cgs-alarm-image-field .cgs-alarm-image-choice-btn:hover,
.cgs-alarm-image-field .cgs-alarm-image-choice-btn:focus-visible{
  transform:translateY(-1px) !important;
  filter:brightness(1.06) !important;
  box-shadow:0 16px 34px rgba(15,23,42,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
  outline:none !important;
}
.cgs-alarm-image-field .cgs-alarm-image-camera-btn{
  display:none !important;
  border-color:rgba(245,158,11,.82) !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.18), transparent 30%),
    linear-gradient(135deg,#18243a 0%,#213c66 50%,#2a4673 100%) !important;
  box-shadow:0 12px 24px rgba(245,158,11,.16), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
body.cgs-mobile-or-tablet .cgs-alarm-image-field .cgs-alarm-image-camera-btn{
  display:inline-flex !important;
}
.cgs-alarm-image-field #alarm-image-status{
  margin-top:8px !important;
  font-size:14px !important;
  color:#64748b !important;
}
@media (max-width:720px){
  .cgs-alarm-image-field .cgs-alarm-image-choice-row{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    width:100% !important;
  }
  .cgs-alarm-image-field .cgs-alarm-image-choice-btn{
    width:100% !important;
    min-width:0 !important;
    min-height:48px !important;
    padding:0 12px !important;
    border-radius:16px !important;
    font-size:14px !important;
  }
  body:not(.cgs-mobile-or-tablet) .cgs-alarm-image-field .cgs-alarm-image-choice-row{
    display:flex !important;
  }
}
@media (max-width:430px){
  .cgs-alarm-image-field .cgs-alarm-image-choice-row{
    grid-template-columns:1fr !important;
  }
}

/* v125 chat metadata / live receipt */
.cgs-chat-meta{display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:max-content;}
.cgs-chat-receipt{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;background:rgba(16,185,129,.18);border:1px solid rgba(16,185,129,.55);color:#86efac;font-size:11px;font-weight:900;line-height:1.35;white-space:nowrap;}
.cgs-team-chat-date{line-height:1.3;}

/* v129: receipt visually lower without changing message/tile flow */
.cgs-chat-receipt{position:relative;top:5px;}