/* =========================================================
   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: 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);

    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:not(.cgs-quick-hidden){
    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;
}