:root {
    --brand-primary-text-colour: #333333;
    --bg-secondary-colour: white;
}

html {
    background-color: var(--page-bg-colour);
    background-image: var(--page-bg-image);
    font-family: var(--font-family);
    font-size: var(--font-size);
    font-weight: var(--font-weight);
}

body {
    color: var(--brand-primary-text-colour);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    flex-direction: row;
}

textarea {
    min-height: 110px;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--header-colour);
}

.hide {
    display: none;
}

.font-sans {
    font-family: var(--font-family);
}

.p-4 {
    padding: 1rem;
}

.p-8 {
    padding: 2rem;
}

.px-8 {
    padding-right: 2rem;
    padding-left: 2rem;
}

.pb-8 {
    padding-bottom: 2rem;
}

.pt-8 {
    padding-top: 2rem;
}

.gap-2 {
    gap: 0.5rem;
}

.flex-none {
    flex: 0 0 auto
}

#toggle-sidebar a {
    height: 32px;
}

.toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.sidebar.collapsed .toggle-btn .sidebar-item-icon {
    transform: rotate(180deg);
}

.sidebar-item a {
    border-left: 3px solid transparent;
    color: var(--sidebar-text-colour, #374151);
    border-radius: 0 8px 8px 0;
    margin: 2px 10px 2px 0;
    padding: 10px 16px;
}

.sidebar-item a:hover {
    background-color: color-mix(in srgb, var(--brand-primary-colour) 12%, white);
    color: var(--brand-primary-colour);
}

.sidebar-item.selected a {
    background-color: color-mix(in srgb, var(--brand-primary-colour) 20%, white);
    color: var(--brand-primary-colour);
    font-weight: 600;
    border-left: 3px solid var(--brand-primary-colour);
}

.sidebar {
    color: var(--sidebar-text-colour, #374151);
    min-width: max-content;
    max-width: max-content;
    transition: width 0.3s ease;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-item-label {
    min-width: 120px;
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease, visibility 0s 0s;
}

.sidebar.collapsed .sidebar-item-label {
    display: none;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
}

.sidebar.collapsed:hover .sidebar-item-label {
    display: unset;
}

.sidebar nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar nav .sidebar-item:hover {
    background-color: transparent;
}

@media (min-width: 640px) {
    .main-sidebar {
        float:left;
        position: sticky;
        top: 0px;
        width: 30vw;
        margin-right: 2rem;
    }
}

.main-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    transition: margin-left 0.3s ease, max-width 0.3s ease;
    overflow: auto;
}

.page-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto;
}

.content-panel {
    overflow-x: visible;
}

.topbar {
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    position: sticky;
    top: 0px;
    background-color: white;
    min-height: 65px;
    justify-content: space-between;
    border-bottom-width: 1px;
    align-items: center;
    z-index: 1000;
}

.nav-link {
    border-bottom: 3px solid transparent;
}

.nav-link:hover,
.nav-link:focus {
    border-bottom: 3px solid var(--brand-primary-colour);
    background-color: rgba(105, 30, 218, 0.3);
    color: var(--brand-primary-colour);
    outline: none;
}

.nav-link.active {
    border-bottom: 3px solid var(--brand-secondary-colour);
}

.topbar-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    height: 100%;
}

.topbar-left,
.topbar-right  {
    height: 100%;
}

.topbar-nav a {
    color: #333333BB;
    text-decoration: none;
    font-size: 1em;
    transition: color 0.3s;
    border-bottom: 2px solid white;
}

.topbar-nav a.active {
    border-bottom: 2px solid var(--brand-secondary-colour);
    font-weight: bold;
}

.topbar-nav a:hover {
    color: var(--brand-secondary-colour);
}

.topbar-title {
    font-weight: bold;
}

.subnav {
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    position: sticky;
    top: 0px;
    background-color: var(--bg-primary-colour);
    justify-content: space-between;
    border-bottom-width: 1px;
    align-items: center;
}

.subnav a {
    border-bottom: 0;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 0px;
    padding-right: 1rem;
    padding-left: 1rem;
}

.subnav a:not(:last-child) {
    border-right: 1px solid #a0a0a0;
}

.subnav a.active {
    border-bottom: 0;
    color: var(--brand-primary-colour);
    font-weight: 600;
}

.page-nav {
    margin-left: 0px;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
}

.site-nav {
    background-color: white;
}

