/*
 * Dial A Med portal theme (P9). Loaded after Bootstrap and dashboard.css by templates/header.php
 * (body.dam-portal) and by login.php (body.dam-login). Everything is scoped to those body classes
 * so feature pages keep their own markup. Brand (P9 follow-up): red and navy from the Dial A Med logo
 * and app icon, the customer app's neutrals and pill shapes, and dialamed.co.zw's Montserrat headings
 * over Noto Sans text. List rows stay neutral; status is a labelled tag (.dam-status), never button-like.
 */

.dam-portal,
.dam-login {
    --dam-red: #dc2626;
    --dam-red-dark: #a50f15;
    --dam-red-soft: #fef2f2;
    --dam-navy: #232459;
    --dam-navy-dark: #181940;
    --dam-navy-soft: #ecedf6;
    --dam-bg: #f9fafb;
    --dam-surface: #ffffff;
    --dam-border: #e5e7eb;
    --dam-text: #1f2937;
    --dam-muted: #6b7280;
    --dam-focus: rgba(220, 38, 38, .45);
    --dam-font-heading: "Montserrat", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --dam-font-body: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --dam-topbar-height: 56px;
    font-family: var(--dam-font-body);
}

.dam-portal h1, .dam-portal h2, .dam-portal h3, .dam-portal h4, .dam-portal h5,
.dam-portal .modal-title,
.dam-portal .dam-brand,
.dam-login h1 {
    font-family: var(--dam-font-heading);
}

/* ---------- Shell ---------- */

.dam-portal {
    background-color: var(--dam-bg);
    color: var(--dam-text);
}

.dam-skip-link {
    position: absolute;
    top: -100px;
    left: .75rem;
    z-index: 1100;
    padding: .5rem .75rem;
    border-radius: .375rem;
    background: var(--dam-surface);
    color: var(--dam-navy);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .2);
}

.dam-skip-link:focus {
    top: .5rem;
}

.dam-portal .dam-topbar {
    height: var(--dam-topbar-height);
    background-color: var(--dam-navy);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .15), 0 2px 6px rgba(16, 24, 40, .12);
}

.dam-portal .dam-brand {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 1rem;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: #fff;
    background: linear-gradient(135deg, #b0101a 0%, var(--dam-red-dark) 55%, #78000c 100%);
    box-shadow: none;
}

.dam-portal .dam-brand img {
    width: 28px;
    height: 28px;
    margin-right: .6rem;
    border-radius: .4rem;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
}

.dam-portal .dam-topbar .nav-link {
    color: rgba(255, 255, 255, .85);
    font-weight: 500;
    padding: .5rem .75rem;
    border-radius: .375rem;
}

.dam-portal .dam-topbar .nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, .1);
}

.dam-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dam-topbar-height);
    height: var(--dam-topbar-height);
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
}

.dam-nav-toggle:hover {
    background-color: rgba(255, 255, 255, .1);
}

.dam-nav-toggle svg {
    width: 24px;
    height: 24px;
}

/* ---------- Sidebar ----------
 * Two levels that never look alike: group labels are small uppercase captions with a hairline rule,
 * no icon and no hover; links are sentence-case rows with an icon, a rounded hover and a red active state.
 * Administrators' per-store lists collapse under a toggle and open when they hold the current page. */

.dam-portal {
    --dam-sidebar-width: 15rem;
}

.dam-portal .dam-sidebar {
    padding-top: var(--dam-topbar-height);
    background-color: var(--dam-surface);
    box-shadow: inset -1px 0 0 var(--dam-border);
}

/* A fixed-width rail on tablets and desktops (col-md-2 was only 128px wide at 768px), with the brand block
   and the page content sized to match. */
@media (min-width: 768px) {
    .dam-portal .dam-sidebar,
    .dam-portal .dam-topbar .dam-brand {
        flex: 0 0 var(--dam-sidebar-width);
        width: var(--dam-sidebar-width);
        max-width: var(--dam-sidebar-width);
    }

    .dam-portal main[role="main"] {
        flex: 0 0 calc(100% - var(--dam-sidebar-width));
        max-width: calc(100% - var(--dam-sidebar-width));
    }
}

.dam-portal .dam-sidebar .sidebar-sticky {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--dam-topbar-height));
    padding: 0 0 1rem;
    scrollbar-width: thin;
    scrollbar-color: #d6d8e1 transparent;
}

