/* ==========================================================================
   PoolPal — modern UI refresh
   --------------------------------------------------------------------------
   A pure paint job. Loaded last (see templates/element/head-css.php) so it
   overrides the stock Skote theme in app.min.css without editing it.

   Nothing here changes layout metrics the JS depends on — the sidebar is
   still 250px, the topbar still 70px, the collapsed sidebar still 70px.
   Only colour, depth, radius, spacing and type are touched.

   Palette is drawn from the Barrier Reef logo: deep water navy + ocean blue,
   with a cyan accent. Remove the <link> to this file to get the old look back.
   ========================================================================== */

:root {
    /* brand */
    --pp-primary: #1567d3;
    --pp-primary-hover: #1157b4;
    --pp-primary-soft: #e9f1fd;
    --pp-primary-ring: rgba(21, 103, 211, .18);
    --pp-accent: #06b6d4;

    /* status */
    --pp-success: #10a67a;
    --pp-success-soft: #e5f6f1;
    --pp-danger: #e05260;
    --pp-danger-soft: #fdecee;
    --pp-warning: #e0a020;
    --pp-warning-soft: #fdf4e3;
    --pp-info: #2f9bea;
    --pp-info-soft: #e8f4fd;

    /* surfaces */
    --pp-canvas: #f4f6fa;
    --pp-surface: #ffffff;
    --pp-border: #e6eaf1;
    --pp-border-soft: #eef1f6;

    /* ink */
    --pp-ink: #1c2536;
    --pp-ink-soft: #5b6579;
    --pp-ink-mute: #8a93a5;

    /* sidebar */
    --pp-nav-bg: #16203a;
    --pp-nav-bg-2: #1d2a49;
    --pp-nav-ink: #a9b4cd;
    --pp-nav-ink-mute: #6f7c99;

    /* elevation */
    --pp-shadow-sm: 0 1px 2px rgba(19, 32, 56, .06);
    --pp-shadow: 0 1px 2px rgba(19, 32, 56, .05), 0 6px 16px -6px rgba(19, 32, 56, .10);
    --pp-shadow-lg: 0 2px 4px rgba(19, 32, 56, .05), 0 16px 32px -12px rgba(19, 32, 56, .16);

    /* shape */
    --pp-radius-sm: 8px;
    --pp-radius: 12px;
    --pp-radius-lg: 16px;
}

/* --------------------------------------------------------------------------
   1. Base + typography
   -------------------------------------------------------------------------- */

body {
    background-color: var(--pp-canvas);
    color: var(--pp-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -.006em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--pp-ink);
    letter-spacing: -.018em;
    font-weight: 600;
}

a {
    color: var(--pp-primary);
    text-decoration: none;
    transition: color .15s ease;
}

a:hover {
    color: var(--pp-primary-hover);
}

.text-muted {
    color: var(--pp-ink-mute) !important;
}

/* Consistent, visible focus for keyboard users — the stock theme has almost none. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--pp-primary);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Modern thin scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: #c7cedb transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: #c7cedb;
    border-radius: 8px;
    border: 3px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: #aab4c6;
}

/* --------------------------------------------------------------------------
   2. Topbar
   -------------------------------------------------------------------------- */

#page-topbar {
    background-color: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--pp-border);
    box-shadow: none;
}

body[data-sidebar=dark] .navbar-brand-box {
    background: var(--pp-nav-bg);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    border-right: 1px solid rgba(255, 255, 255, .06);
}

.header-item {
    color: var(--pp-ink-soft);
    border-radius: var(--pp-radius-sm);
    transition: background-color .15s ease, color .15s ease;
}

.header-item:hover {
    color: var(--pp-ink);
    background-color: var(--pp-primary-soft);
}

.navbar-header .dropdown .show.header-item {
    background-color: var(--pp-primary-soft);
}

.noti-icon i {
    color: var(--pp-ink-soft);
}

/* Search field */
.app-search .form-control {
    background-color: #f1f4f9;
    border: 1px solid transparent;
    border-radius: 10px;
    height: 40px;
    font-size: 13px;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.app-search .form-control:focus {
    background-color: var(--pp-surface);
    border-color: var(--pp-primary);
    box-shadow: 0 0 0 4px var(--pp-primary-ring);
}

.app-search span {
    line-height: 40px;
    color: var(--pp-ink-mute);
}

/* --------------------------------------------------------------------------
   3. Sidebar
   -------------------------------------------------------------------------- */

body[data-sidebar=dark] .vertical-menu {
    background: linear-gradient(180deg, var(--pp-nav-bg) 0%, var(--pp-nav-bg-2) 100%);
    border-right: 1px solid rgba(255, 255, 255, .06);
    box-shadow: none;
}

#sidebar-menu {
    padding: 14px 12px 30px 12px;
}

