/* ============================================================
   brafa Systems — Properties list + Property details + inner tabs
   Part of the brafa shell. Loaded after brafa-shell.css (which holds
   the layout shell + .brafa-screen primitives). Split out of the former
   monolithic brafa-shell.css so per-area page work stops colliding.
   ============================================================ */

/* ============================================================
   PROPERTIES SCREEN
   ============================================================ */

/* Summary strip — 4 equal stat cards */
.brafa-screen .prop-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
@media (max-width: 991.98px) { .brafa-screen .prop-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .brafa-screen .prop-stats { grid-template-columns: 1fr; } }

.brafa-screen .stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 92px;
}
.brafa-screen .stat-card__value {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: var(--weight-regular);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--fg);
}
.brafa-screen .stat-card__label {
    font-family: var(--font-wide);
    font-size: 10px;
    font-weight: var(--weight-medium);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-subtle);
}
.brafa-screen .stat-card--accent .stat-card__value { color: var(--brafa-green-deep); }
.brafa-screen .stat-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--fg-subtle);
}
.brafa-screen .stat-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
}

/* List card — toolbar + table + footer composition */
.brafa-screen .prop-list { padding: 0; }
.brafa-screen .prop-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
    flex-wrap: wrap;
}
.brafa-screen .prop-toolbar__search {
    position: relative;
    flex: 1;
    min-width: 220px;
    max-width: 360px;
}
.brafa-screen .prop-toolbar__search .input {
    padding-left: 36px;
}
.brafa-screen .prop-toolbar__search svg {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: var(--fg-subtle);
    pointer-events: none;
}
.brafa-screen .prop-toolbar__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.brafa-screen .prop-toolbar__perpage {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--fg-muted);
}
.brafa-screen .prop-toolbar__perpage .select {
    width: auto;
    min-width: 64px;
    padding: 8px 10px;
    font-size: 12.5px;
}

.brafa-screen .prop-list__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--bg-sunken);
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    color: var(--fg-muted);
    flex-wrap: wrap;
}

/* Property logo tile — 44px coloured square with initials */
.brafa-screen .prop-logo {
    width: 44px; height: 44px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    color: var(--brafa-white);
    font-family: var(--font-display);
    font-weight: var(--weight-light);
    font-size: 16px;
    letter-spacing: 0.02em;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}
/* Logo image: fits ANY aspect ratio (contain) on a white plate so a
   transparent PNG never lets the fallback initials show through. The
   white plate + initials are only revealed when the image fails to load. */
.brafa-screen .prop-logo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    background: var(--brafa-white);
}
/* Once the image has loaded, hide the initials behind it. */
.brafa-screen .prop-logo.has-image .prop-logo__initials { display: none; }
/* While there is no image (or it errored), show the coloured tile + initials. */
.brafa-screen .prop-logo__initials {
    position: relative;
    z-index: 0;
}

/* Property name + sub */
.brafa-screen .prop-name__main {
    font-weight: var(--weight-medium);
    font-size: 14px;
    color: var(--fg);
    line-height: 1.25;
}
.brafa-screen .prop-name__sub {
    font-size: 12px;
    color: var(--fg-subtle);
    margin-top: 2px;
}

/* Type pill variants — bone (hotel default), blue-tinted (golf), purple-tinted (apartments) */
.brafa-screen .pill--type-hotel      { background: var(--brafa-bone);   color: var(--fg-muted); }
.brafa-screen .pill--type-golf       { background: #E6EEF8;             color: #3A5E8E; }
.brafa-screen .pill--type-apartments { background: #EDE6F4;             color: #5B3F7A; }

/* Occupancy bar — 6px sunken with coloured fill */
.brafa-screen .occupancy {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 110px;
}
.brafa-screen .occupancy-bar {
    flex: 1;
    height: 6px;
    background: var(--brafa-fog);
    border-radius: 999px;
    overflow: hidden;
}
.brafa-screen .occupancy-bar__fill {
    display: block;
    height: 100%;
    background: var(--brafa-graphite);
    border-radius: 999px;
    transition: width var(--dur-base) var(--ease);
}
.brafa-screen .occupancy-bar__fill.is-empty   { background: var(--brafa-fog); }
.brafa-screen .occupancy-bar__fill.is-low     { background: var(--brafa-amber); }
.brafa-screen .occupancy-bar__fill.is-mid     { background: var(--brafa-graphite); }
.brafa-screen .occupancy-bar__fill.is-high    { background: var(--brafa-green-deep); }
.brafa-screen .occupancy__pct {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-muted);
    min-width: 36px;
    text-align: right;
}

/* Row action chevron */
.brafa-screen .row-chevron {
    all: unset;
    width: 32px; height: 32px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    color: var(--fg-subtle);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.brafa-screen .row-chevron:hover { background: var(--bg-sunken); color: var(--fg); }

/* ============================================================
   Modal — minimal restyle so the existing Bootstrap 4 modal
   (data-toggle / data-dismiss) still works.
   ============================================================ */
.brafa-screen .brafa-modal-content {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.brafa-screen .brafa-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-sunken);
}
.brafa-screen .brafa-modal-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: var(--weight-medium);
    color: var(--fg);
    margin: 0;
}
.brafa-screen .brafa-modal-close {
    all: unset;
    cursor: pointer;
    padding: 4px;
    color: var(--fg-subtle);
    border-radius: 4px;
}
.brafa-screen .brafa-modal-close:hover { color: var(--fg); }
.brafa-screen .brafa-modal-body { padding: 20px; }
.brafa-screen .brafa-modal-body .form-group { margin-bottom: 16px; }

