/*
 * Portal theme: light canvas, soft rounded cards, dark sidebar, black pill buttons and an accent
 * gradient. The accent, canvas and sidebar colours come from the colour theme chosen in the
 * settings panel (body.theme-<name>, see "Colour themes" below); MoreStorage green is the default.
 * Loaded after AdminLTE and style.css, so it overrides both.
 */

:root {
    --pt-bg: #edebe7;
    --pt-surface: #f8f7f5;
    --pt-surface-strong: #ffffff;
    --pt-ink: #16171d;
    --pt-muted: #66645f;
    --pt-line: #e2ded8;
    --pt-hover: #fbfaf8;

    --pt-sidebar: #14151c;
    --pt-sidebar-ink: #b8bac4;
    --pt-sidebar-muted: #7c7f8c;
    --pt-sidebar-active: rgba(255, 255, 255, .2);

    --pt-accent-1: #df5a36;
    --pt-accent-2: #c8357a;
    /* The same two colours as r, g, b, for shadows and focus rings */
    --pt-accent-rgb: 223, 90, 54;
    --pt-accent-2-rgb: 200, 53, 122;
    --pt-accent-gradient: linear-gradient(135deg, var(--pt-accent-1) 0%, var(--pt-accent-2) 100%);
    --pt-accent-text: #b23a4a;
    --pt-accent-soft: #f9dcd8;
    /* The accent on the dark sidebar, e.g. the dots of the pay-off on the login page */
    --pt-accent-bright: #ff7a59;

    --pt-success: #23834a;
    --pt-success-soft: #e1f2e7;
    --pt-danger: #c93b3b;
    --pt-danger-soft: #fbe3e1;
    --pt-warning: #8a5a00;
    --pt-warning-soft: #fbeed2;
    --pt-info: #2f5d9e;
    --pt-info-soft: #e3ebf7;

    --pt-radius-lg: 24px;
    --pt-radius-md: 16px;
    --pt-radius-sm: 12px;
    /* Buttons, menu items and inputs: slightly rounded, not pill-shaped */
    --pt-radius-btn: 10px;
    --pt-shadow: 0 1px 2px rgba(22, 23, 29, .04), 0 10px 30px rgba(22, 23, 29, .05);
    --pt-font: 'Poppins', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    /* Montserrat: the typeface of the MoreStorage logo */
    --pt-font-heading: 'Montserrat', var(--pt-font);
}

body.dark-mode {
    --pt-bg: #1b1c22;
    --pt-surface: #24252c;
    --pt-surface-strong: #2b2c34;
    --pt-ink: #ececef;
    --pt-muted: #a4a5ae;
    --pt-line: #3a3b44;
    --pt-hover: #32333c;
    --pt-accent-text: #f2a0a8;
    --pt-accent-soft: rgba(var(--pt-accent-rgb), .2);
    --pt-success: #7fd3a0;
    --pt-success-soft: rgba(35, 131, 74, .25);
    --pt-danger: #f19a9a;
    --pt-danger-soft: rgba(201, 59, 59, .25);
    --pt-warning: #f0c56b;
    --pt-warning-soft: rgba(138, 90, 0, .3);
    --pt-info: #9cbcf0;
    --pt-info-soft: rgba(47, 93, 158, .3);
}

/* ---------- Colour themes (settings panel, components/LayoutSettings.php) ----------
 * Each theme sets the accent, the canvas and the sidebar, in light and in dark mode. The darker
 * accent shades keep white button text readable; the logo keeps its own MoreStorage green. */

body.theme-morestorage {
    --pt-bg: #eef1ec;
    --pt-surface: #f8faf6;
    --pt-line: #dde3d9;
    --pt-hover: #f3f6f1;
    --pt-sidebar: #0f1d14;
    --pt-sidebar-ink: #b5c3b8;
    --pt-sidebar-muted: #7a8a7e;
    --pt-sidebar-active: rgba(66, 183, 8, .24);
    --pt-accent-1: #379b0c;
    --pt-accent-2: #1d7a44;
    --pt-accent-rgb: 55, 155, 12;
    --pt-accent-2-rgb: 29, 122, 68;
    --pt-accent-text: #2b7a08;
    --pt-accent-soft: #e1f3d5;
    --pt-accent-bright: #5fd12a;
}

body.dark-mode.theme-morestorage {
    --pt-bg: #141a16;
    --pt-surface: #1b231d;
    --pt-surface-strong: #222b24;
    --pt-line: #2f3a31;
    --pt-hover: #29332b;
    --pt-accent-text: #8fd866;
    --pt-accent-soft: rgba(66, 183, 8, .18);
}

body.theme-ocean {
    --pt-bg: #edf0f4;
    --pt-surface: #f7f9fc;
    --pt-line: #dce2ea;
    --pt-hover: #f2f5f9;
    --pt-sidebar: #0e1626;
    --pt-sidebar-ink: #b4bfd1;
    --pt-sidebar-muted: #76829a;
    --pt-sidebar-active: rgba(31, 111, 216, .3);
    --pt-accent-1: #1f6fd8;
    --pt-accent-2: #0e8fb0;
    --pt-accent-rgb: 31, 111, 216;
    --pt-accent-2-rgb: 14, 143, 176;
    --pt-accent-text: #1a5fb8;
    --pt-accent-soft: #dde9f9;
    --pt-accent-bright: #5aa2ff;
}

body.dark-mode.theme-ocean {
    --pt-bg: #131821;
    --pt-surface: #1a212d;
    --pt-surface-strong: #212937;
    --pt-line: #2e3747;
    --pt-hover: #283141;
    --pt-accent-text: #8ab8f5;
    --pt-accent-soft: rgba(31, 111, 216, .22);
}

