/* ==========================================================================
   List pages
   --------------------------------------------------------------------------
   Scoped to `.rd-page`, which a page opts into on its own wrapper, so nothing
   here reaches a page that has not been reworked. Same tokens as the counter,
   the sidebar, the header and the dashboard.

   Nothing here changes behaviour: the widget, DataTables and every row action
   keep their own markup and hooks.
   ========================================================================== */

.rd-page {
  --rp-surface:    #FFFFFF;
  --rp-surface-2:  #F5F7FB;
  --rp-line:       #E4EAF2;
  --rp-line-soft:  #EDF1F7;
  --rp-text:       #101828;
  --rp-text-2:     #5A6779;
  --rp-text-3:     #8A94A6;
  --rp-brand:      var(--theme-700, #004EEB);
  --rp-brand-wash: color-mix(in srgb, var(--theme-700, #004EEB) 9%, #FFFFFF);
  --rp-danger:     #D92D20;
  --rp-radius:     14px;
  --rp-ease:       cubic-bezier(.4, 0, .2, 1);
  /* Figures in a readable sans with even-width digits. This was IBM Plex Mono,
     which only the POS loaded; everywhere else it fell back to Courier New. */
  --rp-mono: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ==========================================================================
   1. Page head
   --------------------------------------------------------------------------
   An icon to say where you are, the title, what the page is for, and the
   count once the table knows it. It arrives ahead of the panel below it.
   ========================================================================== */

.rd-page .rd-page-head {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 14px 14px 12px;
  padding: 18px 20px;
  overflow: hidden;
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-radius);
  background: var(--rp-surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 30px -22px rgba(16, 24, 40, .5);
  animation: rd-page-rise .5s var(--rp-ease) backwards;
}

/* A band of the business colour down the leading edge, with a light running
   the length of it, so the card is this product's rather than a white
   rectangle. */
.rd-page .rd-page-head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  z-index: 2;
  background:
    linear-gradient(180deg, transparent, #FFFFFF, transparent) no-repeat,
    linear-gradient(180deg, var(--rp-brand), color-mix(in srgb, var(--rp-brand) 30%, transparent));
  background-size: 100% 40%, 100% 100%;
  animation: rd-head-edge 7s linear infinite;
}

/* A wash of the business colour that breathes in the far corner. */
.rd-page .rd-page-head::after {
  content: "";
  position: absolute;
  top: -55%;
  right: -6%;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--rp-brand) 13%, transparent), transparent 62%);
  animation: rd-head-breathe 9s var(--rp-ease) infinite;
}

/* The wash is scenery; everything in the card sits over it. */
.rd-page .rd-page-head > * { position: relative; z-index: 1; }

@keyframes rd-head-edge {
  0%   { background-position: 0 -45%, 0 0; }
  100% { background-position: 0 145%, 0 0; }
}
@keyframes rd-head-breathe {
  0%, 100% { transform: scale(1) translate(0, 0); opacity: .85; }
  50%      { transform: scale(1.14) translate(-12px, 10px); opacity: 1; }
}

.rd-page .rd-page-icon {
  width: 46px;
  height: 46px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: var(--rp-brand-wash);
  color: var(--rp-brand);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rp-brand) 16%, transparent);
  transition: transform .25s var(--rp-ease), box-shadow .25s var(--rp-ease);
  animation: rd-head-icon 5.5s var(--rp-ease) infinite;
}
.rd-page .rd-page-icon svg { width: 24px; height: 24px; }

@keyframes rd-head-icon {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.rd-page .rd-page-head:hover .rd-page-icon {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rp-brand) 30%, transparent),
              0 10px 20px -12px var(--rp-brand);
}

.rd-page .rd-page-titles { min-width: 0; }
.rd-page .rd-page-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--rp-text);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.rd-page .rd-page-sub {
  margin: 4px 0 0;
  color: var(--rp-text-2);
  font-size: 13px;
}

/* The count only appears once the table has one to report. */
.rd-page .rd-page-count {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--rp-surface-2);
  color: var(--rp-text-2);
  font-family: var(--rp-mono);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .3s var(--rp-ease), transform .3s var(--rp-ease);
}
.rd-page .rd-page-count.is-known { opacity: 1; transform: translateY(0); }

.rd-page .rd-page-actions { margin-left: auto; display: flex; gap: 10px; }

/* The one primary action on the page. */
.rd-page .rd-page-add {
  height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--rp-brand);
  box-shadow: 0 10px 24px -12px var(--rp-brand);
  color: #fff !important;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform .2s var(--rp-ease), box-shadow .2s var(--rp-ease), filter .2s var(--rp-ease);
}
.rd-page .rd-page-add:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -12px var(--rp-brand);
}
.rd-page .rd-page-add:active { transform: translateY(0); }
.rd-page .rd-page-add svg { width: 18px; height: 18px; transition: transform .25s var(--rp-ease); }
.rd-page .rd-page-add:hover svg { transform: rotate(90deg); }
/* The turn suits a plus or a refresh arrow. A button carrying a picture of
   something — a banknote, a document — asks for .rd-still instead. */
.rd-page .rd-page-add.rd-still:hover svg { transform: none; }

/* ==========================================================================
   2. The panel
   ========================================================================== */

.rd-page .rd-panel {
  border-radius: var(--rp-radius) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px -20px rgba(16, 24, 40, .4) !important;
  --tw-ring-color: var(--rp-line) !important;
  animation: rd-page-rise .5s .08s var(--rp-ease) backwards;
}
.rd-page .rd-panel .box-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 4px;
  border: 0;
}
.rd-page .rd-panel .box-title {
  margin: 0;
  color: var(--rp-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.rd-page .rd-panel .box-tools { margin-left: auto; }

@keyframes rd-page-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* DataTables sets the table's width in a style attribute from its own
   measurement, which lands a pixel over the box it sits in and puts a
   scrollbar under a table that fits. A reworked page's table fits by
   definition, so it is held to its container. */
.rd-page .table-responsive > .dataTables_wrapper { max-width: 100%; }
/* DataTables itself sets `max-width: none !important` on its tables, so this
   has to answer in kind. */
.rd-page .table-responsive table.dataTable { max-width: 100% !important; }

/* ==========================================================================
   3. Rows
   --------------------------------------------------------------------------
   Rows arrive one after another on every draw, so sorting, searching and
   paging all read as the table answering rather than swapping underneath.
   ========================================================================== */

.rd-page .table > tbody > tr { animation: rd-row-in .34s var(--rp-ease) backwards; }
.rd-page .table > tbody > tr:nth-child(1)  { animation-delay: .02s; }
.rd-page .table > tbody > tr:nth-child(2)  { animation-delay: .05s; }
.rd-page .table > tbody > tr:nth-child(3)  { animation-delay: .08s; }
.rd-page .table > tbody > tr:nth-child(4)  { animation-delay: .11s; }
.rd-page .table > tbody > tr:nth-child(5)  { animation-delay: .14s; }
.rd-page .table > tbody > tr:nth-child(6)  { animation-delay: .17s; }
.rd-page .table > tbody > tr:nth-child(7)  { animation-delay: .20s; }
.rd-page .table > tbody > tr:nth-child(8)  { animation-delay: .23s; }
.rd-page .table > tbody > tr:nth-child(9)  { animation-delay: .26s; }
.rd-page .table > tbody > tr:nth-child(n+10) { animation-delay: .29s; }

@keyframes rd-row-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hovering a row marks it down the leading edge as well as tinting it. */
.rd-page .table > tbody > tr > td:first-child {
  box-shadow: inset 2px 0 0 transparent;
  transition: box-shadow .16s var(--rp-ease);
}
.rd-page .table > tbody > tr:hover > td:first-child { box-shadow: inset 2px 0 0 var(--rp-brand); }

/* ==========================================================================
   4. What a cell can hold
   ========================================================================== */

/* A person: their initials, then who they are. */
.rd-page .rp-user { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.rd-page .rp-avatar {
  width: 32px;
  height: 32px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rp-brand), color-mix(in srgb, var(--rp-brand) 55%, #7A5AF8));
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: transform .18s var(--rp-ease);
}
.rd-page .table > tbody > tr:hover .rp-avatar { transform: scale(1.06); }
.rd-page .rp-user-name { color: var(--rp-text); font-weight: 600; }

/* A role, or any other single word that classifies a row. */
.rd-page .rp-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--rp-brand-wash);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rp-brand) 18%, transparent);
  color: var(--rp-brand);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.rd-page .rp-email {
  color: var(--rp-text-2) !important;
  font-family: var(--rp-mono);
  font-size: 12px;
  text-decoration: none !important;
  transition: color .15s var(--rp-ease);
}
.rd-page .rp-email:hover { color: var(--rp-brand) !important; }