/* ---- Make Card "reader" UI ---- */
/* Visually-hidden capture field — the USB reader types the card number here
   and submits with Enter, while the operator only sees the reader prompt. */
.brafa-screen .brafa-reader-capture {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
}
.brafa-card-reader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    padding: 8px 8px 4px;
}
.brafa-card-reader__art {
    width: 220px;
    max-width: 80%;
    aspect-ratio: 132 / 96;
    color: var(--fg-subtle);
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    display: grid;
    place-items: center;
    padding: 22px 28px;
}
.brafa-card-reader__art svg { width: 100%; height: 100%; display: block; }
.brafa-card-reader__status {
    margin: 0;
    color: var(--fg-subtle);
    font-size: 13.5px;
}
.brafa-card-reader__loading {
    display: none;
    align-items: center;
    gap: 10px;
    color: var(--fg);
    font-size: 13.5px;
    font-weight: 500;
}
.brafa-card-reader.is-loading .brafa-card-reader__status { display: none; }
.brafa-card-reader.is-loading .brafa-card-reader__loading { display: inline-flex; }
.brafa-card-reader.is-loading .brafa-card-reader__art { color: var(--fg); opacity: 0.9; }
.brafa-reader-spinner {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid var(--border);
    border-top-color: var(--brafa-black);
    animation: brafa-spin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes brafa-spin { to { transform: rotate(360deg); } }
.brafa-card-reader__footer {
    display: flex;
    justify-content: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    width: 100%;
}

/* ============================================================
   PROPERTY DETAILS SCREEN
   ============================================================ */

/* ---- Hero ---- */
.brafa-property-hero {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 0;
    min-height: 280px;
    border: 1px solid var(--brafa-black);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 24px;
    background: var(--brafa-ink);
    color: var(--brafa-white);
}
@media (max-width: 991.98px) { .brafa-property-hero { grid-template-columns: 1fr; } }

.brafa-property-hero__photo {
    position: relative;
    padding: 28px 32px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--brafa-white);
    /* Solid dark base so a transparent property logo shows on dark rather
       than a stacked placeholder. The logo image is applied inline via the
       --hero-logo custom property and painted by the ::before layer below
       (contained, right-aligned) so it FITS at any size and never stretches. */
    background-color: var(--brafa-ink);
}
/* Logo / photo layer — pinned to a compact band in the TOP-RIGHT corner so
   the whole asset stays visible at any size AND never collides with a long
   property name (which sits bottom-left). Constrained to the right ~52% of
   the cell and the upper portion, contained so it never stretches. */
.brafa-property-hero__photo::before {
    content: "";
    position: absolute;
    top: 24px;
    right: 32px;
    left: 48%;
    height: 110px;
    background-image: var(--hero-logo, none);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain;
    opacity: 0.9;
    pointer-events: none;
}
/* Gradient overlay — darker on the left where the text sits, lighter on the
   right so the logo reads. */
.brafa-property-hero__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(11,11,11,0.94) 0%, rgba(11,11,11,0.78) 38%, rgba(11,11,11,0.45) 70%, rgba(11,11,11,0.30) 100%);
    pointer-events: none;
}
.brafa-property-hero__photo > * { position: relative; z-index: 1; }

.brafa-property-hero__eyebrow {
    font-family: var(--font-wide);
    font-size: 10px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.78);
}

.brafa-property-hero__pills {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.brafa-screen .pill--on-dark {
    background: rgba(255,255,255,0.12);
    color: var(--brafa-white);
}
.brafa-screen .pill--green-on-dark {
    background: var(--brafa-green-soft);
    color: var(--brafa-green-deep);
}

/* Scoped under .brafa-screen so it beats the generic ".brafa-screen h1"
   ink-colour rule (which was darkening the name on the dark hero). */
.brafa-screen .brafa-property-hero__name {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: var(--weight-light);
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 16px 0 0;
    color: var(--brafa-white);
    text-shadow: 0 1px 16px rgba(0,0,0,0.35);
}
@media (max-width: 575.98px) { .brafa-screen .brafa-property-hero__name { font-size: 36px; } }

.brafa-property-hero__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}
.brafa-screen .btn--on-dark {
    background: var(--brafa-white);
    color: var(--brafa-black);
    border-color: var(--brafa-white);
}
.brafa-screen .btn--on-dark:hover { background: var(--brafa-bone); color: var(--brafa-black); }
.brafa-screen .btn--outline-on-dark {
    background: transparent;
    color: var(--brafa-white);
    border-color: rgba(255,255,255,0.28);
}
.brafa-screen .btn--outline-on-dark:hover {
    background: rgba(255,255,255,0.08);
    color: var(--brafa-white);
    border-color: rgba(255,255,255,0.55);
}