.site-header {
    color: var(--brand-primary-colour);
    font-size: 1.1rem;
}

@media screen and (max-width: 600px) {
    .pt-8 {
        padding-top: 1rem;
    }
    
    .px-8 {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .gap-6 {
        gap: 1rem;
    }

    .page-container {
        padding-bottom: 70px;
    }

    .site-header {
        gap: 1rem;
    }

    .site-header h2 {
        color: var(--text-primary-colour);
    }

    .sidebar {
        min-width: 80vw;
        max-width: 80vw;
        position: fixed;
        z-index: 10100;
        top: 0;
        bottom: 0;
        left: 0;
        height: 100vh;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    }

    /* When the sidebar drawer is open on mobile, hide the bottom
       tab bar so it doesn't peek through to the right of the drawer. */
    body:has(#sidebar:not(.hidden)) .mobile-tab-bar {
        display: none;
    }

    .sidebar.collapsed {
        display: none;
    }

    .sidebar.collapsed .sidebar-item-label {
        display: unset;
    }

    .page-container {
        max-width: 100vw;
    }

    .page-nav {
        margin-left: 0px;
        white-space: nowrap;
        overflow-x: scroll;
    }

    .page-nav {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; 
        -ms-overflow-style: none;
    }

    .page-nav ::-webkit-scrollbar {
        display: none;
    }

    .page-header {
        flex-direction: column-reverse;
    }

    .page-name {
        display: none;
    }

    .page-fab.link-button {
        aspect-ratio: 1/1;
        border-radius: 50% !important;
        align-content: center;
        outline: 4px solid color-mix(in oklab, #fff 85%, transparent);
    }

    .page-fab-overlay {
        position: fixed;
        background-color: #eee;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        opacity: 0.5;
        z-index: -1;
        display: none;
    }

    #action-toggle:checked ~ .page-fab-overlay {
        display: block;
    }

    .page-actions {
        position: fixed;
        bottom: 110px;
        right: 16px;
        z-index: 100;
        flex-direction: column-reverse;
        align-items: end;
    }

    #action-toggle ~ a,
    #action-toggle ~ .dropdown {
        display: none;
    }

    #action-toggle:checked ~ a,
    #action-toggle:checked ~ .dropdown {
        display: flex;
    }

    main,
    .page-container {
        padding-bottom: 60px;
    }

    .content {
        padding-bottom: 50px;
    }

    .main-nav {
        overflow: hidden;
        margin-right: 1rem;
    }

    .main-nav-links {
        position: fixed;
        right: 0px;
        left: 0px;
        bottom: 0px;
        margin: 0px;
        background-color: white;
        border-top: 1px solid #ddd;
        gap: 0px;
        height: 60px;
    }

    .main-nav-links a {
        display: flex;
        flex-direction: column;
        flex: 1;
        font-size: small;
        gap: 0px;
        padding-top: 10px;
        padding-right: 0px;
        padding-left: 0px
    }
}

/* Tables */
.table-header {
    background-color: #F0EDEE;
}

tfoot tr {
    background-color: #F0EDEE;
}

th {
    text-align: left;
    padding: 0.5rem;
    text-transform: uppercase;
}

