/* ==========================================================================
   pages.css — Styles for the non-calendar, non-RFM, non-3971 pages
   Part of the v2.0 CSS modularization.

   Contents: tables (acronyms, pay period, time), featured tool card badges
   (per-card counts on the Resources page), featured tool card grid +
   card styles, external resources accordion + grouped category headings.
   ========================================================================== */

/* ==========================================================================
   Tables
   ========================================================================== */
.acronyms-table,
.pay-period-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
    font-size: 0.95rem;
    background-color: var(--light-card-bg);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.theme-dark .pay-period-table {
    background-color: var(--dark-card-bg);
}

.pay-period-table td,
.pay-period-table th {
    border: 1px solid var(--border-light);
    padding: 0.75rem;
    text-align: left;
}

.theme-dark .pay-period-table td,
.theme-dark .pay-period-table th {
    border-color: var(--border-dark);
}

.pay-period-table th {
    background-color: var(--light-card-bg);
    font-weight: 600;
}

.theme-dark .pay-period-table th {
    background-color: var(--dark-card-bg);
}

.acronyms-table tr:nth-child(even),
.pay-period-table tr:nth-child(even) {
    background-color: var(--table-strip-light);
}

.theme-dark .acronyms-table tr:nth-child(even),
.theme-dark .pay-period-table tr:nth-child(even) {
    background-color: var(--table-strip-dark);
}

.pay-period-table .pay-date {
    font-weight: 700;
    color: var(--primary-blue);
}

.theme-dark .acronyms-table {
    background-color: var(--dark-card-bg);
}

.acronyms-table td,
.acronyms-table th {
    border: 1px solid var(--border-light);
    padding: 0.75rem;
    text-align: left;
}

.theme-dark .acronyms-table td,
.theme-dark .acronyms-table th {
    border-color: var(--border-dark);
}

.acronyms-table th {
    background-color: var(--light-card-bg);
    font-weight: 600;
}

.theme-dark .acronyms-table th {
    background-color: var(--dark-card-bg);
}

.acronyms-table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.theme-dark .acronyms-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.pay-period-table .current-pay-period-row {
    background-color: var(--table-strip-light);
    font-weight: 700;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.theme-dark .pay-period-table .current-pay-period-row {
    background-color: var(--table-strip-dark);
}

.pay-period-table tr.flash-highlight {
    animation: flash-effect 500ms ease-out 3;
}

.pay-period-table .current-pay-period-row {
    border: 2px solid var(--primary-blue) !important;
    box-shadow: 0 0 5px rgba(13, 110, 253, 0.5) !important;
}

.theme-dark .pay-period-table .current-pay-period-row {
    border-color: var(--dark-text) !important;
    box-shadow: 0 0 5px rgba(248, 248, 248, 0.5) !important;
}

/* Time Tables */
.time-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
    font-size: 0.9rem;
}

.time-table th {
    background-color: var(--primary-blue);
    color: #fff;
    padding: 0.5rem;
    text-align: center;
}

.time-table td {
    border: 1px solid var(--border-light);
    padding: 0.4rem;
    text-align: center;
}

.theme-dark .time-table td {
    border-color: var(--border-dark);
}

.time-table tr:nth-child(even) {
    background-color: var(--table-strip-light);
}

.theme-dark .time-table tr:nth-child(even) {
    background-color: var(--table-strip-dark);
}

.time-table .current-time-cell {
    border: 2px solid var(--primary-blue) !important;
    box-shadow: 0 0 5px rgba(13, 110, 253, 0.5) !important;
}

.theme-dark .time-table .current-time-cell {
    border-color: var(--dark-text) !important;
    box-shadow: 0 0 5px rgba(248, 248, 248, 0.5) !important;
}

.time-table-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}

.time-table-section {
    flex: 1 1 45%;
    min-width: 280px;
}