.brafa-property-hero__schedule {
    background: rgba(255,255,255,0.04);
    border-left: 1px solid rgba(255,255,255,0.08);
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--brafa-white);
}
.brafa-property-hero__schedule .eyebrow {
    color: rgba(255,255,255,0.6);
}
.brafa-time-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
}
/* On phones the two door-schedule cells stack so each "HH:MM → HH:MM" pair has
   the full width and stops getting squished. */
@media (max-width: 575.98px) {
    .brafa-time-grid { grid-template-columns: 1fr; }
    .brafa-time-grid .time-pair { justify-content: flex-start; }
}
.brafa-time-grid > div {
    background: rgba(0,0,0,0.25);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 80px;
    min-width: 0;
    overflow: visible;
}
.brafa-time-grid label {
    font-family: var(--font-wide);
    font-size: 9.5px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin: 0;
}
.brafa-time-grid .time-pair {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 16px;
    color: var(--brafa-white);
    line-height: 1;
}
.brafa-time-grid input[type="time"] {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--brafa-white);
    padding: 4px 4px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 15px;
    width: 64px;
    flex: 0 0 auto;
    box-sizing: content-box;
    text-align: center;
}
/* Hide the native clock / spinner so the HH:MM value isn't clipped in the
   narrow schedule cell. */
.brafa-time-grid input[type="time"]::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; }
.brafa-time-grid input[type="time"]::-webkit-inner-spin-button,
.brafa-time-grid input[type="time"]::-webkit-clear-button { display: none; -webkit-appearance: none; }
.brafa-time-grid input[type="time"][readonly] { border-color: transparent; }
.brafa-time-grid .time-arrow {
    color: rgba(255,255,255,0.45);
    font-family: var(--font-mono);
}

.brafa-hero-contact {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--brafa-white);
    font-size: 13px;
}
.brafa-hero-contact input {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--brafa-white);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    flex: 1;
    min-width: 0;
}
.brafa-hero-contact input[readonly] { border-color: transparent; }
.brafa-hero-contact .icon-btn,
.brafa-hero-icon-btn {
    all: unset;
    cursor: pointer;
    color: rgba(255,255,255,0.6);
    padding: 4px;
    border-radius: 4px;
    display: grid;
    place-items: center;
    box-sizing: border-box;
}
.brafa-hero-contact .icon-btn:hover,
.brafa-hero-icon-btn:hover { color: var(--brafa-white); background: rgba(255,255,255,0.08); }

/* ---- Stats strip — 1 black hero (2× wide) + 5 white cards ---- */
.brafa-property-stats {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}
@media (max-width: 1199.98px) {
    .brafa-property-stats {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(120px, auto);
    }
    .brafa-property-stats > :first-child { grid-column: span 3; }
}
@media (max-width: 575.98px) {
    .brafa-property-stats { grid-template-columns: repeat(2, 1fr); }
    .brafa-property-stats > :first-child { grid-column: span 2; }
}

.brafa-stat-hero {
    background: var(--brafa-black);
    color: var(--brafa-white);
    border: 1px solid var(--brafa-black);
    border-radius: var(--radius-sm);
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.brafa-stat-hero__value {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: var(--weight-light);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--brafa-white);
}
.brafa-stat-hero__caption {
    color: rgba(255,255,255,0.7);
    font-size: 12.5px;
    margin-bottom: 6px;
}
.brafa-stat-hero__micros {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 10px;
    margin-top: 4px;
}
.brafa-stat-hero__micros > div {
    padding: 4px 12px;
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    border-right: 1px solid rgba(255,255,255,0.12);
}
.brafa-stat-hero__micros > div:last-child { border-right: 0; }
.brafa-stat-hero__micros .v {
    font-family: var(--font-mono);
    font-size: 16px;
    color: var(--brafa-white);
    display: block;
    margin-top: 2px;
}

.brafa-stat-cell {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    min-height: 110px;
}
.brafa-stat-cell__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--fg-subtle);
}
.brafa-stat-cell__label {
    font-family: var(--font-wide);
    font-size: 10px;
    font-weight: var(--weight-medium);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.brafa-stat-cell__value {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: var(--weight-regular);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--fg);
    margin-top: 6px;
}
.brafa-stat-cell__bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: var(--brafa-fog);
}
.brafa-stat-cell__bar > span {
    display: block;
    height: 100%;
    background: var(--brafa-graphite);
    transition: width var(--dur-base) var(--ease);
}
.brafa-stat-cell__bar.is-high > span { background: var(--brafa-green-deep); }

