/* ============================================================
   brafa Systems — Locks
   Lock overview + lock details. Part of the brafa shell, loaded
   after brafa-shell.css. Per-area file (split structure).
   ============================================================ */

/* Clickable lock alias */
.brafa-screen .lock-alias {
    color: var(--fg);
    font-weight: var(--weight-medium);
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.brafa-screen .lock-alias:hover { color: var(--brafa-black); border-color: var(--brafa-black); }

/* Lock model cell — icon + name */
.brafa-screen .lock-model {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.brafa-screen .lock-model img { width: 18px; height: 18px; object-fit: contain; }

/* Battery chip — colour shifts with level */
.brafa-screen .battery-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--fg-muted);
    white-space: nowrap;
}
.brafa-screen .battery-chip .material-icons { font-size: 16px; }
.brafa-screen .battery-chip--high { color: var(--brafa-green-deep); }
.brafa-screen .battery-chip--mid  { color: #8C5F1B; }
.brafa-screen .battery-chip--low  { color: var(--brafa-red); }

/* Lock overview hero (black stat banner) */
.brafa-locks-hero {
    background: var(--brafa-black);
    color: var(--brafa-white);
    border: 1px solid var(--brafa-black);
    border-radius: var(--radius-sm);
    padding: 28px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.brafa-locks-hero__value {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: var(--weight-light);
    line-height: 1;
    color: var(--brafa-white);
}
.brafa-locks-hero__micros {
    display: flex;
    gap: 0;
}
.brafa-locks-hero__micros > div {
    padding: 0 22px;
    border-left: 1px solid rgba(255,255,255,0.12);
    text-align: center;
}
.brafa-locks-hero__micros > div:first-child { border-left: 0; }
.brafa-locks-hero__micros .v {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--brafa-white);
    display: block;
}

/* ============================================================
   LOCK STATISTICS (billing) — cascade restyle of the controller
   view (superadmin/lock-statistics). The page keeps its markup,
   filters and dkPlus invoice actions; we only neutralise the
   Bootstrap gradient utilities it uses into brafa surfaces.
   ============================================================ */
.lock-statistics-page .shadow-lg,
.lock-statistics-page .shadow-sm { box-shadow: none !important; }

/* Hero + generic gradient blocks → light sunken surface (text stays ink via
   the generic .brafa-screen .text-white → ink override). */
.lock-statistics-page .bg-gradient-primary {
    background: var(--bg-sunken) !important;
    background-image: none !important;
}

/* Badges → brafa pills */
.lock-statistics-page .badge {
    font-family: var(--font-wide) !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border-radius: var(--radius-pill) !important;
    padding: 4px 10px !important;
    background-image: none !important;
}
.lock-statistics-page .badge.bg-gradient-primary,
.lock-statistics-page .badge.bg-dark { background: var(--brafa-ink) !important; color: var(--brafa-white) !important; }
.lock-statistics-page .badge.bg-gradient-info,
.lock-statistics-page .badge.bg-gradient-secondary { background: var(--brafa-bone) !important; color: var(--fg-muted) !important; }
.lock-statistics-page .badge.bg-gradient-warning { background: var(--brafa-amber-soft) !important; color: #8C5F1B !important; }
.lock-statistics-page .badge.bg-gradient-success { background: var(--brafa-green-soft) !important; color: var(--brafa-green-deep) !important; }
.lock-statistics-page .badge.bg-gradient-danger  { background: var(--brafa-red-soft) !important; color: var(--brafa-red) !important; }

/* Gradient buttons → brafa black / outline */
.lock-statistics-page .btn.bg-gradient-primary,
.lock-statistics-page .btn.bg-gradient-dark,
.lock-statistics-page .btn.bg-gradient-success {
    background: var(--brafa-black) !important;
    background-image: none !important;
    color: var(--brafa-white) !important;
    border: 1px solid var(--brafa-black) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
}
.lock-statistics-page .btn.bg-gradient-secondary,
.lock-statistics-page .btn.bg-gradient-info {
    background: var(--bg-surface) !important;
    background-image: none !important;
    color: var(--brafa-black) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
}

/* ============================================================
   ASSIGNED LOCKS — cascade restyle of the dashboard view.
   Keeps its forms / inline-edit table / JS; we neutralise the
   many Bootstrap gradient action buttons into brafa buttons.
   ============================================================ */
.brafa-assignedlocks .btn.bg-gradient-success,
.brafa-assignedlocks .btn.bg-gradient-primary {
    background: var(--brafa-black) !important;
    background-image: none !important;
    color: var(--brafa-white) !important;
    border: 1px solid var(--brafa-black) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
}
.brafa-assignedlocks .btn.bg-gradient-info,
.brafa-assignedlocks .btn.bg-gradient-secondary,
.brafa-assignedlocks .btn.bg-gradient-light {
    background: var(--bg-surface) !important;
    background-image: none !important;
    color: var(--brafa-black) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
}
.brafa-assignedlocks .btn.bg-gradient-warning {
    background: var(--brafa-amber-soft) !important;
    background-image: none !important;
    color: #8C5F1B !important;
    border: 1px solid var(--brafa-amber) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
}
.brafa-assignedlocks .btn.bg-gradient-danger {
    background: var(--brafa-red-soft) !important;
    background-image: none !important;
    color: var(--brafa-red) !important;
    border: 1px solid var(--brafa-red) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
}

/* Assigned-locks card headers: keep the title on one line so the wrapping
   action-button group can't squeeze it into "Assign / Locks". */
.brafa-assignedlocks .card-header h3 {
    white-space: nowrap;
    flex-shrink: 0;
    margin-right: 12px;
}
.brafa-assignedlocks .card-header .d-flex.flex-wrap { flex: 1; }

/* ---- Assigned-locks mobile (≤767.98px) ---- */
@media (max-width: 767.98px) {
    /* Title stacks above the action group; let it wrap freely. */
    .brafa-assignedlocks .card-header h3 {
        white-space: normal;
        margin-right: 0;
    }
    /* Action buttons fill the row two-up so they stay thumb-sized instead of
       collapsing to a cramped 10-across wrap. */
    .brafa-assignedlocks .card-header .d-flex.flex-wrap > .btn {
        flex: 1 1 calc(50% - 8px);
        margin-bottom: 0;
        white-space: normal;
    }
    /* The force-remap switch spans the full width above the buttons. */
    .brafa-assignedlocks .card-header .form-check.form-switch {
        flex: 1 1 100%;
    }
}

/* ---- Mapping grid on tablet/desktop: keep Room/Unit visible while
   scrolling the lock columns. Scoped to ≥576px so it doesn't fight the
   phone card layout below. ---- */
@media (min-width: 576px) {
    .brafa-assignedlocks .table-responsive { position: relative; }
    .brafa-assignedlocks table.table th:first-child,
    .brafa-assignedlocks table.table td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--bg-surface);
    }
    .brafa-assignedlocks table.table thead th:first-child { z-index: 3; }
}

