/* ===========================================================================
   creditsoft.css - Project-specifieke styling voor het CreditSoft platform.

   Verhuisd uit ServerModule.dfm CustomCSS.Strings naar een externe file voor
   onderhoudbaarheid (syntax highlighting, geen Pascal-escape-hell, kleinere
   .dfm, diff-vriendelijk).

   Geladen via ServerModule.OnBeforeInit:
     CustomFiles.Add('files/css/creditsoft.css');
   =========================================================================== */

/* ------------------------------
   Algemene globale tweaks
--------------------------------*/
.boldtext {
    font-weight: 500;
    color: #616161;
}

.busy-load-container {
    z-index: 999999 !important;
}

.property-panel-table div {
    padding-left: 0px;
}

/* ------------------------------
   Avatar styling
--------------------------------*/
.e-avatar img {
    height: 60%;
}
.e-avatar {
    background-color: white;
}

.avatar img {
    vertical-align: middle;
    width: 33px;
    height: 33px;
    border-radius: 50%;
}

.imgPhoto img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

/* ------------------------------
   Icon kleuren per klasse
--------------------------------*/
.icon-white > * > * > .x-btn-icon-el-tertiary-small,
.icon-white > * > * > .x-btn-icon-el-tertiary-medium,
.icon-white > * > * > .x-btn-icon-el-tertiary-large {
    color: white;
}

.icon-red > * > * > .x-btn-icon-el-tertiary-small,
.icon-red > * > * > .x-btn-icon-el-tertiary-medium,
.icon-red > * > * > .x-btn-icon-el-tertiary-large {
    color: #E50000;
}

.icon-yellow > * > * > .x-btn-icon-el-tertiary-small,
.icon-yellow > * > * > .x-btn-icon-el-tertiary-medium,
.icon-yellow > * > * > .x-btn-icon-el-tertiary-large {
    color: #F9D900;
}

.icon-gray > * > * > .x-btn-icon-el-tertiary-small,
.icon-gray > * > * > .x-btn-icon-el-tertiary-medium,
.icon-gray > * > * > .x-btn-icon-el-tertiary-large {
    color: #667684;
}

.icon-green > * > * > .x-btn-icon-el-tertiary-small,
.icon-green > * > * > .x-btn-icon-el-tertiary-medium,
.icon-green > * > * > .x-btn-icon-el-tertiary-large {
    color: #43A047;
}

.icon-cyan > * > * > .x-btn-icon-el-tertiary-small,
.icon-cyan > * > * > .x-btn-icon-el-tertiary-medium,
.icon-cyan > * > * > .x-btn-icon-el-tertiary-large {
    color: #00ACC1;
}

.icon-orange > * > * > .x-btn-icon-el-tertiary-small,
.icon-orange > * > * > .x-btn-icon-el-tertiary-medium,
.icon-orange > * > * > .x-btn-icon-el-tertiary-large {
    color: #F4511E;
}

.icon-blue > * > * > .x-btn-icon-el-tertiary-small,
.icon-blue > * > * > .x-btn-icon-el-tertiary-medium,
.icon-blue > * > * > .x-btn-icon-el-tertiary-large {
    color: #3949AB;
}

/* ------------------------------
   TreeList Styling
--------------------------------*/
.x-treelist {
    background-color: #F5F6F8; /* subtiel lichter dan #F1F4F7 */
    color: #212121;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.x-treelist-item-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #374151; /* donkergrijs-blauw ipv #333333 */
    transition: color 0.3s ease;
}

.x-treelist-item-icon {
    font-size: 18px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    color: #43679A; /* jouw blauw */
    transition: color 0.3s ease;
}

.x-treelist-row {
    padding-top: 6px;
    padding-bottom: 6px;
    height: auto;
}

.x-treelist-row > * {
    vertical-align: middle;
}