/* ---- Automation row ---- */
.brafa-automation-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}
@media (max-width: 991.98px) { .brafa-automation-row { grid-template-columns: 1fr; } }

.brafa-automation-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.brafa-automation-card__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.brafa-automation-card__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: var(--weight-medium);
    color: var(--fg);
    margin: 0;
}
.brafa-status-dot {
    width: 10px; height: 10px;
    border-radius: 999px;
    background: var(--brafa-stone);
    box-shadow: 0 0 0 4px rgba(0,0,0,0);
    transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
    flex-shrink: 0;
}
.brafa-status-dot.is-on {
    background: var(--brafa-green);
    box-shadow: 0 0 0 4px var(--brafa-green-soft);
}

.brafa-toggle {
    position: relative;
    width: 38px; height: 22px;
    background: var(--brafa-fog);
    border-radius: 999px;
    border: 0;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--dur-fast) var(--ease);
}
.brafa-toggle::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    background: var(--brafa-white);
    border-radius: 999px;
    transition: transform var(--dur-fast) var(--ease);
}
.brafa-toggle.is-on { background: var(--brafa-green); }
.brafa-toggle.is-on::after { transform: translateX(16px); }

.brafa-schedule-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    overflow: hidden;
}
.brafa-schedule-grid > div {
    background: var(--bg-surface);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.brafa-schedule-grid label {
    font-family: var(--font-wide);
    font-size: 9.5px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--fg-subtle);
    margin: 0;
}
.brafa-schedule-grid .v {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--fg-subtle);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.brafa-schedule-grid .v.is-on { color: var(--brafa-green-deep); }

.brafa-automation-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}
.brafa-automation-controls .field-label { margin: 0; flex-shrink: 0; align-self: center; }
/* Field and Update button share one explicit height and are centre-aligned so
   the button lines up with the select / input instead of riding high. The
   border-box + min-height guards against the button's content-box padding
   making it taller than the field. */
.brafa-automation-controls .select,
.brafa-automation-controls .input,
.brafa-automation-controls .btn {
    box-sizing: border-box;
    height: 38px;
    min-height: 38px;
    margin: 0; /* kill Material Dashboard's .btn margin-bottom that made the button ride high */
    align-self: center;
}
.brafa-automation-controls .select,
.brafa-automation-controls .input {
    width: auto;
    flex: 1;
    padding: 0 12px;
    font-size: 12.5px;
}
.brafa-automation-controls .btn {
    flex-shrink: 0;
    padding-top: 0;
    padding-bottom: 0;
}
/* On phones the label/select/button row stacks so the control isn't crushed
   into a sliver beside the Update button. */
@media (max-width: 575.98px) {
    .brafa-automation-controls { flex-wrap: wrap; }
    .brafa-automation-controls .select,
    .brafa-automation-controls .input { flex: 1 1 100%; }
    .brafa-automation-controls .btn { flex: 1 1 100%; }
}

/* ============================================================
   Tabbed details card — restyles the Bootstrap nav-pills the
   existing view emits with .nav-pills + .nav-link.
   ============================================================ */
.brafa-screen .card.brafa-details-card {
    padding: 24px 28px;
}
.brafa-screen .brafa-details-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.brafa-screen .brafa-details-head h5 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: var(--weight-medium);
    color: var(--fg);
    margin: 0;
}