/* ---- Mapping grid on phones: one card per unit, each lock select stacked
   under its column label, instead of a wide horizontally-scrolling grid. ---- */
@media (max-width: 575.98px) {
    .brafa-assignedlocks table.table thead { display: none; }
    .brafa-assignedlocks table.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;
    }
    .brafa-assignedlocks table.table tbody td {
        display: block;
        border: 0;
        border-bottom: 1px solid var(--border);
        padding: 10px 0;
        text-align: left;
    }
    .brafa-assignedlocks table.table tbody tr td:last-child { border-bottom: 0; }
    .brafa-assignedlocks table.table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 6px;
        font-family: var(--font-wide);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--fg-subtle);
    }
    /* Room / Unit are short — keep their label + value on one line. */
    .brafa-assignedlocks table.table tbody td.alocks-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
    }
    .brafa-assignedlocks table.table tbody td.alocks-meta::before { margin-bottom: 0; }
    /* Lock selects take the full card width so long lock names are readable. */
    .brafa-assignedlocks table.table tbody td .form-control-sm { width: 100%; }
    /* Empty-state row spans the card with no label chrome. */
    .brafa-assignedlocks table.table tbody td[colspan] { text-align: center; }
    .brafa-assignedlocks table.table tbody td[colspan]::before { content: none; }
}

/* ============================================================
   LOCK DETAILS TABLES ON PHONES — passcodes / cards / eKeys /
   recent-unlocks all collapse to one card per row. !important
   overrides this page's inline `white-space:nowrap` + table-layout
   styles. Each <td> carries a data-label.
   ============================================================ */
@media (max-width: 575.98px) {
    .brafa-locks .brafa-locks-table { table-layout: auto !important; }
    .brafa-locks .brafa-locks-table thead { display: none; }
    .brafa-locks .brafa-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;
    }
    .brafa-locks .brafa-locks-table tbody td {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        text-align: right !important;
        white-space: normal !important;
        padding: 9px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid var(--border) !important;
        width: auto !important;
    }
    .brafa-locks .brafa-locks-table tbody tr td:last-child { border-bottom: 0 !important; }
    .brafa-locks .brafa-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;
    }
    .brafa-locks .brafa-locks-table tbody td:not([data-label])::before { content: none; }
    .brafa-locks .brafa-locks-table tbody td[colspan] {
        justify-content: center;
        text-align: center !important;
    }
    .brafa-locks .brafa-locks-table tbody td[colspan]::before { content: none; }
}