/* ============================================================
   style-53-hilabour-checkers.css — BUG-428 HiLabour Checkers admin
   Prefix: .hlbc-*
   Reuses pm-*, tk-*, wcap-* where possible; only page-specific rules here.
   ============================================================ */

/* ── Header ──────────────────────────────────────────────────── */
.hlbc-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hlbc-add-btn {
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    background: #2a5cbf;
    color: #ffffff;
    transition: opacity 0.15s;
}
.hlbc-add-btn:hover { opacity: 0.85; }

/* ── Table wrapper — horizontal scroll on small screens ─────── */
.hlbc-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Empty state cell ────────────────────────────────────────── */
.hlbc-empty-cell {
    text-align: center;
    padding: 28px 0;
    font-style: italic;
}
body[data-theme="dark"]  .hlbc-empty-cell { color: #6b7a96; }
body[data-theme="light"] .hlbc-empty-cell { color: #9aa3b5; }

/* ── Active / inactive badges ────────────────────────────────── */
.hlbc-badge-active,
.hlbc-badge-inactive {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}
.hlbc-badge-active   { background: rgba(34,197,94,0.12); color: #22c55e; }
.hlbc-badge-inactive { background: rgba(156,163,175,0.12); color: #9ca3af; }

body[data-theme="light"] .hlbc-badge-active   { background: #dcfce7; color: #15803d; }
body[data-theme="light"] .hlbc-badge-inactive { background: #f3f4f6; color: #6b7280; }

/* ── Muted meta cell ─────────────────────────────────────────── */
.hlbc-cell-muted { font-size: 12px; }
body[data-theme="dark"]  .hlbc-cell-muted { color: #6b7a96; }
body[data-theme="light"] .hlbc-cell-muted { color: #9aa3b5; }

/* ── Action buttons (toggle) ─────────────────────────────────── */
.hlbc-toggle-btn {
    padding: 4px 10px;
    border-radius: 5px;
    border: 1px solid;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
}
.hlbc-toggle-btn:hover { opacity: 0.8; }

.hlbc-toggle-deactivate {
    border-color: #8b3a2a;
    background: rgba(220, 53, 69, 0.1);
    color: #e8734a;
}
body[data-theme="light"] .hlbc-toggle-deactivate {
    background: #fff5f5;
    color: #c0392b;
}

.hlbc-toggle-activate {
    border-color: #1a6b3a;
    background: rgba(34, 197, 94, 0.08);
    color: #22c55e;
}
body[data-theme="light"] .hlbc-toggle-activate {
    background: #f0fdf4;
    color: #15803d;
}

/* ── Modal overlay — works with display:block from Dash callback ─ */
/* ponytail: display:block (not flex) because Dash sets it that way; inner box uses margin:auto */
.hlbc-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9900;
    background: rgba(0, 0, 0, 0.6);
    overflow-y: auto;
}

.hlbc-modal-box {
    position: relative;
    max-width: 440px;
    width: 95vw;
    margin: 80px auto 40px;
    border-radius: 12px;
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
}
body[data-theme="dark"]  .hlbc-modal-box { background: #1a1f2e; }
body[data-theme="light"] .hlbc-modal-box { background: #ffffff; border: 1px solid #dee2e6; }

.hlbc-modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 4px;
}
body[data-theme="dark"]  .hlbc-modal-title { color: #e8eaf0; }
body[data-theme="light"] .hlbc-modal-title { color: #1a1f2e; }

/* ── 390px responsive ────────────────────────────────────────── */
@media (max-width: 390px) {
    .pm-header { flex-wrap: wrap; gap: 8px; }
    .hlbc-header-right { width: 100%; justify-content: flex-end; }
    .hlbc-modal-box { padding: 18px 16px; margin-top: 40px; }
}