body[data-sidebar=dark] #sidebar-menu ul li a {
    color: var(--pp-nav-ink);
    font-size: 13.5px;
    font-weight: 500;
    padding: .6rem .85rem;
    margin: 2px 0;
    border-radius: 10px;
    transition: background-color .18s ease, color .18s ease;
}

body[data-sidebar=dark] #sidebar-menu ul li a i {
    color: var(--pp-nav-ink-mute);
    font-size: 1.15rem;
    min-width: 1.9rem;
    transition: color .18s ease;
}

body[data-sidebar=dark] #sidebar-menu ul li a:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, .07);
}

body[data-sidebar=dark] #sidebar-menu ul li a:hover i {
    color: #fff;
}

/* Active item: filled pill in brand blue, with a soft glow. The stock theme
   only recolours the text, which makes it hard to see where you are. */
body[data-sidebar=dark] #sidebar-menu ul li a.active,
body[data-sidebar=dark] #sidebar-menu ul li.mm-active > a {
    background: linear-gradient(135deg, var(--pp-primary) 0%, #2b82ea 100%);
    color: #fff !important;
    box-shadow: 0 6px 16px -6px rgba(21, 103, 211, .8);
}

body[data-sidebar=dark] #sidebar-menu ul li a.active i,
body[data-sidebar=dark] #sidebar-menu ul li.mm-active > a i {
    color: #fff !important;
}

/* Sub-menus sit in a subtle inset well */
body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu {
    margin: 2px 0 6px .85rem;
    padding-left: .6rem;
    border-left: 1px solid rgba(255, 255, 255, .10);
}

body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a {
    color: var(--pp-nav-ink-mute);
    padding: .38rem .75rem;
    font-size: 13px;
}

body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, .05);
}

body[data-sidebar=dark] .menu-title {
    color: var(--pp-nav-ink-mute);
    font-size: 10.5px;
    letter-spacing: .12em;
    padding: 18px 14px 8px !important;
}

/* Collapsed rail */
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a {
    background: rgba(255, 255, 255, .08);
    border-radius: 10px;
}

body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu > ul ul {
    background-color: var(--pp-nav-bg-2);
    border-radius: var(--pp-radius-sm);
    box-shadow: var(--pp-shadow-lg);
}

/* --------------------------------------------------------------------------
   4. Page header / breadcrumb
   -------------------------------------------------------------------------- */

.page-title-box {
    padding-bottom: 20px;
}

.page-title-box h4 {
    text-transform: none;
    font-size: 21px !important;
    font-weight: 650;
    letter-spacing: -.022em;
    color: var(--pp-ink);
}

.page-title-box .breadcrumb {
    font-size: 12.5px;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #c3cad6;
}

.breadcrumb-item a {
    color: var(--pp-ink-mute);
}

.breadcrumb-item a:hover {
    color: var(--pp-primary);
}

.breadcrumb-item.active {
    color: var(--pp-ink-soft);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   5. Cards
   -------------------------------------------------------------------------- */

.card {
    background-color: var(--pp-surface);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    box-shadow: var(--pp-shadow);
    margin-bottom: 24px;
}

.card-body {
    padding: 1.5rem;
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--pp-border-soft);
    padding: 1.15rem 1.5rem;
    border-radius: var(--pp-radius-lg) var(--pp-radius-lg) 0 0 !important;
}

.card-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--pp-ink);
}

.card-title-desc {
    color: var(--pp-ink-mute);
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
    border-radius: 10px;
    font-weight: 500;
    font-size: 13.5px;
    padding: .5rem 1rem;
    letter-spacing: -.005em;
    transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn-rounded {
    border-radius: 999px;
}

.btn-sm {
    border-radius: 8px;
    padding: .32rem .75rem;
    font-size: 12.5px;
}

.btn-lg {
    border-radius: 12px;
}

.btn-primary {
    background-color: var(--pp-primary);
    border-color: var(--pp-primary);
    box-shadow: 0 1px 2px rgba(19, 32, 56, .08);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--pp-primary-hover);
    border-color: var(--pp-primary-hover);
    box-shadow: 0 6px 16px -6px rgba(21, 103, 211, .7);
}