body.theme-coral {
    --pt-sidebar-active: rgba(255, 255, 255, .2);
}

body.theme-purple {
    --pt-bg: #efedf3;
    --pt-surface: #f9f8fc;
    --pt-line: #e1dcea;
    --pt-hover: #f4f2f8;
    --pt-sidebar: #15122a;
    --pt-sidebar-ink: #bdb7d4;
    --pt-sidebar-muted: #8079a0;
    --pt-sidebar-active: rgba(109, 74, 232, .32);
    --pt-accent-1: #6d4ae8;
    --pt-accent-2: #a737ba;
    --pt-accent-rgb: 109, 74, 232;
    --pt-accent-2-rgb: 167, 55, 186;
    --pt-accent-text: #5a3bc9;
    --pt-accent-soft: #e8e1fb;
    --pt-accent-bright: #a88cff;
}

body.dark-mode.theme-purple {
    --pt-bg: #17151f;
    --pt-surface: #1f1c2a;
    --pt-surface-strong: #262335;
    --pt-line: #353046;
    --pt-hover: #2e2a3d;
    --pt-accent-text: #b9a6f7;
    --pt-accent-soft: rgba(109, 74, 232, .22);
}

body.theme-graphite {
    --pt-bg: #eceef1;
    --pt-surface: #f8f9fa;
    --pt-line: #dcdfe4;
    --pt-hover: #f3f4f6;
    --pt-sidebar: #111318;
    --pt-sidebar-ink: #b4b8c0;
    --pt-sidebar-muted: #7a7f89;
    --pt-sidebar-active: rgba(255, 255, 255, .14);
    --pt-accent-1: #3d4654;
    --pt-accent-2: #1f2530;
    --pt-accent-rgb: 61, 70, 84;
    --pt-accent-2-rgb: 31, 37, 48;
    --pt-accent-text: #2f3744;
    --pt-accent-soft: #e3e6eb;
    --pt-accent-bright: #aeb8c6;
}

body.dark-mode.theme-graphite {
    --pt-bg: #16181c;
    --pt-surface: #1e2025;
    --pt-surface-strong: #25282e;
    --pt-line: #34373e;
    --pt-hover: #2d3036;
    /* A dark slate accent disappears on a dark canvas */
    --pt-accent-1: #64748b;
    --pt-accent-2: #475569;
    --pt-accent-rgb: 100, 116, 139;
    --pt-accent-2-rgb: 71, 85, 105;
    --pt-accent-text: #cbd5e1;
    --pt-accent-soft: rgba(100, 116, 139, .22);
}

/* Declared again on <body>, where the theme's colours are set: a custom property that uses other
   custom properties is worked out where it is declared, so the one on :root stays coral */
body {
    --pt-accent-gradient: linear-gradient(135deg, var(--pt-accent-1) 0%, var(--pt-accent-2) 100%);
}

/* ---------- Base ---------- */

body,
.tooltip,
.popover {
    font-family: var(--pt-font);
}

body {
    font-size: .875rem;
    color: var(--pt-ink);
    background: var(--pt-bg);
}

.wrapper,
.content-wrapper {
    background: var(--pt-bg);
}

a {
    color: var(--pt-ink);
}

a:hover,
a:focus {
    color: var(--pt-accent-text);
}

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

.text-muted,
.help-block,
.hint-block {
    color: var(--pt-muted) !important;
}

/* ---------- Sidebar ---------- */

.main-sidebar,
.main-sidebar::before,
[class*=sidebar-dark-] {
    background: var(--pt-sidebar);
}

.main-sidebar {
    box-shadow: none !important;
}

.main-sidebar .brand-link {
    border-bottom: 0 !important;
    padding: 1.15rem .9rem;
    color: #fff;
}

.main-sidebar .brand-link .brand-text {
    font-size: 1rem;
    font-weight: 600 !important;
    letter-spacing: -.01em;
}

[class*=sidebar-dark-] .sidebar a {
    color: var(--pt-sidebar-ink);
}

/* The search right under the logo bar, now the user is in the top bar */
.main-sidebar .pt-sidebar-search {
    margin: 1rem 0 .5rem;
}

.main-sidebar .form-control-sidebar,
.main-sidebar .btn-sidebar {
    background: rgba(255, 255, 255, .07) !important;
    border: 0 !important;
    color: #fff;
}

.main-sidebar .form-control-sidebar {
    border-radius: var(--pt-radius-sm) 0 0 var(--pt-radius-sm);
}

.main-sidebar .btn-sidebar {
    border-radius: 0 var(--pt-radius-sm) var(--pt-radius-sm) 0;
}

.nav-sidebar .nav-header {
    padding: 1.1rem 1rem .35rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--pt-sidebar-muted) !important;
}

.nav-sidebar .nav-link {
    position: relative;
    border-radius: var(--pt-radius-btn);
    padding: .6rem 1rem;
    color: var(--pt-sidebar-ink);
}

.nav-sidebar .nav-link:hover,
.nav-sidebar .nav-link:focus,
[class*=sidebar-dark-] .nav-sidebar > .nav-item:hover > .nav-link {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

/* Active item: in the theme colour with a white dot. .main-sidebar makes the rule outweigh
   style.css, which colours it green (#42b708) in dark mode. */
.main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.main-sidebar[class*=sidebar-dark-] .nav-treeview > .nav-item > .nav-link.active,
.main-sidebar[class*=sidebar-dark-] .nav-treeview > .nav-item > .nav-link.active:hover,
.main-sidebar[class*=sidebar-dark-] .nav-treeview > .nav-item > .nav-link.active:focus {
    background: var(--pt-accent-gradient);
    color: #fff;
    box-shadow: none;
}

.nav-sidebar .nav-link.active:not(:has(.right))::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    transform: translateY(-50%);
}