.dam-sidebar__profile {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: .85rem .75rem .35rem;
    padding: .7rem .75rem;
    border: 1px solid var(--dam-border);
    border-radius: .75rem;
    background: linear-gradient(180deg, #fbfbfd 0%, var(--dam-navy-soft) 100%);
}

.dam-sidebar__avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: var(--dam-navy);
    color: #fff;
    font-family: var(--dam-font-heading);
    font-size: .95rem;
    font-weight: 700;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(35, 36, 89, .18);
}

.dam-sidebar__avatar .dam-icon {
    width: 18px;
    height: 18px;
}

.dam-sidebar__who {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.dam-sidebar__name {
    overflow: hidden;
    color: var(--dam-navy);
    font-family: var(--dam-font-heading);
    font-size: .875rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dam-sidebar__role {
    margin-top: .1rem;
    color: var(--dam-muted);
    font-size: .75rem;
}

.dam-nav-group {
    padding-top: 1rem;
}

.dam-nav-group__title {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 1.25rem .4rem;
    color: #656b81;
    font-family: var(--dam-font-heading);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    user-select: none;
}

.dam-nav-group__title::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--dam-border);
}

.dam-portal .dam-sidebar .dam-nav {
    margin: 0;
}

.dam-portal .dam-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 2.35rem;
    margin: 1px .75rem;
    padding: .4rem .7rem;
    border-radius: .5rem;
    color: #374151;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.3;
    transition: background-color .12s ease, color .12s ease;
}

.dam-portal .dam-sidebar .nav-link .dam-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: #9096a8;
    transition: color .12s ease;
}

.dam-nav__label {
    flex: 1 1 auto;
    min-width: 0;
}

.dam-portal .dam-sidebar .nav-link:hover {
    background-color: #f2f3f7;
    color: var(--dam-navy);
    text-decoration: none;
}

.dam-portal .dam-sidebar .nav-link:hover .dam-icon {
    color: var(--dam-navy);
}

.dam-portal .dam-sidebar .nav-link:focus-visible {
    outline: 3px solid var(--dam-focus);
    outline-offset: -1px;
}

.dam-portal .dam-sidebar .nav-link.active {
    background-color: var(--dam-red-soft);
    color: var(--dam-red-dark);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--dam-red);
}

.dam-portal .dam-sidebar .nav-link.active .dam-icon {
    color: var(--dam-red);
}

.dam-portal .dam-sidebar .nav-link .badge {
    flex: 0 0 auto;
    min-width: 1.45rem;
    margin-left: auto;
    padding: .28em .5em;
    border-radius: 10rem;
    background-color: var(--dam-red);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.dam-portal .dam-sidebar .nav-link .badge.dam-badge-zero {
    background-color: #eceef3;
    color: #656b81;
}

/* Collapsible per-store lists (administrators). */
.dam-nav__toggle {
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.dam-nav__toggle::-webkit-details-marker {
    display: none;
}

.dam-nav__hint {
    flex: 0 0 auto;
    color: #656b81;
    font-size: .72rem;
    font-weight: 500;
}

.dam-portal .dam-sidebar .dam-nav__toggle .dam-icon:last-child {
    width: 16px;
    height: 16px;
    margin-left: -.2rem;
    transform: rotate(-90deg);
    transition: transform .15s ease, color .12s ease;
}

.dam-nav__branch[open] > .dam-nav__toggle .dam-icon:last-child {
    transform: none;
}

.dam-portal .dam-sidebar .dam-nav__branch.has-active > .dam-nav__toggle {
    color: var(--dam-red-dark);
    font-weight: 600;
}

.dam-portal .dam-sidebar .dam-nav__branch.has-active > .dam-nav__toggle .dam-icon:first-child {
    color: var(--dam-red);
}

.dam-portal .dam-sidebar .dam-nav__sub {
    position: relative;
    margin: .1rem 0 .35rem 1.95rem;
    padding-left: .55rem;
}

.dam-portal .dam-sidebar .dam-nav__sub::before {
    content: "";
    position: absolute;
    top: .25rem;
    bottom: .25rem;
    left: 0;
    width: 1px;
    background-color: var(--dam-border);
}

.dam-portal .dam-sidebar .nav-link.dam-nav__sublink {
    min-height: 2rem;
    margin: 1px .75rem 1px 0;
    padding: .3rem .65rem;
    color: #4b5563;
    font-size: .8125rem;
}

.dam-portal .dam-sidebar .nav-link.dam-nav__sublink.active {
    box-shadow: inset 2px 0 0 var(--dam-red);
}

.dam-sidebar__foot {
    margin-top: auto;
    padding-top: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
    .dam-portal .dam-sidebar .nav-link,
    .dam-portal .dam-sidebar .nav-link .dam-icon,
    .dam-portal .dam-sidebar .dam-nav__toggle .dam-icon:last-child {
        transition: none;
    }
}

.dam-backdrop {
    position: fixed;
    top: var(--dam-topbar-height);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1035;
    background-color: rgba(15, 17, 40, .45);
}

/* ---------- Main content ---------- */

.dam-portal main[role="main"] {
    padding-top: calc(var(--dam-topbar-height) + 1.25rem);
    padding-bottom: 2.5rem;
}

.dam-portal main[role="main"]:focus {
    outline: none;
}

.dam-portal main > h2 {
    margin-bottom: 1.25rem;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--dam-navy);
}

.dam-portal main > h3,
.dam-portal main > section > h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--dam-navy);
}

