/* ═══════════════════════════════════════════════════════════════
   07-tables.css — Data Tables, Pagination & Status Pills
   ─────────────────────────────────────────────────────────────
   Styles for the main data grids used in Case and Task
   management pages, plus their supporting chrome.

   Sections:
     • table reset               (tabular-nums, collapse)
     • .zimam-table-wrap          (scrollable table container)
     • .zimam-table thead / tbody (header & row styling)
     • .zimam-table-toolbar       (search box + filter bar)
     • .zimam-pagination          (page numbers, prev/next)
     • .zimam-pill / --default / --running / --hold / --completed
       (status badge colours — applied dynamically via UIHelpers)

   Depends on: 01-tokens.css (colours, radius, spacing, shadows).
   Consumers: CaseManagement, TaskManagement, ReferenceDataPage.
   ═══════════════════════════════════════════════════════════════ */

table {
    font-variant-numeric: tabular-nums;
    border-collapse: collapse;
}

.zimam-table-wrap {
    overflow-x: auto;
    overflow-y: auto;
    min-height: 0;
    animation: zimam-content-appear 250ms ease-out;
    border-radius: var(--radius-card-lg, 0.375rem);
}

.zimam-table {
    width: 100%;
    min-width: 1100px;
    font-size: var(--text-xl);
    line-height: var(--lh-normal);
}

/* Thead: styling + sticky */
.zimam-table thead th {
    padding: 1rem 1.25rem;
    text-align: start;
    font-weight: var(--fw-bold);
    color: var(--color-text-strong);
    font-size: var(--text-md);
    letter-spacing: 0.01em;
    line-height: var(--lh-tight);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--color-bg-subtle);
    box-shadow: 0 1px 0 0 var(--color-border);
}

.zimam-table tbody td {
    padding: 1rem 1.25rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text);
}

/* Row interaction — smooth transition */
.zimam-table tbody tr {
    transition: background-color var(--duration-fast) var(--ease-default);
}

.zimam-table tbody tr[data-task-row],
.zimam-table tbody tr[data-case-row] {
    cursor: pointer;
}

.zimam-table tbody tr:hover {
    background: var(--color-bg-subtle);
}

.zimam-table tbody tr:active {
    background: var(--color-bg);
}

.zimam-table tbody tr:focus-within {
    background: var(--color-bg);
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Row action button */
.zimam-table .zimam-action-btn {
    min-width: 2.75rem;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    color: var(--color-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color var(--duration-fast), color var(--duration-fast);
}

.zimam-table .zimam-action-btn:hover {
    background: var(--color-bg);
    color: var(--color-text-strong);
}

.zimam-table .zimam-action-btn:focus-visible {
    outline: var(--focus-ring);
    outline-offset: -2px;
}

/* Pagination */
.zimam-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--color-border-light);
    background: var(--color-surface-footer);
    font-size: var(--text-lg);
    flex-shrink: 0;
}

.zimam-pagination__status {
    color: var(--color-text-secondary);
}

.zimam-pagination__value {
    font-weight: var(--fw-semibold);
    color: var(--color-text-strong);
}

.zimam-pagination__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.zimam-pagination__button {
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0 1rem;
    border-radius: 0.75rem;
    font-weight: var(--fw-medium);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background-color var(--duration-fast),
                border-color var(--duration-fast),
                color var(--duration-fast);
}

.zimam-pagination__button:hover:not(:disabled) {
    background: var(--color-bg-subtle);
    border-color: var(--color-border-strong);
    color: var(--color-text-strong);
}

.zimam-pagination__button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.zimam-pagination__button:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

/* Status pills */
.zimam-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    padding-inline: 2em;
    padding-block: 0.2em;
    line-height: 1.25;
    font-weight: var(--fw-medium);
    border-radius: 999em; /* Pill shape */
    border: 1px solid;
    white-space: nowrap;
}