.sidebar-collapse .main-sidebar:not(:hover) .nav-link.active::after {
    display: none;
}

/* An open parent menu stays plain; its active child gets the pill */
.sidebar-dark-primary .nav-sidebar > .nav-item.menu-open > .nav-link.active,
.sidebar-dark-primary .nav-sidebar > .nav-item.menu-is-opening > .nav-link.active {
    background: transparent;
    color: #fff;
}

.nav-sidebar .nav-treeview .nav-link {
    padding: .5rem 1rem;
}

.nav-sidebar .nav-icon.text-success {
    color: var(--pt-accent-1) !important;
}

/* Test environment label at the top of the menu, right under "Customer Portal" and the same size
   (.pt-brand__label) */
.env-badge {
    margin: .25rem .5rem .75rem;
    padding: .4rem .75rem;
    border: 1px solid rgba(255, 92, 92, .45);
    border-radius: var(--pt-radius-sm);
    background: rgba(255, 92, 92, .12);
    color: #ff8a8a;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .05em;
    text-align: center;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.env-badge::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: .5rem;
    border-radius: 50%;
    background: #ff5c5c;
    box-shadow: 0 0 0 3px rgba(255, 92, 92, .25);
    vertical-align: 1px;
}

.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .env-badge {
    display: none;
}

/* "Go to Vectura" button under the menu: always one line, and hidden while the sidebar is
   collapsed to icons; it comes back when the sidebar expands on hover, like the menu labels */
.main-sidebar .sidebar nav .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main-sidebar .sidebar nav hr {
    border-color: rgba(255, 255, 255, .08);
}

.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .sidebar nav .btn,
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .sidebar nav hr {
    display: none;
}

/* ---------- Top bar ---------- */

.main-header.navbar {
    background: var(--pt-bg);
    border-bottom: 0;
    padding: .9rem 1.5rem;
}

.main-header .nav-link {
    color: var(--pt-ink) !important;
    border-radius: var(--pt-radius-btn);
}

.main-header .nav-link:hover {
    background: var(--pt-surface);
}

.main-header .dropdown > .btn {
    background: var(--pt-ink);
    border-color: var(--pt-ink);
    color: #fff;
    padding: .5rem 1.25rem;
}

.main-header .dropdown > .btn:hover,
.main-header .dropdown > .btn:focus {
    background: #000;
    border-color: #000;
    color: #fff;
}

/* The knowledge base: a button with a label, so it is found; the same shape and height as the
   customer button next to it, outlined */
.main-header .pt-topbar-guide {
    display: flex !important;
    align-items: center;
    gap: .45rem;
    margin: 0 .5rem 0 .6rem;
    padding: .5rem 1.25rem !important;
    /* AdminLTE fixes a top bar link at 2.5rem; this one is as tall as the button next to it */
    height: auto !important;
    border: 1px solid var(--pt-line);
    border-radius: var(--pt-radius-btn);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
}

.main-header .pt-topbar-guide i {
    color: var(--pt-accent-1);
}

.main-header .pt-topbar-guide:hover {
    border-color: var(--pt-accent-1);
    background: var(--pt-accent-soft);
}

/* The user menu: initials and name, opening everything about the account */
.pt-usermenu__toggle {
    display: flex !important;
    align-items: center;
    gap: .5rem;
    padding-top: .3rem !important;
    padding-bottom: .3rem !important;
}

.pt-usermenu__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--pt-accent-gradient);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.pt-usermenu__name {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.pt-usermenu__caret {
    font-size: .65rem;
    color: var(--pt-muted);
}

.pt-usermenu__menu {
    min-width: 250px;
}

.pt-usermenu__menu .dropdown-item i {
    width: 1.25rem;
    margin-right: .35rem;
    color: var(--pt-muted);
    text-align: center;
}

.pt-usermenu__head {
    display: flex;
    flex-direction: column;
    padding: .45rem .9rem .25rem;
}

.pt-usermenu__head span,
.pt-usermenu__label {
    font-size: .78rem;
    color: var(--pt-muted);
}

.pt-usermenu__label {
    padding: .25rem .9rem;
}

.pt-usermenu__languages {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    padding: .2rem .9rem .45rem;
}

.pt-usermenu__languages a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .45rem;
    border: 1px solid var(--pt-line);
    border-radius: 8px;
    color: var(--pt-ink);
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
}

.pt-usermenu__languages a:hover {
    background: var(--pt-hover);
}

.pt-usermenu__languages a.active {
    border-color: var(--pt-ink);
    background: var(--pt-ink);
    color: var(--pt-bg);
}

.pt-usermenu__logout,
.pt-usermenu__logout i {
    color: var(--pt-danger) !important;
}

/* ---------- Page header ---------- */

.content-header {
    padding: .5rem 1.5rem 0;
}

.content-header h1:empty {
    display: none;
}

.content {
    padding: 0 1.5rem 1.5rem;
}

.content h1:first-of-type {
    font-size: 2.1rem;
    font-weight: 600;
    letter-spacing: -.02em;
    margin-bottom: 1.1rem;
}

.breadcrumb {
    background: transparent;
    font-size: .8rem;
}

.breadcrumb-item,
.breadcrumb-item a,
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--pt-muted);
}

.breadcrumb-item.active {
    color: var(--pt-ink);
}

/* ---------- Cards ---------- */