.x-treelist-row-over {

    background-color: #E2E8F0; /* zachter hovergrijs dan #E6EEF4 */
    color: #1F2937;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.x-treelist-item-selected > .x-treelist-row {
    background-color: #D6E4F3;
    color: #1F2937;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.x-treelist-item-selected > .x-treelist-row-over {
    background-color: #C0D8EC;
    color: #1F2937;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.x-treelist-item-selected .x-treelist-row::before {
    background-color: #F5A742; /* oranje accentlijn links */
    transition: background-color 0.3s ease;
}

.x-treelist-container {
    border-left: 1px solid #D0D7DD;
}

/* ------------------------------
   HTML Editor Upload & Camera
--------------------------------*/
.x-html-editor-tb .x-upload,
.x-menu-item div.x-upload {
    position: relative;
}

.x-camera:before {
    content: "\f083";
    font-family: FontAwesome;
    top: 0;
    color: gray;
}

#loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 20000;
}

#loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 4px solid #ccc;
    border-top: 4px solid #1976D2; /* accentkleur */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.header-icon {
  --fa-primary-color: #6589B9;
  --fa-secondary-color: #A7B9D6;
  --fa-primary-opacity: 1.0;
  --fa-secondary-opacity: 1.0;

  font-size: 36px;
  margin-right: 10px;
  vertical-align: middle;
}

.app-icon {
  width: 32px;
  height: 32px;

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

  font-size: 16px;               /* iets kleiner, moderner */
  padding: 4px;
  border-radius: 6px;


  background-color: #f3f4f6;     /* gray-100, subtiele vulling */
  color: #374151;                /* gray-700, neutraal icoon */
  border: 1px solid transparent;

  transition: background-color 0.15s, color 0.15s;
  cursor: pointer;
}
.app-icon:hover {
  background-color: #dbeafe;     /* blue-100 */
  color: #2563eb;                /* merk-blauw */
}

/* Variant voor destructieve actie (verwijderen) */
.app-icon.fa-trash:hover,
.app-icon.fa-trash-can:hover {
  background-color: #fee2e2;     /* red-100 */
  color: #dc2626;                /* red-600 */
}

/* Soft-blue variant - valt visueel op tussen een reeks neutrale
   .app-icon's, ideaal voor "ga naar detail / gekoppelde entiteit"
   acties die per rij in een grid herhaald worden. Subtiele hover-
   ring geeft duidelijke klikbaar-feedback. */
.app-icon-blue {
  width: 32px;
  height: 32px;

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

  font-size: 16px;
  padding: 4px;
  border-radius: 6px;

  background-color: #dbeafe;     /* blue-100 - soft fill */
  color: #2563eb;                /* merk-blauw */
  border: 1px solid transparent;

  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
  cursor: pointer;
}
.app-icon-blue:hover {
  background-color: #bfdbfe;     /* blue-200 */
  color: #1d4ed8;                /* blue-700 */
  border-color: #60a5fa;         /* blue-400 - subtiele ring op hover */
}

.app-icon-gray {
  width: 32px;
  height: 32px;

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


  font-size: 18px;               /* grootte van het icoon zelf */

  padding: 4px;                  /* ruimte tussen icoon en rand */
  border-radius: 6px;            /* afgeronde hoeken */

  background-color: #9ca2ad;     /* uniforme achtergrondkleur */
  color: #ffffff;                /* icoonkleur */

  transition: transform 0.2s ease-in-out;
  cursor: pointer;
}

.app-icon-success {
  color: #16A34A; /* groen */
}

.app-icon-warning {
  color: #D97706; /* oranje */
}

.app-icon-danger {
  color: #DC2626; /* rood */
}

.app-icon-info {
  color: #2563EB; /* helder blauw */
}