.brafa-screen .nav-pills {
    gap: 4px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
    margin-bottom: 16px;
}
.brafa-screen .nav-pills .nav-link {
    background: transparent !important;
    color: var(--fg-muted) !important;
    box-shadow: none !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 10px 14px !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.brafa-screen .nav-pills .nav-link:hover { color: var(--fg) !important; }
/* On phones the tab strip scrolls horizontally instead of stacking into a
   vertical block — tabs keep their underline and stay on one line. display:flex
   is forced because legacy/Material rules can otherwise collapse it to block. */
@media (max-width: 575.98px) {
    .brafa-screen .nav-pills {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .brafa-screen .nav-pills::-webkit-scrollbar { display: none; }
    .brafa-screen .nav-pills .nav-item { flex: 0 0 auto; }
    .brafa-screen .nav-pills .nav-link { white-space: nowrap; }
}
.brafa-screen .nav-pills .nav-link.active {
    color: var(--fg) !important;
    border-bottom-color: var(--brafa-black) !important;
    background: transparent !important;
}

/* The existing tab tables emit a lot of inline `text-white` and dark
   classes. Force them to use brafa ink inside .brafa-screen. */
.brafa-screen .text-white { color: var(--fg) !important; }
.brafa-screen .bg-gradient-dark {
    background: var(--bg-surface) !important;
    color: var(--fg) !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.brafa-screen .bg-gradient-dark h5,
.brafa-screen .bg-gradient-dark h6,
.brafa-screen .bg-gradient-dark h4,
.brafa-screen .bg-gradient-dark .text-white { color: var(--fg) !important; }

/* Existing tables in the inner tabs use Bootstrap's .table classes —
   let our screen primitives win for the body cells. */
.brafa-screen table.table tbody tr { color: var(--fg); }
.brafa-screen .white-text { color: var(--fg) !important; }

/* ============================================================
   INNER TAB TABLES — bookings / locks / openings / assigned.
   CSS-only overlay on the existing markup so wire:* directives
   stay put. Targets the classes those tables already emit
   (.btn-primary, .material-icons, .connection-text, etc.).
   ============================================================ */

/* The conditional wrappers (table-responsive) inside the tabs */
.brafa-screen .tab-content .table-responsive {
    overflow-x: auto;
}
.brafa-screen .tab-content .table-responsive::-webkit-scrollbar { height: 8px; }
.brafa-screen .tab-content .table-responsive::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

/* Force tab-content tables into the brafa table primitive. */
.brafa-screen .tab-content table.table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    color: var(--fg);
    margin: 0;
    font-size: 13px;
}
.brafa-screen .tab-content table.table thead th {
    padding: 12px 14px;
    background: var(--bg-sunken) !important;
    color: var(--fg-subtle) !important;
    font-family: var(--font-wide) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    white-space: nowrap;
    text-align: center;
}
.brafa-screen .tab-content table.table tbody td {
    padding: 12px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--fg) !important;
    font-family: var(--font-body);
    text-align: center;
}
/* Cells whose content is a flex/inline cluster (buttons, status dots) centre
   their content horizontally to match the centred headers. */
.brafa-screen .tab-content table.table tbody td > .status-cell,
.brafa-screen .tab-content table.table tbody td > .button-group,
.brafa-screen .tab-content table.table tbody td > div {
    justify-content: center;
}
.brafa-screen .tab-content table.table tbody tr:last-child td { border-bottom: 0 !important; }
.brafa-screen .tab-content table.table tbody tr:hover { background: var(--bg-sunken) !important; }

/* Booking ID and dates → mono muted */
.brafa-screen .tab-content table.table tbody td:first-child { font-family: var(--font-mono); color: var(--fg-muted) !important; }
.brafa-screen .tab-content table.table tbody td.d-none.d-sm-table-cell { font-family: var(--font-mono); }

/* ---- Buttons inside tab tables ---- */
.brafa-screen .tab-content .btn,
.brafa-screen .tab-content .btn.btn-primary,
.brafa-screen .tab-content .btn.btn-secondary,
.brafa-screen .tab-content .btn.btn-success,
.brafa-screen .tab-content .btn.btn-info,
.brafa-screen .tab-content .btn.btn-outline-white,
.brafa-screen .tab-content button.sp-btn,
.brafa-screen .tab-content button.mc-btn,
.brafa-screen .tab-content button.ec-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    padding: 6px 12px !important;
    font-family: var(--font-body) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    border-radius: 8px !important;
    border: 1px solid var(--brafa-black) !important;
    background: var(--brafa-black) !important;
    color: var(--brafa-white) !important;
    box-shadow: none !important;
    background-image: none !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    white-space: nowrap;
}
.brafa-screen .tab-content .btn-secondary,
.brafa-screen .tab-content .btn-outline-white {
    background: var(--bg-surface) !important;
    color: var(--brafa-black) !important;
    border-color: var(--border) !important;
}
.brafa-screen .tab-content .btn-secondary:hover,
.brafa-screen .tab-content .btn-outline-white:hover {
    border-color: var(--brafa-black) !important;
}
.brafa-screen .tab-content .btn:hover,
.brafa-screen .tab-content button.sp-btn:hover,
.brafa-screen .tab-content button.mc-btn:hover,
.brafa-screen .tab-content button.ec-btn:hover { background: var(--brafa-ink) !important; color: var(--brafa-white) !important; }
.brafa-screen .tab-content .btn-secondary:hover,
.brafa-screen .tab-content .btn-outline-white:hover { background: var(--bg-surface) !important; color: var(--brafa-black) !important; }

/* The "Make Card" button group used to sit beside a green check */
.brafa-screen .tab-content .button-group { gap: 6px; display: inline-flex; }

/* "Early CheckIn" → render compact */
.brafa-screen .tab-content button.ec-btn { padding: 4px 10px !important; font-size: 11px !important; }

/* Material-icon success checkmark beside successful codes → green dot */
.brafa-screen .tab-content td .material-icons.text-success,
.brafa-screen .tab-content td .material-icons[style*="color: green"] {
    color: var(--brafa-green-deep) !important;
    font-size: 18px;
    vertical-align: middle;
}