.dam-portal .card {
    border-color: var(--dam-border);
    border-radius: .6rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}

.dam-portal .card-header {
    background-color: #fafbfc;
    border-bottom-color: var(--dam-border);
}

.dam-portal .card-header:first-child {
    border-radius: calc(.6rem - 1px) calc(.6rem - 1px) 0 0;
}

/*
 * ---------- Tables: one standard for every data table ----------
 * Whatever mix of .table-striped/-bordered/-responsive or DataTables a page uses, a data table renders as
 * a framed white panel: rounded corners, soft shadow, small-caps header band, horizontal dividers only,
 * no zebra stripes, a hover highlight with a red accent, and tabular numbers. Layout tables without
 * .table (filter forms, the e-mail receipt) are untouched.
 */
.dam-portal main .table,
.dam-portal .modal .table {
    width: 100%;
    margin-bottom: 1rem;
    border: 1px solid var(--dam-border);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: .75rem;
    background-color: var(--dam-surface);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    color: var(--dam-text);
    font-variant-numeric: tabular-nums;
}

/* In a dialog keep the outline but drop the lift; in a card the card is the only frame. */
.dam-portal .card .table,
.dam-portal .modal .table {
    box-shadow: none;
}

.dam-portal main .card .table {
    border-color: transparent;
}

/* Wide tables scroll inside a .table-responsive wrapper; a little padding keeps the panel's shadow visible. */
.dam-portal main .table-responsive {
    margin-bottom: 1rem;
    padding: 1px 2px 4px;
}

/*
 * Containment: scroll areas are positioned so absolutely positioned content (e.g. an .sr-only header)
 * cannot escape them and widen the page; DataTables lists fill their container instead of keeping the
 * pixel width DataTables measured at start-up (before the brand fonts load) and scroll inside it.
 */
.dam-portal main .table-responsive,
.dam-portal .dataTables_wrapper,
.dam-portal main .card-body {
    position: relative;
}

.dam-portal .dataTables_wrapper {
    overflow-x: auto;
}

.dam-portal main table.dataTable {
    width: 100% !important;
}

.dam-portal main .table-responsive > .table {
    margin-bottom: 0;
}

.dam-portal main .table th,
.dam-portal main .table td,
.dam-portal .modal .table th,
.dam-portal .modal .table td {
    padding: .75rem 1rem;
    border: 0;
    border-top: 1px solid #eef0f3;
    vertical-align: middle;
}