.time-table-section h3 {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

/* ==========================================================================
   Featured tool card badge — per-tool count painted in the top-right of
   each card on the Resources page. Same color language as the nav badge so
   the visual relationship between "nav says 44" and "RFM card says 44" is
   instantly readable.
   ========================================================================== */
.featured-tool-card { position: relative; }

.featured-tool-badge {
    position: absolute;
    top: 0.7rem;
    right: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 12px;
    background: #6b7280;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    z-index: 1;
}
.featured-tool-badge.hidden { display: none; }
.featured-tool-badge-warn { background: #f59e0b; color: #1f2937; }
.featured-tool-badge-urgent {
    background: #dc2626;
    color: #fff;
    animation: tool-badge-pulse 2.4s ease-in-out infinite;
}
/* Make room for the absolute-positioned badge in the title row */
.featured-tool-card .featured-tool-title { padding-right: 2.2rem; }
@media (max-width: 640px) { .rfm-dash-cols { grid-template-columns: 1fr !important; } }

/* ==========================================================================
   Resources Page — Featured Tool Cards
   The four mCORE-built tools get hero treatment at the top of the Resources
   page. Each card is a full link target (the whole card is clickable).
   Single-column on mobile, 2x2 on desktop. USPS-blue label pill, full
   light/dark support, no third-party icons or images required.
   ========================================================================== */
.featured-tools-section {
    margin-bottom: 1.5rem;
}
.featured-tools-heading {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 0.75rem 0;
    opacity: 0.7;
}
.featured-tools-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}
@media (min-width: 720px) {
    .featured-tools-grid { grid-template-columns: 1fr 1fr; }
}

.featured-tool-card {
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.2rem;
    background: var(--light-card-bg);
    border: 1px solid var(--border-light);
    border-radius: 0.75rem;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    min-height: 110px;
}
.theme-dark .featured-tool-card {
    background: var(--dark-card-bg);
    border-color: var(--border-dark);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.featured-tool-card:hover,
.featured-tool-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--primary-blue);
    box-shadow: 0 6px 14px rgba(13,110,253,0.18);
    outline: none;
}
.featured-tool-card:active { transform: translateY(0); }

.featured-tool-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.4rem 0;
    line-height: 1.25;
    color: var(--primary-blue);
}
.theme-dark .featured-tool-title { color: #6ea8fe; }

.featured-tool-sub {
    font-size: 0.82rem;
    margin: 0;
    line-height: 1.45;
    opacity: 0.85;
}

/* ==========================================================================
   Resources Page — External Resources accordion
   Sits below the featured tools, collapsed by default. Categories are
   grouped (NALC / NRLCA / Mail Preferences / Safety & Reference) when open.
   ========================================================================== */
.external-resources-section {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}
.external-resources-count {
    font-size: 0.78rem;
    opacity: 0.7;
    font-weight: 500;
    margin-left: 0.4rem;
}
.external-group {
    margin: 0.75rem 0 1rem 0;
}
.external-group-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 0.4rem 0;
    color: var(--primary-blue);
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0.25rem;
}
.theme-dark .external-group-title {
    color: #6ea8fe;
    border-bottom-color: var(--border-dark);
}
.external-group .resource-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ==========================================================================
   Privacy Audit Page — Verifiable Privacy Mode
   Converts "all data stays on your device" into an auditable dashboard.
   Designed to be screenshotable for carrier-to-carrier trust signals.
   USPS blue accents, green/red states, full light/dark support.
   ========================================================================== */

.privacy-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.3rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-light);
    border-left-width: 6px;
    margin-bottom: 1.5rem;
    background: var(--light-card-bg);
}
.theme-dark .privacy-banner {
    background: var(--dark-card-bg);
    border-color: var(--border-dark);
}
.privacy-banner-ok {
    border-left-color: #22c55e;
    background: rgba(34, 197, 94, 0.06);
}
.theme-dark .privacy-banner-ok {
    background: rgba(34, 197, 94, 0.12);
    border-left-color: #22c55e;
}
.privacy-banner-alert {
    border-left-color: #dc2626;
    background: rgba(220, 38, 38, 0.06);
}
.theme-dark .privacy-banner-alert {
    background: rgba(220, 38, 38, 0.14);
    border-left-color: #dc2626;
}