.rd-page .rp-muted { color: var(--rp-text-3); }

/* ==========================================================================
   5. Row actions
   --------------------------------------------------------------------------
   These arrive from the controller as outline buttons in three colours. They
   become one quiet set, with only the destructive one keeping its colour, and
   that only once you are on it.
   ========================================================================== */

.rd-page .table td .tw-dw-btn,
.rd-page .table td .btn {
  height: 30px;
  min-height: 30px;
  padding: 0 11px !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--rp-line) !important;
  border-radius: 9px !important;
  background: var(--rp-surface) !important;
  box-shadow: none !important;
  color: var(--rp-text-2) !important;
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  transition: transform .16s var(--rp-ease), border-color .16s var(--rp-ease),
              background .16s var(--rp-ease), color .16s var(--rp-ease);
}
.rd-page .table td .tw-dw-btn:hover,
.rd-page .table td .btn:hover {
  border-color: var(--rp-brand) !important;
  background: var(--rp-brand-wash) !important;
  color: var(--rp-brand) !important;
  transform: translateY(-1px);
}
.rd-page .table td .tw-dw-btn svg,
.rd-page .table td .btn svg,
.rd-page .table td .tw-dw-btn i,
.rd-page .table td .btn i { font-size: 12px; opacity: .85; }

/* Deleting is the one action that should look like what it does. */
.rd-page .table td .delete_user_button:hover,
.rd-page .table td .tw-dw-btn-error:hover,
.rd-page .table td .btn-danger:hover {
  border-color: var(--rp-danger) !important;
  background: color-mix(in srgb, var(--rp-danger) 8%, #FFFFFF) !important;
  color: var(--rp-danger) !important;
}

.rd-page .table td .tw-dw-btn + .tw-dw-btn,
.rd-page .table td .btn + .btn { margin-left: 6px; }

@media (max-width: 767px) {
  .rd-page .rd-page-head { padding: 14px; gap: 12px; }
  .rd-page .rd-page-title { font-size: 20px; }
  .rd-page .rd-page-actions { width: 100%; margin-left: 0; }
  .rd-page .rd-page-add { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .rd-page .rd-page-head,
  .rd-page .rd-page-head::before,
  .rd-page .rd-page-head::after,
  .rd-page .rd-page-icon,
  .rd-page .rd-panel,
  .rd-page .table > tbody > tr { animation: none !important; }
}

/* ==========================================================================
   6. The row menu
   --------------------------------------------------------------------------
   One control per row. The menu is placed by the page's own script and sits
   fixed, because the table sets overflow hidden and its scroller sets auto,
   and either one would cut the menu off.
   ========================================================================== */

.rd-page .rp-menu { position: static; }

.rd-page .table td .rp-kebab {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--rp-text-3);
  cursor: pointer;
  transition: background .16s var(--rp-ease), color .16s var(--rp-ease), border-color .16s var(--rp-ease), transform .16s var(--rp-ease);
}
.rd-page .table td .rp-kebab svg { width: 18px; height: 18px; }
.rd-page .table td .rp-kebab:hover,
.rd-page .table td .rp-kebab:focus-visible,
.rd-page .table td .open > .rp-kebab {
  outline: none;
  border-color: var(--rp-line);
  background: var(--rp-surface-2);
  color: var(--rp-brand);
}
.rd-page .table td .open > .rp-kebab { transform: rotate(90deg); }

/* Hovering the row is what offers the menu; it stays put for the keyboard. */
.rd-page .table td .rp-kebab { opacity: .55; }
.rd-page .table > tbody > tr:hover .rp-kebab,
.rd-page .table td .rp-kebab:focus-visible,
.rd-page .table td .open > .rp-kebab { opacity: 1; }

.rd-page .rp-menu-list {
  position: fixed;
  /* dropdown-menu-right pins the right edge; the script sets the left one, and
     with both set the menu would stretch between them. */
  right: auto !important;
  width: max-content;
  min-width: 178px;
  max-width: 260px;
  margin: 0;
  padding: 6px !important;
  border: 1px solid var(--rp-line) !important;
  border-radius: 12px !important;
  background: var(--rp-surface);
  box-shadow: 0 22px 44px -20px rgba(16, 24, 40, .45) !important;
  animation: rp-menu-in .16s var(--rp-ease);
}
@keyframes rp-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.rd-page .rp-menu-list > li { display: block; }
.rd-page .rp-menu-list > li > a,
.rd-page .rp-menu-list > li > button {
  width: 100%;
  padding: 8px 10px !important;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--rp-text-2) !important;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .14s var(--rp-ease), color .14s var(--rp-ease), transform .14s var(--rp-ease);
}
.rd-page .rp-menu-list > li > a:hover,
.rd-page .rp-menu-list > li > button:hover {
  background: var(--rp-brand-wash);
  color: var(--rp-brand) !important;
  transform: translateX(2px);
}
.rd-page .rp-menu-list svg { width: 17px; height: 17px; flex: none; opacity: .9; }

.rd-page .rp-menu-sep {
  height: 1px;
  margin: 5px 4px;
  background: var(--rp-line-soft);
}

.rd-page .rp-menu-list > li > .rp-menu-danger:hover {
  background: color-mix(in srgb, var(--rp-danger) 9%, #FFFFFF);
  color: var(--rp-danger) !important;
}

/* ==========================================================================
   7. Forms
   --------------------------------------------------------------------------
   Every field on these pages is a Bootstrap control, some of them wrapped by
   iCheck or Select2. None of that markup changes; the controls just stop
   looking like 2014.
   ========================================================================== */

.rd-page .form-group { margin-bottom: 16px; }

.rd-page label,
.rd-page .control-label {
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rp-text-2);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
}

.rd-page .form-control {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--rp-line);
  border-radius: 10px;
  background: var(--rp-surface);
  box-shadow: none;
  color: var(--rp-text);
  font-size: 13.5px;
  transition: border-color .16s var(--rp-ease), box-shadow .16s var(--rp-ease), background .16s var(--rp-ease);
}
.rd-page textarea.form-control { height: auto; padding: 10px 12px; }
.rd-page .form-control:hover { border-color: color-mix(in srgb, var(--rp-brand) 40%, var(--rp-line)); }
.rd-page .form-control:focus {
  border-color: var(--rp-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rp-brand) 14%, transparent);
  outline: none;
}
.rd-page .form-control::placeholder { color: var(--rp-text-3); }
.rd-page .form-control[readonly],
.rd-page .form-control[disabled] { background: var(--rp-surface-2); color: var(--rp-text-2); }

/* A required field says so without shouting. */
.rd-page .form-control:required { background-image: none; }

.rd-page .help-block {
  margin: 6px 0 0;
  color: var(--rp-text-3);
  font-size: 11.5px;
}
.rd-page .help-block.text-danger,
.rd-page label.error { color: var(--rp-danger) !important; font-weight: 500; }
.rd-page .form-control.error { border-color: var(--rp-danger); }

/* Native selects get the chevron the rest of the app uses. */
.rd-page select.form-control {
  padding-right: 34px;
  -webkit-appearance: none;
  appearance: none;
  background-image: var(--rp-caret);
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px 15px;
}
.rd-page { --rp-caret: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A94A6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }

/* Select2, matched to the plain controls beside it. */
.rd-page .select2-container--default .select2-selection--single {
  height: 40px !important;
  border: 1px solid var(--rp-line) !important;
  border-radius: 10px !important;
  background: var(--rp-surface) !important;
  transition: border-color .16s var(--rp-ease), box-shadow .16s var(--rp-ease);
}
.rd-page .select2-container--default .select2-selection--single:hover { border-color: color-mix(in srgb, var(--rp-brand) 40%, var(--rp-line)) !important; }
.rd-page .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--rp-brand) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rp-brand) 14%, transparent);
}
.rd-page .select2-container--default .select2-selection__rendered {
  padding-left: 12px !important;
  color: var(--rp-text) !important;
  font-size: 13.5px;
  line-height: 38px !important;
}
.rd-page .select2-container--default .select2-selection__arrow { height: 38px !important; right: 8px !important; }
.rd-page .select2-container--default .select2-selection__arrow b {
  width: 15px !important;
  height: 15px !important;
  margin: -7px 0 0 -7px !important;
  border: 0 !important;
  background: var(--rp-caret) center / 15px 15px no-repeat;
}
.rd-page .select2-container--default .select2-selection--multiple {
  min-height: 40px;
  border: 1px solid var(--rp-line) !important;
  border-radius: 10px !important;
}
.rd-page .select2-container--default .select2-selection__choice {
  margin: 5px 4px 0 0;
  padding: 2px 9px;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--rp-brand-wash) !important;
  color: var(--rp-brand);
  font-size: 12px;
  font-weight: 600;
}