.log-table td,
.log-table th {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-frame {
    overflow-x: auto;
}

.table-action {
    display: inline-block;
}

/* Responsive styles for small screens — render data tables as a
   stack of cards, one card per row. Each cell becomes a label/value
   line; the action column floats to the top-right of the card. */
@media screen and (max-width: 600px) {
    .responsive-table {
        background: transparent !important;
        box-shadow: none !important;
        border-spacing: 0 0.75rem;
        border-collapse: separate;
    }

    .responsive-table thead {
        display: none;
    }

    .responsive-table tbody {
        background: transparent !important;
    }

    .responsive-table tr {
        display: block;
        position: relative;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 0.75rem;
        padding: 0.875rem 1rem;
        margin-bottom: 0.75rem;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    .responsive-table td {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        border: none;
        padding: 0.25rem 0;
        position: relative;
    }

    .responsive-table td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.8125rem;
        color: #6b7280;
        white-space: nowrap;
        flex: 0 0 7.5rem;
    }

    /* Action column docks to the bottom of the card as a full-width
       footer row, separated by a hairline divider. Negative margin
       breaks out of the card's `0.875rem 1rem` padding so the divider
       and footer span edge-to-edge. The cell carries `.fit-content`
       (width:1px) and `min-width:100px` from desktop — override both
       so the footer can stretch full-width on mobile. */
    .responsive-table td.table-actions-column,
    .responsive-table td[data-label="Actions"] {
        width: auto !important;
        min-width: 0 !important;
        margin: 0.625rem -1rem -0.875rem;
        padding: 0.625rem 1rem;
        border-top: 1px solid #f3f4f6;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.5rem;
        white-space: normal;
    }

    .responsive-table td.table-actions-column::before,
    .responsive-table td[data-label="Actions"]::before {
        display: none;
    }

    /* Promote each `<div class="table-action">` (16x16 icon-only on
       desktop) into a proper labelled pill button on mobile. The
       action's `title` attribute on the inner `<a>` carries the label
       — surface it via a `::after` pseudo-element. */
    .responsive-table td.table-actions-column .table-action,
    .responsive-table td[data-label="Actions"] .table-action {
        width: auto;
        height: auto;
        display: inline-flex;
        align-items: center;
    }

    .responsive-table td.table-actions-column .table-action > a,
    .responsive-table td[data-label="Actions"] .table-action > a {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.375rem 0.75rem;
        background: #f3f4f6;
        color: #374151;
        border-radius: 9999px;
        font-size: 0.8125rem;
        font-weight: 500;
        line-height: 1;
    }

    .responsive-table td.table-actions-column .table-action > a > svg,
    .responsive-table td[data-label="Actions"] .table-action > a > svg {
        width: 0.875rem;
        height: 0.875rem;
        flex-shrink: 0;
    }

    .responsive-table td.table-actions-column .table-action > a::after,
    .responsive-table td[data-label="Actions"] .table-action > a::after {
        content: attr(title);
    }

    /* Hide cells with no rendered value so empty fields don't push
       the card height. Targets cells whose only content is whitespace
       (CSS can't see "empty after render", so this is best-effort:
       visually-empty cells keep showing the label — packages that
       want a tighter look can null out empty cells server-side). */
    .responsive-table td:empty {
        display: none;
    }

    /* Hide cells with no column title — UUID copy-buttons and other
       label-less utility columns. They're noise in the card layout. */
    .responsive-table td[data-label=""] {
        display: none;
    }

    /* Hide the "N results" count from the search header on mobile —
       saves vertical space; the count is implicit from the card list. */
    .table-search-container [data-table-result-count] {
        display: none !important;
    }

    /* Compact the search input vertically so it doesn't dwarf the
       inline action button next to it. */
    .table-search-container input[type="text"] {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        font-size: 0.875rem !important;
    }

    /* Inline action button ("+ Create X") next to the search input
       is `<a class="link-button uppercase tracking-widest …">`.
       Parent flex row uses `items-stretch` which makes the button
       grow to match the search input height — pin it to its own
       content height and shrink padding/font for proportional sizing.
       Anchor to the top of its flex row so when the filters wrap to
       a new line below the search input, the button stays aligned
       with the search bar instead of floating between the two. */
    .table-search-container a.link-button.uppercase,
    .table-search-container a.link-button.uppercase:hover,
    .table-search-container a.link-button.uppercase:focus,
    .table-search-container a.link-button.uppercase:active {
        padding: 0.5rem 0.875rem !important;
        font-size: 0.75rem !important;
        border-radius: 9999px !important;
        align-self: flex-start !important;
        height: auto !important;
        margin-top: 0.25rem !important;
        background-color: var(--button-primary-bg) !important;
        color: var(--button-primary-fg) !important;
    }

    /* Mobile quick-filter row — the search blade renders a dedicated
       `.quick-filter-mobile` block at full row width below the search
       + action button. Drop the rounded-capsule chrome so pills stand
       alone, and pin active/inactive colours across hover/focus/active
       so a tap doesn't flash to slate-grey. */
    .quick-filter-mobile .quick-filter-pills {
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        gap: 0.375rem !important;
    }
    .quick-filter-mobile .quick-filter-pills > a:not([style*="background-color"]),
    .quick-filter-mobile .quick-filter-pills > a:not([style*="background-color"]):hover,
    .quick-filter-mobile .quick-filter-pills > a:not([style*="background-color"]):focus,
    .quick-filter-mobile .quick-filter-pills > a:not([style*="background-color"]):active {
        background: #f3f4f6 !important;
        color: #374151 !important;
        border: 1px solid #e5e7eb !important;
    }
    /* Active pill border to match the inactive ones — keeps the
       circular outline consistent so pills don't shift size when
       toggling state. */
    .quick-filter-mobile .quick-filter-pills > a[style*="background-color"] {
        border: 1px solid transparent !important;
    }
    .quick-filter-mobile .quick-filter-pills > a[style*="background-color"],
    .quick-filter-mobile .quick-filter-pills > a[style*="background-color"]:hover,
    .quick-filter-mobile .quick-filter-pills > a[style*="background-color"]:focus,
    .quick-filter-mobile .quick-filter-pills > a[style*="background-color"]:active {
        background-color: var(--button-primary-bg, #691EDA) !important;
        color: var(--button-primary-fg, #fff) !important;
    }

    /* Mobile icon buttons (`+` action, funnel toggle) — circular
       36px tap targets with state-pinned colours so a tap doesn't
       flash to a different background.
         --primary: brand-coloured fill, white icon
         --neutral: grey background, grey icon */
    .mobile-icon-btn,
    button.mobile-icon-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 9999px !important;
        flex-shrink: 0;
        transition: background-color 0.15s, color 0.15s;
    }
    .mobile-icon-btn--primary,
    .mobile-icon-btn--primary:hover,
    .mobile-icon-btn--primary:focus,
    .mobile-icon-btn--primary:active {
        background-color: var(--button-primary-bg, #691EDA) !important;
        color: var(--button-primary-fg, #fff) !important;
        border: 0 !important;
    }
    .mobile-icon-btn--neutral,
    .mobile-icon-btn--neutral:hover,
    .mobile-icon-btn--neutral:focus,
    .mobile-icon-btn--neutral:active {
        background-color: #f3f4f6 !important;
        color: #6b7280 !important;
        border: 1px solid #e5e7eb !important;
    }

    /* Pagination — restyled as a compact pill row. The "Showing X
       of Y" sentence drops below the page-number row, page numbers
       become circular tap targets, the active page is filled with
       the brand colour, and the prev/next chevrons sit at the row
       edges so they don't wrap to a new line on their own. */
    .paginator {
        flex-direction: column-reverse;
        gap: 0.75rem;
        align-items: center;
    }
    .paginator > div {
        font-size: 0.75rem;
    }
    .paginator > nav {
        flex-wrap: nowrap;
        justify-content: center;
        gap: 0.25rem !important;
        max-width: 100%;
    }
    .paginator > nav > a,
    .paginator > nav > svg {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2rem;
        height: 2rem;
        padding: 0 0.5rem;
        border-radius: 9999px;
        font-size: 0.875rem;
        color: #374151;
    }
    .paginator > nav > a:hover {
        background: #f3f4f6;
    }
    .paginator > nav > a.active-page {
        background: var(--button-primary-bg);
        color: var(--button-primary-fg, #fff) !important;
    }
    .paginator > nav > svg {
        color: #9ca3af;
    }

    /* Global guard against horizontal overflow on mobile — any child
       that exceeds the viewport width clamps to it. Tables wrapped in
       `.table-frame` already scroll their own overflow on desktop;
       on mobile we render as cards so the desktop scroll is moot. */
    html, body {
        max-width: 100vw;
        overflow-x: hidden;
    }
    .table-frame {
        overflow-x: visible;
    }

    /* On context pages with a "Back to …" link, swap the visual order
       so the page-tab nav appears above the back link on mobile. The
       layout's `.pt-6` wrapper holds both as siblings; flip it to a
       flex column and lift the page-tab `<nav>` to order -1 so it
       renders above the page-header (which holds the back link). */
    #main-panel > .pt-6 {
        display: flex;
        flex-direction: column;
    }
    #main-panel > .pt-6 > nav {
        order: -1;
    }

    /* Page-tab nav (domainTabs) — cap visible tabs at 3 on mobile and
       push the rest into the More dropdown. The Alpine `domainTabs`
       component normally measures tab widths and hides those that
       don't fit; on mobile we want a deterministic 3-up layout. The
       `tab-overflow.js` hijack reads which tabs are actually hidden
       (post-CSS) and writes the dropdown contents accordingly so the
       strip and dropdown can never overlap. */
    nav[x-data*="domainTabs"] [x-ref="tabContainer"] {
        gap: 0 !important;
        flex: 1 1 auto !important;
        width: 100% !important;
    }
    nav[x-data*="domainTabs"] [x-ref="tabContainer"] a[data-tab-item]:nth-of-type(n+4) {
        display: none !important;
    }
    nav[x-data*="domainTabs"] [x-ref="tabContainer"] a[data-tab-item]:nth-of-type(-n+3) {
        display: flex !important;
        flex: 1 1 0 !important;
        justify-content: center !important;
    }
    nav[x-data*="domainTabs"] [x-ref="moreButton"] {
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }
    nav[x-data*="domainTabs"] [x-ref="tabContainer"]:has(a[data-tab-item]:nth-of-type(4)) [x-ref="moreButton"] {
        display: flex !important;
    }

    /* Empty page-header (showHeader true but title in topbar) still
       renders an empty flex div with whitespace/blade comments —
       :empty won't match, so collapse it when it has no element
       children. */
    .page-header:not(:has(> *)) {
        display: none !important;
    }
    /* When the page-header only holds an actions block (no title,
       no description) it still adds 16px `pb-4` above the tabs.
       Strip that bottom padding on mobile — the FAB/actions float
       instead of pushing layout space. */
    .page-header > .pb-4,
    .page-header > div[class*="pb-4"] {
        padding-bottom: 0 !important;
    }
}

.fit-content {
    white-space: nowrap;
    width: 1px;
}

.table-actions-column {
    white-space: nowrap;
    width: 1px;
    min-width: 100px;
}

.quote {
    border-left: 3px solid var(--brand-primary-colour);
    padding-left: 1rem;
}

.grid-cols-4 {
    grid-template-columns: repeat(4,minmax(0,1fr));
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

@media (max-width: 600px) {
    .grid {
        grid-template-columns: 1fr; 
    }
  
    .grid > * {
        min-width: 100%;
    }
}

.card {
    background-color: var(--content-bg-colour);
    background-image: var(--content-bg-image);
    border-radius: 5px;
    padding: 2rem;
}

.card-icon {
    width: 2rem;
    height: 2rem;
    color: var(--brand-secondary-colour);
}

.oneline {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
}

.mx-16 {
    margin-right: 4rem;
    margin-left: 4rem;
}

.pickr {
    border: 1px solid grey;
    box-shadow: 0 0 0 1px white;
    display: inline-block;
    border-radius: 3px;
}

.pickr .pcr-button{
    position: unset;
}

.pcr-color-preview button {
    border-radius: 0px !important;
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

button.bg-red-600 {
    background-color: var(--button-danger-bg);
    color: var(--button-danger-fg);
}

button.bg-gray-800 {
    background-color: var(--button-primary-bg);
    color: var(--button-primary-fg);
}

a.bg-gray-800 {
    background-color: var(--button-primary-bg);
    color: var(--button-primary-fg);
}

button.bg-white {
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-fg);
}

.notice {
    background-color: #fffdd0;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.tile {
    display: flex;
    background-color: var(--content-bg-colour);
    background-image: var(--content-bg-image);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #ddd;
}

.left-section {
    background-color: var(--brand-primary-colour);
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(rgba(105, 30, 218, 0.3), rgba(105, 30, 218, 0.3)), url(http://portal.docker.localhost/img/Sop.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.progress-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: radial-gradient(circle closest-side, var(--brand-primary-colour) 80%, transparent 81%),
                conic-gradient(#26c6da 0% 30%, #e0e0e0 30% 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 14px;
    font-weight: bold;
    position: relative;
}

.progress-circle::after {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 14px;
    font-weight: bold;
    position: relative;
}

.progress-circle span {
    position: absolute;
}

.right-section {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.right-section h3 {
    margin: 0;
    color: #6a1b9a; /* Purple text */
    font-size: 18px;
}

.right-section p {
    margin: 10px 0 0;
    color: #666666; /* Light gray text */
    font-size: 14px;
}

.arrow-button {
    align-self: flex-end;
    background-color: #26c6da; /* Teal button */
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    margin-top: 20px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.arrow-button:hover {
    background-color: #1b9db4; /* Darker teal on hover */
}

.choices {
    margin-bottom: 0px;
    border-radius: .375rem;
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.choices__inner {
    /* margin-top: 0.25rem; */
    background-color: white;
    padding: 6px 6px 3.75px;
    border: 1px solid #ddd;
    border-radius: 5px;
    height: 42px;
    min-height: 42px;
}

.choices__input {
    margin-bottom: 0px;
    background-color: white;
}

.choices[data-type*=select-multiple] .choices__button, .choices[data-type*=text] .choices__button {
    border-left: none;
}

.choices__button {
    height: 24px !important; 
    width: 24px !important;
}

.is-disabled .choices__button {
    display: none;
}

.choice-element {
    max-height: 37px;
}

select.choice-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 0; /* Put it behind */
    pointer-events: none;
}

.choices__list--multiple .choices__item {
    color: var(--text-secondary-colour);
    background-color: var(--brand-secondary-colour);
    border: unset;
}

.choices__input:focus {
    box-shadow: unset;
}

.choices__list--dropdown, .choices__list[aria-expanded] {
    z-index: 100;
}

.visibility-hidden {
    visibility: hidden;
}

.information-container.wrapper {
    display: none;
}

/* Toogle Button */
.toggle-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toggle-label {
    display: inline-block;
    width: 35px;
    height: 18px;
    background: grey;
    border-radius: 25px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s ease;
}

.toggle-label::before {
    content: "";
    width: 14px;
    height: 14px;
    background: white;
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.toggle-checkbox {
    display: none;
}

.toggle-checkbox:checked + .toggle-label {
    background: var(--brand-secondary-colour);
}

.toggle-checkbox:checked + .toggle-label::before {
    transform: translateX(15px);
}

/* Editing CSS */
.editing-toolbar {
    display: none;
}

.ql-editor {
    font-family: var(--font-family);
    font-size: var(--font-size);
    padding: 0px;
}

.html-editor .ql-editor {
    padding: 1rem;
}

.editing .editing-toolbar {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: #f3f4f6;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 3px 10px;
    display: flex;
    gap: 8px;
}

.editing .ql-editor::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 2px dotted var(--brand-secondary-colour);
  pointer-events: none; /* Ensures the pseudo-element doesn't block interactions */
}

.ql-tooltip {
    z-index: 100;
}

/* Tables */
th, td {
    border: 1px solid #ddd; /* Light grey border */
    padding: 8px;
    text-align: left;
    border-right: none;
    border-left: none;
}

th:first-child,
td:first-child {
    border-left: none;
}

th:last-child,
td:last-child {
    border-right: none;
}

tbody tr:hover {
    background-color: #F7F3FD;
}

/* Widgets */
.widget {
    border: 1px solid;
    border-color: var(--content-border-colour);
    box-sizing: content-box;
    border-radius: 12px;
    position: relative;
    background-color: var(--content-bg-colour);
    background-image: var(--content-bg-image);
}

@media screen and (max-width: 600px) {
    .widget-search {
        border: 0px;
    }

    .widget-search .form-actions {
        display: none;
    }

    .widget-search {
        background-color: transparent;
    }

    .widget-search form.advanced {
        background-color: white;
        border: 1px;
    }

    .widget-search form:not(.advanced) .field {
        padding-right: 0px;
        padding-left: 0px;
        padding-bottom: 0px;
        padding-top: 0.5rem;
    }
}

.widget.disabled {
    opacity: 0.7;
}

.widget-header {
    margin-bottom: 20px;
}

.widget h2 {
    color: #333333;
    font-weight: 900;
    font-size: 20px;
    line-height: 24px;    
}

.add-widget {
    display: none;
    flex-grow: 1;
    height: 1.5rem; 
    position: relative;
    background-color: #C7F4F3;
    margin-bottom: 1rem;
}

.add-widget::before {
    content: '';
    position: absolute;
    top: 50%; 
    left: 0;
    width: 100%;
    border-top: 2px dashed #1ACBB6;
    z-index: 1; 
}

.editing .add-widget {
    display: block;
}

.plus {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.5rem;
    height: 1.5rem;
    transform: translate(-50%, -50%); 
    z-index: 20; 
    color: #1ACBB6;
    background-color: white;
    border-radius: 50%;
    border: 1px solid #1ACBB6;
}

/* Forms */
fieldset {
    position: relative;
}

.form-actions {
    border-bottom-right-radius: 11px;
    border-bottom-left-radius: 11px;
}

.form-status {
    background-color: white;
    border: 1px solid #D0CCD5;
    padding: 5px 10px;
    border-radius: var(--buttons-border-radius)
}

input:disabled,
select:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
}

.field.required label:after {
    content: '*';
    color: #F0435A;
}

label.font-medium {
    font-weight: 900;
}

.hidden-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

form:not(.advanced) .field.advanced {
    display: none;
}

.toggle-link {
    display: inline-block;
    margin-top: 10px;
    cursor: pointer;
    color: #0077cc;
    text-decoration: underline;
}

#toggle-advanced:checked ~ .field.advanced,
#toggle-advanced:checked ~ .form-actions {
    display: block;
}

.array-field td {
    padding: 0px;
    border: none;
    border-bottom: 1px solid #ddd;
}

.array-field td input:not(:focus):not(:hover),
.array-field td textarea:not(:focus):not(:hover),
.array-field td .choices:not(:focus):not(:hover),
.array-field td .choices__inner:not(:focus):not(:hover) {
    background-color: transparent;
    box-shadow: none;
    border: none;
}

table .field,
table .static-field {
    padding: 0px;
}

table tr:nth-child(n+2) .field label, 
table tr:nth-child(n+2) .static-field label {
    display: none;
}

/* Buttons */
button {
    border-radius: var(--buttons-border-radius) !important;
}

.link-button {
    background-color: var(--button-primary-bg);
    color: var(--button-primary-fg);
    border-radius: var(--buttons-border-radius) !important;
}

.uppy-StatusBar-actionBtn {
    background-color: var(--brand-primary-colour) !important;
}

/* File Uploader */
.error-status {
    color: red;
    font-weight: 900;
}

.dragover .file-area {
    background-color: #c0c0c0;
}

.toolbar-item {
    border-right: 1px solid rgb(209 213 219);
    padding: 0.5rem;
}

.uppy-Dashboard-Item-preview img.uppy-Dashboard-Item-previewImg,
.file-area .file-preview {
    border-radius: 3px;
    height: 100%;
    object-fit: contain;
    transform: translateZ(0);
    width: 100%;
    border: 1px solid #e5e7eb;
}

.uppy-Dashboard-Item-preview img.uppy-Dashboard-Item-previewImg {
    min-height: 100%;
}

.uppy-StatusBar-actions {
    justify-content: end;
}

.fileItem[data-state="active"] .file-delete {
    display: inline-block;
}

.fileItem[data-state="deleted"] .file-restore {
    display: inline-block;
}

.fileItem[data-state="deleted"] .file-thumb {
    opacity: 0.1;
}

.file-delete {
    right: -8px;
    top: -8px;
    position: absolute; 
}

.file-restore {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.file-status {
    font-weight: 900;
}

.restriction-error {
    position: fixed;
    top: -4rem;
    background-color: #F0435A;
    width: 100%;
    padding: 1rem;
    border-radius: 6px;
    font-weight: 900;
    font-size: smaller;
}

/* Icons */
.icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--brand-primary-colour);
}

/* Tasks */
.task-list {
    display: flex;
    flex-direction: column;
}

.task-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-top: 1px solid #ddd;
    background-color: white;
}

.task-item.overdue {
    color: #721c24;
    background-color: #f8d7da;
}

.task-item.locked {
    background-color: #D0CCD555;
}

.task-item.complete .task-icon {
    color: #1ACBB6;
}

.task-item.incomplete .task-icon {
    color: #D0CCD5;
}

.task-item.locked .task-icon {
    color: #D0CCD5;
}

.icon.task-icon {
    margin-right: 0px;
}

.overdue .icon {
    color: #721c24;
}

.task-content .task-title {
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    line-height: 1.2;
}

.task-content .task-title strong {
    font-weight: bold;
}

.task-content .task-due,
.task-content .task-received {
    font-size: 14px;
    color: #555;
    margin: 5px 0 0;
}

.task-content .task-title {
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    line-height: 1.2;
}
  
.task-content .task-title strong {
    font-weight: bold;
}
  
.task-content .task-due,
.task-content .task-received {
    font-size: 14px;
    color: #555;
    margin: 5px 0 0;
}

/* Notices */
.alert-success {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #155724;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 1rem;
    margin: 2rem;
    margin-top: 0;
}

.alert-error {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #721c24;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 1rem;
    margin: 2rem;
    margin-top: 0;
}

.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border: 1px solid #856404;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 1rem;
    margin: 2rem;
    margin-top: 0;
}

/* Passwords */
.password-wrapper {
    display: flex;
    width: 100%;
}

.password-field {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px 0 0 6px;
    font-size: 1rem;
}

.toggle-password {
    padding: 0 12px;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    border-left: none;
    border-radius: 0 6px 6px 0 !important;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    transition: background 0.2s;
}

.toggle-password:hover {
    background-color: #e2e2e2;
}

/* API */
#progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--brand-primary-colour);
    transition: width 0.5s ease;
    opacity: 0;
    z-index: 1500;
}

/* Dropdowns */
.dropdown {
    position: relative;
    display: inline-flex;
}

.dropdown a {
    position: relative;
    display: inline-flex;
}

.dropdown-toggle {
    border: none;
    cursor: pointer;
}

.dropdown-split .dropdown-toggle {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    padding-left: 0.5rem;
}

.dropdown-split a {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-right: 1px solid white;
    padding-right: 0.5rem;
}
.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    top: 40px;
}

.dropdown-menu a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-menu a:hover {
    background-color: #ddd;
}

.dropdown.show .dropdown-menu {
    display: block;
}

/* Dialog */
dialog {
    border-radius: 16px;
    max-height: 75vh;
    min-height: 75vh;
    width: 80vw;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(3px);
}

dialog .header {
    z-index: 100;
    position: sticky;
    top: 0px;
    background-color: white;
    border-bottom: 1px solid #ddd;
    padding-top: 1rem;
}

dialog .header h2 {
    margin-bottom: 1rem;
}

dialog nav {
    border-top: 1px solid #ddd;
}

#popup-inner {
    overflow-y: hidden;
    display: flex;
}

