/*
 * Site-wide overrides for markup carried over from the pre-Bootstrap template.
 *
 * Many converted pages wrap their whole content in a single
 * <div class="card"><div class="card-body"> and use bare <h2>/<h3> tags as
 * section dividers inside it. Restructuring each of those into a card per
 * section is a per-page design job; these rules give the same visual hierarchy
 * without moving any markup, so the pages read as sections rather than one
 * undifferentiated slab.
 */

.card-body > h2,
.card-body > h3,
.card-body > form > h2,
.card-body > form > h3 {
  font-weight: 600;
  color: #566a7f;
  margin: 1.75rem 0 .85rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid #e7e7ff;
}

.card-body > h2:first-child,
.card-body > h3:first-child,
.card-body > form > h2:first-child,
.card-body > form > h3:first-child {
  margin-top: 0;
}

.card-body > h2 { font-size: 1.2rem; }
.card-body > h3 { font-size: 1.05rem; }

/* <h1> was used as a page title inside the content area on some pages */
.container-p-y > h1,
.card-body > h1 {
  font-size: 1.375rem;
  font-weight: 600;
  color: #566a7f;
  margin-bottom: 1rem;
}

/* Legacy spacer pattern: <br><hr><br> between sections. Collapse the
   double margin so sections do not drift apart. */
.card-body br + hr,
.card-body hr + br { display: none; }

.card-body hr {
  margin: 1.5rem 0;
  border-color: #e7e7ff;
}

/* Tables inherited from the old template that were never given a
   Bootstrap class still get readable spacing. */
.card-body table:not([class]) {
  width: 100%;
  border-collapse: collapse;
}

.card-body table:not([class]) > tbody > tr > td,
.card-body table:not([class]) > tr > td {
  padding: .4rem .55rem;
  vertical-align: top;
}

/* Buttons carried over from the old stylesheet. Kept as a safety net for any
   page still emitting them; the classes themselves have been replaced with
   Bootstrap equivalents where they were found. */
.mylittleButton,
.mytinyButton,
.myButton {
  display: inline-block;
  padding: .4rem .9rem;
  border: 1px solid transparent;
  border-radius: .375rem;
  background-color: #696cff;
  color: #fff;
  font-size: .8125rem;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
}

.mytinyButton { padding: .2rem .6rem; font-size: .75rem; }

/*
 * Public payment pages (claygate_payment_summary.php,
 * claygate_payment_failure.php). Shared here rather than duplicated in a
 * <style> block on each page.
 */
.summary-brand { max-height: 46px; width: auto; }
.summary-ref { font-family: var(--bs-font-monospace, monospace); }

.order-summary-table > thead > tr > th { font-size: .8125rem; }
.order-summary-table > tbody > tr > td { vertical-align: middle; }

.summary-total {
  background: #f5f4ff;
  border: 1px solid #e7e7ff;
  border-radius: .5rem;
  padding: .85rem 1.1rem;
}

.summary-total-amount { font-size: 1.5rem; font-weight: 600; line-height: 1.2; }

@media print {
  #layout-navbar,
  #layout-menu,
  .content-footer,
  .summary-actions { display: none !important; }
  .summary-page .card { border: 0 !important; }
}