/* An input with a suffix reads as one control. */
/* A control and whatever sits against it — an icon, a unit, a button — read
   as one control. Which end each piece is on decides which corners it keeps
   and which border it gives up; the old rules assumed every addon was a
   suffix, so a leading icon was rounded on the wrong side and met the field
   at a curve instead of joining it. */
.rd-page .input-group-addon {
  padding: 0 12px;
  border: 1px solid var(--rp-line);
  background: var(--rp-surface-2);
  color: var(--rp-text-2);
  font-size: 12.5px;
  white-space: nowrap;
}
.rd-page .input-group > * { border-radius: 0; }
.rd-page .input-group > :first-child,
.rd-page .input-group > :first-child > .select2-selection,
.rd-page .input-group > .input-group-btn:first-child > .btn {
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
}
.rd-page .input-group > :last-child,
.rd-page .input-group > :last-child > .select2-selection,
.rd-page .input-group > .input-group-btn:last-child > .btn {
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}
/* Only one line is drawn where two pieces meet. */
.rd-page .input-group > .input-group-addon:not(:last-child) { border-right: 0; }
.rd-page .input-group > .input-group-addon:not(:first-child) { border-left: 0; }
.rd-page .input-group > .form-control:not(:first-child),
.rd-page .input-group > .select2-container:not(:first-child) .select2-selection { border-left: 0 !important; }

/* Focus belongs to the whole control, not to the half of it you are typing in. */
.rd-page .input-group:focus-within { border-radius: 10px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--rp-brand) 14%, transparent); }
.rd-page .input-group:focus-within > .input-group-addon,
.rd-page .input-group:focus-within > .form-control { border-color: var(--rp-brand); }
.rd-page .input-group > .form-control:focus { box-shadow: none; }

/* Before iCheck runs, the browser paints its own checkbox: an operating
   system square where a rounded brand box is about to be. It is only a tenth
   of a second, but it is the page changing under you. These give the plain
   input the same shape it is about to be given, so there is nothing to see
   when the swap happens. Once iCheck has run it sets the input to
   position: absolute and opacity: 0, and none of this shows any more. */
.rd-page input[type="checkbox"].input-icheck,
.rd-page input[type="radio"].input-icheck {
  width: 19px;
  height: 19px;
  margin: 0;
  flex: none;
  -webkit-appearance: none;
  appearance: none;
  border: 1.5px solid var(--rp-line);
  border-radius: 6px;
  background: var(--rp-surface) no-repeat center / 11px 11px;
  vertical-align: middle;
}
.rd-page input[type="radio"].input-icheck { border-radius: 999px; }
.rd-page input[type="checkbox"].input-icheck:checked,
.rd-page input[type="radio"].input-icheck:checked {
  border-color: var(--rp-brand);
  background-color: var(--rp-brand);
}
.rd-page input[type="checkbox"].input-icheck:checked {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l5 5 9-11'/%3E%3C/svg%3E");
}
.rd-page input[type="radio"].input-icheck:checked {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5' fill='white'/%3E%3C/svg%3E");
}

/* iCheck draws a sprite; this draws a box instead. */
.rd-page .checkbox,
.rd-page .radio { margin: 0 0 10px; padding: 0; }
.rd-page .checkbox label,
.rd-page .radio label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  color: var(--rp-text);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
.rd-page [class*="icheckbox_"],
.rd-page [class*="iradio_"] {
  width: 19px !important;
  height: 19px !important;
  flex: none;
  border: 1.5px solid var(--rp-line);
  border-radius: 6px;
  background: var(--rp-surface) !important;
  background-image: none !important;
  transition: border-color .16s var(--rp-ease), background .16s var(--rp-ease), transform .16s var(--rp-ease);
}
.rd-page [class*="iradio_"] { border-radius: 999px; }
.rd-page [class*="icheckbox_"]:hover,
.rd-page [class*="iradio_"]:hover { border-color: var(--rp-brand); }
.rd-page [class*="icheckbox_"].checked,
.rd-page [class*="iradio_"].checked {
  border-color: var(--rp-brand);
  background: var(--rp-brand) !important;
}
/* The tick, drawn rather than fetched. */
.rd-page [class*="icheckbox_"].checked::after {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.rd-page [class*="iradio_"].checked::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 4.5px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #fff;
}
.rd-page [class*="icheckbox_"].disabled,
.rd-page [class*="iradio_"].disabled { opacity: .5; }

/* The little blue "i" beside a label, quietened. */
.rd-page .fa-info-circle.text-info,
.rd-page .hover-q { color: var(--rp-text-3) !important; font-size: 12px; transition: color .15s var(--rp-ease); }
.rd-page .fa-info-circle.text-info:hover,
.rd-page .hover-q:hover { color: var(--rp-brand) !important; }

/* A section inside a form: its title leads with a mark in the business colour. */
.rd-page .box-title::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 14px;
  margin-right: 9px;
  border-radius: 2px;
  background: var(--rp-brand);
  vertical-align: -2px;
}
.rd-page h4 {
  margin: 0 0 10px;
  color: var(--rp-text);
  font-size: 14px;
  font-weight: 600;
}
/* A widget may be given an icon of its own, which the component prints ahead
   of the title. Left alone it reads as a stray glyph outside the mark, so it
   takes the mark's place and the title drops it. */
.rd-page .box-header > i:first-child,
.rd-page .box-header > svg:first-child {
  margin-right: 9px;
  color: var(--rp-brand);
  font-size: 13px;
  vertical-align: -1px;
}
.rd-page .box-header > i:first-child + .box-title::before,
.rd-page .box-header > svg:first-child + .box-title::before { display: none; }


/* ==========================================================================
   8. Saving
   --------------------------------------------------------------------------
   The save button used to sit at the bottom of a long form, centred, where
   you had to scroll to find it. It now rides with you.
   ========================================================================== */

/* The layout's scroll container is `overflow: auto` but grows past its own
   height, so the page scrolls on the body while that container never does.
   A sticky element measures itself against the nearest scrollport, which
   would be that container, where it has nothing to stick to. Opening it up on
   these pages hands the job to the page scroll, where the bar can hold. */
body:has(.rd-page) #scrollable-container { overflow: visible; }

.rd-page .rd-form-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Out to the edges of the content area: the form sits inside the 15px
     padding that AdminLTE gives .content, and the bar steps back out of it so
     it spans the page rather than floating inside the form. */
  margin: 10px -15px 0;
  padding: 12px 22px;
  border: 0;
  border-top: 1px solid var(--rp-line);
  border-radius: 0;
  background: color-mix(in srgb, #FFFFFF 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 -6px 18px -12px rgba(16, 24, 40, .35);
}
.rd-page .rd-form-note { color: var(--rp-text-3); font-size: 12.5px; }
.rd-page .rd-form-bar .rd-form-actions { margin-left: auto; display: flex; gap: 10px; }

.rd-page .rd-btn-save {
  height: 40px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--rp-brand);
  box-shadow: 0 10px 24px -12px var(--rp-brand);
  color: #fff !important;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .18s var(--rp-ease), box-shadow .18s var(--rp-ease), filter .18s var(--rp-ease);
}
.rd-page .rd-btn-save:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -12px var(--rp-brand);
}
.rd-page .rd-btn-save:active { transform: translateY(0); }
.rd-page .rd-btn-save svg { width: 17px; height: 17px; }

.rd-page .rd-btn-quiet {
  height: 40px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--rp-line);
  border-radius: 10px;
  background: var(--rp-surface);
  color: var(--rp-text-2) !important;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none !important;
  transition: border-color .16s var(--rp-ease), color .16s var(--rp-ease), transform .16s var(--rp-ease);
}
.rd-page .rd-btn-quiet:hover {
  border-color: var(--rp-brand);
  color: var(--rp-brand) !important;
  transform: translateY(-1px);
}
.rd-page .rd-btn-quiet svg { width: 16px; height: 16px; }

/* ==========================================================================
   9. The profile, on a user's own page
   ========================================================================== */

.rd-page .rd-profile {
  padding: 22px 20px;
  text-align: center;
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-radius);
  background: var(--rp-surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 30px -22px rgba(16, 24, 40, .5);
  animation: rd-page-rise .5s .08s var(--rp-ease) backwards;
}