.privacy-banner-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1;
}
.privacy-banner-alert .privacy-banner-icon { background: #dc2626; }

.privacy-banner-content { min-width: 0; flex: 1; }
.privacy-banner-content h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #15803d;
}
.theme-dark .privacy-banner-content h3 { color: #4ade80; }
.privacy-banner-alert .privacy-banner-content h3 { color: #b91c1c; }
.theme-dark .privacy-banner-alert .privacy-banner-content h3 { color: #f87171; }
.privacy-banner-content p {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.88;
    line-height: 1.45;
}

.privacy-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 640px) {
    .privacy-stats-grid { grid-template-columns: repeat(4, 1fr); }
}
.privacy-stat {
    background: var(--light-card-bg);
    border: 1px solid var(--border-light);
    border-radius: 0.5rem;
    padding: 0.85rem 0.7rem;
    text-align: center;
}
.theme-dark .privacy-stat {
    background: var(--dark-card-bg);
    border-color: var(--border-dark);
}
.privacy-stat-label {
    display: block;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    opacity: 0.7;
    margin-bottom: 0.35rem;
}
.privacy-stat-value {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-blue);
    line-height: 1.1;
}
.theme-dark .privacy-stat-value { color: #6ea8fe; }
.privacy-stat-value.privacy-stat-zero { color: #15803d; }
.theme-dark .privacy-stat-value.privacy-stat-zero { color: #4ade80; }

.privacy-card {
    background: var(--light-card-bg);
    border: 1px solid var(--border-light);
    border-radius: 0.75rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
}
.theme-dark .privacy-card {
    background: var(--dark-card-bg);
    border-color: var(--border-dark);
}
.privacy-card h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.05rem;
    font-weight: 700;
}
.privacy-card p {
    font-size: 0.86rem;
    line-height: 1.55;
    margin: 0.5rem 0;
}
.privacy-card p:last-child { margin-bottom: 0; }
.privacy-card ol,
.privacy-card ul {
    font-size: 0.86rem;
    line-height: 1.7;
    padding-left: 1.3rem;
    margin: 0.5rem 0;
}
.privacy-card code {
    background: var(--light-bg);
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.78rem;
}
.theme-dark .privacy-card code { background: var(--dark-bg); }

.privacy-request-list {
    display: flex;
    flex-direction: column;
    margin-top: 0.75rem;
    max-height: 440px;
    overflow-y: auto;
    border: 1px solid var(--border-light);
    border-radius: 0.5rem;
}
.theme-dark .privacy-request-list { border-color: var(--border-dark); }

.privacy-request {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.78rem;
}
.theme-dark .privacy-request { border-bottom-color: var(--border-dark); }
.privacy-request:last-child { border-bottom: none; }
.privacy-request-alert { background: rgba(220, 38, 38, 0.08); }
.theme-dark .privacy-request-alert { background: rgba(220, 38, 38, 0.14); }

.privacy-request-status {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}
.privacy-request-alert .privacy-request-status { background: #dc2626; }

.privacy-request-method {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--primary-blue);
    min-width: 34px;
    flex-shrink: 0;
}
.theme-dark .privacy-request-method { color: #6ea8fe; }

.privacy-request-url {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.72rem;
}

.privacy-request-loadtag {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #6b7280;
    background: var(--light-bg);
    padding: 0.08rem 0.35rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
    font-weight: 600;
}
.theme-dark .privacy-request-loadtag {
    background: var(--dark-bg);
    color: #9ca3af;
}

.privacy-request-bytes {
    font-size: 0.7rem;
    opacity: 0.72;
    white-space: nowrap;
    min-width: 48px;
    text-align: right;
    flex-shrink: 0;
    font-family: 'SF Mono', 'Consolas', monospace;
}