.dam-portal main .table thead th,
.dam-portal .modal .table thead th {
    border-top: 0;
    border-bottom: 1px solid var(--dam-border);
    background-color: #f8f9fb;
    color: #4b5563;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.dam-portal main .table thead tr:first-child th,
.dam-portal main .table thead tr:first-child td,
.dam-portal .modal .table thead tr:first-child th {
    border-top: 0;
}

.dam-portal main .table thead + tbody tr:first-child td,
.dam-portal main .table thead + tbody tr:first-child th,
.dam-portal .modal .table thead + tbody tr:first-child td {
    border-top: 0;
}

.dam-portal main .table > :first-child > tr:first-child > :first-child,
.dam-portal .modal .table > :first-child > tr:first-child > :first-child {
    border-top-left-radius: calc(.75rem - 1px);
}

.dam-portal main .table > :first-child > tr:first-child > :last-child,
.dam-portal .modal .table > :first-child > tr:first-child > :last-child {
    border-top-right-radius: calc(.75rem - 1px);
}

.dam-portal main .table > :last-child > tr:last-child > :first-child,
.dam-portal .modal .table > :last-child > tr:last-child > :first-child {
    border-bottom-left-radius: calc(.75rem - 1px);
}

.dam-portal main .table > :last-child > tr:last-child > :last-child,
.dam-portal .modal .table > :last-child > tr:last-child > :last-child {
    border-bottom-right-radius: calc(.75rem - 1px);
}

/* Label/value tables (order details): label columns are muted small caps, values stay prominent. */
.dam-portal .dam-detail-table td:nth-child(odd) {
    background-color: #f8f9fb;
    color: #4b5563;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Header cells in the body read as labels. */
.dam-portal main .table tbody th,
.dam-portal .modal .table tbody th {
    color: #4b5563;
    font-weight: 600;
}

.dam-portal main .table tfoot td,
.dam-portal main .table tfoot th {
    border-top: 1px solid var(--dam-border);
    background-color: #f8f9fb;
    font-weight: 700;
}

/* Rows stay neutral (no status fills, no stripes); hover marks the row being read. */
.dam-portal main .table-striped tbody tr:nth-of-type(odd),
.dam-portal .modal .table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent;
}

.dam-portal main .table tbody tr,
.dam-portal .modal .table tbody tr {
    transition: background-color .12s ease;
}

.dam-portal main .table tbody tr:hover,
.dam-portal .modal .table tbody tr:hover {
    background-color: #f6f7fb;
}

.dam-portal main .table tbody tr:hover > :first-child {
    box-shadow: inset 3px 0 0 var(--dam-red);
}

.dam-portal main .table a:not(.btn):not([class*="btn-"]),
.dam-portal .modal .table a:not(.btn):not([class*="btn-"]) {
    color: var(--dam-navy);
    font-weight: 600;
}

/* Inputs inside tables (pricing grids) fill their cell like the portal's other fields. */
.dam-portal main .table td > input[type="number"]:not(.form-control),
.dam-portal main .table td > input[type="text"]:not(.form-control) {
    width: 100%;
    min-width: 5rem;
    padding: .375rem .6rem;
    border: 1px solid #d5d8e2;
    border-radius: .4rem;
}

/* ---------- DataTables controls in the same language ---------- */

.dam-portal table.dataTable thead th,
.dam-portal table.dataTable thead td,
.dam-portal table.dataTable.no-footer {
    border-bottom-color: var(--dam-border);
}

.dam-portal table.dataTable thead .sorting,
.dam-portal table.dataTable thead .sorting_asc,
.dam-portal table.dataTable thead .sorting_desc {
    padding-right: 1.75rem;
    background-position: center right .5rem;
}

.dam-portal table.dataTable tbody td.dataTables_empty {
    padding: 2.5rem 1rem;
    color: var(--dam-muted);
    text-align: center;
}

.dam-portal .dataTables_wrapper .dataTables_length,
.dam-portal .dataTables_wrapper .dataTables_filter,
.dam-portal .dataTables_wrapper .dataTables_info {
    margin-bottom: .75rem;
    color: var(--dam-muted);
    font-size: .875rem;
}

.dam-portal .dataTables_wrapper .dataTables_filter input,
.dam-portal .dataTables_wrapper .dataTables_length select {
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    border: 1px solid #d5d8e2;
    border-radius: 2rem;
    background-color: var(--dam-surface);
    color: var(--dam-text);
}

.dam-portal .dataTables_wrapper .dataTables_filter input {
    min-width: 14rem;
    margin-left: .5rem;
}

.dam-portal .dataTables_wrapper .dataTables_filter input:focus,
.dam-portal .dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--dam-navy);
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(35, 36, 89, .15);
}

.dam-portal .dataTables_wrapper .dataTables_paginate {
    padding-top: .25rem;
}