.rd-page .rd-profile-face {
  width: 96px;
  height: 96px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rp-brand), color-mix(in srgb, var(--rp-brand) 55%, #7A5AF8));
  box-shadow: 0 14px 28px -14px var(--rp-brand);
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .02em;
}
.rd-page .rd-profile-face img { width: 100%; height: 100%; object-fit: cover; }

.rd-page .rd-profile-name {
  margin: 0;
  color: var(--rp-text);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.rd-page .rd-profile-role { margin: 8px 0 16px; }

/* Each fact on its own line, label left, value right. */
.rd-page .rd-profile .list-group { margin: 0 0 16px; }
.rd-page .rd-profile .list-group-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rp-line-soft) !important;
  background: transparent !important;
  font-size: 13px;
}
.rd-page .rd-profile .list-group-item:last-child { border-bottom: 0 !important; }
.rd-page .rd-profile .list-group-item b {
  color: var(--rp-text-2);
  font-size: 12.5px;
  font-weight: 600;
}
.rd-page .rd-profile .list-group-item a {
  float: none !important;
  color: var(--rp-text) !important;
  font-family: var(--rp-mono);
  font-size: 12.5px;
  text-decoration: none !important;
}
.rd-page .rd-profile .label {
  float: none !important;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.rd-page .rd-profile .label-success {
  background: color-mix(in srgb, #12B76A 12%, #FFFFFF) !important;
  color: #067647 !important;
}
.rd-page .rd-profile .label-danger {
  background: color-mix(in srgb, var(--rp-danger) 10%, #FFFFFF) !important;
  color: var(--rp-danger) !important;
}

/* ==========================================================================
   10. Tabs
   --------------------------------------------------------------------------
   Bootstrap draws these as folder tabs with a coloured lid. They become a
   quiet row with one mark under the tab you are on, which slides as you
   change tabs rather than jumping.
   ========================================================================== */

.rd-page .nav-tabs-custom {
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-radius);
  background: var(--rp-surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 30px -22px rgba(16, 24, 40, .5);
  animation: rd-page-rise .5s .12s var(--rp-ease) backwards;
}
.rd-page .nav-tabs-custom > .nav-tabs {
  margin: 0;
  padding: 4px 6px 0;
  border-bottom: 1px solid var(--rp-line);
  background: transparent;
}
.rd-page .nav-tabs-custom > .nav-tabs > li { margin: 0; border: 0 !important; }
.rd-page .nav-tabs-custom > .nav-tabs > li > a {
  position: relative;
  margin: 0;
  padding: 12px 16px !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0 !important;
  border-radius: 10px 10px 0 0;
  background: transparent !important;
  color: var(--rp-text-2) !important;
  font-size: 13.5px;
  font-weight: 600;
  transition: color .16s var(--rp-ease), background .16s var(--rp-ease);
}
.rd-page .nav-tabs-custom > .nav-tabs > li > a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--rp-brand);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .24s var(--rp-ease);
}
.rd-page .nav-tabs-custom > .nav-tabs > li > a:hover {
  background: var(--rp-surface-2) !important;
  color: var(--rp-text) !important;
}
.rd-page .nav-tabs-custom > .nav-tabs > li.active > a {
  color: var(--rp-brand) !important;
  background: transparent !important;
}
.rd-page .nav-tabs-custom > .nav-tabs > li.active > a::after { transform: scaleX(1); }
.rd-page .nav-tabs-custom > .nav-tabs > li > a i,
.rd-page .nav-tabs-custom > .nav-tabs > li > a svg { font-size: 13px; opacity: .85; }
/* Bootstrap's coloured lid above the active tab. */
.rd-page .nav-tabs-custom > .nav-tabs > li.active { border-top-color: transparent !important; }
.rd-page .nav-tabs-custom { border-top: 1px solid var(--rp-line) !important; }

.rd-page .nav-tabs-custom > .tab-content { padding: 20px; border: 0; }
.rd-page .tab-pane { animation: rd-tab-in .28s var(--rp-ease); }
@keyframes rd-tab-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Facts inside a tab: the label above what it says, and a dash where there
   is nothing to say. */
.rd-page .tab-pane p { margin: 0 0 12px; color: var(--rp-text); font-size: 13.5px; }
.rd-page .tab-pane p strong,
.rd-page .tab-pane p b {
  display: block;
  margin-bottom: 2px;
  color: var(--rp-text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rd-page .tab-pane h4 {
  margin: 20px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--rp-line-soft);
  color: var(--rp-text);
  font-size: 14px;
  font-weight: 600;
}
.rd-page .tab-pane .row:first-child h4 { margin-top: 0; padding-top: 0; border-top: 0; }
.rd-page .tab-pane hr { margin: 18px 0; border-top: 1px solid var(--rp-line-soft); }

/* ==========================================================================
   11. The confirm dialog
   --------------------------------------------------------------------------
   SweetAlert raises this one, and it is appended to the body rather than to
   the page, so it is scoped to the body instead of to .rd-page. The same
   dialog asks before every destructive action in the app, so this reaches
   all of them.
   ========================================================================== */

body:not(.pos-rd) .swal-overlay {
  background: rgba(11, 18, 32, .55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

body:not(.pos-rd) .swal-modal {
  width: 420px;
  max-width: calc(100vw - 32px);
  padding: 26px 24px 20px;
  border: 1px solid #E4EAF2;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 32px 64px -24px rgba(11, 18, 32, .5);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
body:not(.pos-rd) .swal-overlay--show-modal .swal-modal { animation: rd-swal-in .24s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes rd-swal-in {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* The warning mark, in the colour of what is about to happen. */
body:not(.pos-rd) .swal-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  border-width: 3px;
}
body:not(.pos-rd) .swal-icon--warning { border-color: #F79009; animation: rd-swal-mark .5s var(--rp-ease, cubic-bezier(.4, 0, .2, 1)); }
body:not(.pos-rd) .swal-icon--warning__body,
body:not(.pos-rd) .swal-icon--warning__dot { background-color: #F79009; }
body:not(.pos-rd) .swal-icon--success { border-color: #12B76A; }
body:not(.pos-rd) .swal-icon--error { border-color: #D92D20; }
body:not(.pos-rd) .swal-icon--error__line { background-color: #D92D20; }
@keyframes rd-swal-mark {
  0%   { transform: scale(.4); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

body:not(.pos-rd) .swal-title {
  margin: 0 0 6px;
  padding: 0;
  color: #101828;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
}
body:not(.pos-rd) .swal-text {
  margin: 0 auto 4px;
  padding: 0;
  display: block;
  max-width: 320px;
  color: #5A6779;
  font-size: 13.5px;
  line-height: 1.55;
  text-align: center;
}

body:not(.pos-rd) .swal-footer {
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid #EDF1F7;
  display: flex;
  gap: 10px;
  text-align: right;
}
body:not(.pos-rd) .swal-button-container { margin: 0; flex: 1 1 0; }
body:not(.pos-rd) .swal-button {
  width: 100%;
  height: 42px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 10px;
  box-shadow: none !important;
  font-size: 13.5px;
  font-weight: 600;
  transition: transform .16s ease, filter .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}
body:not(.pos-rd) .swal-button:not([disabled]):hover { transform: translateY(-1px); }
body:not(.pos-rd) .swal-button:active { transform: translateY(0); }

/* Backing out is the safe answer, so it reads as the plain one. */
body:not(.pos-rd) .swal-button--cancel {
  border-color: #E4EAF2;
  background: #FFFFFF !important;
  color: #5A6779 !important;
}
body:not(.pos-rd) .swal-button--cancel:not([disabled]):hover {
  border-color: #C6D0E0;
  background: #F5F7FB !important;
  color: #101828 !important;
}

body:not(.pos-rd) .swal-button--confirm {
  background: var(--theme-700, #004EEB) !important;
  box-shadow: 0 10px 24px -12px var(--theme-700, #004EEB) !important;
  color: #fff !important;
}
body:not(.pos-rd) .swal-button--confirm:not([disabled]):hover { filter: brightness(1.1); }

/* Deleting is what this dialog is usually for, and it should look like it. */
body:not(.pos-rd) .swal-button--danger,
body:not(.pos-rd) .swal-modal .swal-button--confirm.swal-button--danger {
  background: #D92D20 !important;
  box-shadow: 0 10px 24px -12px #D92D20 !important;
}

body:not(.pos-rd) .swal-content input {
  height: 40px;
  padding: 0 12px;
  border: 1px solid #E4EAF2;
  border-radius: 10px;
  font-size: 13.5px;
}
body:not(.pos-rd) .swal-content input:focus {
  border-color: var(--theme-700, #004EEB);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-700, #004EEB) 14%, transparent);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.pos-rd) .swal-overlay--show-modal .swal-modal,
  body:not(.pos-rd) .swal-icon--warning { animation: none !important; }
}

/* The person switcher in the head of a user's own page. */
.rd-page .rd-page-switch { width: 230px; max-width: 100%; }
.rd-page .rd-page-switch .select2-container { width: 100% !important; }
.rd-page .rd-profile-edit { width: 100%; justify-content: center; }

/* A fact with nothing to say. */
.rd-page .rd-empty { color: var(--rp-text-3); }

/* ==========================================================================
   12. Field alignment
   --------------------------------------------------------------------------
   These forms were laid out on Bootstrap's float grid in widths that were
   chosen row by row: 2/5/5, then 4/2/3/2, then 4/4/4. Nothing lined up from
   one row to the next. The columns keep their markup and their classes; they
   are laid on a three-column grid instead, so every field starts on one of
   three lines down the whole form.
   ========================================================================== */

.rd-page--grid form .tw-flow-root > div > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 22px;
  align-items: start;
}

.rd-page--grid form .tw-flow-root > div > div > [class*="col-"] {
  width: auto !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* A wide column keeps its share of the width. */
.rd-page--grid form .tw-flow-root > div > div > .col-md-12,
.rd-page--grid form .tw-flow-root > div > div > .col-sm-12,
.rd-page--grid form .tw-flow-root > div > div > .col-xs-12 { grid-column: 1 / -1; }
.rd-page--grid form .tw-flow-root > div > div > .col-md-6,
.rd-page--grid form .tw-flow-root > div > div > .col-md-7,
.rd-page--grid form .tw-flow-root > div > div > .col-md-8,
.rd-page--grid form .tw-flow-root > div > div > .col-md-9 { grid-column: span 2; }

/* A clearfix meant "start a new row", and it still does. */
.rd-page--grid form .tw-flow-root > div > div > .clearfix {
  grid-column: 1 / -1;
  height: 0;
  margin: 0;
  padding: 0;
}

/* A group of fields wrapped in a plain div, such as the login fields that
   appear and disappear, carries the same three lines inside it. */
.rd-page--grid form .tw-flow-root > div > div > div:not([class*="col-"]):not(.clearfix) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 22px;
  align-items: start;
}
.rd-page--grid form .tw-flow-root > div > div > div:not([class*="col-"]):not(.clearfix) > [class*="col-"] {
  width: auto !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.rd-page--grid form .tw-flow-root > div > div > div.hide { display: none !important; }

/* A checkbox standing where a field would be lines up with the fields beside
   it, not with their labels. The forms did this with a <br>, which put it a
   line height too low. */
.rd-page form .checkbox > br { display: none; }
.rd-page form .form-group > .checkbox:first-child { margin-top: 25px; }

/* Inside a column that lists locations or permissions, one per line. */
.rd-page form [class*="col-"] > .checkbox { margin-bottom: 8px; }

@media (max-width: 991px) {
  .rd-page--grid form .tw-flow-root > div > div,
  .rd-page--grid form .tw-flow-root > div > div > div:not([class*="col-"]):not(.clearfix) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rd-page--grid form .tw-flow-root > div > div > .col-md-6,
  .rd-page--grid form .tw-flow-root > div > div > .col-md-7,
  .rd-page--grid form .tw-flow-root > div > div > .col-md-8,
  .rd-page--grid form .tw-flow-root > div > div > .col-md-9 { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .rd-page--grid form .tw-flow-root > div > div,
  .rd-page--grid form .tw-flow-root > div > div > div:not([class*="col-"]):not(.clearfix) {
    grid-template-columns: minmax(0, 1fr);
  }
  .rd-page form .form-group > .checkbox:first-child { margin-top: 0; }
}

/* ==========================================================================
   13. The gradient pill
   --------------------------------------------------------------------------
   Pages across the app carry an Add or a Download button drawn as an
   indigo-to-blue gradient pill. Wherever one is left, it takes the shape the
   POS button has in the header, like every other primary action.
   ========================================================================== */

.rd-page .tw-from-indigo-600 {
  height: 38px;
  min-height: 38px;
  padding: 0 14px !important;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background-image: none !important;
  background-color: var(--rp-brand) !important;
  box-shadow: 0 10px 24px -12px var(--rp-brand) !important;
  color: #fff !important;
  font-size: 13.5px;
  font-weight: 600;
  text-transform: none;
  transition: transform .18s var(--rp-ease), box-shadow .18s var(--rp-ease), filter .18s var(--rp-ease);
}
.rd-page .tw-from-indigo-600:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -12px var(--rp-brand) !important;
}
.rd-page .tw-from-indigo-600:active { transform: translateY(0); }
.rd-page .tw-from-indigo-600 svg { width: 18px; height: 18px; }

/* Which of them is the primary action is not a question of order — on the
   products list Download Excel comes first in the markup and Add second. The
   one that adds something carries a plus, so that is the one that is filled;
   anything else beside it is the quieter of the two. */
.rd-page .tw-dw-btn.tw-from-indigo-600:not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet) {
  background-color: var(--rp-surface) !important;
  border-color: var(--rp-line) !important;
  box-shadow: none !important;
  color: var(--rp-text-2) !important;
}
.rd-page .tw-dw-btn.tw-from-indigo-600:not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet):hover {
  border-color: var(--rp-brand) !important;
  background-color: var(--rp-brand-wash) !important;
  color: var(--rp-brand) !important;
  filter: none;
  box-shadow: none !important;
}
.rd-page .tw-dw-btn.tw-from-indigo-600:has(.icon-tabler-plus):not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet) {
  border-color: transparent !important;
  background-color: var(--rp-brand) !important;
  box-shadow: 0 10px 24px -12px var(--rp-brand) !important;
  color: #fff !important;
}
.rd-page .tw-dw-btn.tw-from-indigo-600:has(.icon-tabler-plus):not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet):hover {
  background-color: var(--rp-brand) !important;
  color: #fff !important;
  filter: brightness(1.1);
  box-shadow: 0 14px 28px -12px var(--rp-brand) !important;
}

/* A plain panel: a card with nothing in its header, used where a page shows a
   block of facts rather than a table. */
.rd-page .rd-panel-plain {
  margin-bottom: 16px;
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-radius);
  background: var(--rp-surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px -22px rgba(16, 24, 40, .5);
  animation: rd-page-rise .5s .08s var(--rp-ease) backwards;
}
.rd-page .rd-panel-plain > .box-body { padding: 18px 20px; }

/* ==========================================================================
   14. A set of buttons that picks one thing
   --------------------------------------------------------------------------
   Bootstrap's `data-toggle="buttons"` group, used to pick a ledger format and
   anything else offered as one-of-several. It was a row of grey slabs; it is
   a segmented control, with the chosen one in the business colour.
   ========================================================================== */

.rd-page .btn-group[data-toggle="buttons"] {
  display: inline-flex;
  padding: 3px;
  border-radius: 11px;
  background: var(--rp-surface-2);
  box-shadow: inset 0 0 0 1px var(--rp-line);
}
.rd-page .btn-group[data-toggle="buttons"] > .btn {
  height: 32px;
  min-height: 32px;
  padding: 0 13px !important;
  display: inline-flex;
  align-items: center;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--rp-text-2) !important;
  font-size: 12.5px;
  font-weight: 600;
  transition: background .16s var(--rp-ease), color .16s var(--rp-ease);
}
.rd-page .btn-group[data-toggle="buttons"] > .btn:hover { color: var(--rp-text) !important; }
.rd-page .btn-group[data-toggle="buttons"] > .btn.active {
  background: var(--rp-surface) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .1) !important;
  color: var(--rp-brand) !important;
}
.rd-page .btn-group[data-toggle="buttons"] > .btn input { position: absolute; opacity: 0; pointer-events: none; }

/* Any remaining daisyUI accent that is not this product's colour. */
.rd-page .tw-dw-btn-secondary,
.rd-page .tw-dw-btn-accent {
  border-color: transparent !important;
  background: var(--rp-brand) !important;
  color: #fff !important;
}
.rd-page .tw-dw-btn-secondary:hover,
.rd-page .tw-dw-btn-accent:hover { filter: brightness(1.1); }

/* ==========================================================================
   15. Buttons on a page
   --------------------------------------------------------------------------
   Bootstrap's classes and daisyUI's both turn up across these pages, and
   daisyUI's "primary" is a violet that has nothing to do with this product.
   One shape for all of them, colour only where the action has a meaning.

   Row actions inside a table and the controls inside a dialog are answered
   elsewhere and are left alone here.
   ========================================================================== */

.rd-page .tw-dw-btn:not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet),
.rd-page .btn:not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet) {
  height: 38px;
  min-height: 38px;
  padding: 0 14px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--rp-line) !important;
  border-radius: 10px !important;
  background: var(--rp-surface) !important;
  box-shadow: none !important;
  color: var(--rp-text-2) !important;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  text-transform: none;
  transition: transform .16s var(--rp-ease), border-color .16s var(--rp-ease), background .16s var(--rp-ease), color .16s var(--rp-ease), filter .16s var(--rp-ease);
}
.rd-page .tw-dw-btn:not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet):hover,
.rd-page .btn:not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet):hover {
  border-color: var(--rp-brand) !important;
  background: var(--rp-brand-wash) !important;
  color: var(--rp-brand) !important;
  transform: translateY(-1px);
}

.rd-page .tw-dw-btn.tw-dw-btn-primary:not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet),
.rd-page .btn.btn-primary:not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet) {
  border-color: transparent !important;
  background: var(--rp-brand) !important;
  box-shadow: 0 10px 24px -12px var(--rp-brand) !important;
  color: #fff !important;
}
.rd-page .tw-dw-btn.tw-dw-btn-primary:not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet):hover,
.rd-page .btn.btn-primary:not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet):hover:hover {
  background: var(--rp-brand) !important;
  color: #fff !important;
  filter: brightness(1.1);
}

.rd-page .tw-dw-btn.tw-dw-btn-error:not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet),
.rd-page .btn.btn-danger:not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet) { border-color: transparent !important; background: var(--rp-danger) !important; color: #fff !important; }
.rd-page .tw-dw-btn.tw-dw-btn-success:not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet),
.rd-page .btn.btn-success:not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet) { border-color: transparent !important; background: #12B76A !important; color: #fff !important; }
.rd-page .tw-dw-btn.tw-dw-btn-warning:not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet),
.rd-page .btn.btn-warning:not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet) { border-color: transparent !important; background: #F79009 !important; color: #fff !important; }
.rd-page .tw-dw-btn.tw-dw-btn-error:not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet):hover,
.rd-page .btn.btn-danger:not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet):hover,
.rd-page .tw-dw-btn.tw-dw-btn-success:not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet):hover,
.rd-page .btn.btn-success:not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet):hover,
.rd-page .tw-dw-btn.tw-dw-btn-warning:not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet):hover,
.rd-page .btn.btn-warning:not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet):hover { filter: brightness(1.1); color: #fff !important; }

.rd-page .tw-dw-btn-xs,
.rd-page .btn-xs { height: 30px; min-height: 30px; padding: 0 10px !important; font-size: 12px; }
.rd-page .tw-dw-btn-sm,
.rd-page .btn-sm { height: 34px; min-height: 34px; padding: 0 12px !important; font-size: 12.5px; }
.rd-page .btn-link {
  height: auto;
  min-height: 0;
  padding: 0 2px !important;
  border: 0 !important;
  background: none !important;
  color: var(--rp-brand) !important;
}
.rd-page .btn-link:hover { background: none !important; text-decoration: underline; transform: none; }

/* The same block of facts, on a page rather than in a dialog. */
.rd-page .well {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--rp-line);
  border-radius: 10px;
  background: var(--rp-surface-2);
  box-shadow: none;
  color: var(--rp-text);
  font-size: 12.5px;
  line-height: 2;
}
.rd-page .well strong {
  color: var(--rp-text-3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.rd-page .well .display_currency { font-family: var(--rp-mono); font-weight: 600; font-variant-numeric: tabular-nums; }

/* The browser's own file control, framed like the fields around it. */
.rd-page input[type="file"] {
  width: 100%;
  padding: 9px 12px;
  border: 1px dashed var(--rp-line);
  border-radius: 10px;
  background: var(--rp-surface-2);
  color: var(--rp-text-2);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color .16s var(--rp-ease), background .16s var(--rp-ease);
}
.rd-page input[type="file"]:hover { border-color: var(--rp-brand); background: var(--rp-brand-wash); }
.rd-page input[type="file"]::file-selector-button {
  height: 30px;
  margin: 0 12px 0 0;
  padding: 0 12px;
  border: 1px solid var(--rp-line);
  border-radius: 8px;
  background: var(--rp-surface);
  color: var(--rp-text-2);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.rd-page input[type="file"]::file-selector-button:hover {
  border-color: var(--rp-brand);
  background: var(--rp-brand-wash);
  color: var(--rp-brand);
}

/* A form with several ways to save: the one that just saves is the filled
   one, and the ones that save and go somewhere else sit quietly beside it.
   AdminLTE's bg-purple and bg-maroon are not this product's colours. */
.rd-page .rd-form-bar .tw-dw-btn.bg-purple:not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet),
.rd-page .rd-form-bar .tw-dw-btn.bg-maroon:not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet),
.rd-page .rd-form-bar .tw-dw-btn.tw-dw-btn-warning:not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet) {
  border-color: var(--rp-line) !important;
  background: var(--rp-surface) !important;
  box-shadow: none !important;
  color: var(--rp-text-2) !important;
}
.rd-page .rd-form-bar .tw-dw-btn.bg-purple:not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet):hover,
.rd-page .rd-form-bar .tw-dw-btn.bg-maroon:not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet):hover,
.rd-page .rd-form-bar .tw-dw-btn.tw-dw-btn-warning:not(.rd-page-add):not(.rd-btn-save):not(.rd-btn-quiet):hover {
  border-color: var(--rp-brand) !important;
  background: var(--rp-brand-wash) !important;
  color: var(--rp-brand) !important;
  filter: none;
}
.rd-page .rd-form-bar .tw-dw-btn-lg { height: 40px; min-height: 40px; padding: 0 16px !important; font-size: 13.5px; }
.rd-page .rd-form-bar .tw-dw-btn[disabled] { opacity: .5; cursor: not-allowed; }
.rd-page .rd-form-bar .btn-group { display: contents; }