.card {
    background: var(--pt-surface);
    border: 0;
    border-radius: var(--pt-radius-lg);
    box-shadow: var(--pt-shadow);
}

.card > .card-header {
    background: transparent;
    border-bottom: 0;
    padding: 1.25rem 1.5rem .5rem;
    border-radius: var(--pt-radius-lg) var(--pt-radius-lg) 0 0;
}

.card > .card-body {
    padding: 1.25rem 1.5rem;
}

.card > .card-footer {
    background: transparent;
    border-top: 1px solid var(--pt-line);
    border-radius: 0 0 var(--pt-radius-lg) var(--pt-radius-lg);
}

.card-title {
    font-weight: 600;
}

/* Dashboard tiles: first tile is the gradient hero, the rest are soft cards with an icon chip */
.small-box {
    border-radius: var(--pt-radius-lg);
    box-shadow: var(--pt-shadow);
    overflow: hidden;
    min-height: 150px;
}

.small-box.bg-info {
    background: var(--pt-accent-gradient) !important;
    color: #fff !important;
}

.small-box.bg-success,
.small-box.bg-warning,
.small-box.bg-danger,
.small-box.bg-primary,
.small-box.bg-secondary {
    background: var(--pt-surface) !important;
    color: var(--pt-ink) !important;
}

.small-box > .inner {
    padding: 1.4rem 1.5rem;
}

.small-box > .inner h3 {
    font-size: 2.3rem;
    font-weight: 600;
    letter-spacing: -.02em;
    margin-bottom: .35rem;
}

.small-box > .inner p,
.small-box > .inner a {
    font-weight: 500;
    color: inherit;
}

/* !important beats the inline white/black link colours meant for the old coloured tiles */
.small-box:not(.bg-info) > .inner p,
.small-box:not(.bg-info) > .inner a {
    color: var(--pt-muted) !important;
}