.btn-primary:focus-visible {
    box-shadow: 0 0 0 4px var(--pp-primary-ring);
}

.btn-success {
    background-color: var(--pp-success);
    border-color: var(--pp-success);
}

.btn-danger {
    background-color: var(--pp-danger);
    border-color: var(--pp-danger);
}

.btn-warning {
    background-color: var(--pp-warning);
    border-color: var(--pp-warning);
}

.btn-info {
    background-color: var(--pp-info);
    border-color: var(--pp-info);
}

.btn-light {
    background-color: #f1f4f9;
    border-color: #e6eaf1;
    color: var(--pp-ink-soft);
}

.btn-light:hover {
    background-color: #e6eaf1;
    border-color: #dae0ea;
    color: var(--pp-ink);
}

.btn-outline-primary {
    color: var(--pp-primary);
    border-color: #bcd4f3;
}

.btn-outline-primary:hover {
    background-color: var(--pp-primary);
    border-color: var(--pp-primary);
}

/* Size/variant modifiers that set their own padding have to be restated after
   the .btn shorthand above, or this file silently wins and squashes them.
   .btn-label reserves 44px on the left for its absolutely-positioned
   .label-icon — without this the icon sits on top of the button text. */
.btn-label {
    padding-left: 44px;
}

.btn-label.btn-sm {
    padding-left: 38px;
}

.btn-label .label-icon {
    border-radius: 10px 0 0 10px;
}

.btn-sm.btn-label .label-icon {
    border-radius: 8px 0 0 8px;
}

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */

.form-label {
    font-size: 13px;
    font-weight: 550;
    color: var(--pp-ink-soft);
    margin-bottom: .4rem;
}

.form-control,
.form-select {
    border: 1px solid #dde3ec;
    border-radius: 10px;
    padding: .5rem .8rem;
    font-size: 13.5px;
    color: var(--pp-ink);
    background-color: var(--pp-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--pp-primary);
    box-shadow: 0 0 0 4px var(--pp-primary-ring);
}

.form-control::placeholder {
    color: #a8b1c1;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #f5f7fa;
    color: var(--pp-ink-mute);
}

/* Same restatement rule as the buttons: these carry their own padding. */
.form-control-sm,
.form-select-sm {
    padding: .3rem .6rem;
    font-size: 12.5px;
    border-radius: 8px;
}

.form-control-lg,
.form-select-lg {
    padding: .65rem 1rem;
    font-size: 15px;
    border-radius: 12px;
}

.input-group-text {
    background-color: #f1f4f9;
    border-color: #dde3ec;
    border-radius: 10px;
    color: var(--pp-ink-soft);
}

.form-check-input:checked {
    background-color: var(--pp-primary);
    border-color: var(--pp-primary);
}

.form-check-input:focus {
    border-color: var(--pp-primary);
    box-shadow: 0 0 0 4px var(--pp-primary-ring);
}

/* Select2 — used across the portal, styled to match the native controls */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid #dde3ec !important;
    border-radius: 10px !important;
    min-height: 38px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--pp-primary) !important;
    box-shadow: 0 0 0 4px var(--pp-primary-ring);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--pp-primary) !important;
}

.select2-dropdown {
    border-color: #dde3ec;
    border-radius: var(--pp-radius-sm);
    box-shadow: var(--pp-shadow-lg);
}

/* --------------------------------------------------------------------------
   8. Tables + DataTables
   -------------------------------------------------------------------------- */

.table {
    color: var(--pp-ink);
    font-size: 13.5px;
    border-color: var(--pp-border-soft);
}

.table > thead {
    border-bottom: 1px solid var(--pp-border);
}

.table > thead th {
    background-color: transparent !important;
    color: var(--pp-ink-mute);
    font-size: 11px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: .85rem .9rem;
    border-bottom: 0;
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding: .8rem .9rem;
    border-top: 0;
    border-bottom: 1px solid var(--pp-border-soft);
    vertical-align: middle;
}

.table > tbody > tr:last-child > td {
    border-bottom: 0;
}

.table-sm > :not(caption) > * > * {
    padding: .4rem .5rem;
}