/* DataTables' own stylesheet sets these with !important, so they must be matched to take effect. */
.dam-portal .dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 2.25rem;
    margin-left: .25rem;
    padding: .35rem .8rem;
    border: 1px solid transparent !important;
    border-radius: 2rem;
    background: transparent !important;
    color: var(--dam-navy) !important;
    font-weight: 600;
}

.dam-portal .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border-color: #d4d6ea !important;
    background: var(--dam-navy-soft) !important;
    color: var(--dam-navy) !important;
}

.dam-portal .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dam-portal .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    border-color: var(--dam-navy) !important;
    background: var(--dam-navy) !important;
    color: #fff !important;
}

.dam-portal .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dam-portal .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    border-color: transparent !important;
    background: transparent !important;
    color: #9ca3af !important;
}

/* Every row action is the same compact size, whichever size class the page used. */
.dam-portal .table .btn {
    margin: .125rem 0;
    padding: .25rem .75rem;
    font-size: .875rem;
    line-height: 1.5;
    white-space: nowrap;
}

/* Action icons (portal_icon helper): decorative, sized to the label, coloured by the button text. */
.dam-portal .table .btn {
    display: inline-flex;
    align-items: center;
}

.dam-portal .btn .dam-icon {
    width: 1.05em;
    height: 1.05em;
    margin-right: .4em;
    flex: none;
    vertical-align: -.15em;
}

.dam-portal .btn .dam-icon--end {
    margin-right: 0;
    margin-left: .35em;
    transition: transform .15s ease;
}

/* ---------- Row "Actions" menu (two or more actions; portal_row_actions + dam-portal.js) ---------- */

.dam-portal .dam-actions {
    display: inline-block;
}

.dam-portal .dam-actions.is-open .dam-actions__toggle {
    background-color: var(--dam-navy);
    border-color: var(--dam-navy);
    color: #fff;
}

.dam-portal .dam-actions.is-open .dam-icon--end {
    transform: rotate(180deg);
}

/* Fixed to the viewport (positioned by script) so table scroll areas never clip it. */
.dam-portal .dam-actions__menu {
    position: fixed;
    z-index: 1060;
    min-width: 12rem;
    padding: .35rem;
    border: 1px solid var(--dam-border);
    border-radius: .6rem;
    background-color: var(--dam-surface);
    box-shadow: 0 12px 28px rgba(16, 24, 40, .16), 0 2px 6px rgba(16, 24, 40, .08);
    text-align: left;
}

.dam-portal .dam-actions__menu[hidden] {
    display: none;
}

.dam-portal .dam-actions__form {
    margin: 0;
}

.dam-portal .dam-actions__item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: .5rem .65rem;
    border: 0;
    border-radius: .4rem;
    background: transparent;
    color: var(--dam-navy);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.dam-portal .dam-actions__item .dam-icon {
    width: 1.05em;
    height: 1.05em;
    margin-right: .6em;
    flex: none;
}

.dam-portal .dam-actions__item:hover,
.dam-portal .dam-actions__item:focus {
    background-color: var(--dam-navy-soft);
    color: var(--dam-navy);
    text-decoration: none;
    outline: none;
}

.dam-portal .dam-actions__item:focus-visible {
    box-shadow: inset 0 0 0 2px var(--dam-navy);
}

.dam-portal .dam-actions__item--danger,
.dam-portal .dam-actions__item--danger:hover,
.dam-portal .dam-actions__item--danger:focus {
    color: #b91c1c;
}

.dam-portal .dam-actions__item--danger:hover,
.dam-portal .dam-actions__item--danger:focus {
    background-color: #fef2f2;
}

.dam-portal .dam-actions__divider {
    height: 1px;
    margin: .3rem .25rem;
    background-color: var(--dam-border);
}

.dam-portal .dam-actions__note {
    display: block;
    padding: .4rem .65rem;
    color: var(--dam-muted);
    font-size: .8rem;
}

@media (prefers-reduced-motion: reduce) {
    .dam-portal .btn .dam-icon--end {
        transition: none;
    }
}

/*
 * ---------- Status labels: the text carries the meaning, colour reinforces it ----------
 * Deliberately unlike buttons: square-cornered tinted tags with a status dot, no border, no shadow and
 * no hover. Buttons are pills with a white or solid fill, a visible border and a shadow.
 */

.dam-portal .dam-status,
.dam-portal main .badge {
    display: inline-flex;
    align-items: center;
    padding: .3em .6em;
    border: 0;
    border-radius: .3rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.2;
    white-space: nowrap;
    cursor: default;
}