.small-box .icon {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 52px;
    height: 52px;
    border-radius: var(--pt-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Font Awesome renders the icons as <svg>, so cover both forms */
.small-box .icon > i,
.small-box .icon > svg,
.small-box:hover .icon > i,
.small-box:hover .icon > svg {
    position: static;
    font-size: 1.35rem !important;
    width: 1.35rem;
    height: 1.35rem;
    transform: none;
}

.small-box.bg-info .icon {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

.small-box.bg-success .icon {
    background: var(--pt-success-soft);
    color: var(--pt-success);
}

.small-box.bg-warning .icon {
    background: var(--pt-warning-soft);
    color: var(--pt-warning);
}

.small-box.bg-danger .icon {
    background: var(--pt-accent-soft);
    color: var(--pt-accent-text);
}

.small-box > .small-box-footer {
    background: transparent;
    color: inherit;
}

/* Keep the number clear of the icon chip; the label below it can use the full width */
.small-box {
    text-align: left;
}

.small-box > .inner h3 {
    padding-right: 3.75rem;
}

/* Phones: no chip (as AdminLTE intends), so the number gets the full width */
@media (max-width: 767.98px) {
    .small-box .icon {
        display: none;
    }

    .small-box > .inner h3 {
        padding-right: 0;
    }

    .content h1:first-of-type {
        font-size: 1.6rem;
    }
}

/* ---------- Tables: each row is a rounded strip ---------- */

.grid-view .table,
table.detail-view {
    border-collapse: separate !important;
    border-spacing: 0 8px;
    background: transparent;
    border: 0;
}

.grid-view .table thead th,
.grid-view .table thead td {
    border: 0 !important;
    background: transparent !important;
    color: var(--pt-muted);
    font-weight: 500;
    font-size: .78rem;
    padding: .4rem 1rem;
}

.grid-view .table thead th a,
.grid-view .table thead th a:hover {
    color: var(--pt-muted);
}

.grid-view .table thead th a.asc,
.grid-view .table thead th a.desc {
    color: var(--pt-ink);
}

.grid-view .table tbody td,
table.detail-view th,
table.detail-view td {
    border: 0 !important;
    background: var(--pt-surface-strong) !important;
    padding: .85rem 1rem;
    vertical-align: middle;
}

.grid-view .table tbody tr > :first-child,
table.detail-view tr > :first-child {
    border-radius: var(--pt-radius-md) 0 0 var(--pt-radius-md);
}

.grid-view .table tbody tr > :last-child,
table.detail-view tr > :last-child {
    border-radius: 0 var(--pt-radius-md) var(--pt-radius-md) 0;
}

.grid-view .table tbody tr > :only-child {
    border-radius: var(--pt-radius-md);
}

.grid-view .table tbody tr:hover td {
    background: var(--pt-hover) !important;
}

table.detail-view th {
    color: var(--pt-muted);
    font-weight: 500;
    width: 30%;
}

/* View / edit / delete icons on one line */
.grid-view .table tbody td:has(> a[data-pjax="0"]) {
    white-space: nowrap;
}

.grid-view .table tbody td > a[data-pjax="0"] + a[data-pjax="0"] {
    margin-left: .55rem;
}

/* Filter row sits on the canvas, not in a strip */
.grid-view .table .filters td,
.grid-view .table thead .filters td {
    background: transparent !important;
    padding: .25rem .5rem;
}

.grid-view .empty {
    color: var(--pt-muted);
}

.grid-view .summary {
    color: var(--pt-muted);
    font-size: .8rem;
    margin-bottom: .25rem;
}

.kv-grid-container,
.kv-grid-wrapper,
.kv-panel-before,
.kv-panel-after {
    border: 0 !important;
    background: transparent;
}

/* Other tables (forms, modals): lighter borders */
.table {
    color: var(--pt-ink);
}

.table td,
.table th,
.table-bordered,
.table-bordered td,
.table-bordered th {
    border-color: var(--pt-line);
}

.table-striped tbody tr:nth-of-type(odd) {
    background: transparent;
}

/* ---------- Buttons ---------- */

.btn {
    border-radius: var(--pt-radius-btn);
    font-weight: 500;
    padding: .45rem 1.1rem;
    transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.btn-sm,
.btn-group-sm > .btn {
    padding: .3rem .8rem;
}

.btn-xs {
    padding: .15rem .55rem;
}

.btn-lg {
    padding: .65rem 1.5rem;
}

.btn-primary,
.btn-dark,
.btn-primary.disabled,
.btn-primary:disabled {
    background: var(--pt-ink);
    border-color: var(--pt-ink);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle,
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:not(:disabled):not(.disabled):active {
    background: #000;
    border-color: #000;
    color: #fff;
    box-shadow: 0 6px 16px rgba(22, 23, 29, .18);
}

.btn-success,
.btn-success.disabled,
.btn-success:disabled {
    background: var(--pt-accent-gradient);
    border: 0;
    color: #fff;
}

.btn-success:hover,
.btn-success:focus,
.btn-success.focus,
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
    background: var(--pt-accent-gradient);
    border: 0;
    color: #fff;
    box-shadow: 0 6px 16px rgba(var(--pt-accent-2-rgb), .28);
}

.btn-info,
.btn-secondary,
.btn-default,
.btn-light,
.btn-outline-secondary,
.btn-outline-primary {
    background: var(--pt-surface-strong);
    border: 1px solid var(--pt-line);
    color: var(--pt-ink);
}

.btn-info:hover,
.btn-info:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-default:hover,
.btn-default:focus,
.btn-light:hover,
.btn-light:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.show > .btn-outline-secondary.dropdown-toggle,
.show > .btn-default.dropdown-toggle {
    background: var(--pt-surface);
    border-color: var(--pt-line);
    color: var(--pt-ink);
}

.btn-danger {
    background: var(--pt-danger);
    border-color: var(--pt-danger);
    color: #fff;
}

.btn-warning {
    background: #f2b640;
    border-color: #f2b640;
    color: var(--pt-ink);
}

.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 3px rgba(var(--pt-accent-rgb), .2);
}

/* ---------- Forms ---------- */

.form-control,
.custom-select,
.select2-container--krajee-bs4 .select2-selection,
.select2-container--bootstrap4 .select2-selection {
    border-radius: var(--pt-radius-sm);
    border-color: var(--pt-line);
    background-color: var(--pt-surface-strong);
    color: var(--pt-ink);
}

.form-control:focus,
.custom-select:focus,
.select2-container--krajee-bs4.select2-container--open:not(.select2-container--disabled) .select2-selection,
.select2-container--krajee-bs4:not(.select2-container--disabled) .select2-selection:focus {
    border-color: var(--pt-accent-1);
    box-shadow: 0 0 0 3px rgba(var(--pt-accent-rgb), .15);
}

/*
 * Select2 pickers in the theme's colours. "body" in front: a page that registers the theme before
 * the picker (InboundAsset, TransportAsset) gets Select2's own CSS after this file, and its blue
 * (#337ab7, #80bdff) would otherwise win.
 */
body .select2-container--krajee-bs4 .select2-selection {
    border-color: var(--pt-line);
    background-color: var(--pt-surface-strong);
    color: var(--pt-ink);
}

body .select2-container--krajee-bs4 .select2-selection--single .select2-selection__rendered {
    color: var(--pt-ink);
}

body .select2-container--krajee-bs4 .select2-selection--single .select2-selection__placeholder {
    color: var(--pt-muted);
}

body .select2-container--krajee-bs4.select2-container--open:not(.select2-container--disabled) .select2-selection,
body .select2-container--krajee-bs4:not(.select2-container--disabled) .select2-selection:focus {
    border-color: var(--pt-accent-1);
    box-shadow: 0 0 0 3px rgba(var(--pt-accent-rgb), .15);
}

body .select2-container--krajee-bs4:not(.select2-container--disabled) .select2-dropdown {
    border-color: var(--pt-line);
    border-radius: var(--pt-radius-sm);
    background: var(--pt-surface-strong);
    color: var(--pt-ink);
    box-shadow: var(--pt-shadow);
    overflow: hidden;
}

body .select2-container--krajee-bs4 .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--pt-line);
    border-radius: var(--pt-radius-sm);
    background-color: var(--pt-surface);
    color: var(--pt-ink);
    box-shadow: none;
}

body .select2-container--krajee-bs4 .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--pt-accent-1);
    box-shadow: 0 0 0 3px rgba(var(--pt-accent-rgb), .15);
    outline: 0;
}

/* Messages such as "no results" (Select2 makes them yellow) */
body .select2-container--krajee-bs4 li.select2-results__option {
    background: transparent;
    color: var(--pt-muted);
}

body .select2-container--krajee-bs4 .select2-results__option[aria-selected] {
    background: transparent;
    color: var(--pt-ink);
}

/*
 * Under the mouse or the arrow keys: a tint of the accent; the chosen one: in the accent.
 * AdminLTE's dark mode greys the chosen one with !important, hence !important here too.
 */
body .select2-container--krajee-bs4 .select2-results__option[aria-selected="true"] {
    background: transparent !important;
    color: var(--pt-accent-text);
    font-weight: 600;
}

body .select2-container--krajee-bs4 .select2-results__option--highlighted[aria-selected] {
    background: rgba(var(--pt-accent-rgb), .14) !important;
    color: var(--pt-ink);
}