/* A checkbox that iCheck never wrapped — some pages use a plain input.
   Bootstrap takes that input out of the flow and pulls it back under the
   label's own padding, which printed the box over the first few characters
   of the words beside it. It is put back in the row. */
.rd-page .checkbox label,
.rd-page .radio label { padding-left: 0; }
.rd-page .checkbox label > input[type="checkbox"],
.rd-page .radio label > input[type="radio"] {
  position: static;
  margin-left: 0;
}

.rd-page .checkbox label > input[type="checkbox"],
.rd-page .radio label > input[type="radio"],
.rd-page label > input[type="checkbox"],
.rd-page label > input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: none;
  accent-color: var(--rp-brand);
  vertical-align: middle;
}
.rd-page .checkbox label,
.rd-page .radio label,
.rd-page label:has(> input[type="checkbox"]),
.rd-page label:has(> input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* A menu item that arrived as a button keeps whatever icon it carried. */
.rd-page .rp-menu-list > li > a i,
.rd-page .rp-menu-list > li > button i { width: 17px; flex: none; font-size: 13px; text-align: center; opacity: .85; }

/* ==========================================================================
   16. A set of options laid out as a table
   --------------------------------------------------------------------------
   Some pages use a bordered table to arrange options — a checkbox and the
   size that goes with it, four or five of them. A table draws one box with
   lines through it, which cut across the options rather than separating
   them. Each cell becomes a card instead, and they wrap as there is room.
   ========================================================================== */

.rd-page .rd-optiongrid {
  display: grid;
  /* Three across, as the original table laid them out. Letting them fit
     themselves put all six in one row, squeezed and out of step with each
     other. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin: 0;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent;
}
.rd-page .rd-optiongrid > tbody,
.rd-page .rd-optiongrid > tbody > tr,
.rd-page .rd-optiongrid > tr { display: contents; }

.rd-page .table.rd-optiongrid > tbody > tr > td,
.rd-page .table.rd-optiongrid > tr > td {
  display: flex;
  flex-direction: column;
  /* Every card is as tall as the tallest in its row, and its field sits at
     the foot of it, so a title that runs to two lines does not push its own
     field out of line with the others. */
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px !important;
  border: 1px solid var(--rp-line) !important;
  border-radius: 12px;
  background: var(--rp-surface);
  transition: border-color .16s var(--rp-ease), box-shadow .16s var(--rp-ease);
}
.rd-page .table.rd-optiongrid > tbody > tr > td:hover,
.rd-page .table.rd-optiongrid > tr > td:hover { border-color: color-mix(in srgb, var(--rp-brand) 35%, var(--rp-line)); }
/* A row accent belongs to a list of data. Here every card in a row shares
   one tr, so hovering any of them was lighting the first one's leading edge. */
/* Every card in a visual row shares a tr with cards that are not beside it,
   because the rows are laid out as a grid. Hovering one was lighting the
   leading edge of whichever card happened to be first in the other row, so
   no card here carries that accent at all. */
.rd-page .table.rd-optiongrid td { box-shadow: none !important; }

/* A cell that holds no control is padding in the original table, not an
   option — :empty does not catch it, because it holds whitespace. */
.rd-page .table.rd-optiongrid > tbody > tr > td:empty,
.rd-page .table.rd-optiongrid > tr > td:empty,
.rd-page .table.rd-optiongrid > tbody > tr > td:not(:has(input)):not(:has(select)):not(:has(textarea)),
.rd-page .table.rd-optiongrid > tr > td:not(:has(input)):not(:has(select)):not(:has(textarea)) { display: none !important; }

/* A card whose option is on is marked, so what will be printed reads at a
   glance. */
.rd-page .table.rd-optiongrid > tbody > tr > td:has(input[type="checkbox"]:checked),
.rd-page .table.rd-optiongrid > tr > td:has(input[type="checkbox"]:checked) {
  border-color: color-mix(in srgb, var(--rp-brand) 40%, transparent) !important;
  background: color-mix(in srgb, var(--rp-brand) 3%, #FFFFFF);
}

.rd-page .rd-optiongrid .checkbox { margin: 0; }
.rd-page .rd-optiongrid .checkbox label { align-items: flex-start; }
.rd-page .rd-optiongrid .checkbox label > input { margin-top: 1px; }
.rd-page .rd-optiongrid .checkbox label b { font-weight: 600; font-size: 13px; }
.rd-page .rd-optiongrid .input-group { display: flex; width: 100%; }
.rd-page .rd-optiongrid .input-group-addon {
  width: 58px;
  min-width: 58px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rp-line);
  border-right: 0;
  border-radius: 10px 0 0 10px;
  background: var(--rp-surface-2);
  color: var(--rp-text-3);
  font-family: var(--rp-mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.rd-page .rd-optiongrid .input-group-addon b { font-weight: 600; }
.rd-page .rd-optiongrid .input-group .form-control {
  flex: 1 1 auto;
  width: 1%;
  border-radius: 0 10px 10px 0;
}
.rd-page .rd-optiongrid label:not(.checkbox label) {
  margin-bottom: 6px;
  color: var(--rp-text-2);
  font-size: 12.5px;
  font-weight: 600;
}

@media (max-width: 1199px) {
  .rd-page .rd-optiongrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rd-page .rd-optiongrid { grid-template-columns: minmax(0, 1fr); }
}

/* A rule between sections of a form, rather than a line drawn across it. */
.rd-page section.content hr,
.rd-page .rd-panel hr { margin: 18px 0; border-top: 1px solid var(--rp-line-soft); }

/* ==========================================================================
   17. A list that is still empty
   --------------------------------------------------------------------------
   A header strip over nothing says less than a line saying there is nothing
   yet. The stand-in row steps aside the moment the list has something in it.
   ========================================================================== */

.rd-page .rd-empty-row > td {
  padding: 22px 12px !important;
  color: var(--rp-text-3);
  font-size: 13px;
  text-align: center;
}
.rd-page .rd-empty-row:not(:only-child) { display: none; }

/* A control and its prefix are one row that fills its column, as in a
   dialog. Left to Bootstrap's table display the group took only the width
   its own contents asked for. */
.rd-page .input-group { display: flex; align-items: stretch; width: 100%; }
.rd-page .input-group > .form-control,
.rd-page .input-group > .select2-container { flex: 1 1 auto; width: 1% !important; }
.rd-page .input-group > .input-group-addon,
.rd-page .input-group > .input-group-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: auto;
}

/* A field you search with: the glass reads as part of the field, not as a
   prefix with something to say. */
.rd-page .input-group > .input-group-addon:first-child:has(.fa-search) {
  width: 42px;
  min-width: 42px;
  background: var(--rp-surface);
  color: var(--rp-text-3);
}
.rd-page .input-group:has(.fa-search) > .form-control { padding-left: 2px; }

/* ==========================================================================
   18. A module's own navigation
   --------------------------------------------------------------------------
   Modules bring a Bootstrap navbar of their own — Manufacturing's Recipe,
   Production, Settings, Report. It arrived as a grey slab with a grey active
   tab. It is now the module's name beside a segmented control, the same one
   the app uses wherever you pick one of several things.
   ========================================================================== */

body:not(.pos-rd) .rd-page .navbar.navbar-default,
body:not(.pos-rd) .navbar.navbar-default {
  min-height: 0;
  margin: 14px 14px 0 !important;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  border: 1px solid var(--rp-line, #E4EAF2);
  border-radius: 14px;
  background:
    radial-gradient(120% 180% at 100% 0%, color-mix(in srgb, var(--rp-brand, #004EEB) 7%, transparent), transparent 60%),
    var(--rp-surface, #FFFFFF);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 30px -24px rgba(16, 24, 40, .5);
}
body:not(.pos-rd) .navbar.navbar-default .container-fluid {
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  width: 100%;
}
body:not(.pos-rd) .navbar.navbar-default .navbar-brand,
body:not(.pos-rd) .navbar.navbar-default .navbar-header,
body:not(.pos-rd) .navbar.navbar-default .navbar-collapse {
  margin: 0 !important;
  padding: 0;
  float: none;
}
body:not(.pos-rd) .navbar.navbar-default .navbar-collapse { flex: 1 1 auto; border: 0; box-shadow: none; }

/* The module's name, as a mark rather than a link. */
body:not(.pos-rd) .navbar.navbar-default .navbar-brand {
  height: auto;
  padding: 7px 13px 7px 11px !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  background: var(--rp-brand-wash, #F0F4FF);
  color: var(--rp-brand, #004EEB) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
}
body:not(.pos-rd) .navbar.navbar-default .navbar-brand i,
body:not(.pos-rd) .navbar.navbar-default .navbar-brand svg { font-size: 14px; }

/* The pages of the module, as one control. */
body:not(.pos-rd) .navbar.navbar-default .navbar-nav {
  margin: 0;
  padding: 3px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  float: none;
  border-radius: 11px;
  background: var(--rp-surface-2, #F5F7FB);
  box-shadow: inset 0 0 0 1px var(--rp-line, #E4EAF2);
}
body:not(.pos-rd) .navbar.navbar-default .navbar-nav > li { float: none; }
body:not(.pos-rd) .navbar.navbar-default .navbar-nav > li > a {
  padding: 7px 14px;
  display: block;
  border-radius: 8px;
  background: transparent !important;
  color: var(--rp-text-2, #5A6779) !important;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .16s var(--rp-ease, cubic-bezier(.4, 0, .2, 1)), color .16s var(--rp-ease, cubic-bezier(.4, 0, .2, 1));
}
body:not(.pos-rd) .navbar.navbar-default .navbar-nav > li > a:hover {
  background: color-mix(in srgb, var(--rp-brand, #004EEB) 6%, #FFFFFF) !important;
  color: var(--rp-text, #101828) !important;
}
body:not(.pos-rd) .navbar.navbar-default .navbar-nav > .active > a,
body:not(.pos-rd) .navbar.navbar-default .navbar-nav > .active > a:hover {
  background: var(--rp-surface, #FFFFFF) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
  color: var(--rp-brand, #004EEB) !important;
}

body:not(.pos-rd) .navbar.navbar-default .navbar-toggle {
  margin: 0;
  padding: 7px 10px;
  border: 1px solid var(--rp-line, #E4EAF2);
  border-radius: 9px;
  background: var(--rp-surface, #FFFFFF);
}
body:not(.pos-rd) .navbar.navbar-default .navbar-toggle .icon-bar { background: var(--rp-text-2, #5A6779); }

/* The card below it already carries the page's own name, so the bar sits
   close to it rather than floating on its own. */
body:not(.pos-rd) .rd-page .rd-page-head { margin-top: 10px; }

@media (max-width: 767px) {
  body:not(.pos-rd) .navbar.navbar-default { margin: 10px !important; }
  body:not(.pos-rd) .navbar.navbar-default .navbar-nav { width: 100%; }
}

/* A single static item standing in for a tab — modules use a list-group this
   way. AdminLTE paints the active one as a slab of gradient; here it is a
   label for the panel beside it. */
.rd-page .list-group { margin: 0; }
.rd-page .list-group-item {
  border: 1px solid var(--rp-line) !important;
  border-radius: 10px !important;
  background: var(--rp-surface) !important;
  color: var(--rp-text-2) !important;
  font-size: 13px;
  font-weight: 600;
}
.rd-page .list-group-item.active,
.rd-page .list-group-item.active:hover,
.rd-page .list-group-item.active:focus {
  border-color: color-mix(in srgb, var(--rp-brand) 25%, transparent) !important;
  background: var(--rp-brand-wash) !important;
  background-image: none !important;
  color: var(--rp-brand) !important;
}
.rd-page .list-group-item + .list-group-item { margin-top: 6px; }

/* A note under a form: what version a module is, and the like. */
.rd-page .rd-page-note {
  margin: 14px 2px 0;
  color: var(--rp-text-3);
  font-size: 12px;
}
.rd-page .rd-page-note i { font-style: normal; }
/* Bootstrap paints a <code> pink on a pink ground, which reads as a warning.
   A version number, a key, a reference: these are values, not warnings. */
.rd-page code {
  padding: 2px 7px;
  border: 1px solid var(--rp-line);
  border-radius: 6px;
  background: var(--rp-surface-2);
  color: var(--rp-text-2);
  font-family: var(--rp-mono);
  font-size: 11.5px;
}

/* ==========================================================================
   19. The restaurant shell
   --------------------------------------------------------------------------
   Kitchen and Orders run on their own layout: no sidebar, no application
   header, just a back link and a footer. That layout is inherited from the
   counter and still wears AdminLTE's lockscreen grey, so the few pieces it
   does have are brought to the same ground as every other list page.
   ========================================================================== */

body.lockscreen:has(.rd-page) {
  background: var(--rp-surface-2, #F5F7FB);
}

/* The back link. It is the only chrome the page has, so it is given the
   quiet-button treatment rather than left as a filled cyan square. */
body.lockscreen:has(.rd-page) .btn.btn-info.btn-flat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 1px solid #E4EAF2;
  border-radius: 10px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  color: #5A6779;
  transition: background .18s cubic-bezier(.4, 0, .2, 1),
              color .18s cubic-bezier(.4, 0, .2, 1),
              border-color .18s cubic-bezier(.4, 0, .2, 1),
              transform .18s cubic-bezier(.4, 0, .2, 1);
}
body.lockscreen:has(.rd-page) .btn.btn-info.btn-flat:hover,
body.lockscreen:has(.rd-page) .btn.btn-info.btn-flat:focus {
  border-color: color-mix(in srgb, var(--theme-700, #004EEB) 30%, #FFFFFF);
  background: color-mix(in srgb, var(--theme-700, #004EEB) 7%, #FFFFFF);
  color: var(--theme-700, #004EEB);
  transform: translateX(-2px);
}
body.lockscreen:has(.rd-page) .btn.btn-info.btn-flat i {
  font-size: 14px;
  line-height: 1;
}

/* The header row holds nothing but that link, so it only needs to clear the
   head card rather than take a band of its own. */
body.lockscreen:has(.rd-page) .container-fluid > .row.no-print:first-child {
  margin-bottom: 4px;
}

body.lockscreen:has(.rd-page) footer.no-print {
  padding: 18px 0 24px;
  color: #8A94A6 !important;
}
body.lockscreen:has(.rd-page) footer.no-print b { font-weight: 500; }

/* The restaurant screens carry the page inside .container-fluid, which has no
   gutters of its own to speak of on a wide screen. */
body.lockscreen:has(.rd-page) > .wrapper > .container-fluid {
  padding: 16px 18px 0;
}

/* ==========================================================================
   20. A search in the page head
   --------------------------------------------------------------------------
   Business settings carries a jump-to-field search. It ships as a Bootstrap
   row with an offset column, which is meant for a band of its own; in the
   head card it only has to be a field.
   ========================================================================== */

.rd-page .rd-page-search { flex: 0 0 auto; }
.rd-page .rd-page-search > .row { margin: 0; }
.rd-page .rd-page-search > .row > [class*="col-"] {
  float: none;
  width: 280px;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
.rd-page .rd-page-search .input-group { width: 100%; }
.rd-page .rd-page-search .select2-container { width: 100% !important; }

@media (max-width: 767px) {
  .rd-page .rd-page-search { width: 100%; }
  .rd-page .rd-page-search > .row > [class*="col-"] { width: 100%; }
}

/* ==========================================================================
   21. A heading inside a panel
   --------------------------------------------------------------------------
   A tab or a panel that holds more than one list needs its own small heading,
   with whatever control belongs to that list sitting opposite it. The widget
   title bar cannot do this, because the widget is the whole panel.
   ========================================================================== */

.rd-page .rd-sec-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 2px 0 14px;
}
.rd-page .rd-sec-head .rd-sec-title {
  margin: 0;
  padding-left: 11px;
  border-left: 3px solid var(--rp-brand);
  color: var(--rp-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}
.rd-page .rd-sec-head .rd-sec-actions { margin-left: auto; display: flex; gap: 10px; }

@media (max-width: 575px) {
  .rd-page .rd-sec-head .rd-sec-actions { width: 100%; margin-left: 0; }
  .rd-page .rd-sec-head .rd-sec-actions .rd-page-add { width: 100%; justify-content: center; }
}

/* The layout tiles on the invoice settings page: one card per layout. */
.rd-page .rd-tilegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.rd-page .rd-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 16px;
  border: 1px solid var(--rp-line);
  border-radius: 12px;
  background: var(--rp-surface);
  transition: border-color .2s var(--rp-ease), box-shadow .2s var(--rp-ease),
              transform .2s var(--rp-ease);
}
.rd-page .rd-tile:hover {
  border-color: color-mix(in srgb, var(--rp-brand) 35%, var(--rp-line));
  box-shadow: 0 6px 18px rgba(16, 24, 40, .07);
  transform: translateY(-2px);
}
.rd-page .rd-tile > a {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--rp-text);
  font-weight: 600;
  text-decoration: none;
}
.rd-page .rd-tile > a svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--rp-brand); }
.rd-page .rd-tile .rd-tile-note {
  color: var(--rp-text-3);
  font-size: 12px;
  line-height: 1.5;
}
.rd-page .rd-tile .rd-tile-note b { color: var(--rp-text-2); font-weight: 600; }

/* ==========================================================================
   22. The reminders calendar
   --------------------------------------------------------------------------
   FullCalendar draws its own toolbar with the gradient buttons of its day.
   They keep every class and hook; only the paint changes.
   ========================================================================== */

.rd-page .fc-toolbar h2 {
  color: var(--rp-text);
  font-size: 19px;
  font-weight: 600;
}
.rd-page .fc-button.fc-state-default {
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--rp-line);
  border-radius: 9px;
  background: var(--rp-surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  color: var(--rp-text-2);
  font-size: 12.5px;
  font-weight: 600;
  text-shadow: none;
  transition: background .18s var(--rp-ease), color .18s var(--rp-ease),
              border-color .18s var(--rp-ease);
}
.rd-page .fc-button-group .fc-button.fc-state-default { border-radius: 0; margin: 0 0 0 -1px; }
.rd-page .fc-button-group .fc-button.fc-corner-left { border-radius: 9px 0 0 9px; margin-left: 0; }
.rd-page .fc-button-group .fc-button.fc-corner-right { border-radius: 0 9px 9px 0; }
.rd-page .fc-button-group .fc-button.fc-corner-left.fc-corner-right { border-radius: 9px; }
.rd-page .fc-button.fc-state-default:hover {
  border-color: color-mix(in srgb, var(--rp-brand) 30%, var(--rp-line));
  background: var(--rp-brand-wash);
  color: var(--rp-brand);
}
.rd-page .fc-button.fc-state-active,
.rd-page .fc-button.fc-state-down {
  z-index: 1;
  border-color: transparent;
  background: var(--rp-brand);
  box-shadow: none;
  color: #FFFFFF;
}
.rd-page .fc-button.fc-state-disabled { opacity: .5; }
.rd-page .fc-button .fc-icon { color: inherit; }

.rd-page .fc th.fc-day-header {
  padding: 9px 4px;
  border-color: var(--rp-line);
  background: var(--rp-surface-2);
  color: var(--rp-text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.rd-page .fc td, .rd-page .fc th, .rd-page .fc hr,
.rd-page .fc .fc-row, .rd-page .fc .fc-divider { border-color: var(--rp-line); }
.rd-page .fc .fc-day-number { padding: 6px 8px; color: var(--rp-text-2); font-size: 12px; }
.rd-page .fc .fc-today { background: var(--rp-brand-wash); }
.rd-page .fc .fc-event {
  border: 0;
  border-radius: 6px;
  padding: 2px 6px;
  background: var(--rp-brand);
  font-size: 11.5px;
}