/* Herbruikbare vervangingen voor losse style=""-attributen, voor CSP
   (style-src 'self'). Eén klasse per terugkerend patroon i.p.v. per view
   een losse, identieke regel. */

.card-max-560 {
    max-width: 560px;
    width: 100%;
}

.chart-max-350 {
    max-height: 350px;
}

.chart-max-280 {
    max-height: 280px;
}

.select-max-320 {
    max-width: 320px;
}

.flow-document-flag-icon {
    width: 30px;
}

.pre-wrap {
    white-space: pre-wrap;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

.cursor-help {
    cursor: help;
}

/* Vaste pixelbreedtes/-hoogtes, vooral voor tabelkolommen - één klasse per
   waarde i.p.v. een losse style="" per cel. */
.w-40px  { width: 40px; }
.w-42px  { width: 42px; }
.w-50px  { width: 50px; }
.w-70px  { width: 70px; }
.w-80px  { width: 80px; }
.w-100px { width: 100px; }
.w-110px { width: 110px; }
.w-130px { width: 130px; }
.w-140px { width: 140px; }
.w-160px { width: 160px; }
.w-170px { width: 170px; }
.w-200px { width: 200px; }
.w-14px  { width: 14px; }
.w-220px { width: 220px; }
.w-240px { width: 240px; }
.w-40pct { width: 40%; }
.w-1pct  { width: 1%; }

.min-w-0px    { min-width: 0; }
.min-w-72px   { min-width: 72px; }
.min-w-100px  { min-width: 100px; }
.min-w-130px  { min-width: 130px; }
.min-w-200px  { min-width: 200px; }
.min-w-220px  { min-width: 220px; }
.min-w-240px  { min-width: 240px; }
.min-w-300px  { min-width: 300px; }

.max-w-200px { max-width: 200px; }
.max-w-220px { max-width: 220px; }
.max-w-300px { max-width: 300px; }
.max-w-360px { max-width: 360px; }
.max-w-500px { max-width: 500px; }
.max-w-550px { max-width: 550px; }
.max-w-600px { max-width: 600px; }
.max-w-700px { max-width: 700px; }
.max-w-720px { max-width: 720px; }

.h-42px  { height: 42px; }
.h-18px  { height: 18px; }
.h-300px { height: 300px; }

.min-h-40vh  { min-height: 40vh; }
.min-h-200px { min-height: 200px; }

.max-h-120px { max-height: 120px; }
.max-h-150px { max-height: 150px; }
.max-h-200px { max-height: 200px; }
.max-h-220px { max-height: 220px; }
.max-h-320px { max-height: 320px; }
.max-h-400px { max-height: 400px; }

/* Font-groottes die niet met Bootstrap's fs-1..fs-6 overeenkomen (dit zijn
   kleine, "muted"-achtige tekstjes, geen koppen). */
.fs-9px  { font-size: 9px; }
.fs-10px { font-size: 10px; }
.fs-11px { font-size: 11px; }
.fs-12px { font-size: 12px; }
.fs-92em  { font-size: .92em; }
.fs-85em  { font-size: .85em; }
.fs-9em   { font-size: .9em; }
.fs-75em  { font-size: .75em; }
.fs-6rem  { font-size: .6rem; }
.fs-7rem  { font-size: .7rem; }
.fs-82rem { font-size: .82rem; }
.fs-85rem { font-size: .85rem; }

/* Zebra-striping op debiteurkaarten (_financial.php, _debtor_information.php,
   action_board.php, site/dashboard.php) - het witte rijtje kan direct
   Bootstrap's eigen .bg-white zijn, #f9f9f9 is net iets anders dan
   Bootstrap's .bg-light (#f8f9fa) en krijgt daarom een eigen klasse om
   pixelexact gelijk te blijven. */
.bg-row-alt {
    background-color: #f9f9f9;
}

.sticky-top-1rem {
    position: sticky;
    top: 1rem;
}

.word-break-word {
    word-break: break-word;
}

.overflow-y-auto {
    overflow-y: auto;
}

.p-5px {
    padding: 5px;
}

.resize-vertical {
    resize: vertical;
}

.valign-top {
    vertical-align: top;
}

.fs-24px {
    font-size: 24px;
}

.w-5vw {
    width: 5vw;
}

.w-10vw {
    width: 10vw;
}

.me-5vw {
    margin-right: 5vw;
}

/* Net als Bootstrap's .d-none, maar bewust zonder !important: sommige
   elementen worden later door JS getoond via element.style.display = ''
   (bv. setting-ai-settings.js) - dat werkt niet meer als de verborgen staat
   een !important-regel is. */
.hidden-initial {
    display: none;
}

.fs-125rem {
    font-size: 1.25rem;
}

.modal-header-manualaction {
    background-color: #f3eff8;
    border-bottom: 2px solid #4D356E;
}

.btn-transparent-flat {
    border: none;
    background-color: transparent;
}

.email-plain-text {
    white-space: pre-wrap;
    font-family: inherit;
    margin: 0;
}

/* Hoofdnavigatie (_header.php) */
.navbar-border {
    border-bottom: lightgray solid 1px;
    border-radius: 0 !important;
    max-height: 10vh;
}

/* Links/rechts-knop in de navbar (Yii::$app->params['leftButton']/['rightButton']) */
.nav-side-link {
    font-size: 40px;
    text-decoration: none;
    color: #4D356E;
    font-weight: 300;
}