body .select2-container--krajee-bs4 .select2-results__option--highlighted[aria-selected="true"] {
    color: var(--pt-accent-text);
}

body.dark-mode .select2-container--krajee-bs4 .select2-results__option--highlighted[aria-selected] {
    background: rgba(var(--pt-accent-rgb), .28) !important;
}

body .select2-container--krajee-bs4 .select2-selection--multiple .select2-selection__choice {
    border-color: rgba(var(--pt-accent-rgb), .35);
    background: rgba(var(--pt-accent-rgb), .12);
    color: var(--pt-ink);
}

.input-group-text {
    background: var(--pt-surface);
    border-color: var(--pt-line);
    border-radius: var(--pt-radius-sm);
}

label,
.control-label {
    font-weight: 500 !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background: var(--pt-ink);
    border-color: var(--pt-ink);
}

.bootstrap-switch {
    border-radius: 999px;
    border-color: var(--pt-line);
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
    background: var(--pt-ink);
    color: #fff;
}

/* ---------- Badges, alerts, tabs, menus ---------- */

.badge {
    border-radius: 999px;
    padding: .35em .75em;
    font-weight: 500;
}

.badge-success {
    background: var(--pt-success-soft);
    color: var(--pt-success);
}

.badge-danger {
    background: var(--pt-danger-soft);
    color: var(--pt-danger);
}

.badge-warning {
    background: var(--pt-warning-soft);
    color: var(--pt-warning);
}

.badge-info,
.badge-primary,
.badge-secondary {
    background: var(--pt-info-soft);
    color: var(--pt-info);
}

/* Order status pills (dashboard, knowledge centre) */
.pt-pill {
    display: inline-block;
    padding: .2rem .65rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

.pt-pill--muted { background: var(--pt-line); color: var(--pt-muted); }
.pt-pill--info { background: var(--pt-info-soft); color: var(--pt-info); }
.pt-pill--success { background: var(--pt-success-soft); color: var(--pt-success); }
.pt-pill--warning { background: var(--pt-warning-soft); color: var(--pt-warning); }
.pt-pill--danger { background: var(--pt-danger-soft); color: var(--pt-danger); }

.alert {
    border: 0;
    border-radius: var(--pt-radius-md);
}

.alert-success {
    background: var(--pt-success-soft);
    color: var(--pt-success);
}

.alert-danger {
    background: var(--pt-danger-soft);
    color: var(--pt-danger);
}

.alert-warning {
    background: var(--pt-warning-soft);
    color: var(--pt-warning);
}

.alert-info {
    background: var(--pt-info-soft);
    color: var(--pt-info);
}

.alert .close {
    color: inherit;
}

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

.nav-tabs .nav-link {
    border: 0;
    color: var(--pt-muted);
    font-weight: 500;
    padding: .75rem 1.1rem;
    background: transparent;
}

.nav-tabs .nav-link:hover {
    color: var(--pt-ink);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--pt-ink);
    background: transparent;
    box-shadow: inset 0 -3px 0 var(--pt-ink);
}

.dropdown-menu {
    border: 0;
    border-radius: var(--pt-radius-md);
    box-shadow: 0 12px 32px rgba(22, 23, 29, .12);
    padding: .4rem;
}

.dropdown-item {
    border-radius: 10px;
    padding: .45rem .9rem;
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--pt-ink);
    color: #fff;
}

.modal-content {
    border: 0;
    border-radius: var(--pt-radius-lg);
}

/* ---------- Pagination ---------- */

.pagination .page-item .page-link {
    border: 0;
    border-radius: var(--pt-radius-btn);
    margin: 0 2px;
    min-width: 34px;
    text-align: center;
    background: transparent;
    color: var(--pt-ink);
}

.pagination .page-item .page-link:hover {
    background: var(--pt-surface);
}

.pagination .page-item.active .page-link {
    background: var(--pt-ink);
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    color: var(--pt-muted);
    background: transparent;
}

/* ---------- Footer ---------- */

.main-footer {
    background: transparent;
    border-top: 0;
    color: var(--pt-muted);
    font-size: .8rem;
}

/* ---------- Responsive ---------- */

/* Tables scroll inside their own box instead of stretching the page (wrapper added by js/theme.js) */
.pt-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pagination {
    flex-wrap: wrap;
}

/* style.css stacks every .row up to 768px; dashboard tiles fit two per row from 576px,
   and use the full width below that */
@media (min-width: 576px) and (max-width: 768px) {
    .site-index .body-content > .row {
        flex-direction: row;
    }
}

@media (max-width: 575.98px) {
    .site-index .body-content > .row > [class*=col-] {
        max-width: 100%;
    }
}

/* Landscape tablets and small laptops: with the sidebar open, four tiles per row are too narrow */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .site-index .body-content > .row > .col-lg-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Whatever the screen, a narrow tile drops its icon chip and shrinks the number */
.small-box {
    container-type: inline-size;
}

@container (max-width: 240px) {
    .small-box .icon {
        display: none;
    }

    .small-box > .inner h3 {
        font-size: 1.8rem;
        padding-right: 0;
    }
}

@media (max-width: 991.98px) {
    .main-header.navbar {
        padding: .6rem 1rem;
    }

    .content-header {
        padding: .5rem 1rem 0;
    }

    .content {
        padding: 0 1rem 1rem;
    }
}