.zimam-pill--default {
    background: var(--badge-status-new-bg);
    color: var(--badge-status-new-text);
    border-color: var(--badge-status-new-border);
}

.zimam-pill--completed {
    background: var(--badge-status-completed-bg);
    color: var(--badge-status-completed-text);
    border-color: var(--badge-status-completed-border);
}

.zimam-pill--progress {
    /* LEGACY ALIAS — use .zimam-pill--status-review instead */
    background: var(--badge-status-review-bg);
    color: var(--badge-status-review-text);
    border-color: var(--badge-status-review-border);
}

.zimam-pill--hold {
    background: var(--badge-status-blocked-bg);
    color: var(--badge-status-blocked-text);
    border-color: var(--badge-status-blocked-border);
}

.zimam-pill--running {
    /* LEGACY ALIAS — use .zimam-pill--status-in-progress instead */
    background: var(--badge-status-in-progress-bg);
    color: var(--badge-status-in-progress-text);
    border-color: var(--badge-status-in-progress-border);
}

.zimam-pill--active {
    background: var(--badge-status-in-progress-bg);
    color: var(--badge-status-in-progress-text);
    border-color: var(--badge-status-in-progress-border);
}

.zimam-pill--inactive {
    background: var(--badge-status-archived-bg);
    color: var(--badge-status-archived-text);
    border-color: var(--badge-status-archived-border);
}