.mylittleButton:hover,
.mytinyButton:hover,
.myButton:hover { background-color: #5f61e6; color: #fff; }


/* =========================================================================
 * COLOUR CONTRAST OVERRIDES  (added 2026-10-09)
 *
 * The Materio/Sneat theme ships with pale greys and bright brand colours that
 * fail WCAG 2.1 AA (4.5:1 for normal text, 3:1 for large text and control
 * borders). e.g. .text-muted was #bbbcc4 = 1.9:1 on white, body text #828393
 * = 3.7:1, white on .btn-success = 1.7:1.
 *
 * Everything below re-points those colours at a palette that passes AA on
 * white (#fff), the page background (#f7f7f9) and striped table rows
 * (#f4f4f6). Ratios quoted are against white unless stated.
 *
 * Loaded after core.css/theme-default.css, so plain rules win where the
 * theme does not use !important; !important is used only where the theme
 * or a later-loaded vendor library does.
 *
 * To revert: delete from this banner to the end of the file
 * (a pre-change copy is in claygate.css.bak-2026-10-09).
 * ========================================================================= */

:root {
  --cg-heading:     #34364a;  /* 11.6:1 */
  --cg-text:        #4c4e64;  /*  8.1:1  (was #828393, 3.7:1) */
  --cg-muted:       #646678;  /*  5.7:1  (was #bbbcc4, 1.9:1) */
  --cg-border:      #8a8c9b;  /*  3.3:1  form-field outlines */

  --cg-primary:     #5157e8;  /* white on it 5.4:1 (was #666cff, 4.1:1) */
  --cg-primary-dk:  #4146d1;  /* hover */
  --cg-primary-txt: #4b51e0;  /* 5.9:1, 4.9:1 on the pale label tint */
  --cg-secondary:   #5b6579;  /* 5.9:1 (was #6d788d, 4.45:1) */
  --cg-secondary-dk:#4f586b;
  --cg-success:     #2e7d0f;  /* 5.2:1 (was #72e128, 1.7:1) */
  --cg-success-dk:  #256a0b;
  --cg-info:        #0570a0;  /* 5.5:1 (was #26c6f9, 2.0:1) */
  --cg-info-dk:     #045e86;
  --cg-warning-txt: #8a5300;  /* 6.3:1 (was #fdb528, 1.8:1) */
  --cg-on-warning:  #3d2600;  /* text on the yellow #fdb528, 8.0:1 */
  --cg-danger:      #d0302c;  /* white on it 5.1:1 (was #ff4d49, 3.3:1) */
  --cg-danger-txt:  #b4231f;  /* 6.6:1, 5.5:1 on pale red tint */

  /* Bootstrap variables that components read via var() */
  --bs-body-color: #4c4e64;
  --bs-body-color-rgb: 76, 78, 100;
  --bs-secondary-color: #646678;
  --bs-heading-color: #34364a;
  --bs-link-color: #4b51e0;
  --bs-link-color-rgb: 75, 81, 224;
  --bs-link-hover-color: #3a3fc0;
  --bs-link-hover-color-rgb: 58, 63, 192;
  --bs-primary: #5157e8;
  --bs-primary-rgb: 81, 87, 232;
  --bs-secondary: #5b6579;
  --bs-secondary-rgb: 91, 101, 121;
  --bs-success: #2e7d0f;
  --bs-success-rgb: 46, 125, 15;
  --bs-info: #0570a0;
  --bs-info-rgb: 5, 112, 160;
  --bs-danger: #d0302c;
  --bs-danger-rgb: 208, 48, 44;
}

/* ---- Base text ------------------------------------------------------- */
body { color: var(--cg-text); }

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
.card-title, .text-heading { color: var(--cg-heading); }
.text-heading { color: var(--cg-heading) !important; }

/* claygate.css section headings above used #566a7f (5.6:1) - keep the
   hierarchy consistent with the new heading colour */
.card-body > h2, .card-body > h3,
.card-body > form > h2, .card-body > form > h3,
.container-p-y > h1, .card-body > h1 { color: var(--cg-heading); }

.card { --bs-card-cap-color: var(--cg-heading); --bs-card-color: var(--cg-text); }
.accordion { --bs-accordion-color: var(--cg-text); --bs-accordion-btn-color: var(--cg-heading); --bs-accordion-active-color: var(--cg-heading); }
.modal { --bs-modal-color: var(--cg-text); }
.popover { --bs-popover-body-color: var(--cg-text); }
.toast { --bs-toast-color: var(--cg-text); }

/* ---- Utility text colours ------------------------------------------- */
.text-body      { color: var(--cg-text) !important; }
.text-muted,
.text-light     { color: var(--cg-muted) !important; }
.text-muted[href]:hover, .text-muted[href]:focus { color: var(--cg-text) !important; }
.text-primary   { color: var(--cg-primary-txt) !important; }
.text-secondary { color: var(--cg-secondary) !important; }
.text-success   { color: var(--cg-success) !important; }
.text-info      { color: var(--cg-info) !important; }
.text-warning   { color: var(--cg-warning-txt) !important; }
.text-danger    { color: var(--cg-danger-txt) !important; }

/* Muted/secondary text sitting on a dark or coloured fill must go light,
   not dark */
.table-dark .text-muted, .table-dark .text-secondary,
.bg-dark .text-muted, .bg-primary .text-muted, .bg-secondary .text-muted,
.bg-success .text-muted, .bg-info .text-muted, .bg-danger .text-muted,
.text-white .text-muted { color: rgba(255, 255, 255, .8) !important; }

/* theme-default.css hard-codes links to #666cff (4.1:1) and lightens them
   on hover (#757bff, 3.6:1) - go darker on hover instead */
a { color: var(--cg-primary-txt); }
a:hover { color: #3a3fc0; }

/* ---- Forms ---------------------------------------------------------- */
.form-text,
.form-control::placeholder,
.form-select::placeholder { color: var(--cg-muted); }
.form-control, .form-select { color: var(--cg-heading); border-color: var(--cg-border); }
.input-group-text { color: var(--cg-text); border-color: var(--cg-border); }
.form-check-input { border-color: var(--cg-border); }
.form-check-input:checked { background-color: var(--cg-primary); border-color: var(--cg-primary); }
.form-control:focus, .form-select:focus { border-color: var(--cg-primary); }
/* Disabled/readonly fields are often used here to *display* data, so keep
   them readable (4.7:1 on the grey fill) */
.form-control:disabled, .form-control[readonly], .form-select:disabled { color: var(--cg-muted); }
.invalid-feedback { color: var(--cg-danger-txt); }
.valid-feedback   { color: var(--cg-success); }
.legacy-form .req, .yp-req { color: var(--cg-danger-txt); }

/* ---- Solid buttons (white text) ------------------------------------- */
.btn-primary   { --cg-b: var(--cg-primary);   --cg-bh: var(--cg-primary-dk); }
.btn-secondary { --cg-b: var(--cg-secondary); --cg-bh: var(--cg-secondary-dk); }
.btn-success   { --cg-b: var(--cg-success);   --cg-bh: var(--cg-success-dk); }
.btn-info      { --cg-b: var(--cg-info);      --cg-bh: var(--cg-info-dk); }
.btn-danger    { --cg-b: var(--cg-danger);    --cg-bh: var(--cg-danger-txt); }
.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-danger {
  color: #fff !important;
  background-color: var(--cg-b) !important;
  border-color: var(--cg-b) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active,
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active,
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active,
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active {
  background-color: var(--cg-bh) !important;
  border-color: var(--cg-bh) !important;
}
/* Yellow keeps its colour but takes dark text (Bootstrap 5's own approach) */
.btn-warning, .btn-warning:hover, .btn-warning:focus, .btn-warning:active {
  color: var(--cg-on-warning) !important;
}

/* ---- Outline / label / text buttons --------------------------------- */
.btn-outline-primary   { color: var(--cg-primary-txt); border-color: var(--cg-primary); }
.btn-outline-secondary { color: var(--cg-secondary);   border-color: var(--cg-border); }
.btn-outline-success   { color: var(--cg-success);     border-color: var(--cg-success); }
.btn-outline-info      { color: var(--cg-info);        border-color: var(--cg-info); }
.btn-outline-warning   { color: var(--cg-warning-txt); border-color: #c98a0e; }
.btn-outline-danger    { color: var(--cg-danger-txt);  border-color: var(--cg-danger); }
.btn-outline-primary:hover, .btn-outline-primary.active, .btn-check:checked + .btn-outline-primary
  { color: #fff !important; background-color: var(--cg-primary) !important; border-color: var(--cg-primary) !important; }
.btn-outline-secondary:hover, .btn-outline-secondary.active, .btn-check:checked + .btn-outline-secondary
  { color: #fff !important; background-color: var(--cg-secondary) !important; border-color: var(--cg-secondary) !important; }
.btn-outline-success:hover, .btn-outline-success.active, .btn-check:checked + .btn-outline-success
  { color: #fff !important; background-color: var(--cg-success) !important; border-color: var(--cg-success) !important; }
.btn-outline-info:hover, .btn-outline-info.active, .btn-check:checked + .btn-outline-info
  { color: #fff !important; background-color: var(--cg-info) !important; border-color: var(--cg-info) !important; }
.btn-outline-warning:hover, .btn-outline-warning.active, .btn-check:checked + .btn-outline-warning
  { color: var(--cg-on-warning) !important; background-color: #fdb528 !important; border-color: #fdb528 !important; }
.btn-outline-danger:hover, .btn-outline-danger.active, .btn-check:checked + .btn-outline-danger
  { color: #fff !important; background-color: var(--cg-danger) !important; border-color: var(--cg-danger) !important; }

.btn-label-primary   { color: var(--cg-primary-txt) !important; }
.btn-label-secondary { color: var(--cg-secondary-dk) !important; }
.btn-label-danger    { color: var(--cg-danger-txt) !important; }
.btn-text-secondary  { color: var(--cg-secondary) !important; }
.btn-label-primary:hover   { color: #fff !important; background-color: var(--cg-primary) !important; }
.btn-label-secondary:hover { color: #fff !important; background-color: var(--cg-secondary) !important; }
.btn-label-danger:hover    { color: #fff !important; background-color: var(--cg-danger) !important; }

/* ---- Solid background utilities (badges, stat cards) ----------------- */
.bg-primary   { background-color: var(--cg-primary) !important; }
.bg-secondary { background-color: var(--cg-secondary) !important; }
.bg-success   { background-color: var(--cg-success) !important; }
.bg-info      { background-color: var(--cg-info) !important; }
.bg-danger    { background-color: var(--cg-danger) !important; }
.badge.bg-warning,
.bg-warning.text-white, .bg-warning .text-white { color: var(--cg-on-warning) !important; }

/* ---- Pale "label" badges -------------------------------------------- */
/* bg-label-success was already hand-fixed in core.css (#1b3b06 on #67d11f,
   6.4:1) so it is left alone. */
.bg-label-primary   { color: var(--cg-primary-txt) !important; }
.bg-label-secondary { color: var(--cg-secondary) !important; }
.bg-label-info      { color: var(--cg-info) !important; }
.bg-label-warning   { color: var(--cg-warning-txt) !important; }
.bg-label-danger    { color: var(--cg-danger-txt) !important; }
.bg-label-light     { color: var(--cg-muted) !important; background-color: #f4f4f6 !important; }

/* ---- Alerts --------------------------------------------------------- */
.alert-primary   { color: var(--cg-primary-txt); }
.alert-info      { color: var(--cg-info); }
.alert-warning   { color: var(--cg-warning-txt); }
.alert-danger    { color: var(--cg-danger-txt); }
.alert-primary .alert-link { color: #3a3fc0; }
.alert-info .alert-link    { color: var(--cg-info-dk); }
.alert-warning .alert-link { color: #6b4000; }
.alert-danger .alert-link  { color: #8f1a17; }
/* alert-success / list-group-item-success were hand-fixed in core.css to
   dark text on bright green, but their links stayed bright green (1.0:1) */
.alert-success .alert-link,
a.list-group-item-success, button.list-group-item-success { color: #1b3b06 !important; }

/* ---- Navigation ----------------------------------------------------- */
.nav { --bs-nav-link-color: var(--cg-text); --bs-nav-link-hover-color: var(--cg-primary-txt); }
.nav-tabs .nav-link.active, .nav-tabs .nav-link.active:hover,
.nav-tabs .nav-link.active:focus { color: var(--cg-primary-txt); border-bottom-color: var(--cg-primary); }
.nav-pills .nav-link.active, .nav-pills .nav-link.active:hover,
.nav-pills .nav-link.active:focus { background-color: var(--cg-primary); }

.dropdown-menu {
  --bs-dropdown-color: var(--cg-text);
  --bs-dropdown-link-color: var(--cg-text);
  --bs-dropdown-link-hover-color: var(--cg-heading);
  --bs-dropdown-header-color: var(--cg-muted);
  --bs-dropdown-link-active-color: var(--cg-primary-txt);
}

/* Horizontal top menu: active item and active sub-item */
.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle),
.bg-menu-theme.menu-horizontal .menu-inner > .menu-item.active > .menu-link.menu-toggle {
  background-color: var(--cg-primary) !important;
}
.bg-menu-theme.menu-horizontal .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle),
.bg-menu-theme.menu-horizontal .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle)::before {
  color: var(--cg-primary-txt) !important;
}
/* Active item inside a dropdown: pale tint, not solid primary (the rule
   above would otherwise give primary text on a primary background) */
.bg-menu-theme.menu-horizontal .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle) {
  background-color: #ededff !important;
}
.bg-menu-theme .menu-header { color: var(--cg-muted); }
.bg-footer-theme, .bg-footer-theme .footer-link { color: var(--cg-muted); }
.bg-footer-theme .footer-link:hover { color: var(--cg-heading); }

/* Pagination (DataTables uses this) */
.pagination { --bs-pagination-color: var(--cg-text); }
.page-item.active .page-link, .page-item.active .page-link:hover, .page-item.active .page-link:focus,
.pagination li.active > a:not(.page-link) {
  background-color: var(--cg-primary) !important;
  border-color: var(--cg-primary) !important;
  color: #fff !important;
}
.list-group { --bs-list-group-color: var(--cg-text); }

/* ---- Vendor libraries (loaded after this file, hence !important) ----- */
.light-style div.dataTables_wrapper div.dataTables_info,
div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label { color: var(--cg-muted) !important; }
.light-style .select2-container--default .select2-selection__placeholder,
.light-style .select2-container--default .select2-search__field::placeholder,
.light-style .twitter-typeahead .tt-hint,
.light-style .ql-editor.ql-blank:before { color: var(--cg-muted) !important; }
/* Previous/next-month days are still clickable, so they must be legible
   (genuinely disabled days are exempt from the contrast rule and stay pale) */
.light-style .flatpickr-day.prevMonthDay:not(.flatpickr-disabled),
.light-style .flatpickr-day.nextMonthDay:not(.flatpickr-disabled),
.light-style .datepicker table tr td.old:not(.disabled),
.light-style .datepicker table tr td.new:not(.disabled),
.light-style .daterangepicker td.off:not(.disabled) { color: var(--cg-muted) !important; }
.light-style .dz-size, .light-style .ui-timepicker-list li .ui-timepicker-duration { color: var(--cg-muted) !important; }

/* ---- Legacy markup still emitted by some pages ----------------------- */
/* <font color="#FF0000"> / <font color=red>: pure red is 4.0:1 */
font[color="#FF0000" i], font[color="red" i] { color: var(--cg-danger-txt); }
[style^="color:red"], [style^="color: red"] { color: var(--cg-danger-txt) !important; }
[style^="color: #666cff"], [style^="color:#666cff"] { color: var(--cg-primary-txt) !important; }

/* Table total rows - lighter alternative to .table-dark.
   <tr class="table-subtotal">  pale tint, for a running subtotal inside tbody
   <tfoot class="table-totals"> deeper tint with a rule above, for grand totals
   <tr class="table-compare">   inside .table-totals: muted, for comparison figures
   (Bootstrap 5.2 paints cells with --bs-table-bg plus an inset --bs-table-accent-bg
   shadow for stripes/hover, so both are set to keep the tint solid) */
.table tr.table-subtotal > * {
  --bs-table-bg: #f3f3fd;
  --bs-table-accent-bg: #f3f3fd;
  color: var(--cg-heading);
  font-weight: 600;
  border-top: 1px solid #c9cbf3;
}
.table > tfoot.table-totals > tr > * {
  --bs-table-bg: #e6e7fb;
  --bs-table-accent-bg: #e6e7fb;
  color: var(--cg-heading);
  font-weight: 600;
}
.table > tfoot.table-totals > tr:first-child > * {
  border-top: 2px solid var(--cg-primary);
}
.table > tfoot.table-totals > tr.table-compare > * {
  color: var(--cg-muted);
  font-weight: 400;
  font-size: .9em;
}
.table > tfoot.table-totals > tr.table-compare strong { font-weight: 500; }