/**
 * Al-Bashayer — Dashboard Stylesheet
 *
 * Client & Staff dashboard layouts, sidebar, stat cards,
 * requests table, status tracker timeline, profile section.
 *
 * @see PRD/07-Frontend-UX-Design.md §7.4, §7.5
 */

/* ============================================
   1. DASHBOARD LAYOUT
   ============================================ */

.ab-dashboard-wrap {
    display: flex;
    min-height: 100vh;
    background-color: var(--ab-color-bg, #f9fafb);
    /* Clear the fixed site header. `.dr-nav` is position:fixed and therefore out
       of flow — every other page on the site happens to clear it because it
       opens with a hero carrying its own top padding, but both dashboards start
       straight into the sidebar and the page heading, so their first row
       rendered behind the bar. box-sizing is border-box site-wide, so the
       wrapper still measures 100vh in total. Applied here rather than in
       dashboard-dr.css so the staff dashboard gets it too: page-staff.php adds
       no `ab-page-dashboard` body class and never loads that stylesheet. */
    padding-block-start: var(--dr-nav-h, 5.6rem);
}

/* Sidebar */
.ab-dashboard-sidebar {
    width: 16rem;
    background-color: var(--ab-color-surface, #fff);
    border-inline-end: 1px solid var(--ab-color-border, #e5e7eb);
    display: flex;
    flex-direction: column;
    position: sticky;
    /* Stick below the header, not under it, and take the height that is
       actually left. At a full 100vh the column would hang off the bottom of
       the screen by exactly the header's height and put the logout link out of
       reach. */
    top: var(--dr-nav-h, 5.6rem);
    height: calc(100vh - var(--dr-nav-h, 5.6rem));
    min-height: 0;
    overflow-y: auto;
    flex-shrink: 0;
    z-index: var(--ab-z-sticky);
    transition: transform var(--ab-transition-normal);
}

/* Main content */
.ab-dashboard-main {
    flex: 1;
    min-width: 0;
    padding: 2rem;
    overflow-x: hidden;
}

/* Mobile hamburger */
.ab-sidebar-toggle-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: none;
    border: 1.5px solid var(--ab-color-border, #d1d5db);
    border-radius: var(--ab-radius-md);
    cursor: pointer;
    color: var(--ab-color-text, #111827);
}

/* ============================================
   2. SIDEBAR
   ============================================ */

.ab-sidebar-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1rem;
    border-block-end: 1px solid var(--ab-color-border, #e5e7eb);
}

.ab-sidebar-avatar {
    flex-shrink: 0;
}

.ab-avatar-img {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
}

.ab-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--ab-color-primary);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
}

.ab-sidebar-user-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.ab-sidebar-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ab-color-text, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ab-sidebar-role {
    font-size: 0.75rem;
    color: var(--ab-color-text-muted, #9ca3af);
    font-weight: 500;
}

.ab-sidebar-nav {
    flex: 1;
    padding: 0.75rem 0;
    overflow-y: auto;
}

.ab-sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ab-sidebar-item {
    margin: 0;
}

.ab-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    color: var(--ab-color-text-secondary, #4b5563);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: var(--ab-radius-md);
    margin-inline: 0.5rem;
    transition: background-color var(--ab-transition-fast),
                color var(--ab-transition-fast);
}

.ab-sidebar-link:hover {
    background-color: var(--ab-color-primary-light, rgba(27, 77, 62, 0.07));
    color: var(--ab-color-primary);
}

.ab-sidebar-item.is-active .ab-sidebar-link {
    background-color: var(--ab-color-primary-light, rgba(27, 77, 62, 0.1));
    color: var(--ab-color-primary);
    font-weight: 700;
}

.ab-sidebar-icon {
    flex-shrink: 0;
    color: currentColor;
    opacity: 0.8;
}

.ab-sidebar-item.is-active .ab-sidebar-icon {
    opacity: 1;
}

.ab-sidebar-footer {
    padding: 1rem;
    border-block-start: 1px solid var(--ab-color-border, #e5e7eb);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ab-logout-link {
    font-size: 0.8125rem;
    color: var(--ab-color-error, #dc2626);
    text-decoration: none;
    font-weight: 500;
}

.ab-logout-link:hover {
    text-decoration: underline;
}

.ab-theme-btn {
    background: none;
    border: 1.5px solid var(--ab-color-border, #d1d5db);
    border-radius: var(--ab-radius-md);
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--ab-color-text-secondary, #4b5563);
    transition: border-color var(--ab-transition-fast);
}

.ab-theme-btn:hover {
    border-color: var(--ab-color-primary);
}

/* ============================================
   3. DASHBOARD HEADER
   ============================================ */

.ab-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: 2rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.ab-dashboard-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ab-color-text, #111827);
    margin: 0;
}

.ab-dashboard-subtitle {
    font-size: 0.9375rem;
    color: var(--ab-color-text-secondary, #4b5563);
    margin-block-start: 0.25rem;
}

/* ============================================
   4. STAT CARDS GRID
   ============================================ */

.ab-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.25rem;
    margin-block-end: 2rem;
}

/* ============================================
   5. REQUESTS TABLE
   ============================================ */

.ab-requests-section {
    background-color: var(--ab-color-surface, #fff);
    border: 1px solid var(--ab-color-border, #e5e7eb);
    border-radius: var(--ab-radius-xl);
    overflow: hidden;
}

.ab-requests-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-block-end: 1px solid var(--ab-color-border, #e5e7eb);
    gap: 1rem;
    flex-wrap: wrap;
}

.ab-requests-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ab-color-text, #111827);
    margin: 0;
}

/* Status filter tabs */
.ab-status-tabs {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    padding: 1rem 1.5rem;
    border-block-end: 1px solid var(--ab-color-border, #e5e7eb);
    background-color: var(--ab-color-surface-alt, #f9fafb);
}

.ab-status-tab {
    padding: 0.375rem 0.875rem;
    border-radius: var(--ab-radius-full);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ab-color-text-secondary, #4b5563);
    background: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--ab-transition-fast),
                border-color var(--ab-transition-fast),
                color var(--ab-transition-fast);
}

.ab-status-tab:hover {
    background-color: var(--ab-color-primary-light, rgba(27, 77, 62, 0.07));
    color: var(--ab-color-primary);
    border-color: var(--ab-color-primary-light, rgba(27, 77, 62, 0.2));
}

.ab-status-tab.is-active {
    background-color: var(--ab-color-primary);
    color: #fff;
    border-color: var(--ab-color-primary);
}

.ab-requests-table-wrap {
    overflow-x: auto;
}

.ab-requests-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.ab-requests-table th {
    padding: 0.875rem 1.25rem;
    text-align: start;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ab-color-text-secondary, #4b5563);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: var(--ab-color-surface-alt, #f9fafb);
    border-block-end: 1px solid var(--ab-color-border, #e5e7eb);
    white-space: nowrap;
}

.ab-requests-table td {
    padding: 1rem 1.25rem;
    color: var(--ab-color-text, #111827);
    border-block-end: 1px solid var(--ab-color-border-light, #f3f4f6);
    vertical-align: middle;
}

.ab-requests-table tr:last-child td {
    border-block-end: none;
}

.ab-requests-table tbody tr {
    transition: background-color var(--ab-transition-fast);
}

.ab-requests-table tbody tr:hover {
    background-color: var(--ab-color-surface-alt, #f9fafb);
}

.ab-request-number {
    font-weight: 700;
    color: var(--ab-color-primary);
    font-family: monospace;
}

.ab-request-service {
    font-weight: 500;
}

.ab-request-date {
    color: var(--ab-color-text-secondary, #4b5563);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.ab-requests-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--ab-color-text-muted, #9ca3af);
}

.ab-requests-empty p {
    margin-block-end: 1rem;
}

/* ============================================
   6. REQUEST DETAIL
   ============================================ */

.ab-request-detail {
    display: grid;
    grid-template-columns: 1fr 22rem;
    gap: 1.5rem;
    align-items: start;
}

.ab-detail-card {
    background-color: var(--ab-color-surface, #fff);
    border: 1px solid var(--ab-color-border, #e5e7eb);
    border-radius: var(--ab-radius-xl);
    overflow: hidden;
    margin-block-end: 1.5rem;
}

.ab-detail-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 1.5rem;
    border-block-end: 1px solid var(--ab-color-border, #e5e7eb);
}

.ab-detail-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ab-color-text, #111827);
    margin: 0;
}

.ab-detail-card-body {
    padding: 1.5rem;
}

/* ============================================
   7. STATUS TRACKER TIMELINE
   ============================================ */

.ab-tracker-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.ab-tracker-timeline::before {
    content: '';
    position: absolute;
    top: 1.5rem;
    bottom: 1.5rem;
    inset-inline-start: 1.375rem;
    width: 2px;
    background-color: var(--ab-color-border, #e5e7eb);
}

.ab-tracker-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-block-end: 1.5rem;
    position: relative;
}

.ab-tracker-step:last-child {
    padding-block-end: 0;
}

.ab-tracker-dot {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--ab-color-border, #e5e7eb);
    border: 2px solid var(--ab-color-border, #e5e7eb);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ab-tracker-step.is-done .ab-tracker-dot {
    background-color: var(--ab-color-primary);
    border-color: var(--ab-color-primary);
    color: #fff;
}

.ab-tracker-step.is-current .ab-tracker-dot {
    background-color: #fff;
    border-color: var(--ab-color-primary);
    border-width: 3px;
    box-shadow: 0 0 0 4px rgba(27, 77, 62, 0.15);
    animation: ab-pulse 2s ease-in-out infinite;
}

.ab-tracker-content {
    flex: 1;
    min-width: 0;
    padding-block-start: 0.25rem;
}

.ab-tracker-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ab-color-text, #111827);
}

.ab-tracker-step.is-pending .ab-tracker-title {
    color: var(--ab-color-text-muted, #9ca3af);
}

.ab-tracker-date {
    font-size: 0.8125rem;
    color: var(--ab-color-text-muted, #9ca3af);
    margin-block-start: 0.125rem;
}

@keyframes ab-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(27, 77, 62, 0.15); }
    50%       { box-shadow: 0 0 0 8px rgba(27, 77, 62, 0.08); }
}

/* ============================================
   8. STAFF NOTES
   ============================================ */

.ab-notes-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ab-note-item {
    background-color: var(--ab-color-surface-alt, #f9fafb);
    border: 1px solid var(--ab-color-border, #e5e7eb);
    border-radius: var(--ab-radius-lg);
    padding: 1rem;
}

.ab-note-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: 0.5rem;
    gap: 0.5rem;
}

.ab-note-author {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ab-color-text, #111827);
}

.ab-note-date {
    font-size: 0.75rem;
    color: var(--ab-color-text-muted, #9ca3af);
}

.ab-note-content {
    font-size: 0.9375rem;
    color: var(--ab-color-text-secondary, #4b5563);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ============================================
   9. PROFILE SECTION
   ============================================ */

.ab-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.ab-profile-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ab-profile-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ab-color-text-secondary, #4b5563);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ab-profile-value {
    font-size: 0.9375rem;
    color: var(--ab-color-text, #111827);
}

/* ============================================
   10. DOCUMENT LIST (in requests)
   ============================================ */

.ab-doc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.ab-doc-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background-color: var(--ab-color-surface-alt, #f9fafb);
    border: 1px solid var(--ab-color-border, #e5e7eb);
    border-radius: var(--ab-radius-md);
}

.ab-doc-icon {
    flex-shrink: 0;
    color: var(--ab-color-primary);
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ab-color-primary-light, rgba(27, 77, 62, 0.08));
    border-radius: var(--ab-radius-sm);
}

.ab-doc-info {
    flex: 1;
    min-width: 0;
}

.ab-doc-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ab-color-text, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ab-doc-meta {
    font-size: 0.75rem;
    color: var(--ab-color-text-muted, #9ca3af);
    margin-block-start: 0.125rem;
}

.ab-doc-status {
    flex-shrink: 0;
}

/* ============================================
   11. RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .ab-request-detail {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .ab-sidebar-toggle-btn {
        display: flex;
    }

    .ab-dashboard-sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        transform: translateX(-100%);
        z-index: var(--ab-z-modal);
        box-shadow: var(--ab-shadow-xl);
        /* As a drawer it covers the whole viewport, header included, so the
           header offset on the base rule has to be undone here. `inset-block: 0`
           alone would not do it: an explicit height still wins over top/bottom
           for the box size, leaving the drawer short by exactly the header. */
        height: auto;
        block-size: auto;
    }

    [dir="rtl"] .ab-dashboard-sidebar {
        transform: translateX(100%);
    }

    .ab-dashboard-sidebar.is-open {
        transform: translateX(0);
    }

    .ab-dashboard-main {
        padding: 1rem;
    }

    .ab-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ab-profile-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .ab-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   12. DARK MODE
   ============================================ */

[data-theme="dark"] .ab-dashboard-wrap {
    background-color: var(--ab-color-bg, #111827);
}

/* ============================================
   12b. STAFF DASHBOARD
   ============================================ */

/* page-staff.php never loads dashboard-dr.css, so the staff dashboard misses
   the design system entirely: --ab-color-bg is not defined anywhere in this
   theme, so the rules above fall through to their literal fallbacks — #f9fafb
   light, #111827 dark — both cool greys against a warm cream site. Pinning the
   page to --dr-bg puts it on the same colour as the client dashboard and gives
   the header something to match. */
body.ab-page-staff,
body.ab-page-staff .ab-dashboard-wrap {
    background-color: var(--dr-bg, #f9fafb);
}

/* Same reasoning as body.ab-page-dashboard .dr-nav in dashboard-dr.css: the bar
   paints no background until .scrolled because it is built to float over a hero,
   and this page has none. Both states, or it turns translucent on scroll;
   !important to outrank light-theme-v2.css, which declares the scrolled
   background that way; backdrop-filter off because it does nothing behind an
   opaque bar and it makes the bar a containing block for fixed children. */
body.ab-page-staff .dr-nav,
body.ab-page-staff .dr-nav.scrolled {
    background: var(--dr-bg, #f9fafb) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

[data-theme="dark"] .ab-dashboard-sidebar {
    background-color: var(--ab-color-surface, #1f2937);
    border-color: var(--ab-color-border, #374151);
}

[data-theme="dark"] .ab-requests-section,
[data-theme="dark"] .ab-detail-card {
    background-color: var(--ab-color-surface, #1f2937);
    border-color: var(--ab-color-border, #374151);
}

[data-theme="dark"] .ab-requests-table th {
    background-color: var(--ab-color-surface-alt, #111827);
}

[data-theme="dark"] .ab-requests-table tbody tr:hover {
    background-color: var(--ab-color-surface-alt, #111827);
}

[data-theme="dark"] .ab-status-tabs {
    background-color: var(--ab-color-surface-alt, #111827);
}

[data-theme="dark"] .ab-note-item {
    background-color: var(--ab-color-surface-alt, #111827);
    border-color: var(--ab-color-border, #374151);
}

[data-theme="dark"] .ab-doc-item {
    background-color: var(--ab-color-surface-alt, #111827);
    border-color: var(--ab-color-border, #374151);
}

[data-theme="dark"] .ab-tracker-timeline::before {
    background-color: var(--ab-color-border, #374151);
}

/* ============================================
   13. DOCUMENTS LIST
   ============================================ */

.ab-docs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ab-doc-list-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ab-color-border, #e5e7eb);
    border-radius: var(--ab-radius-md, 0.5rem);
    background: var(--ab-color-surface, #fff);
}

.ab-doc-list-ext {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ab-radius-sm, 0.25rem);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: var(--ab-color-primary-light, #eff6ff);
    color: var(--ab-color-primary, #2563eb);
}

.ab-doc-ext--pdf {
    background: #fef2f2;
    color: #dc2626;
}

.ab-doc-ext--png,
.ab-doc-ext--jpg,
.ab-doc-ext--jpeg {
    background: #f0fdf4;
    color: #16a34a;
}

.ab-doc-list-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ab-doc-list-name {
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ab-doc-list-meta {
    font-size: 0.75rem;
    color: var(--ab-color-text-muted, #6b7280);
}

.ab-doc-list-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ============================================
   14. NOTIFICATIONS LIST
   ============================================ */

.ab-notif-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-block-end: 1rem;
}

.ab-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 9999px;
    background: var(--ab-color-primary, #2563eb);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

.ab-notifications-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ab-notification-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem;
    border-block-end: 1px solid var(--ab-color-border, #e5e7eb);
    transition: background var(--ab-transition-fast, 150ms);
}

.ab-notification-item:last-child {
    border-block-end: none;
}

.ab-notification-item--unread {
    background: var(--ab-color-primary-light, #eff6ff);
}

.ab-notification-icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ab-color-surface-alt, #f3f4f6);
    color: var(--ab-color-text-muted, #6b7280);
}

.ab-notification-item--unread .ab-notification-icon {
    background: var(--ab-color-primary-light, #eff6ff);
    color: var(--ab-color-primary, #2563eb);
}

.ab-notification-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ab-notification-title {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
}

.ab-notification-text {
    font-size: 0.8rem;
    color: var(--ab-color-text-muted, #6b7280);
    margin: 0;
    line-height: 1.5;
}

.ab-notification-date {
    font-size: 0.7rem;
    color: var(--ab-color-text-muted, #9ca3af);
}

.ab-unread-dot {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--ab-color-primary, #2563eb);
    margin-block-start: 0.375rem;
}

/* ============================================
   15. ALL REQUESTS — STAFF CLIENT COLUMN
   ============================================ */

.ab-requests-list--staff .ab-request-row {
    grid-template-columns: 6rem 1fr 8rem 7rem 6rem 5rem;
}

.ab-request-client {
    font-size: 0.8rem;
    color: var(--ab-color-text-muted, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   16. DARK MODE — NEW SECTIONS
   ============================================ */

[data-theme="dark"] .ab-doc-list-item {
    background-color: var(--ab-color-surface, #1f2937);
    border-color: var(--ab-color-border, #374151);
}

[data-theme="dark"] .ab-notification-item--unread {
    background-color: rgba(37, 99, 235, 0.12);
}

[data-theme="dark"] .ab-notification-item {
    border-color: var(--ab-color-border, #374151);
}

[data-theme="dark"] .ab-notification-icon {
    background-color: var(--ab-color-surface-alt, #111827);
}

/* ============================================
   13. DECLARATION CARD (client request detail)
   ============================================ */

/* The one thing on the page that is asking for an action, so it is allowed to
   announce itself — gold edge, warm tint — without shouting like an error. */
.ab-declaration-card {
    border: 1px solid var(--dr-gold-dim, rgba(184, 145, 42, .45));
    border-inline-start: 4px solid var(--dr-gold, #B8912A);
    background: rgba(184, 145, 42, .06);
}

.ab-declaration-card__title {
    margin: 0 0 .35rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.ab-declaration-card__lead {
    margin: 0 0 1.1rem;
    font-size: .9rem;
    opacity: .85;
}

/* The text being signed. Pre-wrap because the office writes these with their own
   line breaks and those carry meaning on a legal declaration. */
.ab-declaration-card__body {
    white-space: pre-wrap;
    line-height: 1.9;
    padding: 1rem 1.1rem;
    margin-block-end: 1.1rem;
    border-radius: var(--ab-radius-md, .5rem);
    background: var(--ab-color-surface, rgba(255, 255, 255, .55));
    border: 1px solid var(--dr-glass-border, rgba(0, 0, 0, .10));
    font-size: .92rem;
    max-block-size: 22rem;
    overflow-y: auto;
}

.ab-declaration-card--signed {
    border-inline-start-color: #15803d;
    background: rgba(22, 163, 74, .07);
}

.ab-declaration-card--signed p {
    margin: 0;
    font-size: .9rem;
    color: #15803d;
}

/* Result of a staff action (status transition, document approve/reject). */
.ab-action-msg {
    margin-block-start: .25rem;
    padding: .6rem .8rem;
    border-radius: var(--ab-radius-md, .5rem);
    font-size: .85rem;
    border: 1px solid transparent;
}

.ab-action-msg[hidden] {
    display: none;
}

.ab-action-msg--ok {
    background: rgba(22, 163, 74, .10);
    border-color: rgba(22, 163, 74, .35);
    color: #15803d;
}

.ab-action-msg--error {
    background: rgba(220, 38, 38, .10);
    border-color: rgba(220, 38, 38, .35);
    color: #b91c1c;
}

/* Staff filter bar — grows to several controls, so it wraps rather than
   squeezing each one thinner. */
.ab-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.ab-filter-bar .ab-filter-search {
    flex: 1 1 16rem;
    min-inline-size: 0;
}

.ab-filter-bar .ab-filter-select {
    flex: 0 1 12rem;
    min-inline-size: 0;
}

.ab-filter-date {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    white-space: nowrap;
}

.ab-filter-date input {
    inline-size: auto;
}

.ab-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    background: rgba(184, 145, 42, .12);
    border: 1px solid rgba(184, 145, 42, .35);
}

/* Why a request moved — the reason recorded with a revision or rejection. */
.ab-tracker-reason {
    margin-block-start: .35rem;
    padding: .45rem .7rem;
    border-inline-start: 3px solid var(--dr-gold-dim, rgba(184, 145, 42, .5));
    background: rgba(184, 145, 42, .07);
    border-radius: var(--ab-radius-sm, .35rem);
    font-size: .85rem;
    white-space: pre-wrap;
}