/* Replace the heavy zebra striping with a clean hover highlight.
   DataTables paints its stripes with an inset box-shadow from a selector that
   outweighs the plain Bootstrap one, so both have to be unset explicitly. */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: transparent;
    box-shadow: none;
    color: inherit;
}

table.dataTable.table-striped > tbody > tr.odd > *,
table.dataTable.stripe > tbody > tr.odd > *,
table.dataTable.display > tbody > tr.odd > *,
table.dataTable > tbody > tr.odd > * {
    box-shadow: none !important;
    background-color: transparent !important;
}

.table > tbody > tr {
    transition: background-color .12s ease;
}

.table > tbody > tr:hover > * {
    background-color: #f6f9fe;
    box-shadow: none;
    color: inherit;
}

.table-hover > tbody > tr:hover > * {
    background-color: #f6f9fe;
    color: inherit;
}

table.dataTable.table-hover > tbody > tr:hover > *,
table.dataTable > tbody > tr:hover > * {
    box-shadow: none !important;
    background-color: #f4f8fe !important;
}

/* DataTables chrome */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #dde3ec;
    border-radius: 9px;
    padding: .35rem .6rem;
    font-size: 13px;
    color: var(--pp-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    outline: none;
    border-color: var(--pp-primary);
    box-shadow: 0 0 0 4px var(--pp-primary-ring);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info {
    font-size: 13px;
    color: var(--pp-ink-soft);
}

.dataTables_wrapper .dataTables_info {
    color: var(--pp-ink-mute);
}

/* Export buttons as a segmented control */
.dt-buttons .dt-button,
div.dt-buttons .btn {
    background: #f1f4f9 !important;
    background-image: none !important;
    border: 1px solid #e2e7ef !important;
    color: var(--pp-ink-soft) !important;
    border-radius: 9px !important;
    font-size: 12.5px !important;
    font-weight: 550;
    padding: .35rem .85rem !important;
    margin-right: 6px;
    box-shadow: none !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.dt-buttons .dt-button:hover,
div.dt-buttons .btn:hover {
    background: var(--pp-primary-soft) !important;
    border-color: #bcd4f3 !important;
    color: var(--pp-primary) !important;
}

/* Sort arrows shouldn't shout */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    outline: none;
}

/* Pagination */
.pagination {
    gap: 4px;
}

.page-link {
    border: 1px solid transparent;
    border-radius: 9px !important;
    color: var(--pp-ink-soft);
    font-size: 13px;
    padding: .38rem .7rem;
    transition: background-color .15s ease, color .15s ease;
}

.page-link:hover {
    background-color: var(--pp-primary-soft);
    color: var(--pp-primary);
    border-color: transparent;
}

.page-item.active .page-link {
    background-color: var(--pp-primary);
    border-color: var(--pp-primary);
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(21, 103, 211, .7);
}

.page-item.disabled .page-link {
    color: #c3cad6;
    background-color: transparent;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--pp-primary) !important;
    border-color: var(--pp-primary) !important;
    color: #fff !important;
    border-radius: 9px;
}

/* --------------------------------------------------------------------------
   9. Badges, alerts, dropdowns, modals
   -------------------------------------------------------------------------- */

.badge {
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .01em;
    padding: .34em .62em;
    border-radius: 7px;
}

.badge.bg-primary   { background-color: var(--pp-primary) !important; }
.badge.bg-success   { background-color: var(--pp-success) !important; }
.badge.bg-danger    { background-color: var(--pp-danger) !important; }
.badge.bg-warning   { background-color: var(--pp-warning) !important; }
.badge.bg-info      { background-color: var(--pp-info) !important; }

