/**
 * Tasks page — same design language as the Messages hub and Guests.
 *
 * Tokens, the search pill, toggle chips, stage pills and the avatar come from
 * messaging-ui.css, which this page now loads; this is the page-specific layer.
 */

/* ==========================================================================
   PAGE LAYOUT - Account for top navigation with p-4 padding
   ========================================================================== */
body.has-top-nav #main-content.p-4 {
    padding-top: calc(60px + 1.5rem) !important; /* 60px nav + 1.5rem (p-4) */
    background: var(--hub-canvas);
    min-height: 100vh;
}

/* ==========================================================================
   PAGE HEADER
   ========================================================================== */
.tasks-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.tasks-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--hub-ink);
    margin: 0 0 0.1875rem;
}

.tasks-subtitle {
    font-size: 0.8125rem;
    color: var(--hub-muted);
    margin: 0;
}

.pending-count {
    display: inline-block;
    background: var(--hub-tint);
    color: var(--primary-color);
    padding: 0.0625rem 0.4375rem;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 700;
}

.tasks-refresh-btn {
    width: 38px;
    height: 38px;
    flex: none;
    border: 1px solid var(--hub-line);
    border-radius: var(--hub-radius);
    background: #fff;
    color: var(--hub-muted);
    display: grid;
    place-items: center;
    font-size: 1rem;
}

.tasks-refresh-btn:hover {
    border-color: #cfd6dd;
    color: var(--hub-ink);
}

/* ==========================================================================
   FILTERS
   ========================================================================== */
.tasks-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--hub-border);
    border-radius: 0.625rem;
    padding: 0.875rem 1.125rem;
    margin-bottom: 1.25rem;
}

.tasks-filters .hub-toggle-chip {
    margin: 0;
    cursor: pointer;
}

.tasks-search {
    flex: 1 1 260px;
    max-width: 340px;
}

/* ==========================================================================
   TASKS TABLE
   ========================================================================== */
.tasks-card {
    background: #fff;
    border: 1px solid var(--hub-border);
    border-radius: 0.625rem;
    overflow: hidden;
}

.tasks-table {
    margin-bottom: 0;
    font-size: 0.8125rem;
    color: #374151;
}

.tasks-table > thead > tr > th {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hub-faint);
    background: #f9fafb;
    border-bottom: 1px solid var(--hub-border);
    padding: 0.625rem 1.125rem;
    white-space: nowrap;
}

.tasks-table > tbody > tr > td {
    padding: 0.75rem 1.125rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--hub-border-soft);
}

.tasks-table > tbody > tr:last-child > td {
    border-bottom: 0;
}

.tasks-table > tbody > tr:hover {
    background-color: var(--hub-row-active);
}

.tasks-nowrap {
    white-space: nowrap;
}

.tasks-muted {
    color: var(--hub-faint);
}

.tasks-row-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.tasks-row-name .hub-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.6875rem;
}

.tasks-row-guest {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--hub-ink);
    overflow: hidden;
    text-overflow: ellipsis;
}

.tasks-info-btn {
    border: 0;
    background: transparent;
    padding: 0;
    line-height: 1;
    color: var(--hub-faint);
    font-size: 0.875rem;
    flex: none;
}

.tasks-info-btn:hover {
    color: var(--primary-color);
}

.tasks-row-ago {
    font-size: 0.71875rem;
    color: var(--hub-faint);
}

.request-text {
    line-height: 1.45;
}

/* ==========================================================================
   TASK STATUS
   ========================================================================== */
.task-completed {
    opacity: 0.55;
}

.task-completed .request-text {
    text-decoration: line-through;
}

.tasks-done-pill {
    background: #e3f5ea;
    color: #15803d;
}

/* ==========================================================================
   ACTIONS — one row of icon buttons, matching the campaigns list
   ========================================================================== */
.tasks-actions {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    justify-content: flex-end;
}

.tasks-icon-btn {
    width: 32px;
    height: 32px;
    flex: none;
    border: 1px solid var(--hub-line);
    border-radius: 0.4375rem;
    background: #fff;
    display: grid;
    place-items: center;
    color: var(--hub-muted);
    font-size: 0.875rem;
}

.tasks-icon-btn:hover:not(:disabled) {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.tasks-icon-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.tasks-complete-btn {
    border: 1px solid var(--primary-color);
    background: var(--primary-color);
    color: #fff;
    border-radius: 0.4375rem;
    padding: 0.4375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.tasks-complete-btn:hover {
    background: #0b5ed7;
    border-color: #0b5ed7;
}

/* ==========================================================================
   PRIORITY INDICATORS
   ========================================================================== */
.priority-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

.priority-high {
    background-color: #e5484d;
}

.priority-medium {
    background-color: #d99100;
}

.priority-low {
    background-color: #c7cdd4;
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.tasks-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--hub-muted);
    /* app.css puts a dashed border on .empty-state; this one stands alone */
    border: none !important;
    background: transparent !important;
}

.tasks-empty i {
    font-size: 1.75rem;
    color: #d1d5db;
}

.tasks-empty-title {
    margin-top: 0.625rem;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--hub-ink);
}

.tasks-empty-text {
    margin: 0.1875rem 0 0;
    font-size: 0.8125rem;
    color: var(--hub-faint);
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
/* The layout lives here rather than on Bootstrap's .d-flex utility. That
   utility is display:flex !important, so once the script set an inline display
   the bar could never be hidden again — the empty state kept showing "Showing
   1-15 of 0 tasks" underneath "No tasks match your search". */
.tasks-pagination-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1.125rem;
    border-top: 1px solid var(--hub-border);
    font-size: 0.75rem;
}

.tasks-pagination-row .text-muted {
    color: var(--hub-muted) !important;
}

.tasks-pagination-row .page-link {
    font-size: 0.75rem;
    color: var(--hub-muted);
    border-color: var(--hub-line);
}

.tasks-pagination-row .page-item.active .page-link {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.task-completing {
    animation: fadeOut 0.5s ease-out;
}