/* ---- Code status cell — Sciener / Unifi indicator dots ---- */
.brafa-screen .tab-content .status-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.brafa-screen .tab-content .status-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.brafa-screen .tab-content .status-icon.material-icons {
    font-size: 10px !important;
    line-height: 1;
}
.brafa-screen .tab-content .status-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--fg-subtle);
}
.brafa-screen .tab-content .status-popup {
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: translateY(-4px);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 8px 10px;
    min-width: 200px;
    font-size: 11.5px;
    color: var(--fg);
    display: none;
    z-index: 30;
    white-space: normal;
}
.brafa-screen .tab-content .status-wrapper:hover .status-popup { display: block; }
.brafa-screen .tab-content .status-line { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.brafa-screen .tab-content .status-line .material-icons { font-size: 10px !important; }

/* ---- Passcode display cell — make obviously machine-formatted text mono ---- */
.brafa-screen .tab-content table.table tbody td:has(strong),
.brafa-screen .tab-content table.table tbody td {
    /* Apply mono to cells that obviously hold codes — they're the columns
       headed "Passcode". Without :has() on broad browser support we can't
       target precisely from CSS, so we let the explicit class take effect. */
}

/* ---- Locks tab ---- */
/* Lock model column — the type-icon image */
.brafa-screen .tab-content .wt-locks td img {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 6px;
    object-fit: contain;
}

/* Battery cell — keep the material-icons glyph but shrink to a small chip */
.brafa-screen .tab-content .wt-locks td .material-icons[style*="battery"],
.brafa-screen .tab-content .wt-locks td .material-icons {
    font-size: 16px !important;
    vertical-align: middle;
    margin-right: 4px;
}

/* Connection cell — the wifi icon + text reads as a pill */
.brafa-screen .tab-content .connection {
    white-space: nowrap;
    font-family: var(--font-wide);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.brafa-screen .tab-content .connection .material-icons {
    font-size: 14px !important;
    margin-right: 4px;
    vertical-align: middle;
}
.brafa-screen .tab-content .connection-text {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--brafa-bone);
    color: var(--fg-muted);
    font-family: var(--font-wide);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    vertical-align: middle;
}
.brafa-screen .tab-content .connection .material-icons[style*="color: green"] + .connection-text {
    background: var(--brafa-green-soft);
    color: var(--brafa-green-deep);
}
.brafa-screen .tab-content .connection .material-icons[style*="color: red"] + .connection-text {
    background: var(--brafa-red-soft);
    color: var(--brafa-red);
}

/* "smaller-font" wt-locks utility used by the existing view */
.brafa-screen .tab-content .smaller-font { font-size: 12.5px; }

/* ---- Guest openings tab ---- */
/* The search form at top — turn into a brafa toolbar */
.brafa-screen .tab-content form.mb-3.d-flex {
    margin-bottom: 14px !important;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
}
.brafa-screen .tab-content form.mb-3.d-flex input.form-control {
    height: 38px;
    padding: 8px 12px !important;
    font-size: 13px !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-surface) !important;
    color: var(--fg) !important;
    box-shadow: none !important;
}
.brafa-screen .tab-content form.mb-3.d-flex input.form-control:focus {
    border-color: var(--brafa-black) !important;
}

/* Sciener login form (locks tab fallback) */
.brafa-screen .tab-content form .form-group {
    margin-bottom: 12px;
}
.brafa-screen .tab-content form .form-group label {
    display: block;
    font-family: var(--font-wide);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-subtle);
    margin-bottom: 6px;
}
.brafa-screen .tab-content form .form-group input.form-control {
    padding: 10px 14px !important;
    font-size: 14px !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-surface) !important;
    color: var(--fg) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
}

/* Type cell glyph spacing in openings */
.brafa-screen .tab-content table.table tbody td .material-icons,
.brafa-screen .tab-content table.table tbody td .fa,
.brafa-screen .tab-content table.table tbody td .fas {
    margin-right: 6px;
    vertical-align: middle;
    font-size: 14px !important;
    color: var(--fg-subtle);
}

/* Time cell in openings — mono */
.brafa-screen .tab-content table.table tbody tr td:last-child {
    /* nothing — keep default */
}

/* ---- Bootstrap pagination inside tabs — turn into pager chips ---- */
.brafa-screen .tab-content .pagination {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    gap: 6px;
    flex-wrap: wrap;
}
.brafa-screen .tab-content .pagination .page-item .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border) !important;
    background: var(--bg-surface) !important;
    border-radius: var(--radius-pill) !important;
    color: var(--fg-muted) !important;
    font-size: 13px !important;
    box-shadow: none !important;
    line-height: 1 !important;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.brafa-screen .tab-content .pagination .page-item .page-link:hover {
    border-color: var(--brafa-black) !important;
    color: var(--fg) !important;
}
.brafa-screen .tab-content .pagination .page-item.active .page-link {
    background: var(--brafa-black) !important;
    color: var(--brafa-white) !important;
    border-color: var(--brafa-black) !important;
}
.brafa-screen .tab-content .pagination .page-item.disabled .page-link {
    opacity: 0.4;
    pointer-events: none;
}