.app-icon-muted {
  color: #6B7280; /* grijs */
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.form-title {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 16px;
  gap: 10px;

  animation: zoomIn 0.3s ease-out both;
}

.title-icon {
  font-size: 22px;                  /* subtieler dan 32px */
  color: #2563eb;                   /* merk-blauw */

  background-color: #dbeafe;        /* blue-100, zachte blauwe tint */
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.title-icon-large {
  font-size: 28px;
  color: #2563eb;                   /* merk-blauw */
  background-color: #dbeafe;        /* blue-100 */
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.title-icon-shortcuts {
  font-size: 18px;
  color: #2563eb;                   /* merk-blauw */
  background-color: #dbeafe;        /* blue-100 */
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------
   Top navigation iconen
   Subtiel, past in topbar (geen box) */
.top-nav-icon {
  font-size: 18px;
  color: #6b7280;                   /* gray-500 */
  background-color: transparent;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.top-nav-icon:hover {
  background-color: #dbeafe;        /* blue-100 */
  color: #2563eb;                   /* merk-blauw */
}

/* Avatar-icoon in topbar - ietwat vetter/herkenbaarder */
.top-nav-avatar {

  font-size: 28px;                  /* groter dan andere icons */
  color: #2563eb;                   /* merk-blauw */
  background-color: transparent;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s, transform 0.15s;
}
.top-nav-avatar:hover {
  color: #1d4ed8;                   /* blue-700 op hover */
  transform: scale(1.05);
}

.rounded-shadow-panel {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    overflow: hidden; /* voorkomt dat inhoud buiten de ronde rand valt */
    border: 1px solid #ccc; /* optioneel */
}

/* CONFIRM (Opslaan) - positieve bevestiging, groen outlined.

   Voor DE primaire actie: voeg ".filled" toe als tweede class. */
.app-icon-button-confirm {
  width: 180px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  background-color: #ffffff;
  color: #16a34a;                  /* green-600 */
  border: 1px solid #16a34a;
  border-radius: 6px;
  padding: 9px 11px;               /* -1px voor border */
  font-size: 14px;
  font-weight: 500;

  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  box-shadow: none;
}

.app-icon-button-confirm:hover {

  background-color: #f0fdf4;       /* green-50 - lichte groene tint */
}

/* CANCEL (Annuleren) - neutraal grijs, niet-agressief.
   Voor gewone annulatie zonder alarm. */
.app-icon-button-cancel {
  width: 180px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  background-color: #ffffff;
  color: #374151;                  /* gray-700 */
  border: 1px solid #d1d5db;       /* gray-300 */
  border-radius: 6px;
  padding: 9px 11px;               /* -1px voor border */
  font-size: 14px;
  font-weight: 500;

  cursor: pointer;
  transition: background-color 0.2s ease-in-out, 
              border-color 0.2s ease-in-out;
  box-shadow: none;
}

.app-icon-button-cancel:hover {
  background-color: #f9fafb;       /* gray-50 */
  border-color: #9ca3af;           /* gray-400 */
}

/* PRIMARY - merk-blauw outlined, matcht met veld-focus kleur.

   Voor DE primaire actie: voeg ".filled" toe als tweede class. */
.app-icon-button-primary {
  width: 180px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  background-color: #ffffff;
  color: #2563eb;                  /* blue-600 (merk-blauw) */
  border: 1px solid #2563eb;
  border-radius: 6px;
  padding: 9px 11px;               /* -1px voor border */
  font-size: 14px;
  font-weight: 500;

  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  box-shadow: none;
}

.app-icon-button-primary:hover {

  background-color: #eff6ff;       /* blue-50 - lichte blauwe tint */
}


/* DANGER - destructieve acties outlined rood (Verwijderen, Verwerpen).

   Voor DE primaire destructieve actie in een bevestigingsdialog:
   voeg ".filled" toe als tweede class. */
.app-icon-button-danger {
  width: 180px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  background-color: #ffffff;
  color: #dc2626;                  /* red-600 */
  border: 1px solid #dc2626;
  border-radius: 6px;
  padding: 9px 11px;               /* -1px voor border */
  font-size: 14px;
  font-weight: 500;

  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  box-shadow: none;
}

.app-icon-button-danger:hover {

  background-color: #fef2f2;       /* red-50 - lichte rode tint */
}

/* REGULAR - secundaire actie met outlined stijl.
   Minder prominent dan primary, maar wel herkenbaar. */
.app-icon-button-regular {
  width: 180px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  background-color: #ffffff;
  color: #2563eb;                  /* merk-blauw tekst */
  border: 1px solid #2563eb;
  border-radius: 6px;
  padding: 9px 11px;               /* -1px voor border */
  font-size: 14px;
  font-weight: 500;

  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  box-shadow: none;
}

.app-icon-button-regular:hover {

  background-color: #eff6ff;       /* blue-50 - lichte blauwe tint */
}

/* ==========================================
   FILLED MODIFIERS
   Voor DE ene primaire actie per scherm. Combineer met de
   base class, bv. class="app-icon-button-confirm filled".
   Alle andere acties blijven outlined voor visuele rust.
   ========================================== */
.app-icon-button-confirm.filled {
  background-color: #16a34a;       /* green-600 */
  color: white;
  border: none;
  padding: 10px 12px;
}
.app-icon-button-confirm.filled:hover {
  background-color: #15803d;       /* green-700 - donkerder */
}

.app-icon-button-primary.filled {
  background-color: #2563eb;       /* blue-600 (merk-blauw) */
  color: white;
  border: none;
  padding: 10px 12px;
}
.app-icon-button-primary.filled:hover {
  background-color: #1d4ed8;       /* blue-700 - donkerder */
}

.app-icon-button-danger.filled {
  background-color: #dc2626;       /* red-600 */
  color: white;
  border: none;
  padding: 10px 12px;
}
.app-icon-button-danger.filled:hover {
  background-color: #b91c1c;       /* red-700 - donkerder */
}

/* Zoek-knop - outline stijl voor visuele rust tussen andere UI-elementen */
.app-icon-orange {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  padding: 4px;
  border-radius: 6px;

  /* Outline stijl - rustig tussen andere UI-elementen */
  background-color: #eff6ff;     /* blue-50 */
  color: #2563eb;                /* merk-blauw icoon */
  border: 1px solid #bfdbfe;     /* blue-200 rand */

  transition: all 0.15s ease-in-out;
  cursor: pointer;
}
.app-icon-orange:hover {
  background-color: #2563eb;     /* solid op hover */
  color: white;
  border-color: #2563eb;
}

/* ------------------------------
   Panel headers (TUniPanel caption-balk)
   Lichte blauw-variant met merk-blauw tekst/icoon voor een luchtige,
   moderne section-header look. Matcht .app-icon-orange (blue-50 bg).
   Modale dialoog-headers (.x-window-) behouden hun eigen styling.
--------------------------------*/
.x-panel-header-default,
.x-panel-header-default-top,
.x-panel-header-default-horizontal {
  background-color: #EFF6FF !important;      /* blue-50 */
  background-image: none !important;
  border-color: #BFDBFE !important;          /* blue-200 */
  border-bottom: 1px solid #BFDBFE !important;
}

.x-panel-header-title-default > .x-title-text-default,
.x-panel-header-title-default .x-title-text,
.x-panel-header-default .x-title-text {
  color: #2563EB !important;                 /* merk-blauw */
}

.x-panel-header-default .x-title-icon-default,
.x-panel-header-default .x-tool-img {
  color: #2563EB !important;
  background-color: transparent !important;
}

/* Utility-klasse voor custom panel-header containers */
.pnlheader {
  background-color: #EFF6FF;
  color: #2563EB;
}

/* ------------------------------
   Top-bar / Header
   Geen border / shadow meer sinds de sidebar-migratie -
   de sidebar+pageContainer vormen een naadloos geheel.
--------------------------------*/
.app-header {
  background-color: #ffffff !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* ------------------------------
   Login scherm - moderne look
--------------------------------*/

/* Achtergrond van het login venster */
.frmLogin {
    background: #f5f7fa !important;
}

/* Login card - witte kaart met schaduw en afgeronde hoeken */
.login-card,
.login-card > .x-panel-body {
    background: #ffffff !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
}

/* Welkomsttitel */
.login-welcome-title,
.login-welcome-title .x-unilabel-text {
    font-size: 26px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    text-align: center !important;
    letter-spacing: -0.5px !important;
}

/* Veld-labels boven inputs */
.login-label,
.login-label .x-unilabel-text {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    letter-spacing: 0.2px !important;
}


/* Invoervelden - boxed met border (targets UniGUI edit wrapper) */
.login-card .login-input,
.login-card .login-input .x-form-item-body,
.login-card .login-input .x-form-trigger-wrap,
.login-card .login-input .x-form-text-wrap,
.login-card .login-input .x-form-text-field-body {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Verwijder Material underline pseudo-elementen */
.login-card .login-input .x-form-item-body::before,
.login-card .login-input .x-form-item-body::after,
.login-card .login-input .x-form-trigger-wrap::before,
.login-card .login-input .x-form-trigger-wrap::after,
.login-card .login-input .x-form-text-wrap::before,
.login-card .login-input .x-form-text-wrap::after {
    display: none !important;
    border: none !important;
    background: none !important;
    content: none !important;
}

/* De echte input krijgt onze boxed styling */
.login-card .login-input .x-form-text-default,
.login-card .login-input input.x-form-text,
.login-card .login-input input.x-form-field {
    border: 1.5px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    font-size: 15px !important;
    background-color: #fafafa !important;
    background-image: none !important;
    height: 40px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
.login-card .login-input .x-form-text-default:focus,
.login-card .login-input input.x-form-text:focus,
.login-card .login-input input.x-form-field:focus {
    border-color: #10b981 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12) !important;
    outline: none !important;
}


/* Extra safety: verwijder elke outline/border-bottom op geneste elementen */
.login-card .login-input *:focus,
.login-card .login-input .x-form-focus,
.login-card .login-input.x-form-focus {
    outline: none !important;
    border-bottom: none !important;
}

/* Primaire Login knop - full width met gradient */
.login-btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 44px !important;
    padding: 0 20px !important;

    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: box-shadow 0.2s, transform 0.1s !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25) !important;
}
.login-btn-primary i {
    margin-right: 8px !important;
}
.login-btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35) !important;
}

/* Secundaire Annuleren tekstlink */
.login-cancel-link {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    color: #6b7280 !important;
    background: transparent !important;
    border: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 8px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}
.login-cancel-link:hover {
    color: #1a1a1a !important;
    text-decoration: underline !important;
}

/* ------------------------------
   Grid row selection (subtiel blauw).
   Let op: enkel RIJ-niveau kleuren, niet cellen.
   Zo behouden cellen met inline background-color (gezet
   vanuit Delphi-code via OnDrawColumnCell) hun eigen kleur.
--------------------------------*/
.x-grid-item-selected,
.x-grid-row-selected {
  background-color: #eff6ff !important;   /* blue-50 */
}

/* Tekst in geselecteerde rij - alleen inner, niet de cell */
.x-grid-item-selected .x-grid-cell-inner,
.x-grid-row-selected .x-grid-cell-inner {

  color: #1e40af;                         /* blue-700, GEEN !important */
  font-weight: 500;
}

/* Cellen met inline background-color (gezet vanuit Delphi-code via
   OnDrawColumnCell) laten hun kind-span de tekstkleur erven van de <td>.
   Zo blijft de in code gezette Attribs.Font.Color zichtbaar, ook wanneer
   de rij geselecteerd is (anders wint de selectie-kleurregel op de inner
   span en krijg je onleesbare blauwe tekst op bv. een rode achtergrond). */
.x-grid-item-selected td[style*="background"] .x-grid-cell-inner,
.x-grid-row-selected td[style*="background"] .x-grid-cell-inner,
.x-grid-item td[style*="background"] .x-grid-cell-inner,
.x-grid-row td[style*="background"] .x-grid-cell-inner {
  color: inherit !important;
}

/* Hover-indicatie - alleen op rij-niveau */
.x-grid-item-over:not(.x-grid-item-selected),
.x-grid-row-over:not(.x-grid-row-selected) {
  background-color: #f8fafc !important;   /* slate-50 */
}

/* Zebra striping via nth-child (werkt onafhankelijk van ExtJS stripeRows
   config). Alleen op rij-niveau, geen !important op cellen - inline cell
   kleuringen vanuit Delphi code behouden zo hun voorrang. */
.x-grid-view table.x-grid-item:nth-child(even),
.x-grid-view tr.x-grid-row:nth-child(even) {
  background-color: #f8fafc;              /* slate-50 */
}

/* Paging toolbar: neutraal grijs ipv merk-blauw
   (paging = navigatie in data, geen actie) */
.x-paging-toolbar .x-btn-icon-el,
.x-paging-toolbar .x-btn-icon-el-default-toolbar-small,
.x-paging-toolbar .x-btn-icon-el-default-small,
.x-paging-toolbar .x-btn-inner,
.x-paging-toolbar .x-tool-img,
.x-paging-toolbar i,
.x-paging-toolbar .x-fa,
.x-toolbar-docked-bottom .x-btn-icon-el,
.x-toolbar-docked-bottom i {
  color: #6b7280 !important;             /* gray-500 */
  fill: #6b7280 !important;
}
.x-paging-toolbar .x-btn:hover .x-btn-icon-el,
.x-paging-toolbar .x-btn-over .x-btn-icon-el {
  color: #374151 !important;             /* gray-700 */
  fill: #374151 !important;
}
.x-paging-toolbar .x-btn-disabled .x-btn-icon-el,
.x-paging-toolbar .x-item-disabled .x-btn-icon-el {
  color: #d1d5db !important;             /* gray-300 */
  fill: #d1d5db !important;
}

/* ============================================ */
/*  KPI BLOCKS (CreditManagement Dashboard)    */
/* ============================================ */
.kpi-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;             /* gray-500 */
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.kpi-counter {
  font-size: 28px;
  font-weight: 700;
  color: #111827;                        /* gray-900 */
}
.kpi-amount {
  font-size: 16px;
  font-weight: 500;
  color: #3b82f6;                        /* blue-500 */
}
.kpi-block {
  border-radius: 8px;
  border-top: 4px solid #3b82f6;         /* blue-500 default */
  background-color: #f9fafb !important;  /* gray-50 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.kpi-block-aktes    { border-top-color: #3b82f6; }  /* blue-500 */

.kpi-block-indienen { border-top-color: #f59e0b; }  /* amber-500 */

.kpi-block-ingediend{ border-top-color: #16a34a; }  /* green-600 */

.kpi-block-loa      { border-top-color: #dc2626; }  /* red-600 */

/* ============================================================================
   MainForm pageContainer - naadloze overgang met de sidebar
   ----------------------------------------------------------------------------
   .pc-clean wordt toegewezen via TUniPageControl.LayoutConfig.Cls.
   STRIKT direct-child (>) op generieke panel classes om grids en panels
   BINNEN de tabs te sparen; descendant (geen >) op tab-bar-specifieke
   classes die enkel in tabpanels voorkomen.
   ============================================================================ */

/* Regel 1: pageContainer-shell + directe kinderen (generieke panel classes) */
.pc-clean {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.pc-clean > .x-panel-body,
.pc-clean > .x-panel-body-default,
.pc-clean > .x-tabpanel-body,
.pc-clean > .x-tabpanel-body-default {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Regel 2: tab-bar specifieke classes (descendant OK - deze classes bestaan
   enkel in tab-bars, niet in grids of andere panels). */
.pc-clean .x-tab-bar,
.pc-clean .x-tab-bar-default,
.pc-clean .x-tab-bar-default-top,
.pc-clean .x-tab-bar-body,
.pc-clean .x-tab-bar-body-default,
.pc-clean .x-tab-bar-strip,
.pc-clean .x-tab-bar-strip-default,
.pc-clean .x-tab-bar-strip-default-top {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Regel 3: pseudo-elementen op tab-bar en strip (ExtJS tekent soms via
   :before/:after). */
.pc-clean .x-tab-bar:before,
.pc-clean .x-tab-bar:after,
.pc-clean .x-tab-bar-strip:before,
.pc-clean .x-tab-bar-strip:after {
  display: none !important;
  border: 0 !important;
}

/* Regel 4: tab-sheets zelf (elke TUniTabSheet). Worden door ExtJS gerenderd
   als .x-panel.x-fit-item.x-panel-default en zitten als grandchild in
   pc-clean. De klasse .x-fit-item is fit-layout specifiek - komt niet voor
   op gewone grids/panels binnen een tab-sheet, dus veilig als descendant. */
.pc-clean .x-fit-item,
.pc-clean .x-fit-item.x-panel-default,
.pc-clean .x-fit-item > .x-panel-bodyWrap,
.pc-clean .x-fit-item > .x-panel-bodyWrap > .x-panel-body,
.pc-clean .x-fit-item > .x-panel-bodyWrap > .x-panel-body-default {
  border: 0 !important;
  box-shadow: none !important;
}

/* ============================================================================
   Modal overlay (ExtJS mask)
   ----------------------------------------------------------------------------
   Standaard tekent ExtJS een semi-transparente zwarte overlay (rgba(0,0,0,0.5))
   over de hele viewport wanneer een modaal venster geopend is. Dat maakt de
   achtergrond behoorlijk donker en verstoord de zichtbaarheid van notificaties
   die eronder (of erbovenop via hogere z-index) verschijnen.
   ============================================================================ */
.x-mask {
  background-color: rgba(0, 0, 0, 0.20) !important;
  /* was ~0.5 - lichter voor moderner gevoel zonder modal-focus te verliezen */
}

/* -----------------------------------------------------------
   ShowMask / HideMask - centrale loading-indicator
   -----------------------------------------------------------
   Het bolletje met "Loading..." dat ExtJS toont tijdens
   ShowMask-calls. Gestyld in Cares-donkergroen (#0a3d2b)
   met witte tekst voor contrast met de overlay.
   ----------------------------------------------------------- */

/* Centraal message-vakje - flex-centered op alle niveaus */
.x-mask-msg {
    background: #43679A !important;
    background-image: none !important;
    border: 1px solid #43679A !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
    padding: 12px 24px !important;
    min-width: 260px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    line-height: 22px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: content-box !important;
}

/* ExtJS plaatst tussen .x-mask-msg en .x-mask-msg-text nog een inner wrapper-div
(.x-mask-msg-inner). Die ook flex-centeren zodat de tekst niet aan de top blijft kleven. */
.x-mask-msg > div,
.x-mask-msg-inner {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* De tekst zelf */
.x-mask-msg-text {
    color: #ffffff !important;
    font-family: 'Segoe UI', Tahoma, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 22px !important;
    background-image: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Spinner-icoon: witte ring die rond Cares-groen draait, links van de tekst */
.x-mask-msg-text::before {
    content: '' !important;
    display: inline-block !important;
    box-sizing: border-box !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid rgba(255, 255, 255, 0.35) !important; /* lichte ring */
    border-top-color: #ffffff !important; /* witte top -> draaiend stukje */
    border-radius: 50% !important;
    margin-right: 10px !important;
    vertical-align: -3px;
    background: transparent !important;
    background-image: none !important;
    transform-origin: 50% 50% !important;
    animation: cares-mask-spin 0.8s linear infinite !important;
    -webkit-animation: cares-mask-spin 0.8s linear infinite !important;
    flex: 0 0 auto !important;
}

@-webkit-keyframes cares-mask-spin {
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes cares-mask-spin {
    to { transform: rotate(360deg); }
}