.dam-portal .dam-status::before {
    content: "";
    width: .45em;
    height: .45em;
    margin-right: .45em;
    border-radius: 50%;
    background-color: currentColor;
    flex: none;
}

.dam-portal .dam-status--attention,
.dam-portal main .badge-danger {
    background-color: #fee2e2;
    color: #991b1b;
}

.dam-portal .dam-status--progress,
.dam-portal main .badge-warning {
    background-color: #fef3c7;
    color: #92400e;
}

.dam-portal .dam-status--done,
.dam-portal main .badge-success {
    background-color: #d1fae5;
    color: #065f46;
}

.dam-portal .dam-status--closed,
.dam-portal main .badge-secondary,
.dam-portal main .badge-dark {
    background-color: #e5e7eb;
    color: #374151;
}

.dam-portal .dam-status--info,
.dam-portal main .badge-info,
.dam-portal main .badge-primary {
    background-color: var(--dam-navy-soft);
    color: var(--dam-navy);
}

.dam-portal .dam-status--neutral,
.dam-portal main .badge-light {
    background-color: #f3f4f6;
    color: #4b5563;
}

.dam-portal .form-control,
.dam-portal .custom-select {
    border-color: #d5d8e2;
    border-radius: .4rem;
}

.dam-portal .form-control:focus {
    border-color: var(--dam-navy);
    box-shadow: 0 0 0 .2rem rgba(35, 36, 89, .15);
}

/*
 * Buttons: one pill shape (as on the website and apps) and four roles, whatever Bootstrap class a page uses.
 * All have a visible border and a shadow so they never look like the flat status labels above.
 *   main action  .btn-primary, .btn-success        solid brand red          (Save, Submit, Add)
 *   row action   .btn-info, .btn-warning           white, navy border/text  (View, Edit, Chat, Call, Open Map)
 *   destructive  .btn-danger, .btn-outline-danger  white, red border/text   (Reject, Delete, Archive, Toggle Status)
 *   neutral      .btn-secondary, .btn-light        white, grey border       (Cancel, Close)
 */
.dam-portal .btn {
    border-width: 1.5px;
    border-radius: 2rem;
    font-weight: 600;
    padding-left: 1rem;
    padding-right: 1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
}

.dam-portal .btn-sm {
    padding-left: .75rem;
    padding-right: .75rem;
}

.dam-portal .btn-primary,
.dam-portal .btn-success {
    background-color: var(--dam-red);
    border-color: var(--dam-red);
    color: #fff;
}

.dam-portal .btn-primary:hover,
.dam-portal .btn-success:hover,
.dam-portal .btn-primary:not(:disabled):not(.disabled):active,
.dam-portal .btn-success:not(:disabled):not(.disabled):active {
    background-color: var(--dam-red-dark);
    border-color: var(--dam-red-dark);
    color: #fff;
}

.dam-portal .btn-info,
.dam-portal .btn-warning {
    background-color: #fff;
    border-color: var(--dam-navy);
    color: var(--dam-navy);
}

.dam-portal .btn-info:hover,
.dam-portal .btn-warning:hover,
.dam-portal .btn-info:not(:disabled):not(.disabled):active,
.dam-portal .btn-warning:not(:disabled):not(.disabled):active {
    background-color: var(--dam-navy);
    border-color: var(--dam-navy);
    color: #fff;
}

.dam-portal .btn-danger,
.dam-portal .btn-outline-danger {
    background-color: #fff;
    border-color: #b91c1c;
    color: #b91c1c;
}

.dam-portal .btn-danger:hover,
.dam-portal .btn-outline-danger:hover,
.dam-portal .btn-danger:not(:disabled):not(.disabled):active,
.dam-portal .btn-outline-danger:not(:disabled):not(.disabled):active {
    background-color: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

.dam-portal .btn-secondary,
.dam-portal .btn-light {
    background-color: #fff;
    border-color: #6b7280;
    color: #374151;
}

.dam-portal .btn-secondary:hover,
.dam-portal .btn-light:hover,
.dam-portal .btn-secondary:not(:disabled):not(.disabled):active,
.dam-portal .btn-light:not(:disabled):not(.disabled):active {
    background-color: #f3f4f6;
    border-color: #9ca3af;
    color: var(--dam-text);
}

.dam-portal .btn:focus,
.dam-portal .btn.focus {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
}

.dam-portal .alert {
    border-radius: .5rem;
}

.dam-portal .modal-content {
    border: 0;
    border-radius: .75rem;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .2);
}