@media (max-width: 767.98px) {
    /* Top bar: keep a long customer name on one line */
    .main-header.navbar {
        padding: .5rem .75rem;
    }

    .main-header .dropdown > .btn {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: .45rem .95rem;
    }

    /* The customer name gives way, so the icons always fit on the screen */
    .main-header .navbar-nav.ml-auto {
        min-width: 0;
    }

    .main-header .navbar-nav.ml-auto > .nav-item {
        flex-shrink: 0;
    }

    .main-header .navbar-nav.ml-auto > .nav-item:has(> .dropdown > .btn) {
        flex-shrink: 1;
        min-width: 0;
    }

    .main-header .navbar-nav .nav-link {
        padding-left: .45rem;
        padding-right: .45rem;
    }

    /* On a phone the user menu shows only the initials, the knowledge base only its icon, and
       fullscreen is of no use */
    .pt-usermenu__name,
    .pt-usermenu__caret,
    .pt-usermenu__fullscreen,
    .main-header .pt-topbar-guide span {
        display: none !important;
    }

    .main-header .pt-topbar-guide {
        margin: 0 .25rem 0 .4rem;
        padding: .45rem .7rem !important;
    }

    .content-header {
        padding: .25rem .75rem 0;
    }

    .content {
        padding: 0 .75rem 1rem;
    }

    .content > div > .btn,
    .content > div > p > .btn {
        margin-bottom: .4rem;
    }

    /* Grid rows become cards; each cell shows its column name from data-label */
    .pt-table-scroll {
        overflow: visible;
    }

    .grid-view .table,
    .grid-view .table thead,
    .grid-view .table tbody,
    .grid-view .table tr,
    .grid-view .table td {
        display: block;
        width: 100%;
    }

    .grid-view .table {
        border-spacing: 0;
    }

    .grid-view .table thead tr:not(.filters) {
        display: none;
    }

    .grid-view .table thead tr.filters {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .5rem;
        margin-bottom: .75rem;
    }

    .grid-view .table thead tr.filters td {
        padding: 0 !important;
    }

    .grid-view .table thead tr.filters td:not(:has(input, select)) {
        display: none;
    }

    .grid-view .table tbody tr {
        background: var(--pt-surface-strong);
        border-radius: var(--pt-radius-md);
        box-shadow: var(--pt-shadow);
        padding: .7rem 1rem;
        margin-bottom: .6rem;
    }

    .grid-view .table tbody tr > td,
    .grid-view .table tbody tr:hover > td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        padding: .3rem 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        text-align: right;
    }

    .grid-view .table tbody td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 42%;
        color: var(--pt-muted);
        font-weight: 500;
        text-align: left;
    }

    /* Row numbers add nothing on a card */
    .grid-view .table tbody td[data-label="#"] {
        display: none;
    }

    /* Cells without a column name: action icons, the "no results" row */
    .grid-view .table tbody td:not([data-label]) {
        justify-content: flex-end;
    }

    .grid-view .table tbody td.empty {
        justify-content: center;
    }

    /* Detail pages: label above value */
    table.detail-view,
    table.detail-view tbody,
    table.detail-view tr,
    table.detail-view th,
    table.detail-view td {
        display: block;
        width: 100% !important;
    }

    table.detail-view {
        border-spacing: 0;
    }

    /* !important: the striped-table reset would otherwise clear every other row */
    table.detail-view tr {
        background: var(--pt-surface-strong) !important;
        border-radius: var(--pt-radius-md);
        padding: .6rem 1rem;
        margin-bottom: .5rem;
    }

    table.detail-view tr > th,
    table.detail-view tr > td {
        padding: .1rem 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
    }

    table.detail-view th {
        font-size: .78rem;
    }

    /* Wide repeatable form rows (barcodes, packages) scroll sideways */
    .multiple-input {
        overflow-x: auto;
    }
}

/* ---------- Footer: clear gap below the page content ---------- */

.content-wrapper > .content {
    padding-bottom: 2.5rem;
}

.main-footer {
    padding: 1.1rem 1.5rem;
    border-top: 1px solid var(--pt-line) !important;
}

.main-footer a,
body.dark-mode .main-footer a {
    color: var(--pt-ink);
    font-weight: 600;
}

/* ---------- Dark mode: the theme's own surfaces instead of AdminLTE greys and style.css greens ---------- */

/* AdminLTE sets the dark page colour with !important */
body.dark-mode {
    background-color: var(--pt-bg) !important;
}

body.dark-mode .content-wrapper,
body.dark-mode .main-header.navbar,
body.dark-mode .main-footer {
    background: var(--pt-bg);
    color: var(--pt-ink);
}

body.dark-mode .card {
    background: var(--pt-surface);
    color: var(--pt-ink);
}

body.dark-mode .content-wrapper a:not(.btn) {
    color: var(--pt-ink);
}

body.dark-mode .content-wrapper a:not(.btn):hover {
    color: var(--pt-accent-text);
}

body.dark-mode .form-control,
body.dark-mode .custom-select {
    background-color: var(--pt-surface-strong);
    border-color: var(--pt-line);
    color: var(--pt-ink);
}

body.dark-mode .dropdown-menu {
    background: var(--pt-surface-strong);
}

body.dark-mode .dropdown-item {
    color: var(--pt-ink);
}

body.dark-mode .pagination .page-item .page-link {
    background: transparent;
    border: 0;
    color: var(--pt-ink);
}

/* Elements filled with the ink colour: it is light in dark mode, so their text goes dark */
body.dark-mode .btn-primary,
body.dark-mode .btn-dark,
body.dark-mode .main-header .dropdown > .btn,
body.dark-mode .pagination .page-item.active .page-link,
body.dark-mode .dropdown-item.active,
body.dark-mode .dropdown-item:active,
body.dark-mode .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
body.dark-mode .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
    background: var(--pt-ink);
    border-color: var(--pt-ink);
    color: #16171d;
}