.zimam-pill--neutral {
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

/* ═══════════════════════════════════════════════════════
   Pill modifiers — Status (حالة التنفيذ) — unified palette
   Single source of truth: Resources/BadgePalette.cs
   ═══════════════════════════════════════════════════════ */
.zimam-pill--status-new {
    background: var(--badge-status-new-bg);
    color: var(--badge-status-new-text);
    border-color: var(--badge-status-new-border);
    gap: 0.25rem;
}

.zimam-pill--status-in-progress {
    background: var(--badge-status-in-progress-bg);
    color: var(--badge-status-in-progress-text);
    border-color: var(--badge-status-in-progress-border);
    gap: 0.25rem;
}

.zimam-pill--status-review {
    background: var(--badge-status-review-bg);
    color: var(--badge-status-review-text);
    border-color: var(--badge-status-review-border);
    gap: 0.25rem;
}

.zimam-pill--status-completed {
    background: var(--badge-status-completed-bg);
    color: var(--badge-status-completed-text);
    border-color: var(--badge-status-completed-border);
    gap: 0.25rem;
}

.zimam-pill--status-blocked {
    background: var(--badge-status-blocked-bg);
    color: var(--badge-status-blocked-text);
    border-color: var(--badge-status-blocked-border);
    gap: 0.25rem;
}

.zimam-pill--status-archived {
    background: var(--badge-status-archived-bg);
    color: var(--badge-status-archived-text);
    border-color: var(--badge-status-archived-border);
    gap: 0.25rem;
}

/* ═══════════════════════════════════════════════════════
   Pill modifiers — Priority (الأولوية) — heat scale
   ═══════════════════════════════════════════════════════ */
.zimam-pill--priority-high {
    background: var(--badge-priority-high-bg);
    color: var(--badge-priority-high-text);
    border-color: var(--badge-priority-high-border);
    gap: 0.25rem;
}

.zimam-pill--priority-medium {
    background: var(--badge-priority-medium-bg);
    color: var(--badge-priority-medium-text);
    border-color: var(--badge-priority-medium-border);
    gap: 0.25rem;
}

.zimam-pill--priority-low {
    background: var(--badge-priority-low-bg);
    color: var(--badge-priority-low-text);
    border-color: var(--badge-priority-low-border);
    gap: 0.25rem;
}

/* ═══════════════════════════════════════════════════════
   Pill modifiers — Health status (الصحة) — traffic light
   ═══════════════════════════════════════════════════════ */
.zimam-pill--health-not-started {
    background: var(--badge-health-not-started-bg);
    color: var(--badge-health-not-started-text);
    border-color: var(--badge-health-not-started-border);
    gap: 0.25rem;
}

.zimam-pill--health-on-time {
    background: var(--badge-health-on-time-bg);
    color: var(--badge-health-on-time-text);
    border-color: var(--badge-health-on-time-border);
    gap: 0.25rem;
}

.zimam-pill--health-slightly-late {
    background: var(--badge-health-slightly-late-bg);
    color: var(--badge-health-slightly-late-text);
    border-color: var(--badge-health-slightly-late-border);
    gap: 0.25rem;
}

.zimam-pill--health-late {
    background: var(--badge-health-late-bg);
    color: var(--badge-health-late-text);
    border-color: var(--badge-health-late-border);
    gap: 0.25rem;
}

.zimam-pill--health-completed {
    background: var(--badge-health-completed-bg);
    color: var(--badge-health-completed-text);
    border-color: var(--badge-health-completed-border);
    gap: 0.25rem;
}

.zimam-pill--health-on-hold,
.zimam-pill--health-pending {
    background: var(--badge-health-on-hold-bg);
    color: var(--badge-health-on-hold-text);
    border-color: var(--badge-health-on-hold-border);
    gap: 0.25rem;
}

/* ═══════════════════════════════════════════════════════
   Pill variant — compact rect (card header Health badge)
   ═══════════════════════════════════════════════════════ */
.zimam-pill--compact {
    padding-inline: 0.5rem;
    padding-block: 0.1875rem;
    border-radius: var(--radius-md);
    font-size: var(--text-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════
   Dot indicators (used inside pills OR standalone)
   ═══════════════════════════════════════════════════════ */
.zimam-dot,
.zimam-kanban-card__badge-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.zimam-dot--error { background: var(--color-error-text); }
.zimam-dot--warning { background: var(--color-warning-text); }
.zimam-dot--success { background: var(--color-success-text); }
.zimam-dot--info { background: var(--color-primary); }
.zimam-dot--muted { background: var(--color-text-muted); }

/* Per-state dots inherit from tokens — override-friendly */
.zimam-pill--status-in-progress .zimam-dot,
.zimam-pill--status-in-progress .zimam-kanban-card__badge-dot { background: var(--badge-status-in-progress-dot); }
.zimam-pill--status-review .zimam-dot,
.zimam-pill--status-review .zimam-kanban-card__badge-dot { background: var(--badge-status-review-dot); }
.zimam-pill--status-completed .zimam-dot,
.zimam-pill--status-completed .zimam-kanban-card__badge-dot { background: var(--badge-status-completed-dot); }
.zimam-pill--status-blocked .zimam-dot,
.zimam-pill--status-blocked .zimam-kanban-card__badge-dot { background: var(--badge-status-blocked-dot); }
.zimam-pill--status-new .zimam-dot,
.zimam-pill--status-archived .zimam-dot { background: var(--badge-status-new-dot); }

/* Status pills use fixed fill-color design — no dot indicator */
.zimam-pill--status-new .zimam-dot,
.zimam-pill--status-blocked .zimam-dot,
.zimam-pill--status-archived .zimam-dot,
.zimam-pill--status-in-progress .zimam-dot,
.zimam-pill--status-review .zimam-dot,
.zimam-pill--status-completed .zimam-dot,
.zimam-pill--status-new .zimam-kanban-card__badge-dot,
.zimam-pill--status-blocked .zimam-kanban-card__badge-dot,
.zimam-pill--status-archived .zimam-kanban-card__badge-dot,
.zimam-pill--status-in-progress .zimam-kanban-card__badge-dot,
.zimam-pill--status-review .zimam-kanban-card__badge-dot,
.zimam-pill--status-completed .zimam-kanban-card__badge-dot { display: none; }

/* Toolbar wrapped above data tables */
.zimam-table-toolbar {
    margin-top: 20px;
    margin-bottom: 20px;
}