/* ---- Info popup in mobile booking row ---- */
.brafa-screen .tab-content .info-icon {
    color: var(--fg-subtle);
    cursor: pointer;
    vertical-align: middle;
}
.brafa-screen .tab-content .info-popup {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--fg) !important;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}

/* ---- Toast-style alert banners inside the details card ---- */
.brafa-screen .tab-content .alert {
    background: var(--bg-sunken) !important;
    color: var(--fg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 10px 14px !important;
    font-size: 13px;
}
.brafa-screen .tab-content .alert.alert-success {
    background: var(--brafa-green-soft) !important;
    color: var(--brafa-green-deep) !important;
    border-color: var(--brafa-green-deep) !important;
}
.brafa-screen .tab-content .alert.alert-danger {
    background: var(--brafa-red-soft) !important;
    color: var(--brafa-red) !important;
    border-color: var(--brafa-red) !important;
}

/* ---- Loading spinners inside tabs ---- */
.brafa-screen .tab-content .spinner-border {
    color: var(--fg-subtle) !important;
    border-width: 2px;
}


/* ============================================================
   CARD SEARCH — results inside the search modal
   ============================================================ */
.brafa-screen .brafa-card-results { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.brafa-screen .brafa-card-result {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
    padding: 12px 14px;
    font-size: 13px;
    color: var(--fg);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.brafa-screen .brafa-card-result__k {
    font-family: var(--font-wide);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-subtle);
    margin-right: 6px;
}
.brafa-screen .brafa-card-results__empty {
    margin: 14px 0 0;
    color: var(--fg-subtle);
    font-size: 13px;
    text-align: center;
}

/* ============================================================
   BOOKINGS TABLES ON PHONES — collapse the very wide bookings
   table into one card per booking so Unit / Start / End are
   visible at a glance instead of buried in an Info popup.
   Scoped to .wt-Tbookings and made !important to beat the
   tab-content table rules above. Each <td> carries a data-label.
   ============================================================ */
@media (max-width: 575.98px) {
    .brafa-screen .tab-content .wt-Tbookings thead { display: none; }
    .brafa-screen .tab-content .wt-Tbookings tbody tr {
        display: block;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--bg-surface);
        margin-bottom: 12px;
        padding: 4px 14px;
    }
    .brafa-screen .tab-content .wt-Tbookings tbody td {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        text-align: right !important;
        padding: 9px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid var(--border) !important;
        white-space: normal !important;
    }
    .brafa-screen .tab-content .wt-Tbookings tbody td:last-child { border-bottom: 0 !important; }
    .brafa-screen .tab-content .wt-Tbookings tbody td::before {
        content: attr(data-label);
        font-family: var(--font-wide);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--fg-subtle);
        text-align: left;
        flex-shrink: 0;
    }
    .brafa-screen .tab-content .wt-Tbookings tbody td:not([data-label])::before { content: none; }
    /* Drop the now-redundant Info popup column and surface Start / End instead. */
    .brafa-screen .tab-content .wt-Tbookings .d-sm-none { display: none !important; }
    .brafa-screen .tab-content .wt-Tbookings td.d-none.d-sm-table-cell,
    .brafa-screen .tab-content .wt-Tbookings th.d-none.d-sm-table-cell { display: flex !important; }
    /* "No bookings" full-width row keeps its centring. */
    .brafa-screen .tab-content .wt-Tbookings tbody td[colspan] {
        justify-content: center;
        text-align: center !important;
    }
    .brafa-screen .tab-content .wt-Tbookings tbody td[colspan]::before { content: none; }

    /* ---- Action cells (the unlabeled tds: Send Passcode, Card, Early
       CheckIn, Late Checkout) render as a stack of full-width, equal-size
       buttons at the bottom of each card, instead of squished columns. ---- */
    .brafa-screen .tab-content .wt-Tbookings tbody td:not([data-label]):not([colspan]) {
        display: block !important;
        text-align: center !important;
        padding: 5px 0 !important;
        border-bottom: 0 !important;
    }
    /* First action cell gets a divider + a little breathing room from the data
       rows above it. */
    .brafa-screen .tab-content .wt-Tbookings tbody td[data-label] + td:not([data-label]) {
        border-top: 1px solid var(--border);
        margin-top: 2px;
        padding-top: 10px !important;
    }
    /* Neutralise the inline `display:flex; justify-content:space-between` wrapper
       in the Make Card cell (external !important beats the non-important inline
       style) so the button can go full width and its text stops wrapping. */
    .brafa-screen .tab-content .wt-Tbookings tbody td:not([data-label]) > div[style] {
        display: block !important;
    }
    .brafa-screen .tab-content .wt-Tbookings tbody td:not([data-label]) .button-group {
        display: block !important;
    }
    .brafa-screen .tab-content .wt-Tbookings tbody td:not([data-label]) .btn {
        display: flex !important;
        width: 100% !important;
        margin: 0 !important;
        white-space: nowrap;
    }
    /* A lone success check (passcode already sent / card exists) centres as a
       small status glyph rather than floating awkwardly. */
    .brafa-screen .tab-content .wt-Tbookings tbody td:not([data-label]) .material-icons {
        display: inline-block;
        margin: 0 auto !important;
    }
}

