/* =========================================================
   CLIENT THEME: Soft Radius + Subtle Shadow — Brand Safe
   Load AFTER your base theme (basic.css or advance.css).
   Shape/elevation only + brand guarantees for primary states.
========================================================= */

/* ---------- Tokens (tweak if needed) ---------- */
:root{
    /* Radii */
    --r-ctrl: 10px;
    --r-btn: 12px;
    --r-card: 12px;
    --r-pill: 9999px;

    /* Border thickness */
    --b-ctrl: 1.25px;

    /* Elevation (soft) */
    --elev-1: 0 1px 3px rgba(0,0,0,.08);
    --elev-2: 0 2px 6px rgba(0,0,0,.12);

    /* Neutral control framing */
    --ctrl-border: rgba(0,0,0,.18);
    --ctrl-border-hover: rgba(0,0,0,.28);
    --ctrl-bg: #fff;

    /* DataTables pager vars */
    --dt-page-brd-w: 1.25px;
    --dt-page-brd: rgba(0,0,0,.18);
    --dt-page-brd-hover: rgba(0,0,0,.28);
  }

  /* =========================================================
     GLOBAL SHAPES (no global color changes)
  ========================================================= */
  .btn,
  .btn-group .btn,
  .nav-pills .nav-link,
  .nav-tabs .nav-link,
  .pagination .page-link,
  .badge,
  .alert,
  .card,
  .modal-content,
  .dropdown-menu,
  .list-group-item,
  .toast,
  .progress,
  .form-select,
  .form-control,
  .input-group-text,
  .dataTables_wrapper .dataTables_paginate .paginate_button{
    border-radius: var(--r-ctrl) !important;
  }

  /* Cards / overlays */
  .card,
  .modal-content,
  .dropdown-menu,
  .toast{
    border-radius: var(--r-card) !important;
    border: var(--b-ctrl) solid rgba(0,0,0,.12) !important;
    box-shadow: var(--elev-1) !important;
    overflow: hidden;
  }
  .card:hover,
  .dropdown-menu.show,
  .toast:hover,
  .modal-content:focus-within{ box-shadow: var(--elev-2) !important; }

  .card-header,
  .card-footer{
    /* border: none !important; */
    border-bottom: 1px solid rgba(0,0,0,.125);
    border-radius: 0 !important;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);
  }
  .card-header:first-child{ box-shadow: none; }

  /* =========================================================
     FORMS (shape/elevation only)
  ========================================================= */
  input.form-control,
  textarea.form-control,
  select.form-control,
  .form-select{
    border: var(--b-ctrl) solid var(--ctrl-border) !important;
    background: var(--ctrl-bg) !important;
    border-radius: var(--r-ctrl) !important;
    box-shadow: none !important;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
    padding-inline: .85rem;
  }
  input.form-control:hover,
  textarea.form-control:hover,
  select.form-control:hover,
  .form-select:hover{ border-color: var(--ctrl-border-hover) !important; }
  input.form-control:focus,
  textarea.form-control:focus,
  select.form-control:focus,
  .form-select:focus{
    border-color: currentColor !important;
    outline: 0 !important;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, currentColor 14%, transparent) !important;
  }
  .select2-container--default .select2-selection--single,
  .select2-container--bootstrap4 .select2-selection--single,
  .select2-container--default .select2-selection--multiple,
  .select2-container--bootstrap4 .select2-selection--multiple {
    border: var(--b-ctrl) solid var(--ctrl-border) !important;
    background: var(--ctrl-bg) !important;
    border-radius: var(--r-ctrl) !important;
    box-shadow: none !important;
    padding: .35rem .85rem;
    min-height: 2.375rem;
    display: flex;
    align-items: center;
    gap: .25rem;
    width: 100%;
    font: inherit;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
    box-sizing: border-box;
  }

  .select2-container--default .select2-selection--single .select2-selection__rendered,
  .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: 2rem;
    padding: 0 2.25rem 0 0;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow,
  .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
    height: 2.35rem;
    top: 0;
    right: .75rem;
  }

  /* Match Select2 sizing to Bootstrap small controls when the original <select> is .form-control-sm */
  select.form-control-sm + .select2-container {
    font-size: .875rem;
  }
  select.form-control-sm + .select2-container--bootstrap4 .select2-selection--single {
    height: calc(1.5em + .5rem + 2px) !important;
    min-height: calc(1.5em + .5rem + 2px) !important;
  }
  select.form-control-sm + .select2-container--default .select2-selection--single,
  select.form-control-sm + .select2-container--bootstrap4 .select2-selection--single {
    min-height: 1.8125rem;
    padding: .25rem .5rem;
  }
  select.form-control-sm + .select2-container--default .select2-selection--single .select2-selection__rendered,
  select.form-control-sm + .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: calc(1.5em + .5rem);
    padding-right: 2.25rem;
  }
  select.form-control-sm + .select2-container--default .select2-selection--single .select2-selection__arrow,
  select.form-control-sm + .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
    height: 1.8125rem;
  }
  .select2-container--default .select2-selection--multiple .select2-selection__choice,
  .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    border-radius: var(--r-pill, 9999px) !important;
    border: 1px solid rgba(0,0,0,.15) !important;
    background: rgba(255,255,255,.75) !important;
    padding: .2rem .5rem;
  }
  .select2-dropdown {
    border-radius: var(--r-ctrl) !important;
    border: var(--b-ctrl) solid var(--ctrl-border) !important;
    box-shadow: var(--elev-1) !important;
  }

  /* Select2 allowClear alignment (admin modals) */
  .modal .select2-container--bootstrap4 .select2-selection--single {
    position: relative;
  }
  .modal .select2-container--bootstrap4 .select2-selection--single .select2-selection__clear {
    position: absolute;
    right: 2.1rem;
    top: 50%;
    transform: translateY(-50%);
    float: none !important;
    margin: 0 !important;
    padding: 0 .2rem !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    font-size: 1.15rem !important;
    color: rgba(0,0,0,.55) !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
  .modal .select2-container--bootstrap4 .select2-selection--single .select2-selection__clear:hover {
    background: transparent !important;
    color: rgba(0,0,0,.8) !important;
  }
  .modal .select2-container--bootstrap4 .select2-selection--single .select2-selection__clear + .select2-selection__rendered {
    padding-right: 3.25rem !important;
  }
  .modal .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
    top: 50% !important;
    transform: translateY(-50%);
    height: 1.6rem !important;
    right: .75rem !important;
  }
  .modal .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
    margin-top: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  .select2-container--default .select2-results__option--highlighted[aria-selected],
  .select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected]{
    background-color: color-mix(in srgb, var(--primary) 18%, #fff) !important;
    color: var(--primary-text, #fff) !important;
  }
  .select2-container--default .select2-results__option[aria-selected="true"],
  .select2-container--bootstrap4 .select2-results__option[aria-selected="true"],
  .select2-container--default .select2-results__option--selected,
  .select2-container--bootstrap4 .select2-results__option--selected{
    background-color: var(--primary) !important;
    color: var(--primary-text, #fff) !important;
  }
  /* Input groups */
  .input-group{
    border-radius: var(--r-ctrl) !important;
    box-shadow: var(--elev-1);
    overflow: hidden;
  }
  .input-group .form-control,
  .input-group .form-select,
  .input-group .input-group-text,
  .input-group .btn{
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .input-group:focus-within{
    box-shadow:
      0 0 0 .2rem color-mix(in srgb, currentColor 14%, transparent),
      var(--elev-2) !important;
  }

  /* Checks / radios */
  .form-check-input{
    border-radius: 6px !important;
    border: var(--b-ctrl) solid rgba(0,0,0,.3) !important;
    box-shadow: none !important;
  }
  .form-check-input:hover{ border-color: rgba(0,0,0,.4) !important; }
  .form-check-input:focus{
    box-shadow: 0 0 0 .2rem color-mix(in srgb, currentColor 14%, transparent) !important;
  }

  /* =========================================================
     BUTTONS — brand guarantee
  ========================================================= */
  .btn{
    border-radius: var(--r-btn) !important;
    border-width: var(--b-ctrl) !important;
    transition: transform .12s ease, box-shadow .2s ease;
  }
  .btn:hover{ transform: translateY(-1px); box-shadow: var(--elev-1); }
  .btn:active{ transform: translateY(0); box-shadow: none; }
  .btn:focus{ box-shadow: 0 0 0 .2rem color-mix(in srgb, currentColor 14%, transparent) !important; }

  /* Primary (BS5 vars + explicit fallback) */
  .btn.btn-primary{
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-color: var(--primary-text, #fff);
    --bs-btn-hover-bg: var(--primary-dark, #0c1e48);
    --bs-btn-hover-border-color: var(--primary-dark, #0c1e48);
    --bs-btn-active-bg: var(--primary-darker, #0a173a);
    --bs-btn-active-border-color: var(--primary-darker, #0a173a);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-text, #fff) !important;
  }
  .btn.btn-primary:hover,
  .btn.btn-primary:focus,
  .btn.btn-primary:active,
  .btn.btn-primary:not(:disabled):not(.disabled).active,
  .show > .btn.btn-primary.dropdown-toggle{
    background-color: var(--bs-btn-hover-bg) !important;
    border-color: var(--bs-btn-hover-border-color) !important;
    color: var(--primary-text, #fff) !important;
  }

  /* Outline primary keeps airy fill */
  /* .btn[class*="btn-outline-"]{ background: transparent !important; } */

  /* =========================================================
     TABS & PILLS — brand guarantee on active
  ========================================================= */
  .nav-pills .nav-link{
    border-radius: var(--r-pill) !important;
    border: var(--b-ctrl) solid transparent !important;
    transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s;
  }
  .nav-pills .nav-link:hover{
    background-color: color-mix(in srgb, currentColor 10%, transparent);
  }
  .nav-pills .nav-link.active{
    background-color: var(--primary) !important;
    color: var(--primary-text, #fff) !important;
    border-color: var(--primary) !important;
    box-shadow: none !important;
  }

  .nav-tabs{ border-bottom: var(--b-ctrl) solid rgba(0,0,0,.08); }
  .nav-tabs .nav-link{
    border: none !important;
    border-radius: var(--r-pill) !important;
    padding: .5rem .9rem;
    transition: color .2s, background-color .2s, box-shadow .2s, border-color .2s;
  }
  .nav-tabs .nav-link:hover{
    background-color: color-mix(in srgb, currentColor 10%, transparent);
  }
  .nav-tabs .nav-link.active,
  .nav-tabs .nav-item.show .nav-link{
    background-color: var(--primary) !important;
    color: var(--primary-text, #fff) !important;
    border-color: var(--primary) !important;
    box-shadow: none !important;
  }

  /* =========================================================
     PAGINATION (site-level)
  ========================================================= */
  .pagination .page-link{
    border-radius: var(--r-pill) !important;
    border: var(--b-ctrl) solid var(--dt-page-brd) !important;
    background: #fff !important;
    transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s;
    padding: .45rem .8rem;
  }
  .pagination .page-link:hover{
    border-color: var(--dt-page-brd-hover) !important;
    background: color-mix(in srgb, currentColor 10%, #fff) !important;
  }
  .pagination .page-item.active .page-link{
    border-color: var(--primary) !important;
    background: var(--primary) !important;
    color: var(--primary-text, #fff) !important;
    box-shadow: none !important;
  }

  /* =========================================================
     DATATABLES — TABLE & WRAPPERS
  ========================================================= */
  table.dataTable,
  table.table.dataTable{
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: var(--b-ctrl) solid rgba(0,0,0,.12) !important;
    border-radius: var(--r-card) !important;
    overflow: hidden;
    box-shadow: var(--elev-1);
  }
  .dataTables_wrapper .dataTables_scroll,
  .dataTables_wrapper .dataTables_scrollHead,
  .dataTables_wrapper .dataTables_scrollBody{
    border: none !important;
    border-radius: var(--r-card) !important;
    box-shadow: var(--elev-1);
  }

  /* Allow DataTables horizontal/vertical scrolling when enabled (scrollX/scrollY). */
  .dataTables_wrapper .dataTables_scroll,
  .dataTables_wrapper .dataTables_scrollHead{
    overflow: hidden !important;
  }

  .dataTables_wrapper .dataTables_scrollBody{
    overflow: auto !important;
  }
  table.dataTable thead th,
  table.dataTable thead td{ border-bottom: 1px solid rgba(0,0,0,.08) !important; }
  table.dataTable tbody td{ border-top: 1px solid rgba(0,0,0,.06) !important; }

  /* DataTables controls: same soft inputs */
  .dataTables_length select,
  .dataTables_filter input{
    border: var(--b-ctrl) solid rgba(0,0,0,.18) !important;
    border-radius: var(--r-ctrl) !important;
    background: #fff !important;
    box-shadow: none !important;
    transition: border-color .2s, box-shadow .2s;
    padding: .35rem .55rem;
  }
  .dataTables_length select:hover,
  .dataTables_filter input:hover{ border-color: rgba(0,0,0,.28) !important; }
  .dataTables_length select:focus,
  .dataTables_filter input:focus{
    border-color: currentColor !important;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, currentColor 14%, transparent) !important;
    outline: none !important;
  }
  .dataTables_info{ margin-top: .25rem !important; }
  .card table.dataTable{ border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }

  /* =========================================================
     DATATABLES — PAGER (robust, brand-safe, keeps border)
     Handles native DT (.paginate_button) AND Bootstrap pager inside DT.
  ========================================================= */
  /* Base (not current/disabled) */
  .dataTables_wrapper .dataTables_paginate .paginate_button{
    border-radius: var(--r-pill) !important;
    border: var(--dt-page-brd-w) solid var(--dt-page-brd) !important; /* visible border */
    background: #fff !important;
    color: var(--primary) !important;       /* clickable brandy text */
    transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button:hover{
    border-color: var(--dt-page-brd-hover) !important;
    background: color-mix(in srgb, currentColor 10%, #fff) !important;
    color: var(--primary-dark, #0c1e48) !important;
  }

  /* CURRENT page — solid brand chip with visible border */
  .dataTables_wrapper .dataTables_paginate .paginate_button.current,
  .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
  .dataTables_wrapper .dataTables_paginate .paginate_button[aria-current="page"],
  .dataTables_wrapper .dataTables_paginate .paginate_button[aria-current="page"]:hover{
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-text, #fff) !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }

  /* Disabled prev/next — keep layout stable, border visible but muted */
  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover{
    background: #fff !important;
    color: rgba(0,0,0,.38) !important;
    border-color: var(--dt-page-brd) !important;
    cursor: not-allowed !important;
  }

  /* If DataTables renders Bootstrap pagination inside wrapper */
  .dataTables_wrapper .pagination .page-link{
    border-radius: var(--r-pill) !important;
    border: var(--dt-page-brd-w) solid var(--dt-page-brd) !important;
    background: #fff !important;
    transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s;
  }
  .dataTables_wrapper .pagination .page-link:hover{
    border-color: var(--dt-page-brd-hover) !important;
    background: color-mix(in srgb, currentColor 10%, #fff) !important;
  }
  .dataTables_wrapper .pagination .page-item.active .page-link{
    border-color: var(--primary) !important;
    background: var(--primary) !important;
    color: var(--primary-text, #fff) !important;
    box-shadow: none !important;
  }

  /* =========================================================
     MISC
  ========================================================= */
  .badge, .alert{ border-radius: var(--r-ctrl) !important; }
  .table-hover tbody tr:hover{ background-color: rgba(0,0,0,.02) !important; }
  ::selection{ background-color: rgba(0,0,0,.08); color: inherit; }


  /* =========================================================
   DATATABLES — ENSURE FULL OUTER BORDER (all 4 sides)
========================================================= */
/* table.dataTable,
table.table.dataTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;

  /* full outer border visible
  border-top: var(--b-ctrl) solid rgba(0,0,0,.12) !important;
  border-right: var(--b-ctrl) solid rgba(0,0,0,.12) !important;
  border-bottom: var(--b-ctrl) solid rgba(0,0,0,.12) !important;
  border-left: var(--b-ctrl) solid rgba(0,0,0,.12) !important;

  border-radius: var(--r-card) !important;
  overflow: hidden;
  box-shadow: var(--elev-1);
} */



/* =========================================================
   DATATABLES — FULL TILE GRID LOOK
   Adds outer frame + inner verticals/horizontals so table
   looks like a tiled grid.
========================================================= */
table.dataTable,
table.table.dataTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;

  /* full outer frame */
  border: var(--b-ctrl) solid rgba(0,0,0,.12) !important;

  border-radius: var(--r-card) !important;
  overflow: hidden;
  box-shadow: var(--elev-1);
}

/* Header cells */
table.dataTable thead th,
table.dataTable thead td {
  border-bottom: var(--b-ctrl) solid rgba(0,0,0,.12) !important;
  border-right: var(--b-ctrl) solid rgba(0,0,0,.12) !important;
}
table.dataTable thead th:last-child,
table.dataTable thead td:last-child {
  border-right: none !important;
}

/* Body cells */
table.dataTable tbody td {
  border-top: var(--b-ctrl) solid rgba(0,0,0,.06) !important;
  border-right: var(--b-ctrl) solid rgba(0,0,0,.12) !important;
}
table.dataTable tbody td:last-child {
  border-right: none !important;
}

/* Last row gets bottom border */
table.dataTable tbody tr:last-child td {
  border-bottom: var(--b-ctrl) solid rgba(0,0,0,.12) !important;
}

/* =========================================================
   TILE COMPONENT — soft radius + subtle shadow
   Works with your existing tokens:
   --r-card, --b-ctrl, --elev-1, --elev-2, --primary, --primary-text
   Load in the client theme file you load LAST.
========================================================= */

:root{
    --tile-bg: #fff;
    --tile-brd: rgba(0,0,0,.12);
    --tile-brd-hover: rgba(0,0,0,.18);
    --tile-muted: rgba(0,0,0,.58);
    --tile-gap: .75rem;
    --tile-padding: 1rem;
    --tile-radius: var(--r-card, 12px);
  }

  /* Base tile */
  .tile{
    display: flex;
    flex-direction: column;
    gap: var(--tile-gap);
    background: var(--tile-bg);
    border: var(--b-ctrl, 1.25px) solid var(--tile-brd);
    border-radius: var(--tile-radius);
    box-shadow: var(--elev-1);
    padding: var(--tile-padding);
    transition: box-shadow .2s, border-color .2s, transform .12s, background-color .2s;
  }
  .tile:hover{ box-shadow: var(--elev-2); border-color: var(--tile-brd-hover); }
  .tile:focus-within{ box-shadow: 0 0 0 .2rem color-mix(in srgb, currentColor 14%, transparent), var(--elev-2); outline: none; }

  /* Sections */
  .tile__header{ display:flex; align-items:center; gap:.5rem; }
  .tile__title{ font-weight:600; line-height:1.2; }
  .tile__subtitle{ color: var(--tile-muted); font-size:.875rem; }
  .tile__body{ display:flex; align-items:baseline; gap:.5rem; }
  .tile__value{ font-size:1.5rem; font-weight:700; line-height:1; }
  .tile__delta{ font-size:.875rem; }
  .tile__footer{ margin-top:auto; display:flex; align-items:center; gap:.5rem; color: var(--tile-muted); font-size:.875rem; }

  /* Clickable tile */
  .tile--clickable{ cursor:pointer; text-decoration:none; color: inherit; }
  .tile--clickable:hover{ transform: translateY(-1px); }

  /* Outline-only style (extra minimal) */
  .tile--outline{
    box-shadow: none;
    border-style: dashed;
  }

  /* Elevated style (a bit more pop without color) */
  .tile--elevated{
    box-shadow: var(--elev-2);
  }

  /* Brand-accented outline (keeps background white) */
  .tile--brand-outline{
    border-color: var(--primary) !important;
  }
  .tile--brand-outline:hover{
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 18%, transparent);
  }

  /* Solid brand tile */
  .tile--primary{
    background: var(--primary) !important;
    color: var(--primary-text, #fff) !important;
    border-color: var(--primary) !important;
    box-shadow: var(--elev-2);
  }
  .tile--primary .tile__subtitle,
  .tile--primary .tile__footer{ color: color-mix(in srgb, var(--primary-text, #fff) 82%, transparent); }
  .tile--primary.tile--clickable:hover{ transform: translateY(-1px); }

  /* Compact metric layout */
  .tile--metric .tile__value{ font-size:1.75rem; }
  .tile--metric .tile__subtitle{ font-size:.8rem; }

  /* Icon slot helpers (optional) */
  .tile__icon{
    width: 36px; height: 36px;
    display:grid; place-items:center;
    border-radius: 10px;
    background: rgba(0,0,0,.04);
    color: inherit;
  }
  .tile--primary .tile__icon{ background: color-mix(in srgb, var(--primary-text, #fff) 16%, transparent); }

  /* Grid helpers (optional) */
  .tiles{ display:grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

  /* ----------------------------------------------
     AdminLTE bridges (optional, if you use small-box/info-box)
     Brings them visually close to .tile without changing semantics.
  ---------------------------------------------- */
  .small-box, .info-box{
    border-radius: var(--tile-radius);
    border: var(--b-ctrl, 1.25px) solid var(--tile-brd);
    box-shadow: var(--elev-1);
  }
  .small-box:hover, .info-box:hover{ box-shadow: var(--elev-2); border-color: var(--tile-brd-hover); }

  /* brand-safe variants if you use bg-primary on these */
  .small-box.bg-primary, .info-box.bg-primary{
    background-color: var(--primary) !important;
    color: var(--primary-text, #fff) !important;
    border-color: var(--primary) !important;
  }
/* TR notify theming (classic) */
:root{
  --tr-toast-radius: 8px;
  --tr-toast-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  --tr-toast-body-bg: #ffffff;

  --tr-toast-info-header-bg: #0dcaf0;
  --tr-toast-info-header-fg: #053441;
  --tr-toast-info-border: #0dcaf0;
  --tr-toast-info-icon: #0dcaf0;

  --tr-toast-success-header-bg: #198754;
  --tr-toast-success-header-fg: #ffffff;
  --tr-toast-success-border: #198754;
  --tr-toast-success-icon: #198754;

  --tr-toast-warn-header-bg: #ffc107;
  --tr-toast-warn-header-fg: #212529;
  --tr-toast-warn-border: #ffc107;
  --tr-toast-warn-icon: #d39e00;

  --tr-toast-error-header-bg: #dc3545;
  --tr-toast-error-header-fg: #ffffff;
  --tr-toast-error-border: #dc3545;
  --tr-toast-error-icon: #dc3545;
}