.dam-portal .modal-header {
    border-bottom-color: var(--dam-border);
}

.dam-portal .modal-title {
    font-weight: 600;
    color: var(--dam-navy);
}

.dam-portal .modal-footer {
    border-top-color: var(--dam-border);
}

/* Visible keyboard focus everywhere in the portal and on the login page. */
.dam-portal a:focus-visible,
.dam-portal button:focus-visible,
.dam-portal .btn:focus-visible,
.dam-portal input[type="submit"]:focus-visible,
.dam-portal input[type="checkbox"]:focus-visible,
.dam-portal select:focus-visible,
.dam-login a:focus-visible,
.dam-login button:focus-visible {
    outline: 3px solid var(--dam-focus);
    outline-offset: 2px;
}

/* ---------- Small screens: slide-out menu ---------- */

@media (max-width: 767.98px) {
    .dam-portal .dam-brand {
        flex: 1 1 auto;
        background: transparent;
        padding-left: .25rem;
    }

    .dam-portal .dam-sidebar {
        position: fixed;
        top: var(--dam-topbar-height);
        bottom: 0;
        left: 0;
        z-index: 1040;
        display: block;
        width: min(82vw, 300px);
        max-width: none;
        padding-top: 0;
        box-shadow: 4px 0 18px rgba(16, 24, 40, .18);
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform .2s ease, visibility 0s linear .2s;
    }

    .dam-portal .dam-sidebar.is-open {
        transform: none;
        visibility: visible;
        transition: transform .2s ease, visibility 0s;
    }

    .dam-portal .dam-sidebar .sidebar-sticky {
        height: 100%;
    }

    .dam-portal.dam-nav-open {
        overflow: hidden;
    }

    /* Wide lists in cards scroll inside the card instead of widening the whole page. */
    .dam-portal main .card-body {
        overflow-x: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dam-portal .dam-sidebar,
    .dam-portal .dam-sidebar.is-open {
        transition: none;
    }
}

/* ---------- Login ---------- */

.dam-login {
    display: flex;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 2rem 1rem;
    background: radial-gradient(circle at 20% 15%, #2f3170 0%, var(--dam-navy) 45%, var(--dam-navy-dark) 100%);
    color: var(--dam-text);
}

.dam-login-card {
    width: 100%;
    max-width: 380px;
    margin: auto;
    padding: 2rem 1.75rem 1.5rem;
    border-radius: 1rem;
    background: var(--dam-surface);
    box-shadow: 0 20px 45px rgba(5, 6, 25, .35);
}

.dam-login-brand {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.dam-login-brand img {
    width: 52px;
    height: 52px;
    margin-right: .85rem;
    border-radius: .75rem;
}

.dam-login-brand h1 {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--dam-navy);
}

.dam-login-brand p {
    margin: 0;
    font-size: .9rem;
    color: var(--dam-muted);
}

.dam-login-card label {
    font-weight: 500;
}

.dam-login-card .form-control {
    height: auto;
    padding: .65rem .75rem;
    border-color: #d5d8e2;
    border-radius: .5rem;
    font-size: 1rem;
}

.dam-login-card .form-control:focus {
    border-color: var(--dam-navy);
    box-shadow: 0 0 0 .2rem rgba(35, 36, 89, .15);
}

.dam-login-card .btn-dam {
    padding: .65rem 1rem;
    border: 0;
    border-radius: 2rem;
    background-color: var(--dam-red);
    color: #fff;
    font-weight: 600;
}

.dam-login-card .btn-dam:hover,
.dam-login-card .btn-dam:focus {
    background-color: var(--dam-red-dark);
    color: #fff;
}

.dam-login-footer {
    margin: 1.25rem 0 0;
    font-size: .8rem;
    text-align: center;
    color: var(--dam-muted);
}

/* ---------- Off-app orders (P11): form section headings inside the New order dialog ---------- */

.dam-portal .dam-offapp-legend {
    width: 100%;
    margin: .25rem 0 .9rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--dam-border);
    color: #4b5563;
    font-family: var(--dam-font-body);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.dam-portal .dam-offapp-preview th[scope="row"] {
    color: var(--dam-text);
}

/*
 * ---------- Brand colour for the remaining Bootstrap defaults (P9 colour refinement) ----------
 * Colour only: links, selected controls, alerts, error text and the datepicker use the portal tokens and the
 * status palette instead of Bootstrap's blue, green and teal. No layout, sizing or behaviour changes.
 */

/* Plain links (buttons, menu items, pagination and nav links keep their own colours). */
.dam-portal main a:not(.btn):not([class*="btn-"]):not(.dam-actions__item):not(.paginate_button):not(.nav-link),
.dam-portal .modal a:not(.btn):not([class*="btn-"]):not(.dam-actions__item) {
    color: var(--dam-navy);
    text-decoration: underline;
    text-decoration-color: rgba(35, 36, 89, .35);
    text-underline-offset: 2px;
}

.dam-portal main a:not(.btn):not([class*="btn-"]):not(.dam-actions__item):not(.paginate_button):not(.nav-link):hover,
.dam-portal .modal a:not(.btn):not([class*="btn-"]):not(.dam-actions__item):hover {
    color: var(--dam-red-dark);
    text-decoration-color: currentColor;
}

/* Links inside table cells stay as the bold navy row links of the table standard. */
.dam-portal main .table a:not(.btn):not([class*="btn-"]):not(.dam-actions__item) {
    text-decoration: none;
}

/* Selected radios and checkboxes: navy, with the navy focus ring used by form fields. */
.dam-portal .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--dam-navy);
    background-color: var(--dam-navy);
}