body.dark-mode .btn-primary:hover,
body.dark-mode .btn-primary:focus,
body.dark-mode .btn-primary:not(:disabled):not(.disabled):active,
body.dark-mode .btn-primary:not(:disabled):not(.disabled).active,
body.dark-mode .show > .btn-primary.dropdown-toggle,
body.dark-mode .btn-dark:hover,
body.dark-mode .btn-dark:focus,
body.dark-mode .main-header .dropdown > .btn:hover,
body.dark-mode .main-header .dropdown > .btn:focus {
    background: #fff;
    border-color: #fff;
    color: #16171d;
}

body.dark-mode .btn-success,
body.dark-mode .btn-success:hover,
body.dark-mode .btn-success:focus,
body.dark-mode .btn-success:not(:disabled):not(.disabled):active,
body.dark-mode .btn-success:not(:disabled):not(.disabled).active {
    background: var(--pt-accent-gradient);
    border: 0;
    color: #fff;
}

@media (max-width: 991.98px) {
    .main-footer {
        padding: 1rem;
    }
}

@media (max-width: 767.98px) {
    .main-footer {
        padding: .9rem .75rem;
    }

    .content-wrapper > .content {
        padding-bottom: 1.75rem;
    }
}


/* ---------- MoreStorage logo in the sidebar (views/layouts/sidebar.php) ----------
 * The full logo, with white lettering on the dark sidebar; only its window when the menu is
 * collapsed. */

/* Logo, some room, then "Customer Portal" at the bottom, so the staging badge at the top of the
   menu (.env-badge) sits right under it */
.main-sidebar .brand-link.pt-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: .9rem;
    height: 128px;
    padding: .9rem 1rem .25rem;
}

.pt-brand__logo {
    display: block;
    height: 60px;
    width: auto;
}

.pt-brand__mark {
    display: none;
    width: 32px;
    height: 32px;
}

/* "Customer Portal" under the logo: the staging badge (.env-badge), in the theme colour */
.pt-brand__label {
    display: block;
    width: 100%;
    padding: .4rem .75rem;
    border: 1px solid rgba(var(--pt-accent-rgb), .45);
    border-radius: var(--pt-radius-sm);
    background: rgba(var(--pt-accent-rgb), .12);
    color: var(--pt-accent-bright);
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .05em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.pt-brand__label::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: .5rem;
    border-radius: 50%;
    background: var(--pt-accent-1);
    box-shadow: 0 0 0 3px rgba(var(--pt-accent-rgb), .25);
    vertical-align: 1px;
}

/* "Fixed sidebar": AdminLTE leaves room for a 57px logo bar under the menu, this one is 128px */
.layout-fixed .wrapper .sidebar {
    height: calc(100vh - 128px);
}

.sidebar-collapse .main-sidebar:not(:hover) .brand-link.pt-brand {
    justify-content: center;
    padding: .85rem .5rem;
}

.sidebar-collapse .main-sidebar:not(:hover) .pt-brand__logo,
.sidebar-collapse .main-sidebar:not(:hover) .pt-brand__label {
    display: none;
}

.sidebar-collapse .main-sidebar:not(:hover) .pt-brand__mark {
    display: block;
}

/* ---------- A thin line in the theme colour along the top of the page ---------- */

.main-header::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--pt-accent-gradient);
}

/* ---------- Staging (body.pt-staging, views/layouts/main.php) ---------- */

/* Hazard stripes instead of the theme line along the top bar */
body.pt-staging .main-header::before {
    height: 6px;
    background: repeating-linear-gradient(-45deg, #f5b301 0 12px, #1a1400 12px 24px);
}

/* The badge in the menu in the same colours */
body.pt-staging .env-badge {
    border-color: #f5b301;
    background: rgba(245, 179, 1, .15);
    color: #ffc933;
}

body.pt-staging .env-badge::before {
    background: #f5b301;
    box-shadow: 0 0 0 3px rgba(245, 179, 1, .3);
}

/* ---------- Display in the user menu (views/layouts/navbar.php): dark mode and colour theme ---------- */

.pt-usermenu__display {
    padding: 0 .4rem .35rem;
}

/* Dark mode: the whole row is the button, with a switch on the right */
.pt-usermenu__switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    padding: .45rem .5rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--pt-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.pt-usermenu__switch:hover {
    background: var(--pt-hover);
}

.pt-usermenu__switch i {
    width: 1.25rem;
    margin-right: .35rem;
    color: var(--pt-muted);
    text-align: center;
}

.pt-usermenu__toggle-switch {
    position: relative;
    flex: 0 0 34px;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: var(--pt-line);
    transition: background .15s ease;
}

.pt-usermenu__toggle-switch::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(22, 23, 29, .25);
    transition: transform .15s ease;
}

.pt-usermenu__switch[aria-pressed="true"] .pt-usermenu__toggle-switch {
    background: var(--pt-accent-gradient);
}

.pt-usermenu__switch[aria-pressed="true"] .pt-usermenu__toggle-switch::before {
    transform: translateX(14px);
}

.pt-usermenu__switch:focus-visible,
.pt-theme:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(var(--pt-accent-rgb), .3);
}

/* Colour theme: one round swatch per theme, its name in the tooltip */
.pt-usermenu__themes {
    display: flex;
    gap: .5rem;
    padding: .4rem .5rem .2rem;
}

.pt-theme {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.pt-theme:hover {
    transform: scale(1.1);
}

.pt-theme.is-active {
    box-shadow: 0 0 0 2px var(--pt-surface), 0 0 0 4px var(--pt-ink);
}