/* ============================================================
   LOCKS + GUEST OPENINGS TABS ON PHONES — same card-per-row
   collapse as the bookings tables (these are simpler: a few
   data columns plus, for Locks, a single Unlock action).
   ============================================================ */
@media (max-width: 575.98px) {
    .brafa-screen .tab-content .wt-locks thead,
    .brafa-screen .tab-content .wt-openings thead { display: none; }
    .brafa-screen .tab-content .wt-locks tbody tr,
    .brafa-screen .tab-content .wt-openings tbody tr {
        display: block;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--bg-surface);
        margin-bottom: 12px;
        padding: 4px 14px;
    }
    .brafa-screen .tab-content .wt-locks tbody td,
    .brafa-screen .tab-content .wt-openings tbody td {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        text-align: right !important;
        padding: 9px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid var(--border) !important;
        white-space: normal !important;
    }
    .brafa-screen .tab-content .wt-locks tbody tr td:last-child,
    .brafa-screen .tab-content .wt-openings tbody tr td:last-child { border-bottom: 0 !important; }
    .brafa-screen .tab-content .wt-locks tbody td::before,
    .brafa-screen .tab-content .wt-openings tbody td::before {
        content: attr(data-label);
        font-family: var(--font-wide);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--fg-subtle);
        text-align: left;
        flex-shrink: 0;
    }
    .brafa-screen .tab-content .wt-locks tbody td:not([data-label])::before,
    .brafa-screen .tab-content .wt-openings tbody td:not([data-label])::before { content: none; }
    /* Empty-state rows span the card, centred, no label. */
    .brafa-screen .tab-content .wt-locks tbody td[colspan],
    .brafa-screen .tab-content .wt-openings tbody td[colspan] {
        justify-content: center;
        text-align: center !important;
    }
    .brafa-screen .tab-content .wt-locks tbody td[colspan]::before,
    .brafa-screen .tab-content .wt-openings tbody td[colspan]::before { content: none; }
    /* Locks "Action" cell: full-width Unlock button under its label. */
    .brafa-screen .tab-content .wt-locks tbody td[data-label="Action"] {
        display: block !important;
        text-align: left !important;
        border-top: 1px solid var(--border);
        padding-top: 10px !important;
    }
    .brafa-screen .tab-content .wt-locks tbody td[data-label="Action"] .btn {
        display: flex !important;
        width: 100% !important;
        margin: 6px 0 0 !important;
    }
}

/* ============================================================
   ASSIGNED LOCKS TAB TABLE ON PHONES — card-per-row. Every column
   (including those hidden for the desktop-narrow layout) shows as a
   labeled row, so the overflow-prone inline info popup is redundant
   and gets hidden.
   ============================================================ */
@media (max-width: 575.98px) {
    .brafa-screen .tab-content .assigned-locks-table thead { display: none; }
    .brafa-screen .tab-content .assigned-locks-table tbody tr {
        display: block;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--bg-surface);
        margin-bottom: 12px;
        padding: 4px 14px;
    }
    /* Reveal the columns Bootstrap hides on narrow screens. */
    .brafa-screen .tab-content .assigned-locks-table tbody td,
    .brafa-screen .tab-content .assigned-locks-table tbody td.d-none.d-md-table-cell {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        text-align: right !important;
        padding: 9px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid var(--border) !important;
        white-space: normal !important;
    }
    .brafa-screen .tab-content .assigned-locks-table tbody td::before {
        content: attr(data-label);
        font-family: var(--font-wide);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--fg-subtle);
        text-align: left;
        flex-shrink: 0;
    }
    /* The inline info-popup column is redundant once every field shows. */
    .brafa-screen .tab-content .assigned-locks-table .info-icon-alocks { display: none !important; }
    .brafa-screen .tab-content .assigned-locks-table tbody td[colspan] {
        justify-content: center;
        text-align: center !important;
    }
    .brafa-screen .tab-content .assigned-locks-table tbody td[colspan]::before { content: none; }
    /* Edit action → full-width button at the bottom of the card. */
    .brafa-screen .tab-content .assigned-locks-table tbody td.alocks-action {
        display: block !important;
        text-align: left !important;
        border-top: 1px solid var(--border);
        border-bottom: 0 !important;
        padding-top: 10px !important;
    }
    .brafa-screen .tab-content .assigned-locks-table tbody td.alocks-action::before { content: none; }
    .brafa-screen .tab-content .assigned-locks-table tbody td.alocks-action .btn {
        display: flex !important;
        width: 100% !important;
        margin: 0 !important;
    }
}