/* Soft badge variants read better in dense tables */
.badge-soft-primary { background-color: var(--pp-primary-soft) !important; color: var(--pp-primary) !important; }
.badge-soft-success { background-color: var(--pp-success-soft) !important; color: var(--pp-success) !important; }
.badge-soft-danger  { background-color: var(--pp-danger-soft)  !important; color: var(--pp-danger)  !important; }
.badge-soft-warning { background-color: var(--pp-warning-soft) !important; color: #9a6c05 !important; }
.badge-soft-info    { background-color: var(--pp-info-soft)    !important; color: var(--pp-info)    !important; }

.alert {
    border: 1px solid transparent;
    border-radius: var(--pp-radius);
    font-size: 13.5px;
    padding: .9rem 1.1rem;
}

.alert-success { background-color: var(--pp-success-soft); border-color: #c7ebe0; color: #0b7355; }
.alert-danger  { background-color: var(--pp-danger-soft);  border-color: #f7cdd2; color: #a32d3a; }
.alert-warning { background-color: var(--pp-warning-soft); border-color: #f3ddb0; color: #8a6210; }
.alert-info    { background-color: var(--pp-info-soft);    border-color: #c5e2f8; color: #1a6ba8; }

.dropdown-menu {
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    box-shadow: var(--pp-shadow-lg);
    padding: 6px;
    font-size: 13.5px;
}

.dropdown-item {
    border-radius: 8px;
    padding: .5rem .7rem;
    color: var(--pp-ink-soft);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--pp-primary-soft);
    color: var(--pp-primary);
}

.dropdown-item.text-danger:hover {
    background-color: var(--pp-danger-soft);
}

.modal-content {
    border: 0;
    border-radius: var(--pp-radius-lg);
    box-shadow: var(--pp-shadow-lg);
}

.modal-header,
.modal-footer {
    border-color: var(--pp-border-soft);
    padding: 1.1rem 1.4rem;
}

.modal-body {
    padding: 1.4rem;
}

.modal-title {
    font-size: 16px;
    font-weight: 600;
}

.nav-tabs {
    border-bottom: 1px solid var(--pp-border);
}

.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--pp-ink-mute);
    font-size: 13.5px;
    font-weight: 550;
    padding: .7rem 1rem;
}

.nav-tabs .nav-link:hover {
    color: var(--pp-ink);
    border-bottom-color: #d3dced;
}

.nav-tabs .nav-link.active {
    color: var(--pp-primary);
    background-color: transparent;
    border-bottom-color: var(--pp-primary);
}

/* --------------------------------------------------------------------------
   10. Announcements
   The brand yellow is kept as-is by request — only the corners are rounded so
   the notice sits properly inside the new card radius.
   -------------------------------------------------------------------------- */

.card .announcement_bg_active,
div.announcement_bg_active {
    border-radius: var(--pp-radius) !important;
}

.card .announcement_bg_inactive,
div.announcement_bg_inactive {
    border-radius: var(--pp-radius) !important;
}

/* --------------------------------------------------------------------------
   11. Login / account pages
   -------------------------------------------------------------------------- */

.account-pages {
    background:
        radial-gradient(1100px 520px at 50% -8%, #e3edfb 0%, rgba(227, 237, 251, 0) 62%),
        var(--pp-canvas);
    min-height: 100vh;
    display: flex;
    align-items: center;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
}

.account-pages > .container {
    width: 100%;
}

.account-pages .card {
    border: 1px solid var(--pp-border);
    border-radius: 18px;
    box-shadow: 0 4px 8px rgba(19, 32, 56, .04), 0 24px 48px -20px rgba(19, 32, 56, .22);
}

.account-pages .card-body {
    padding: 1.75rem;
}

.account-pages .btn-primary {
    padding: .62rem 1rem;
    font-size: 14px;
    font-weight: 550;
}

.account-pages .form-control {
    padding: .6rem .85rem;
}

.auth-pass-inputgroup .btn-light {
    border-left: 0;
}

/* --------------------------------------------------------------------------
   12. Footer + odds and ends
   -------------------------------------------------------------------------- */

.footer {
    background-color: transparent;
    border-top: 1px solid var(--pp-border);
    color: var(--pp-ink-mute);
    font-size: 12.5px;
}

hr {
    border-color: var(--pp-border);
    opacity: 1;
}

code {
    color: var(--pp-primary);
    background: var(--pp-primary-soft);
    padding: .1rem .35rem;
    border-radius: 5px;
}

/* Toastr notifications */
#toast-container > div {
    border-radius: var(--pp-radius);
    box-shadow: var(--pp-shadow-lg);
    opacity: 1;
    font-size: 13.5px;
}

/* Utility colour overrides so text-primary etc. follow the new brand */
.text-primary { color: var(--pp-primary) !important; }
.bg-primary   { background-color: var(--pp-primary) !important; }
.text-success { color: var(--pp-success) !important; }
.bg-success   { background-color: var(--pp-success) !important; }
.text-danger  { color: var(--pp-danger) !important; }
.bg-danger    { background-color: var(--pp-danger) !important; }
.bg-soft-primary { background-color: var(--pp-primary-soft) !important; }

/* Respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}