dialog .content {
    overflow-y: auto;
}

dialog .widget {
    border: none;
    border-left: 1px solid #ddd;
    /*border-radius: 0; */
}

@media screen and (max-width: 600px) {
    dialog {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        bottom: 0px;
        top: unset;
        margin: 0px;
        max-height: 80vh;
        min-height: unset;
        min-width: 100vw;
        animation: fadeInUp 0.3s ease-out;
    }   

    dialog nav.bg-white {
        background-color: #f8f8f8;
    }

    dialog .content {
        padding-bottom: 0px;
        padding-top: 1rem;
    }

    dialog .widget {
        border: none;
    }

    dialog #popup-inner {
        padding: 0px;
    }

    dialog::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 50px;
        height: 5px;
        background-color: #ccc;
        border-radius: 9999px;
        margin-top: 8px;
        z-index: 150;
    }

    .section-info {
        display: none;
    }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Page hero banner — domain-coloured header strip with sticker icon */
.page-hero-banner {
    --banner-primary: var(--brand-primary-colour, #691EDA);
    --banner-tint: 8;
    --banner-tint-deep: calc(var(--banner-tint) * 2);
    --banner-bg: color-mix(in srgb, var(--banner-primary) calc(var(--banner-tint) * 1%), white);
    --banner-bg-deep: color-mix(in srgb, var(--banner-primary) calc(var(--banner-tint-deep) * 1%), white);
    --banner-soft: color-mix(in srgb, var(--banner-primary) 45%, white);
    --banner-ink: color-mix(in srgb, var(--banner-primary) 75%, white);
    --banner-ink-deep: var(--banner-primary);

    position: relative;
    min-height: 104px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--banner-bg);
    border-bottom: 1px solid #ececec;
}

.page-hero-banner__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 104px;
    pointer-events: none;
}

.page-hero-banner__label {
    position: absolute;
    left: 2rem;
    top: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.page-hero-banner__crumb {
    font-size: 10px;
    letter-spacing: 1.6px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--banner-ink-deep);
    opacity: 0.75;
}

.page-hero-banner__title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: #1a1a1a;
    line-height: 1.2;
}

.page-hero-banner__sticker {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%) rotate(-4deg);
    z-index: 2;
    width: 62px;
    height: 62px;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    box-shadow:
        0 2px 0 rgba(0, 0, 0, 0.06),
        0 4px 10px rgba(0, 0, 0, 0.05);
    display: grid;
    place-items: center;
}

.page-hero-banner__sticker-icon {
    width: 32px !important;
    height: 32px !important;
    color: var(--banner-primary, var(--brand-primary-colour, #691EDA)) !important;
    stroke: var(--banner-primary, var(--brand-primary-colour, #691EDA)) !important;
}