.dam-portal .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 .2rem rgba(35, 36, 89, .2);
}

.dam-portal .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--dam-navy);
}

.dam-portal .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    border-color: var(--dam-navy);
    background-color: var(--dam-navy-soft);
}

.dam-portal input[type="checkbox"],
.dam-portal input[type="radio"] {
    accent-color: var(--dam-navy);
}

/* Alerts use the same palette as the status labels, with readable text. */
.dam-portal .alert-success {
    border-color: #a7f3d0;
    background-color: #ecfdf5;
    color: #065f46;
}

.dam-portal .alert-danger {
    border-color: #fecaca;
    background-color: #fef2f2;
    color: #991b1b;
}

.dam-portal .alert-warning {
    border-color: #fde68a;
    background-color: #fffbeb;
    color: #92400e;
}

.dam-portal .alert-info {
    border-color: #d4d6ea;
    background-color: var(--dam-navy-soft);
    color: var(--dam-navy);
}

/* Alert links take the alert's own colour; the selectors mirror the plain-link rules plus .alert so they win. */
.dam-portal .alert a:not(.btn),
.dam-portal main .alert a:not(.btn):not([class*="btn-"]):not(.dam-actions__item):not(.paginate_button):not(.nav-link),
.dam-portal main .alert a:not(.btn):not([class*="btn-"]):not(.dam-actions__item):not(.paginate_button):not(.nav-link):hover,
.dam-portal .modal .alert a:not(.btn):not([class*="btn-"]):not(.dam-actions__item),
.dam-portal .modal .alert a:not(.btn):not([class*="btn-"]):not(.dam-actions__item):hover {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: currentColor;
}

/* Error text: the theme's destructive red (Bootstrap sets this colour with !important). */
.dam-portal .text-danger {
    color: #b91c1c !important;
}

/* Datepicker (bootstrap-datepicker draws it under body): selected day navy, today soft navy. */
.dam-portal .datepicker table tr td.active,
.dam-portal .datepicker table tr td.active:hover,
.dam-portal .datepicker table tr td.active.active,
.dam-portal .datepicker table tr td.active.disabled,
.dam-portal .datepicker table tr td span.active,
.dam-portal .datepicker table tr td span.active:hover {
    background-color: var(--dam-navy);
    background-image: none;
    border-color: var(--dam-navy);
    color: #fff;
    text-shadow: none;
}

.dam-portal .datepicker table tr td.today,
.dam-portal .datepicker table tr td.today:hover {
    background-color: var(--dam-navy-soft);
    background-image: none;
    color: var(--dam-navy);
}

.dam-portal .datepicker table tr td.day:not(.active):hover,
.dam-portal .datepicker table tr td span:not(.active):hover {
    background-color: #f3f4f6;
}