/* Staff list pages (Tips, Contact, Security Checks, Officer Feedback, Police Report Requests).
   Same look as TimeSheet / Shift Schedule; only Bootstrap variables so dark mode follows the theme toggle. */

.pl-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; }
.pl-head h2 { margin-bottom: 0.25rem; }

.pl-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
@media (min-width: 768px) { .pl-tiles { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
.pl-tile { border: 1px solid var(--bs-border-color); border-top: 4px solid var(--tile-color, var(--bs-secondary)); border-radius: 0.6rem; padding: 0.55rem 0.8rem; background: var(--bs-body-bg); min-width: 0; }
.pl-tile-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bs-secondary-color); }
.pl-tile-value { font-size: 1.7rem; font-weight: 700; line-height: 1.15; }
.pl-tile-sub { font-size: 0.75rem; color: var(--bs-secondary-color); overflow-wrap: anywhere; }

.pl-panel { border: 1px solid var(--bs-border-color); border-radius: 0.6rem; background: var(--bs-body-bg); padding: 0.75rem 0.9rem; margin-bottom: 1rem; }
.pl-panel > summary { cursor: pointer; font-weight: 600; }

.pl-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.75rem; padding: 0.7rem 0.85rem; border: 1px solid var(--bs-border-color); border-radius: 0.6rem; background: var(--bs-tertiary-bg); margin-bottom: 0.6rem; }
.pl-toolbar form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.75rem; }
.pl-toolbar .form-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bs-secondary-color); margin-bottom: 0.2rem; }
.pl-toolbar-end { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pl-count { font-size: 0.85rem; color: var(--bs-secondary-color); margin: 0 0.15rem 0.5rem; }

.pl-list { display: flex; flex-direction: column; gap: 0.6rem; }
.pl-item { border: 1px solid var(--bs-border-color); border-left: 6px solid var(--pl-accent, var(--bs-primary)); border-radius: 0.6rem; background: var(--bs-body-bg); }
.pl-item.is-deleted { opacity: 0.7; border-left-style: dashed; }
.pl-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.65rem 0.85rem; }
.pl-summary { flex: 1 1 280px; min-width: 0; cursor: pointer; }
.pl-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; font-weight: 700; }
.pl-id { font-size: 0.8rem; font-weight: 600; color: var(--bs-secondary-color); }
.pl-meta { display: flex; flex-wrap: wrap; gap: 0.1rem 0.9rem; margin-top: 0.15rem; font-size: 0.82rem; color: var(--bs-secondary-color); overflow-wrap: anywhere; }
.pl-meta i { margin-right: 0.2rem; }
.pl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; order: 2; }
.pl-item-head > .pl-chevron { order: 3; min-width: 2.25rem; align-self: flex-start; }

.pl-body { border-top: 1px solid var(--bs-border-color-translucent); padding: 0.85rem; }
.pl-body h6 { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bs-secondary-color) !important; margin-bottom: 0.5rem !important; }
.pl-body .mb-2 { overflow-wrap: anywhere; }
.pl-body .btn-copy { --bs-btn-padding-y: 0.05rem; --bs-btn-padding-x: 0.4rem; --bs-btn-font-size: 0.75rem; margin-left: 0.25rem; }
.pl-message { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bs-tertiary-bg); border-radius: 0.5rem; padding: 0.6rem 0.75rem; }
.pl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid var(--bs-border-color-translucent); }

@media (max-width: 575.98px) {
    .pl-tile-value { font-size: 1.4rem; }
    .pl-toolbar form, .pl-toolbar form > div { width: 100%; }
    .pl-toolbar-end { margin-left: 0; width: 100%; }
    .pl-toolbar-end .btn { flex: 1 1 0; }
    .pl-item-head { padding: 0.6rem 0.7rem; }
    .pl-summary { flex: 1 1 0; }
    .pl-item-head > .pl-chevron { order: 2; }
    .pl-actions { order: 3; width: 100%; }
    .pl-actions .btn { flex: 1 1 auto; }
    .pl-body { padding: 0.7rem; }
    .pl-foot .btn { flex: 1 1 calc(50% - 0.5rem); }
}