/* =========================================================
   THEME: Boxy Borders + Radius 0 — Light & Thin (Complete)
   Load AFTER basic.css or advance.css
   Identity: square corners, light 1px borders, crisp focus.
   Brand-safe: .btn-primary, active tabs/pills, DT current pager.
========================================================= */

:root {
    /* Core scales */
    --b-ctrl: 1px; /* thin system border */
    --elev-1: 0 1px 2px rgba(0,0,0,.04);
    --elev-2: 0 2px 5px rgba(0,0,0,.08);

    /* Neutral palette for frames/dividers */
    --ctrl-border: #dee2e6;
    --ctrl-border-hover: #cfd4da;
    --ctrl-border-strong: #dee2e6;
    --ctrl-bg: #fff;

    /* DataTables pager */
    --dt-page-brd-w: 1px;
    --dt-page-brd: #dee2e6;
    --dt-page-brd-hover: #cfd4da;

    /* Tiles */
    --tile-bg: #fff;
    --tile-brd: #dee2e6;
    --tile-brd-hover: #cfd4da;
    --tile-muted: rgba(0,0,0,.58);
    --tile-gap: .75rem;
    --tile-padding: 1rem;

    /* Minor helpers */
    --focus-halo: .15rem; /* focus ring thickness */
  }

  /* =========================================================
     GLOBAL SHAPES — radius 0 everywhere
  ========================================================= */
  .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,
  .small-box, .info-box,
  .breadcrumb,
  .popover,
  .tooltip .tooltip-inner {
    border-radius: 0 !important;
  }

  /* Cards / overlays */
  .card,
  .modal-content,
  .dropdown-menu,
  .toast,
  .popover {
    border: var(--b-ctrl) solid var(--ctrl-border) !important;
    background: #fff;
    box-shadow: var(--elev-1) !important;
  }
  .card:hover,
  .dropdown-menu.show,
  .toast:hover,
  .modal-content:focus-within,
  .popover:focus-within { box-shadow: var(--elev-2) !important; }

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

  /* Tooltips/popovers */
  .tooltip .tooltip-inner {
    border: var(--b-ctrl) solid var(--ctrl-border);
    background: #222;
    color: #fff;
  }
  .tooltip .tooltip-arrow { display: none; }

  /* Dropdown items */
  .dropdown-menu .dropdown-item { border-radius: 0 !important; }
  .dropdown-menu .dropdown-item:active {
    background-color: color-mix(in srgb, currentColor 16%, #fff) !important;
  }

  /* =========================================================
     TYPOGRAPHY-ADJACENT (no font change here by design)
  ========================================================= */
  .breadcrumb {
    border: var(--b-ctrl) solid var(--ctrl-border);
    background: #fff;
    padding: .5rem .75rem;
  }
  .breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #8a8f95; }

  /* Helpful brand-safe utilities (non-global <a>) */
  .text-primary { color: var(--primary) !important; }
  a.link-primary { color: var(--primary) !important; }
  a.link-primary:hover { color: var(--primary-dark, #0c1e48) !important; }

  /* =========================================================
     FORMS — full box borders, square
  ========================================================= */
  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: 0 !important;
    box-shadow: none !important;
    padding-inline: .75rem;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
  }
  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;
    box-shadow: 0 0 0 var(--focus-halo) color-mix(in srgb, currentColor 14%, transparent) !important;
    outline: none !important;
  }

  .form-control-plaintext { border-radius: 0 !important; }

  /* Input groups — one box, inner seams removed */
  .input-group {
    border: var(--b-ctrl) solid var(--ctrl-border) !important;
    background: var(--ctrl-bg) !important;
    border-radius: 0 !important;
  }
  .input-group:hover { border-color: var(--ctrl-border-hover) !important; }
  .input-group:focus-within {
    border-color: currentColor !important;
    box-shadow: 0 0 0 var(--focus-halo) color-mix(in srgb, currentColor 14%, transparent) !important;
  }
  .input-group .form-control,
  .input-group .form-select,
  .input-group .input-group-text,
  .input-group .btn {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Checks / radios */
  .form-check-input {
    border-radius: 0 !important;
    border: var(--b-ctrl) solid var(--ctrl-border) !important;
    box-shadow: none !important;
    width: 1rem; height: 1rem;
  }
  .form-check-input:hover { border-color: var(--ctrl-border-hover) !important; }
  .form-check-input:focus {
    box-shadow: 0 0 0 var(--focus-halo) color-mix(in srgb, currentColor 14%, transparent) !important;
  }

  /* Switch */
  .form-switch .form-check-input {
    width: 2.25rem; height: 1.25rem;
    background-color: #f8f9fa;
    border: var(--b-ctrl) solid var(--ctrl-border) !important;
  }

  /* Select2 bridge — square controls */
  .select2-container .select2-selection--single,
  .select2-container .select2-selection--multiple {
    border: var(--b-ctrl) solid var(--ctrl-border) !important;
    background: var(--ctrl-bg) !important;
    border-radius: 0 !important;
    min-height: 2.375rem;
    padding: .35rem .75rem;
    display: flex;
    align-items: center;
    gap: .35rem;
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    color: inherit;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
  }
  .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;
    right: .5rem;
    top: 0;
  }

  /* 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 .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: 0 !important;
    border: var(--b-ctrl) solid var(--ctrl-border) !important;
    background: rgba(255,255,255,.9);
    padding: .15rem .45rem;
  }
  .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;
  }
  .select2-dropdown {
    border: var(--b-ctrl) solid var(--ctrl-border) !important;
    border-radius: 0 !important;
    box-shadow: var(--elev-1) !important;
    background: #fff !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: .6rem !important;
  }
  .modal .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
    margin-top: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  /* Daterangepicker / flatpickr bridges */
  .daterangepicker, .flatpickr-calendar {
    border: var(--b-ctrl) solid var(--ctrl-border) !important;
    border-radius: 0 !important;
    box-shadow: var(--elev-1) !important;
  }

  /* =========================================================
     BUTTONS — square, light-outline, brand on primary
  ========================================================= */
  .btn {
    border-width: var(--b-ctrl) !important;
    transition: transform .1s ease, box-shadow .2s ease, border-color .2s;
  }
  .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 var(--focus-halo) color-mix(in srgb, currentColor 14%, transparent) !important; }

  .btn.btn-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(--primary-dark, #0c1e48) !important;
    border-color: var(--primary-dark, #0c1e48) !important;
    color: var(--primary-text, #fff) !important;
  }

  .btn[class*="btn-outline-"] { background: transparent !important; }
  .btn-group .btn + .btn { margin-left: -1px; }

  /* =========================================================
     NAV — TABS & PILLS (square), brand when active
  ========================================================= */
  .nav-pills .nav-link {
    border: var(--b-ctrl) solid transparent !important;
    border-radius: 0 !important;
    transition: background-color .2s, border-color .2s, color .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 var(--ctrl-border); }
  .nav-tabs .nav-link {
    border: var(--b-ctrl) solid var(--ctrl-border) !important;
    background: #fff !important;
    border-radius: 0 !important;
    margin-right: .25rem;
  }
  .nav-tabs .nav-link:hover { border-color: var(--ctrl-border-hover) !important; }
  .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: var(--b-ctrl) solid var(--dt-page-brd) !important;
    background: #fff !important;
    padding: .4rem .7rem;
    transition: color .2s, background-color .2s, border-color .2s;
  }
  .pagination .page-link:hover{
    border-color: var(--dt-page-brd-hover) !important;
    background: color-mix(in srgb, currentColor 8%, #fff) !important;
  }
  .pagination .page-item.active .page-link{
    border-color: var(--primary) !important;
    background: var(--primary) !important;
    color: var(--primary-text, #fff) !important;
  }

  /* =========================================================
     LIST GROUPS
  ========================================================= */
  .list-group-item{
    border: var(--b-ctrl) solid var(--ctrl-border) !important;
    background: #fff !important;
  }
  .list-group-item + .list-group-item{ border-top-width: 0 !important; }
  .list-group-item.active{
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-text, #fff) !important;
  }

  /* =========================================================
     ALERTS / BADGES / TOASTS
  ========================================================= */
  /* Neutral alert look ONLY when no contextual class is present */
  .alert:not(.alert-primary):not(.alert-secondary):not(.alert-success):not(.alert-danger):not(.alert-warning):not(.alert-info):not(.alert-light):not(.alert-dark){
    border: var(--b-ctrl) solid var(--ctrl-border) !important;
    background: #fff !important;
  }
  /* Keep your brand-safe primary override */
  .alert-primary{
    background-color: var(--primary) !important;
    color: var(--primary-text, #fff) !important;
    border-color: var(--primary) !important;
  }
  .badge{ border: var(--b-ctrl) solid transparent; }
  .badge.bg-primary, .badge-primary{
    background-color: var(--primary) !important;
    color: var(--primary-text, #fff) !important;
  }
  /* ensure links inside contextual alerts remain legible */
  .alert a { color: currentColor; text-decoration: underline; }

  /* Toasts */
  .toast{
    border: var(--b-ctrl) solid var(--ctrl-border) !important;
    background: #fff;
  }
  .toast .toast-header{ border-bottom: var(--b-ctrl) solid var(--ctrl-border) !important; }

  /* =========================================================
     PROGRESS
  ========================================================= */
  .progress{
    background-color: #f1f3f5 !important;
    border: var(--b-ctrl) solid var(--ctrl-border) !important;
  }
  .progress .bg-primary{ background-color: var(--primary) !important; }

  /* =========================================================
     TABLES (generic)
  ========================================================= */
  .table{
    background: #fff;
    border: var(--b-ctrl) solid var(--ctrl-border);
  }
  .table thead th{ border-bottom: var(--b-ctrl) solid var(--ctrl-border) !important; }
  .table td, .table th{ border-top: var(--b-ctrl) solid var(--ctrl-border) !important; }
  .table-hover tbody tr:hover{ background-color: rgba(0,0,0,.02) !important; }

  /* =========================================================
     DATATABLES — outer frame + tiled grid + controls
  ========================================================= */
  table.dataTable,
  table.table.dataTable{
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: var(--b-ctrl) solid var(--ctrl-border) !important; /* thin, light frame */
    border-radius: 0 !important;
    overflow: hidden;
    box-shadow: var(--elev-1);
  }

  /* Header cells (grid) — avoid double line with outer frame */
  table.dataTable thead th,
  table.dataTable thead td{
    border-top: 0 !important;
    border-bottom: var(--b-ctrl) solid var(--ctrl-border) !important;
    border-right: var(--b-ctrl) solid var(--ctrl-border) !important;
    background: #fff;
  }
  table.dataTable thead th:last-child,
  table.dataTable thead td:last-child{ border-right: none !important; }

  /* Body cells (grid) */
  table.dataTable tbody td{
    border-top: var(--b-ctrl) solid var(--ctrl-border) !important;
    border-right: var(--b-ctrl) solid var(--ctrl-border) !important;
  }
  table.dataTable tbody tr:first-child td{ border-top: 0 !important; }
  table.dataTable tbody td:last-child{ border-right: none !important; }
  table.dataTable tbody tr:last-child td{ border-bottom: var(--b-ctrl) solid var(--ctrl-border) !important; }

  /* Wrappers (scroll/responsive) keep the light box look */
  .dataTables_wrapper .dataTables_scroll,
  .dataTables_wrapper .dataTables_scrollHead,
  .dataTables_wrapper .dataTables_scrollBody{
    border: var(--b-ctrl) solid var(--ctrl-border) !important;
    border-radius: 0 !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;
  }

  /* Length select & Search input */
  .dataTables_length select,
  .dataTables_filter input{
    border: var(--b-ctrl) solid var(--ctrl-border) !important;
    border-radius: 0 !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: var(--ctrl-border-hover) !important; }
  .dataTables_length select:focus,
  .dataTables_filter input:focus{
    border-color: currentColor !important;
    box-shadow: 0 0 0 var(--focus-halo) color-mix(in srgb, currentColor 14%, transparent) !important;
    outline: none !important;
  }
  .dataTables_info{ margin-top: .25rem !important; }

  /* When a DataTable sits inside a card, let the table show its own frame */
  .card table.dataTable{ box-shadow: none !important; }

  /* DataTables pager — thin, light borders; current = brand */
  .dataTables_wrapper .dataTables_paginate .paginate_button{
    border-radius: 0 !important;
    border: var(--dt-page-brd-w) solid var(--dt-page-brd) !important;
    background: #fff !important;
    color: var(--primary) !important;
    padding: .35rem .6rem;
    transition: color .2s, background-color .2s, border-color .2s;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button:hover{
    border-color: var(--dt-page-brd-hover) !important;
    background: color-mix(in srgb, currentColor 8%, #fff) !important;
    color: var(--primary-dark, #0c1e48) !important;
  }
  .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;
  }
  .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: 0 !important;
    border: var(--dt-page-brd-w) solid var(--dt-page-brd) !important;
    background: #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;
  }

  /* =========================================================
     ADMINLTE SIDEBAR (shape-only; no color)
  ========================================================= */
  .main-sidebar,
  .sidebar {
    border-right: var(--b-ctrl) solid var(--ctrl-border) !important; /* subtle partition */
  }
  .nav-sidebar .nav-item > .nav-link{
    border-radius: 0 !important;
    transition: background-color .2s, color .2s;
  }
  .nav-sidebar .nav-item > .nav-link:hover{ background: rgba(0,0,0,.04); }
  .nav-sidebar .nav-item > .nav-link.active{
    background: var(--primary) !important;
    color: var(--primary-text, #fff) !important;
  }

  /* =========================================================
     TILE COMPONENT — square variant (matches this theme)
  ========================================================= */
  .tile{
    display:flex; flex-direction:column; gap: var(--tile-gap);
    background: var(--tile-bg);
    border: var(--b-ctrl) solid var(--tile-brd);
    border-radius: 0;
    box-shadow: var(--elev-1);
    padding: var(--tile-padding);
    transition: box-shadow .2s, border-color .2s, transform .1s;
  }
  .tile:hover{ box-shadow: var(--elev-2); border-color: var(--tile-brd-hover); }
  .tile:focus-within{
    box-shadow: 0 0 0 var(--focus-halo) color-mix(in srgb, currentColor 14%, transparent), var(--elev-2);
    outline: none;
  }
  .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__footer{ margin-top:auto; display:flex; align-items:center; gap:.5rem; color: var(--tile-muted); font-size:.875rem; }
  .tile--clickable{ cursor:pointer; color:inherit; text-decoration:none; }
  .tile--clickable:hover{ transform: translateY(-1px); }

  /* Brand variants */
  .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); }
  .tile--primary{
    background: var(--primary) !important;
    color: var(--primary-text, #fff) !important;
    border-color: var(--primary) !important;
  }

  /* AdminLTE small-box/info-box bridges */
  .small-box, .info-box{
    border: var(--b-ctrl) solid var(--tile-brd) !important;
    box-shadow: var(--elev-1) !important;
  }
  .small-box:hover, .info-box:hover{
    box-shadow: var(--elev-2) !important; border-color: var(--tile-brd-hover) !important;
  }
  .small-box.bg-primary, .info-box.bg-primary{
    background: var(--primary) !important;
    color: var(--primary-text, #fff) !important;
    border-color: var(--primary) !important;
  }

  /* =========================================================
     MISC
  ========================================================= */
  .progress,
  .badge,
  .alert,
  .dropdown-menu,
  .toast,
  .modal-content,
  .card { background-clip: padding-box !important; } /* crisp borders */

  ::selection{ background-color: rgba(0,0,0,.08); color: inherit; }
/* TR notify theming (modern) */
:root{
  --tr-toast-radius: 10px;
  --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: #0bb3d9;  /* vivid cyan */
  --tr-toast-info-header-fg: #002a33;
  --tr-toast-info-border: #0bb3d9;
  --tr-toast-info-icon: #0bb3d9;

  --tr-toast-success-header-bg: #16a060; /* vivid green */
  --tr-toast-success-header-fg: #ffffff;
  --tr-toast-success-border: #16a060;
  --tr-toast-success-icon: #16a060;

  --tr-toast-warn-header-bg: #ffb21a; /* vivid amber */
  --tr-toast-warn-header-fg: #212529;
  --tr-toast-warn-border: #ffb21a;
  --tr-toast-warn-icon: #b37800;

  --tr-toast-error-header-bg: #e0314b; /* vivid red */
  --tr-toast-error-header-fg: #ffffff;
  --tr-toast-error-border: #e0314b;
  --tr-toast-error-icon: #e0314b;
}