/**
 * SiteStaffr Settings/Dashboard Page Styles
 *
 * Styles for main settings page and dashboard only
 * Includes: Dashboard widgets, stats, setup progress, phone display
 *
 * @package    SiteStaffr
 * @subpackage SiteStaffr/assets/css
 * @since      0.5.0
 */

/* ==========================================================================
   ICON + TEXT VERTICAL ALIGNMENT (Universal Fix - v0.9.99)
   ========================================================================== */

/* Universal Dashicon Fix - Prevent line-height issues */
.dashicons {
    line-height: 1;
    vertical-align: middle;
}

/* View All Link with Arrow - Proper alignment */
.sitestaffr-view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    text-decoration: none;
    color: #2271b1;
}

.sitestaffr-view-all-link:hover {
    color: #135e96;
    text-decoration: none; /* No underline on hover (Task V Fix - v0.10.33) */
}

.sitestaffr-view-all-link .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Specific icon alignment overrides (v0.9.99) */
.dashicons-calendar-alt {
    line-height: inherit; /* Allow natural alignment for calendar */
}

.dashicons-clock__new-calls {
    line-height: 1.25; /* Specific fix for clock icon in new calls */
}

.dashicons-admin-tools {
    line-height: 1.25; /* Specific fix for admin tools icon */
}

/* Section Headers - Icon + Title Alignment */
.sitestaffr-widget-header h2,
.sitestaffr-widget-header h3,
.sitestaffr-section-header,
.sitestaffr-section-title,
.sitestaffr-new-calls-header h2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Ensure icon circles don't inherit bad sizing */
.sitestaffr-sidebar-icon {
    flex-shrink: 0; /* Don't shrink */
}

/* Recent Calls - Phone Icon + Info */
.sitestaffr-call-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sitestaffr-call-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sitestaffr-call-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Quick Actions - Icons + Text */
.sitestaffr-sidebar-button {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sitestaffr-sidebar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Summary Title - Icon + Text Alignment */
.sitestaffr-summary-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ==========================================================================
   Progressive Low Balance Alert System
   NOTE: Alert styles moved to sitestaffr-global.css (v0.14.160) for global
   availability on all admin pages via the header partial.
   ========================================================================== */

/* ==========================================================================
   Dashboard & Settings Page Layout
   ========================================================================== */

/* Legacy dashboard header styles REMOVED in v0.14.50 — all header styles
   now live in sitestaffr-global.css (.sitestaffr-page-header). */

/* Settings page — max-width now set globally on .wrap in sitestaffr-global.css */

/* ==========================================================================
   Row-1 Metric Strip (Dashboard rebuild — Qualified Leads is the headline)
   ========================================================================== */

.sitestaffr-dash-strip {
    display: grid;
    grid-template-columns: 1.4fr 1.2fr 1fr;
    gap: var(--sitestaffr-space-md);
    margin-bottom: var(--sitestaffr-space-lg);
}

.sitestaffr-dash-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--sitestaffr-space-lg);
    background: #fff;
    border: 1px solid var(--sitestaffr-border);
    border-radius: var(--sitestaffr-radius);
    box-shadow: var(--sitestaffr-shadow-card);
    text-decoration: none;
    color: var(--sitestaffr-text);
}

a.sitestaffr-dash-tile--leads {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.sitestaffr-dash-tile--leads:hover,
a.sitestaffr-dash-tile--leads:focus {
    border-color: var(--sitestaffr-teal);
    box-shadow: var(--sitestaffr-shadow-pop);
    color: var(--sitestaffr-text);
}

.sitestaffr-dash-tile--leads .sitestaffr-dash-tile-value {
    color: var(--sitestaffr-teal-dark);
}

.sitestaffr-dash-tile-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sitestaffr-text-muted);
}

.sitestaffr-dash-tile-value {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--sitestaffr-text);
}

.sitestaffr-dash-tile--leads .sitestaffr-dash-tile-value {
    font-size: 40px;
}

.sitestaffr-dash-tile-sub {
    font-size: 12px;
    color: var(--sitestaffr-text-soft);
}

/* Delta chips (vs this point last cycle) */
.sitestaffr-delta {
    font-size: 13px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: var(--sitestaffr-radius-pill);
}

.sitestaffr-delta.is-up {
    background: #e7f7ef;
    color: #0b7a4b;
}

.sitestaffr-delta.is-down {
    background: #fdeeee;
    color: #b42318;
}

.sitestaffr-delta.is-flat {
    background: var(--sitestaffr-bg-alt);
    color: var(--sitestaffr-text-muted);
}

/* Minutes health tile — ambient dot when fine, loud color when not */
.sitestaffr-health-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    align-self: center;
    background: var(--sitestaffr-green);
}

.sitestaffr-dash-tile--minutes.status-medium .sitestaffr-health-dot {
    background: #f59e0b;
}

.sitestaffr-dash-tile--minutes.status-critical .sitestaffr-health-dot {
    background: var(--sitestaffr-red);
}

.sitestaffr-dash-tile--minutes.status-critical .sitestaffr-dash-tile-value {
    color: var(--sitestaffr-red);
}

/* Conversations-per-day sparkline */
.sitestaffr-sparkline {
    width: 100%;
    max-width: 220px;
    height: 36px;
    margin-top: 4px;
    color: var(--sitestaffr-teal);
}

/* ==========================================================================
   Needs Your Attention — inline mark-as-read
   ========================================================================== */

.sitestaffr-attention-mark-read {
    border: 0;
    background: transparent;
    color: var(--sitestaffr-text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--sitestaffr-radius-sm);
    line-height: 1;
}

.sitestaffr-attention-mark-read:hover,
.sitestaffr-attention-mark-read:focus {
    color: var(--sitestaffr-teal-dark);
    background: var(--sitestaffr-teal-light);
}

/* ==========================================================================
   Getting-Started Checklist (first-run)
   ========================================================================== */

.sitestaffr-checklist {
    margin: 0;
    padding: var(--sitestaffr-space-md) var(--sitestaffr-space-lg);
    list-style: none;
}

.sitestaffr-checklist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--sitestaffr-border-soft);
    font-size: 14px;
}

.sitestaffr-checklist-item:last-child {
    border-bottom: 0;
}

.sitestaffr-checklist-item .dashicons {
    color: var(--sitestaffr-text-soft);
}

.sitestaffr-checklist-item.is-done {
    color: var(--sitestaffr-text-soft);
    text-decoration: line-through;
}

.sitestaffr-checklist-item.is-done .dashicons {
    color: var(--sitestaffr-green);
}

.sitestaffr-checklist-item.is-waiting {
    color: var(--sitestaffr-text-muted);
    font-style: italic;
}

.sitestaffr-phone-display {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 16px;
    background: #e8f5e9;
    border-radius: 8px;
    border: 1px solid #c8e6c9;
}

.sitestaffr-phone-display .dashicons {
    color: #388e3c;
}

.sitestaffr-phone-label {
    color: #2e7d32;
    font-size: 13px;
}

.sitestaffr-phone-number {
    color: #1b5e20;
    font-size: 16px;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   Quick Actions Sidebar (30% Right Column - v0.10.6)
   ========================================================================== */

/* Quick Actions Widget - Ultra-light styling with subtle shadow */
.sitestaffr-actions-sidebar {
    background: transparent;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    min-height: 200px;
    margin-bottom: 0;
    order: 0;
    overflow: hidden;
}

.sitestaffr-actions-sidebar .sitestaffr-widget-header {
    height: 60px;
    padding: 0 20px;
    border-bottom: 1px solid #f0f0f0;
}

.sitestaffr-actions-sidebar .sitestaffr-widget-header h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1d2327;
}

.sitestaffr-actions-sidebar .sitestaffr-widget-header .dashicons {
    color: #00838F;
    font-size: 18px;
}

.sitestaffr-sidebar-actions {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 20px; /* Add spacing so cards don't touch container edges (v0.10.25) */
}

/* Sidebar Button - Uniform styling matching stat cards (v0.10.24 - Task T Revert) */
.sitestaffr-sidebar-button {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
    text-decoration: none;
    color: #1d2327;
}

.sitestaffr-sidebar-button:last-child {
    margin-bottom: 0;
}

.sitestaffr-sidebar-button:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: rgba(31, 182, 204, 0.3);
    transform: translateY(-1px);
}

.sitestaffr-sidebar-button:focus {
    outline: 2px solid #2271b1;
    outline-offset: -2px;
}

/* Icon Circle - Teal circle with equal weight for all actions */
.sitestaffr-sidebar-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Icon colors - one teal treatment for every action (list is dynamic) */
.sitestaffr-sidebar-button .sitestaffr-sidebar-icon {
    background: var(--sitestaffr-teal-light);
    color: var(--sitestaffr-teal-dark);
}

.sitestaffr-sidebar-icon .dashicons {
    font-size: 20px;
}

/* Text Content - Title + Description stacked vertically */
.sitestaffr-sidebar-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sitestaffr-sidebar-text {
    font-size: 14px;
    font-weight: 600;
    color: #1d2327;
}

.sitestaffr-sidebar-desc {
    font-size: 12px;
    color: #646970;
}

/* Arrow - Right-aligned indicator */
.sitestaffr-sidebar-arrow {
    flex-shrink: 0;
    color: #646970;
}

.sitestaffr-sidebar-arrow .dashicons {
    font-size: 18px;
}

.sitestaffr-sidebar-button .dashicons-arrow-right-alt2 {
    margin-left: auto;
    color: #646970;
}

/* Mobile Responsive - Quick Actions */
@media screen and (max-width: 782px) {
    .sitestaffr-actions-sidebar {
        margin-top: 20px; /* Space from Recent Calls on mobile */
    }

    .sitestaffr-sidebar-button {
        padding: 14px 16px;
    }

    .sitestaffr-sidebar-icon {
        width: 36px;
        height: 36px;
    }
}

/* ==========================================================================
   Quick Actions - Uniform Styling (v0.10.24 - Reverted from Task T)
   ========================================================================== */

/* Action Title/Desc - Typography for action buttons */
.sitestaffr-action-title {
    font-size: 14px;
    font-weight: 600;
    color: #1d2327;
    margin-bottom: 2px;
}

.sitestaffr-action-desc {
    font-size: 12px;
    color: #646970;
}

/* Primary Button Variant (Test Your AI) - Deprecated */
.sitestaffr-sidebar-primary {
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    border-color: #1976D2;
    color: #fff;
}

.sitestaffr-sidebar-primary:hover {
    background: linear-gradient(135deg, #1E88E5 0%, #1565C0 100%);
    border-color: #1565C0;
}

.sitestaffr-sidebar-primary .sitestaffr-sidebar-icon {
    background: rgba(255, 255, 255, 0.2);
}

.sitestaffr-sidebar-primary .sitestaffr-sidebar-icon .dashicons,
.sitestaffr-sidebar-primary .sitestaffr-sidebar-text,
.sitestaffr-sidebar-primary .sitestaffr-sidebar-desc,
.sitestaffr-sidebar-primary .sitestaffr-sidebar-arrow .dashicons {
    color: #fff;
}

/* Warning Button Variant (Get Phone Number) - Deprecated */
.sitestaffr-sidebar-warning {
    background: #fff8e1;
    border-color: #ffc107;
}

.sitestaffr-sidebar-warning:hover {
    background: #fff3cd;
    border-color: #f57c00;
}

.sitestaffr-sidebar-warning .sitestaffr-sidebar-icon {
    background: rgba(255, 193, 7, 0.2);
}

.sitestaffr-sidebar-warning .sitestaffr-sidebar-icon .dashicons {
    color: #f57c00;
}

/* Loading State - Deprecated */
.sitestaffr-sidebar-button.sitestaffr-loading {
    opacity: 0.7;
    pointer-events: none;
}

/* ==========================================================================
   Recent Calls Widget (Dashboard) - Ultra-Light Pastel Styling (v0.9.96)
   ========================================================================== */

.sitestaffr-calls-widget {
    min-height: 200px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); /* Subtle shadow (v0.9.79) */
}

/* Recent Calls Widget - Enhanced styling with teal gradient (v0.10.2) */
.sitestaffr-recent-calls-widget {
    background: transparent;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    margin-bottom: 0;
    order: 1;
    overflow: hidden;
}

.sitestaffr-recent-calls-widget .sitestaffr-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    height: 60px;
    padding: 0 20px;
    border-bottom: 1px solid #f0f0f0;
    background: #FAF8F4;
}

.sitestaffr-recent-calls-widget .sitestaffr-widget-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1d2327;
}

.sitestaffr-recent-calls-widget .sitestaffr-widget-header h3 .dashicons {
    color: #00838F; /* Darker teal for section header icons */
    font-size: 18px;
}

.sitestaffr-recent-calls-widget .sitestaffr-view-all-link {
    color: #2271b1;
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.sitestaffr-recent-calls-widget .sitestaffr-view-all-link:hover {
    color: #135e96;
}

/* Mobile-only View All link — hidden on desktop */
.sitestaffr-view-all-link-mobile {
    display: none !important;
}

/* Underline only the text, not the chevron icon (v0.10.41) */
.sitestaffr-recent-calls-widget .sitestaffr-view-all-link:hover .sitestaffr-view-all-text {
    text-decoration: underline;
}

.sitestaffr-calls-list {
    padding: 8px;
}

/* ==========================================================================
   DASHBOARD RECENT CONVERSATIONS — Editorial Mini-Card Rows
   ========================================================================== */

/* Call list items — card-style rows with landing-page elevation hover */
.sitestaffr-recent-calls-widget .sitestaffr-call-item {
    padding: 16px 20px;
    margin: 4px 8px;
    border-radius: 10px;
    border: 1px solid transparent;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.3s ease,
                border-color 0.3s ease;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
    background: transparent;
}

/* Unread rows — warm cream card */
.sitestaffr-recent-calls-widget .sitestaffr-call-item.sitestaffr-call-unread {
    background: #FFFDF9;
    border-color: #e8e2d8;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.sitestaffr-recent-calls-widget .sitestaffr-call-item:last-child {
    margin-bottom: 4px;
}

/* Hover — elevation lift + teal-tinted shadow */
.sitestaffr-recent-calls-widget .sitestaffr-call-item:hover {
    cursor: pointer;
    background: #fff;
    border-color: #e8e2d8;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,131,143,0.08), 0 2px 4px rgba(0,0,0,0.04);
}

.sitestaffr-recent-calls-widget .sitestaffr-call-item.sitestaffr-call-unread:hover {
    box-shadow: 0 4px 16px rgba(0,131,143,0.12), 0 2px 4px rgba(0,131,143,0.06);
}

/* ---- Avatar circle ---- */
.sitestaffr-recent-calls-widget .sitestaffr-call-avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1FB6CC, #00838F);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.sitestaffr-recent-calls-widget .sitestaffr-call-avatar-circle .dashicons {
    color: #fff;
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* ---- Call info — expands to fill middle ---- */
.sitestaffr-recent-calls-widget .sitestaffr-call-info {
    flex: 1 1 0%;
    min-width: 0;
}

/* NEW badge — warm green pill, floats above summary */
.sitestaffr-recent-calls-widget .sitestaffr-badge-new {
    display: inline-flex;
    width: fit-content;
    background: #ecfdf5;
    color: #059669;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 10px;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.2;
    margin-bottom: 4px;
}

/* AI summary snippet — primary content of each row */
.sitestaffr-recent-calls-widget .sitestaffr-call-summary-snippet {
    margin: 0;
    padding: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: #1d2327;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 500;
}

.sitestaffr-recent-calls-widget .sitestaffr-call-summary-empty {
    color: #9ca3af;
    font-style: italic;
    font-weight: 400;
}

/* Time ago — below summary */
.sitestaffr-recent-calls-widget .sitestaffr-call-time {
    display: block;
    font-size: 12px;
    color: #9ca3af;
    margin-top: 4px;
}

/* Duration — top-right corner of the card */
.sitestaffr-recent-calls-widget .sitestaffr-call-meta {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    margin-left: auto;
    margin-top: 2px;
}

.sitestaffr-recent-calls-widget .sitestaffr-call-duration {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #646970;
    font-family: "SF Mono", Monaco, Consolas, monospace;
    white-space: nowrap;
}

/* ==========================================================================
   Stacked Hover Actions for Recent Calls
   ========================================================================== */

/* Action buttons — horizontal row between summary and time, fade in on hover */
.sitestaffr-call-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transform: translateY(4px);
    transition: opacity 0.25s ease, transform 0.25s ease, height 0.25s ease, margin 0.25s ease;
    background: transparent;
    padding: 0;
    pointer-events: none;
    margin: 0;
}

/* Show on hover */
.sitestaffr-call-item:hover .sitestaffr-call-actions {
    opacity: 1;
    height: auto;
    overflow: visible;
    transform: translateY(0);
    pointer-events: auto;
    margin: 6px 0 2px;
}

/* Primary action — View Details */
.sitestaffr-call-action-primary {
    background: #00838F;
    color: #fff;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
    text-align: center;
    white-space: nowrap;
}

.sitestaffr-call-action-primary:hover {
    background: #006d77;
}

/* Secondary action — Mark Read/Unread */
.sitestaffr-call-action-secondary {
    background: transparent;
    color: #00838F;
    padding: 5px 14px;
    border: 1px solid #b2dfdb;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    white-space: nowrap;
}

.sitestaffr-call-action-secondary:hover {
    background: #e0f2f1;
    border-color: #80cbc4;
}

/* Destructive action button - Delete (Red Text) */
.sitestaffr-call-action-destructive {
    background: transparent;
    color: #d63638;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sitestaffr-call-action-destructive:hover {
    color: #a72729;
    text-decoration: underline;
}

/* Success message after marking as read */
.sitestaffr-call-marked {
    color: #10b981;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Mobile responsive - stack actions below content (Task X - v0.10.30) */
@media screen and (max-width: 782px) {
    .sitestaffr-call-item {
        flex-wrap: wrap;
    }

    .sitestaffr-call-actions {
        width: 100%;
        justify-content: center;
        margin: 8px 0 0 0;
    }
}

/* Legacy styles (kept for backward compatibility) */
.sitestaffr-call-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s;
}

.sitestaffr-call-card:hover {
    background: #f6f7f7;
}

.sitestaffr-call-unread {
    background: #f0f6fc;
}

.sitestaffr-call-unread:hover {
    background: #e5f0fa;
}

.sitestaffr-call-avatar {
    width: 40px;
    height: 40px;
    background: #e3f2fd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sitestaffr-call-avatar .dashicons {
    color: #1976d2;
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* .sitestaffr-call-info base flexbox moved to ICON + TEXT VERTICAL ALIGNMENT section above */
.sitestaffr-call-info {
    flex: 1;
    min-width: 0;
}

.sitestaffr-call-number {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1d2327;
}

.sitestaffr-call-time {
    display: block;
    font-size: 12px;
    color: #646970;
}

/* .sitestaffr-call-meta base flexbox moved to ICON + TEXT VERTICAL ALIGNMENT section above */
.sitestaffr-call-meta {
    flex-shrink: 0;
}

.sitestaffr-call-duration {
    font-family: "SF Mono", Monaco, Consolas, monospace;
    font-size: 12px;
    color: #646970;
    background: #f0f0f1;
    padding: 2px 8px;
    border-radius: 3px;
}

/* ==========================================================================
   Settings Page Styles
   ========================================================================== */

.sitestaffr-settings-info {
    background: #fff;
    border: 1px solid #c3c4c7;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
    padding: 20px;
    margin-top: 20px;
}

.sitestaffr-settings-info h2 {
    margin-top: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1d2327;
}

/* Form table styles */
.form-table th {
    font-weight: 600;
}

.form-table input[type="text"],
.form-table input[type="password"] {
    width: 100%;
    max-width: 500px;
}

/* ==========================================================================
   Phone Banner - Dashboard & Settings (Simple)
   ========================================================================== */

.sitestaffr-phone-banner {
    background: #e8f5e9;
    border: 1px solid #c8e6c9;
    border-left: 4px solid #388e3c;
    border-radius: 4px;
    padding: 16px 20px;
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sitestaffr-phone-banner .dashicons {
    color: #388e3c;
    font-size: 24px;
    width: 24px;
    height: 24px;
}

.sitestaffr-phone-banner-content {
    flex: 1;
}

.sitestaffr-phone-banner-label {
    font-size: 13px;
    color: #2e7d32;
    font-weight: 500;
    margin-bottom: 4px;
}

.sitestaffr-phone-banner-number {
    font-size: 18px;
    font-weight: 600;
    color: #1b5e20;
    letter-spacing: 0.5px;
}

/* Responsive adjustments for phone banner */
@media screen and (max-width: 782px) {
    .sitestaffr-phone-banner {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .sitestaffr-phone-banner .dashicons {
        font-size: 20px;
        width: 20px;
        height: 20px;
    }

    .sitestaffr-phone-banner-number {
        font-size: 16px;
    }
}

/* ==========================================================================
   Header Elements (Copy Button & Status Badge for Header)
   ========================================================================== */

.sitestaffr-status-active {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #10b981;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: transparent;
    border: none;
}

.sitestaffr-status-active::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #10b981;
    flex-shrink: 0;
}

.sitestaffr-status-inactive {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ef4444;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: transparent;
    border: none;
}

.sitestaffr-status-inactive::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ef4444;
    flex-shrink: 0;
}

.sitestaffr-copy-button {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: #1FB6CC;
    padding: 6px 14px;
    border: 1.5px solid #1FB6CC;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sitestaffr-copy-button:hover {
    background: rgba(31, 182, 204, 0.1);
    border-color: #17A2B8;
    color: #17A2B8;
}

.sitestaffr-copy-button .dashicons {
    color: currentColor;
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   OLD PHONE NUMBER BANNER (Deprecated - kept for backward compatibility)
   ========================================================================== */

.sitestaffr-phone-number-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    color: #fff;
    padding: 16px 24px;
    border-radius: 8px;
    margin: 20px 0;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

.sitestaffr-phone-number-banner.sitestaffr-settings-banner {
    margin-bottom: 0;
}

.sitestaffr-phone-number-content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.sitestaffr-phone-number-content .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
    color: #fff;
}

.sitestaffr-phone-number-text {
    display: flex;
    flex-direction: column;
}

.sitestaffr-phone-number-banner .sitestaffr-phone-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.sitestaffr-phone-status {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: 12px;
}

.sitestaffr-phone-number-banner .sitestaffr-status-badge {
    display: inline-block;
    margin-left: 12px;
}

/* Mobile responsive for phone number banner */
@media screen and (max-width: 782px) {
    .sitestaffr-phone-number-banner {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
        text-align: center;
    }

    .sitestaffr-phone-number-content {
        flex-direction: column;
        gap: 12px;
    }

    .sitestaffr-phone-number-value {
        font-size: 20px;
    }

    .sitestaffr-copy-button {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Cross-link Boxes Between Pages
   ========================================================================== */
/* NOTE: Tooltip styles moved to sitestaffr-global.css (v0.5.7) */

/* Settings page - light blue info box */
.sitestaffr-settings-cross-link {
    background: #e3f2fd;
    border: 1px solid #90caf9;
    border-radius: 4px;
    padding: 12px 16px;
    margin: 16px 0;
}

/* Train AI page - light gray info banner */
.sitestaffr-ai-cross-link {
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    padding: 12px 16px;
    margin: 16px 0;
}

/* Cross-link anchor style */
.sitestaffr-cross-link a {
    color: #2271b1;
    text-decoration: none;
    font-weight: 500;
}

.sitestaffr-cross-link a:hover {
    text-decoration: underline;
    color: #135e96;
}

/* ==========================================================================
   New Calls Highlight Section (v0.5.13)
   ========================================================================== */

/* ==================================================
   NEW CALLS CAROUSEL SECTION
   ================================================== */

.sitestaffr-attention-widget {
    margin: 12px 0 20px 0;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(31, 182, 204, 0.10);
    border: 1px solid rgba(31, 182, 204, 0.20);
    overflow: visible;
}

.sitestaffr-attention-widget.no-new-calls {
    background: #ffffff;
    border-color: #e0e0e0;
    box-shadow: none; /* Remove glow when no new calls (Task 2 - v0.10.40) */
}

.sitestaffr-new-calls-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 0 20px;
    background: linear-gradient(135deg, #0e898812 0%, #6bba461a 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* Subtle separator */
    cursor: pointer;
    user-select: none;
    border-radius: 8px 8px 0 0;
}

.sitestaffr-attention-widget.no-new-calls .sitestaffr-new-calls-header {
    background: linear-gradient(135deg, #0e898808 0%, #6bba460f 100%);
    border-bottom-color: #e0e0e0;
}

.sitestaffr-new-calls-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1d2327;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sitestaffr-new-calls-header h2 .dashicons {
    color: #00838F;
    font-size: 20px;
}

.sitestaffr-new-calls-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: #dc3545; /* Red to match "New" badges */
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    line-height: 24px;
    flex-shrink: 0;
}

.sitestaffr-toggle-new-calls {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #6c757d;
    transition: transform 0.3s ease;
}

.sitestaffr-toggle-new-calls:hover {
    color: #28a745;
}

.sitestaffr-toggle-new-calls .dashicons {
    font-size: 20px;
}

.sitestaffr-new-calls-content {
    padding: 18px 20px 16px;
    background: #ffffff;
    border-radius: 0 0 8px 8px;
}

/* Empty State */
.sitestaffr-new-calls-empty {
    text-align: center;
    padding: 50px 20px;
    color: #6c757d;
}

.sitestaffr-new-calls-empty .dashicons {
    font-size: 54px;
    width: 54px;
    height: 54px;
    color: #28a745;
    margin-bottom: 20px;
}

.sitestaffr-new-calls-empty p {
    font-size: 19px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 10px 0;
}

.sitestaffr-empty-subtitle {
    font-size: 14px;
    color: #6c757d;
}

/* Tablet: strip collapses to 2 columns, minutes tile spans full width */
@media screen and (max-width: 1024px) {
    .sitestaffr-dash-strip {
        grid-template-columns: 1fr 1fr;
    }

    .sitestaffr-dash-tile--minutes {
        grid-column: 1 / -1;
    }
}

/* Mobile Responsive */
@media screen and (max-width: 782px) {
    .sitestaffr-dash-strip {
        grid-template-columns: 1fr;
        gap: var(--sitestaffr-space-sm);
    }

    .sitestaffr-dash-tile--minutes {
        grid-column: auto;
    }

    .sitestaffr-dash-tile--leads .sitestaffr-dash-tile-value {
        font-size: 32px;
    }

    /* Sidebar buttons remain full width on mobile */
    .sitestaffr-sidebar-actions {
        padding: 8px;
    }

    .sitestaffr-sidebar-button {
        padding: 12px 14px;
    }

    /* Recent Calls Widget - Mobile: center header, move View All below cards */
    .sitestaffr-recent-calls-widget {
        display: flex;
        flex-direction: column;
    }

    .sitestaffr-recent-calls-widget .sitestaffr-widget-header .sitestaffr-view-all-link {
        display: none;
    }

    .sitestaffr-recent-calls-widget .sitestaffr-calls-list {
        order: 1;
    }

    .sitestaffr-recent-calls-widget .sitestaffr-view-all-link-mobile {
        display: flex !important;
        order: 2;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
        padding: 10px 20px 14px;
        color: #2271b1;
        text-decoration: none;
        font-size: 14px;
    }

    .sitestaffr-recent-calls-widget .sitestaffr-call-item {
        padding: 10px 16px;
    }
}

/* ==========================================================================
   AI Voice Agent Section (v0.12.29)
   ========================================================================== */

.sitestaffr-ai-voice-container {
    max-width: 1200px;
    margin: 0 auto;
}

#sitestaffr-voice-select {
    margin-bottom: 20px;
}

/* Wrapper for arrows + card (v0.12.30 - centered) */
.sitestaffr-voice-selector-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    max-width: 100%;
}

/* Fixed-height voice display card (v0.12.30 - center alignment) */
.sitestaffr-voice-display {
    flex: 0 1 auto; /* Don't force growth, allow natural size */
    max-width: 800px; /* Constrain width for centering */
    min-width: 800px;
    min-height: 200px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0;
    display: flex;
    gap: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    align-items: stretch; /* Avatar must stretch full height */
    overflow: hidden;
}

/* Image container - left side (150px width, full height) - FILLS ENTIRE HEIGHT (v0.12.30) */
.sitestaffr-voice-image {
    flex-shrink: 0;
    width: 150px;
    min-height: 400px; /* Ensure larger portrait display */
    align-self: stretch; /* STRETCH to fill full card height */
    padding: 0;
    margin: 0;
    background: none;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    align-items: stretch; /* Allow img to stretch */
}

/* Avatar image styling - FILLS ENTIRE HEIGHT (v0.12.30) */
.sitestaffr-voice-image img {
    width: 100%;
    height: 100%; /* Fill full height */
    min-height: 100%; /* Ensure no white space at bottom */
    object-fit: cover; /* Cover entire area */
    object-position: center; /* Center the image */
    display: block;
}

/* Fallback dashicons if image fails to load */
.sitestaffr-voice-image .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: #646970;
}

/* Voice details - right side (v0.12.29 - added padding since removed from card) */
.sitestaffr-voice-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
}

/* Voice Navigation Arrows - Outside card (v0.12.28) */
.sitestaffr-voice-nav {
    background: transparent;
    border: none;
    color: #2271b1;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0.6;
    flex-shrink: 0;
    border-radius: 4px;
}

.sitestaffr-voice-nav:hover {
    opacity: 1;
    background: rgba(34, 113, 177, 0.08);
    color: #135e96;
}

.sitestaffr-voice-nav:focus {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

.sitestaffr-voice-nav .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
}

/* Voice header row - name + badge */
.sitestaffr-voice-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sitestaffr-voice-name {
    font-size: 20px;
    font-weight: 700;
    color: #1d2327;
    margin: 0;
}

/* Voice category badge */
.sitestaffr-voice-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Recommended badge - gold */
.sitestaffr-voice-badge:contains("Recommended"),
.sitestaffr-voice-badge:contains("⭐") {
    background: rgba(240, 180, 41, 0.15);
    color: #856404;
}

/* Standard badge - gray */
.sitestaffr-voice-badge:contains("Standard") {
    background: rgba(100, 105, 112, 0.1);
    color: #646970;
}

/* Expressive badge - purple */
.sitestaffr-voice-badge:contains("Expressive") {
    background: rgba(142, 68, 173, 0.15);
    color: #6a1b9a;
}

/* Voice tagline */
.sitestaffr-voice-tagline {
    font-size: 14px;
    font-weight: 600;
    color: #2271b1;
    margin: 0;
}

/* Fixed-height description wrapper - Prevents layout shift (v0.12.28) */
.sitestaffr-voice-description-wrapper {
    min-height: 48px;
    overflow: hidden;
}

/* Voice description */
.sitestaffr-voice-description {
    font-size: 13px;
    line-height: 1.6;
    color: #646970;
    margin: 0;
}

/* Preview button */
.sitestaffr-voice-preview-btn {
    align-self: flex-start;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sitestaffr-voice-preview-btn .dashicons {
    font-size: 16px;
}

/* Mobile responsive (v0.12.29) */
@media screen and (max-width: 782px) {
    /* Stack wrapper vertically on mobile */
    .sitestaffr-voice-selector-wrapper {
        flex-direction: column;
        gap: 12px;
    }

    /* Arrows on top and bottom on mobile */
    .sitestaffr-voice-nav {
        width: 100%;
        padding: 12px;
    }

    .sitestaffr-voice-display {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        min-height: auto;
    }

    /* Avatar full-width on mobile */
    .sitestaffr-voice-image {
        width: 100%;
        height: 150px;
    }

    .sitestaffr-voice-details {
        padding: 20px;
    }

    .sitestaffr-voice-header {
        flex-direction: column;
        gap: 6px;
    }

    .sitestaffr-voice-preview-btn {
        align-self: center;
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Settings Page Refresh (v0.14.105)
   ========================================================================== */

.sitestaffr-settings .dashicons.spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

.sitestaffr-settings .sitestaffr-settings-form {
    margin-top: 12px;
}

.sitestaffr-settings .sitestaffr-settings-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.sitestaffr-settings .sitestaffr-settings-card {
    background: #fff;
    border: 1px solid #e8e2d8;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.sitestaffr-settings .sitestaffr-settings-card-header {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 18px;
    border-bottom: 1px solid #f0ebe0;
    background: #FAF8F4;
}

.sitestaffr-settings .sitestaffr-settings-card-header h2 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 600;
    color: #1d2327;
}

.sitestaffr-settings .sitestaffr-settings-card-header .dashicons {
    color: #00838f;
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 16px;
}

.sitestaffr-settings .sitestaffr-settings-card-body {
    padding: 12px 18px 14px;
}

.sitestaffr-settings .sitestaffr-settings-card-body > p:first-child {
    margin-top: 0;
    margin-bottom: 10px;
    color: #50575e;
}

.sitestaffr-settings .sitestaffr-settings-card-voice .sitestaffr-settings-card-body > p:first-child {
    margin-bottom: 8px;
}

.sitestaffr-settings .sitestaffr-tooltip {
    max-width: 320px;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Business Information: 65/35 split */
/* Left column (name / phone / hours) is narrower; the Business Profile column is wider. */
.sitestaffr-settings .sitestaffr-business-grid {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(0, 1.55fr);
    gap: 22px;
    /* stretch (not start) so the left column's hours panel can fill the
       height beside the profile document — kills the dead zone. */
    align-items: stretch;
}

.sitestaffr-settings .sitestaffr-business-main .sitestaffr-business-hours-panel {
    flex: 1 1 auto;
}

/* Account & Connection section */
.sitestaffr-account-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.sitestaffr-account-field > label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sitestaffr-text-muted, #646970);
    margin-bottom: 4px;
}

/* Integration row (logo tile · name/status/description · action). */
.sitestaffr-integration {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 4px 0 2px;
}

.sitestaffr-integration-logo {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--sitestaffr-border, #e2e4e7);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.sitestaffr-integration-logo img {
    width: 38px;
    height: auto;
    display: block;
}

.sitestaffr-integration-main {
    flex: 1 1 auto;
    min-width: 0;
}

.sitestaffr-integration-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sitestaffr-integration-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--sitestaffr-text, #1d2327);
}

.sitestaffr-integration-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
}

.sitestaffr-integration-status.is-connected {
    color: #0a7d57;
    background: #e6f6ee;
}

.sitestaffr-integration-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sitestaffr-success, #10b981);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

.sitestaffr-integration-desc {
    margin: 6px 0 0;
    color: var(--sitestaffr-text-muted, #646970);
    font-size: 13px;
    line-height: 1.5;
    max-width: 62ch;
}

.sitestaffr-integration-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    padding: 10px 14px;
    background: var(--sitestaffr-light-teal, #E0F7FA);
    border-radius: 8px;
    color: #00838F;
    font-size: 12.5px;
    line-height: 1.5;
}

.sitestaffr-integration-hint .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: 1px;
}

.sitestaffr-integration-action {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.sitestaffr-integration-action .sitestaffr-inline-status {
    font-size: 12px;
    color: var(--sitestaffr-text-muted, #646970);
}

/* Slim inline connect/disconnect result banner (replaces the heavy WP notice). */
.sitestaffr-integration-notice {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 16px;
    border: 1px solid transparent;
}

.sitestaffr-integration-notice.is-success {
    color: #0a7d57;
    background: #e6f6ee;
    border-color: #b7e4cd;
}

.sitestaffr-integration-notice.is-error {
    color: #b32d2e;
    background: #fdecec;
    border-color: #f3c2c2;
}

.sitestaffr-integration-notice.is-warning {
    color: #5c3d00;
    background: #fff8eb;
    border-color: #f0d18a;
}

@media (max-width: 600px) {
    .sitestaffr-integration {
        flex-wrap: wrap;
    }

    .sitestaffr-integration-action {
        width: 100%;
        align-items: flex-start;
        margin-top: 10px;
    }
}

.sitestaffr-account-field p {
    margin: 0 0 4px;
}

.sitestaffr-account-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--sitestaffr-radius-pill, 999px);
    font-size: 12px;
    font-weight: 600;
}

.sitestaffr-account-status.is-registered {
    background: #e7f7ef;
    color: #0b7a4b;
}

.sitestaffr-account-status.is-unregistered {
    background: #fdeeee;
    color: #b42318;
}

.sitestaffr-account-id-code {
    cursor: pointer;
    overflow-wrap: anywhere;
}

#sitestaffr-test-connection {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#sitestaffr-test-connection .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
}

.sitestaffr-settings .sitestaffr-business-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.sitestaffr-settings .sitestaffr-business-profile-col {
    min-width: 0;
}

/* Left-column fields stack label-over-input so they read cleanly in the narrow column. */
.sitestaffr-settings .sitestaffr-business-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: stretch;
}

.sitestaffr-settings .sitestaffr-business-control input {
    width: 100%;
    max-width: 100%;
}

.sitestaffr-settings .sitestaffr-business-label {
    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;
    color: #1d2327;
    padding-top: 0;
}

.sitestaffr-optional-label {
    font-weight: 400;
    color: #757575;
    font-size: 12px;
}

.sitestaffr-settings .sitestaffr-business-label .sitestaffr-tooltip-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 1px;
    vertical-align: middle;
    transform: translateY(-1px);
    line-height: 1;
}

.sitestaffr-settings .sitestaffr-business-label .sitestaffr-tooltip-trigger .dashicons {
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 16px;
}

.sitestaffr-settings .sitestaffr-business-control {
    min-width: 0;
    height: 100% !important;
}

.sitestaffr-settings #sitestaffr-business-context-counter,
.sitestaffr-settings #sitestaffr-custom-greeting-counter {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
}

.sitestaffr-settings #sitestaffr-business-context-counter.warning,
.sitestaffr-settings #sitestaffr-custom-greeting-counter.warning {
    color: #d97706;
}

/* Business Profile: Generate action at top, then ONE document card — a dark
   high-contrast SUMMARY panel above the white DETAILED PROFILE body. */
/* Profile column header — title left, Generate Profile right, directly above the boxes it fills. */
.sitestaffr-settings .sitestaffr-profile-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.sitestaffr-settings .sitestaffr-profile-col-title {
    font-size: 15px;
    font-weight: 700;
    color: #1d2327;
}

/* In the header the Generate control is a plain inline action, not a bordered card. */
.sitestaffr-settings .sitestaffr-profile-col-head .sitestaffr-generate-card {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sitestaffr-settings .sitestaffr-profile-col-head #btn-settings-generate-description {
    width: auto;
    min-width: 0;
}

.sitestaffr-settings .sitestaffr-profile-col-head .sitestaffr-gen-progress {
    width: 80px;
    flex: 0 0 auto;
}

.sitestaffr-settings .sitestaffr-profile-col-head .sitestaffr-gen-status {
    margin: 0;
}

/* The unified document — summary panel + body read as one card. */
.sitestaffr-settings .sitestaffr-profile-doc {
    border: 1px solid #cbd9e3;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 53, 71, 0.07);
}

.sitestaffr-settings .sitestaffr-profile-region {
    padding: 14px 16px 16px;
}

.sitestaffr-settings .sitestaffr-profile-region-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.sitestaffr-settings .sitestaffr-profile-region-title {
    font-size: 14px;
    font-weight: 700;
    color: #1d2327;
}

.sitestaffr-settings .sitestaffr-profile-doc .sitestaffr-profile-region textarea {
    resize: vertical;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.sitestaffr-settings .sitestaffr-profile-region .sitestaffr-char-count {
    margin: 4px 0 0;
    font-size: 12px;
    text-align: right;
    color: #6b7280;
}

/* SUMMARY — dark deep-teal panel, light text (opposite contrast to the body).
   Restored to the original pre-rebuild treatment (teal gradient + subtle light
   textarea overlay) so the panel and field read as one cohesive color. */
.sitestaffr-settings .sitestaffr-profile-region--summary {
    background: #004046;
    background: linear-gradient(180deg, #005a62 0%, #003f45 100%);
}

.sitestaffr-settings .sitestaffr-profile-region--summary .sitestaffr-profile-region-title {
    color: #ffffff;
}

.sitestaffr-settings .sitestaffr-profile-region--summary textarea {
    min-height: 150px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 6px;
}

.sitestaffr-settings .sitestaffr-profile-region--summary textarea::placeholder {
    color: rgba(224, 247, 250, 0.6);
}

.sitestaffr-settings .sitestaffr-profile-region--summary textarea:focus {
    border-color: #1FB6CC;
    box-shadow: 0 0 0 1px #1FB6CC;
    outline: none;
}

/* Summary counter sits on the dark panel — light text (override the id-scoped gray rule). */
.sitestaffr-settings .sitestaffr-profile-region--summary #sitestaffr-business-context-counter {
    color: #b9e6ec;
}

.sitestaffr-settings .sitestaffr-profile-region--summary #sitestaffr-business-context-counter.warning {
    color: #ffd27a;
}

/* DETAILED PROFILE — white body region below the summary. */
.sitestaffr-settings .sitestaffr-profile-region--body {
    border-top: 1px solid #cbd9e3;
}

.sitestaffr-settings .sitestaffr-profile-region--body textarea {
    min-height: 280px;
}

/* Generate card — top of the profile block; fills the document below */
.sitestaffr-settings .sitestaffr-generate-card {
    margin-top: 0;
    padding: 10px;
    border: 1px solid #d5e2ec;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
}

.sitestaffr-settings .sitestaffr-generate-card #btn-settings-generate-description {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    justify-content: center;
    min-height: 34px;
    border-color: #bcd6ea;
    color: #0d5e99;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(17, 74, 122, 0.08);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, color 0.16s ease, background-color 0.16s ease;
}

.sitestaffr-settings .sitestaffr-generate-card #btn-settings-generate-description:hover {
    border-color: #8db9d8;
    color: #094f83;
    background: #f6fbff;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(17, 74, 122, 0.12);
}

.sitestaffr-settings .sitestaffr-generate-card #btn-settings-generate-description.is-pressing {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 2px rgba(17, 74, 122, 0.12);
}

.sitestaffr-settings .sitestaffr-generate-card #btn-settings-generate-description:disabled {
    color: #7a8692;
    border-color: #d3dee8;
    background: #f7fafc;
    box-shadow: none;
}

.sitestaffr-settings .sitestaffr-generate-card .sitestaffr-gen-button-ripple {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 124px;
    height: 124px;
    border-radius: 999px;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
}

.sitestaffr-settings .sitestaffr-generate-card #btn-settings-generate-description.is-pressing .sitestaffr-gen-button-ripple {
    animation: sitestaffr-gen-ripple 460ms ease-out;
}

@keyframes sitestaffr-gen-ripple {
    0% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0.24;
        background: rgba(16, 114, 186, 0.2);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
        background: rgba(16, 114, 186, 0.05);
    }
}

.sitestaffr-settings .sitestaffr-generate-card #btn-settings-generate-description .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 14px;
}

.sitestaffr-settings .sitestaffr-gen-status {
    display: none;
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 500;
    text-align: left;
}

.sitestaffr-settings .sitestaffr-gen-status.sitestaffr-gen-success {
    display: block;
    color: #0d6b48;
}

.sitestaffr-settings .sitestaffr-gen-status.sitestaffr-gen-error {
    display: block;
    color: #8a1e30;
}

.sitestaffr-settings .sitestaffr-gen-status.sitestaffr-gen-loading {
    display: block;
    color: #2f5f86;
}

@keyframes sitestaffr-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.sitestaffr-spin {
    animation: sitestaffr-spin 1s linear infinite;
}

/* ── Generate Description: Indeterminate Progress Bar ── */
.sitestaffr-gen-progress {
	display: none;
	height: 3px;
	margin-top: 8px;
	background: #e5e7eb;
	border-radius: 2px;
	overflow: hidden;
}

.sitestaffr-gen-progress.is-active {
	display: block;
}

.sitestaffr-gen-progress-bar {
	width: 30%;
	height: 100%;
	background: #1FB6CC;
	border-radius: 2px;
	animation: sitestaffr-gen-slide 1.4s ease-in-out infinite;
}

@keyframes sitestaffr-gen-slide {
	0% { transform: translateX(-100%); }
	50% { transform: translateX(233%); }
	100% { transform: translateX(-100%); }
}

/* ── Generate Description: Success Checkmark ── */
.sitestaffr-gen-checkmark {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	gap: 4px;
	animation: sitestaffr-gen-check-in 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.sitestaffr-gen-checkmark svg {
	width: 16px;
	height: 16px;
	color: #10b981;
}

@keyframes sitestaffr-gen-check-in {
	0% { transform: scale(0); opacity: 0; }
	70% { transform: scale(1.15); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

.sitestaffr-settings .sitestaffr-business-guidance-trigger {
    display: block;
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #1a76be;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.sitestaffr-settings .sitestaffr-business-guidance-trigger:hover,
.sitestaffr-settings .sitestaffr-business-guidance-trigger:focus {
    color: #0b5f9e;
}

.sitestaffr-modal-open {
    overflow: hidden;
}

.sitestaffr-business-guidance-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 160000;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.sitestaffr-business-guidance-modal.is-open {
    display: flex;
}

.sitestaffr-business-guidance-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.sitestaffr-business-guidance-dialog {
    position: relative;
    width: min(620px, calc(100vw - 48px));
    max-height: calc(100vh - 72px);
    overflow: auto;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
    border: 1px solid #cfe3ef;
    border-radius: 12px;
    padding: 28px 30px 24px;
    box-shadow: 0 24px 56px rgba(2, 12, 27, 0.24);
}

.sitestaffr-business-guidance-close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.sitestaffr-business-guidance-close:hover,
.sitestaffr-business-guidance-close:focus {
    color: #1f2937;
}

.sitestaffr-business-guidance-dialog h3 {
    margin: 0 30px 12px 0;
    font-size: 20px;
    line-height: 1.25;
    color: #0a7f91;
}

.sitestaffr-business-guidance-dialog ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sitestaffr-business-guidance-dialog li {
    position: relative;
    margin: 0 0 10px;
    padding-left: 20px;
    color: #334155;
    font-size: 14px;
    line-height: 1.45;
}

.sitestaffr-business-guidance-dialog li::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #14a3b8;
    box-shadow: 0 0 0 3px rgba(20, 163, 184, 0.16);
}

.sitestaffr-business-guidance-dialog li:last-child {
    margin-bottom: 0;
}

.sitestaffr-settings .sitestaffr-business-hours-panel {
    background: #f8fbfd;
    border: 1px solid #d7e2eb;
    border-radius: 8px;
    padding: 12px;
}

.sitestaffr-settings .sitestaffr-business-hours-panel h3 {
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    line-height: 1.3;
}

.sitestaffr-settings .sitestaffr-business-hours-panel h3 .dashicons {
    color: #00838f;
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 16px;
    transform: translateY(-1px);
}

.sitestaffr-settings .sitestaffr-business-hours-panel h3 .sitestaffr-tooltip-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 1px;
    line-height: 1;
}

.sitestaffr-settings .sitestaffr-business-hours-panel .sitestaffr-hours-editor {
    max-width: none;
}

.sitestaffr-settings .form-table {
    margin-top: 0;
}

.sitestaffr-settings .form-table th {
    width: 200px;
    padding: 9px 10px 8px 0;
    vertical-align: top;
    font-size: 14px;
    line-height: 1.4;
}

.sitestaffr-settings .form-table td {
    padding: 5px 0 8px;
}

.sitestaffr-settings .form-table .description {
    margin-top: 8px;
    color: #646970;
}

.sitestaffr-settings input[type="text"],
.sitestaffr-settings input[type="tel"],
.sitestaffr-settings input[type="email"],
.sitestaffr-settings textarea,
.sitestaffr-settings select {
    font-size: 14px;
}

.sitestaffr-settings input.regular-text,
.sitestaffr-settings textarea.large-text,
.sitestaffr-settings #sitestaffr-voice-select {
    max-width: 520px;
    width: 100%;
}

.sitestaffr-settings .sitestaffr-settings-save-wrap {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.sitestaffr-settings .sitestaffr-settings-save-wrap .button-primary {
    min-width: 140px;
    font-weight: 600;
}

/* Business hours editor */
.sitestaffr-settings .sitestaffr-hours-editor {
    max-width: none;
}

.sitestaffr-settings .sitestaffr-hours-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.sitestaffr-settings .sitestaffr-hours-option {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: flex-start;
    column-gap: 8px;
    padding: 8px 10px;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}

.sitestaffr-settings .sitestaffr-hours-option:hover {
    border-color: #7fb7de;
}

.sitestaffr-settings .sitestaffr-hours-option input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    border: 1px solid #8da2b5;
    border-radius: 50%;
    background: #fff;
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.sitestaffr-settings .sitestaffr-hours-option input[type="radio"]::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sitestaffr-settings .sitestaffr-hours-option input[type="radio"]::before {
    content: none !important;
    display: none !important;
}

.sitestaffr-settings .sitestaffr-hours-option input[type="radio"]:checked::before {
    content: none !important;
    display: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

.sitestaffr-settings .sitestaffr-hours-option input[type="radio"]:checked {
    border-color: #2271b1;
}

.sitestaffr-settings .sitestaffr-hours-option input[type="radio"]:checked::after {
    background: #2271b1;
}

.sitestaffr-settings .sitestaffr-hours-option input[type="radio"]:focus-visible {
    outline: 2px solid #85c6ff;
    outline-offset: 1px;
}

.sitestaffr-settings .sitestaffr-hours-option .option-content strong {
    display: block;
    margin-bottom: 4px;
}

.sitestaffr-settings .sitestaffr-hours-option .option-content p {
    margin: 0;
    color: #646970;
    font-size: 13px;
}

.sitestaffr-settings .sitestaffr-schedule-builder {
    margin-top: 10px;
    padding: 10px;
    background: #f7f9fa;
    border: 1px solid #dcdcde;
    border-radius: 4px;
}

.sitestaffr-settings .sitestaffr-schedule-day {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e7eaed;
}

.sitestaffr-settings .sitestaffr-schedule-day:last-child {
    border-bottom: none;
}

.sitestaffr-settings .sitestaffr-day-name {
    font-weight: 600;
    width: 92px;
    flex: 0 0 92px;
    color: #1d2327;
}

.sitestaffr-settings .sitestaffr-day-controls {
    display: flex;
    align-items: center;
    flex: 1;
    flex-wrap: nowrap;
    gap: 0;
    min-width: 0;
}

.sitestaffr-settings .sitestaffr-day-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 72px;
}

.sitestaffr-settings .sitestaffr-day-toggle input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.sitestaffr-settings .sitestaffr-day-toggle .toggle-label {
    display: inline-block;
    min-width: 44px;
}

.sitestaffr-settings .sitestaffr-time-inputs {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
}

.sitestaffr-settings .sitestaffr-time-select {
    width: auto;
    min-width: 86px;
    max-width: 100%;
    flex: 0 0 auto;
    padding: 4px 26px 4px 8px;
}

.sitestaffr-settings .sitestaffr-time-separator {
    color: #646970;
    font-size: 13px;
    margin: 0 2px;
}

/* Voice selector polish */
.sitestaffr-settings .sitestaffr-ai-voice-container {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.sitestaffr-settings .sitestaffr-settings-voice-field {
    display: grid;
    gap: 4px;
}

.sitestaffr-settings .sitestaffr-settings-voice-label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: #1d2327;
}

.sitestaffr-settings .sitestaffr-voice-select-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.sitestaffr-settings .sitestaffr-voice-selector-wrapper {
    position: relative;
    width: 100%;
    justify-content: stretch;
    margin-top: 0;
}

.sitestaffr-settings .sitestaffr-voice-display {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 185px;
    display: grid;
    grid-template-columns: minmax(190px, 25%) minmax(0, 1fr) 220px;
    border: 1px solid #d8dee3;
    border-radius: 8px;
    box-shadow: none;
}

.sitestaffr-settings .sitestaffr-voice-image {
    position: relative;
    width: 100%;
    min-height: 185px;
    background: linear-gradient(180deg, #f3f7fa 0%, #e9f1f7 100%);
    overflow: hidden;
}

.sitestaffr-settings .sitestaffr-voice-details {
    gap: 14px;
    padding: 22px 30px 22px;
    justify-content: flex-start;
}

.sitestaffr-settings .sitestaffr-voice-name {
    font-size: 25px;
    line-height: 1.1;
}

.sitestaffr-settings .sitestaffr-voice-tagline {
    font-size: 15px;
    margin: 0;
}

.sitestaffr-settings .sitestaffr-voice-description {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

.sitestaffr-settings .sitestaffr-voice-description-wrapper {
    min-height: 0;
}

.sitestaffr-settings .sitestaffr-voice-preview-column {
    border-left: 1px solid #e7ecf0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: transparent;
}

.sitestaffr-settings .sitestaffr-voice-preview-btn--icon {
    width: 176px !important;
    min-height: 176px !important;
    height: 176px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    margin: 0 !important;
    align-self: center !important;
    border: 7px solid rgba(31, 182, 204, 0.24) !important;
    background: transparent !important;
    color: rgba(15, 111, 128, 0.24) !important;
    box-shadow: none !important;
}

.sitestaffr-settings .sitestaffr-voice-preview-btn--icon:hover,
.sitestaffr-settings .sitestaffr-voice-preview-btn--icon:focus {
    background: transparent !important;
    border-color: rgba(31, 182, 204, 0.36) !important;
    color: rgba(12, 97, 112, 0.36) !important;
}

.sitestaffr-settings .sitestaffr-voice-preview-btn--icon .dashicons {
    font-size: 92px;
    width: 92px;
    height: 92px;
}

.sitestaffr-settings .sitestaffr-voice-preview-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: none;
    line-height: 1.2;
    text-align: center;
}

.sitestaffr-settings .sitestaffr-voice-preview-btn--icon.is-playing {
    background: transparent !important;
    border-color: rgba(31, 182, 204, 0.48) !important;
}

.sitestaffr-settings .sitestaffr-voice-preview-caption {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 600;
    color: #0f6f80;
    text-align: center;
}

.sitestaffr-settings .sitestaffr-voice-best-for {
    margin: 2px 0 0;
    padding: 10px 12px;
    border: 1px solid #d9e6ee;
    border-radius: 8px;
    background: #f8fcff;
}

.sitestaffr-settings .sitestaffr-voice-best-for-label {
    font-size: 12px;
    letter-spacing: 0.25px;
    text-transform: uppercase;
    font-weight: 700;
    color: #3a6478;
    margin-bottom: 6px;
}

.sitestaffr-settings .sitestaffr-voice-best-for-values {
    font-size: 13px;
    line-height: 1.45;
    color: #324451;
}

.sitestaffr-settings .sitestaffr-voice-best-for-separator {
    color: #7f95a2;
    margin: 0 4px;
}

.sitestaffr-settings .sitestaffr-voice-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #d0d6dc;
    background: #fff;
    opacity: 1;
    color: #2271b1;
}

.sitestaffr-settings .sitestaffr-voice-prev {
    left: 10px;
}

.sitestaffr-settings .sitestaffr-voice-next {
    right: 10px;
}

.sitestaffr-settings .sitestaffr-voice-nav .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

/* Color comes from the shared component states
   (.sitestaffr-inline-status in sitestaffr-global.css). */
.sitestaffr-settings .sitestaffr-voice-save-status {
    min-height: 18px;
    margin: 0 0 2px;
    font-size: 12px;
}

.sitestaffr-settings .sitestaffr-voice-badge {
    border-radius: 999px;
    padding: 4px 10px;
    line-height: 1.1;
}

.sitestaffr-settings .sitestaffr-voice-badge-standard {
    background: rgba(100, 105, 112, 0.14);
    color: #4f555b;
}

.sitestaffr-settings .sitestaffr-voice-badge-expressive {
    background: rgba(111, 66, 193, 0.14);
    color: #5933a8;
}

.sitestaffr-settings .sitestaffr-voice-badge-recommended {
    background: rgba(231, 180, 35, 0.2);
    color: #7a5c00;
}

.sitestaffr-settings .sitestaffr-voice-avatar-strip {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 8px;
}

.sitestaffr-settings .sitestaffr-voice-avatar-option {
    border: 1px solid #d4dde5;
    background: #fff;
    border-radius: 8px;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.sitestaffr-settings .sitestaffr-voice-avatar-option img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.sitestaffr-settings .sitestaffr-voice-avatar-name {
    font-size: 11px;
    line-height: 1.1;
    color: #2c3338;
}

.sitestaffr-settings .sitestaffr-voice-avatar-option:hover {
    border-color: #8ec7dd;
    background: #f3fbff;
}

.sitestaffr-settings .sitestaffr-voice-avatar-option.is-active {
    border-color: #1fb6cc;
    box-shadow: inset 0 0 0 1px #1fb6cc;
    background: #edf9fc;
}

/* Saving/saved/error states come from the shared component
   (.sitestaffr-inline-status in sitestaffr-global.css). */

/* --- Voice locking (plan-gated) --- */

.sitestaffr-settings .sitestaffr-voice-display.is-voice-locked img {
    opacity: 0.45;
    filter: grayscale(60%);
    transition: opacity 0.2s, filter 0.2s;
}

.sitestaffr-settings .sitestaffr-voice-save-status.is-locked {
    color: #7a5b00;
    font-size: 13px;
}

.sitestaffr-settings .sitestaffr-voice-save-status.is-locked .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 0.75;
    vertical-align: middle;
    margin-right: 3px;
    color: #7a5b00;
}

.sitestaffr-settings .sitestaffr-voice-save-status.is-locked a {
    color: #2271b1;
    text-decoration: underline;
}

.sitestaffr-settings .sitestaffr-voice-avatar-option.is-locked {
    opacity: 0.45;
    position: relative;
}

.sitestaffr-settings .sitestaffr-voice-avatar-option.is-locked::after {
    content: "\f160";
    font-family: dashicons;
    font-size: 11px;
    position: absolute;
    bottom: 2px;
    right: 2px;
    color: #7a5b00;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
}

.sitestaffr-settings .sitestaffr-voice-avatar-option.is-locked:hover {
    opacity: 0.65;
}

/* Widget page locked radio buttons */
.voice-option.is-locked {
    opacity: 0.6;
}

.voice-option.is-locked label {
    color: #8c8f94;
}

.voice-lock-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: #7a5b00;
    margin-left: 6px;
}

.voice-lock-badge .dashicons {
    font-size: 13px;
    width: 13px;
    height: 13px;
    color: #7a5b00;
}

.voice-lock-badge a {
    color: #2271b1;
    text-decoration: underline;
    font-size: 12px;
}

/* Email + dev cards */
.sitestaffr-settings .sitestaffr-settings-card-email {
    margin-top: 14px;
}

.sitestaffr-settings .sitestaffr-email-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 16px;
    align-items: start;
}

.sitestaffr-settings .sitestaffr-email-primary {
    display: grid;
    gap: 12px;
}

.sitestaffr-settings .sitestaffr-email-intro {
    margin: 0 0 12px 0;
    color: #50575e;
}

.sitestaffr-settings .sitestaffr-smtp-tip {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #f9f6f1;
    border: 1px solid #e8e2d8;
    border-radius: 10px;
    padding: 14px 18px;
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.5;
    color: #6b5e50;
}

.sitestaffr-settings .sitestaffr-smtp-tip > .dashicons {
    color: #a0937e;
    flex-shrink: 0;
    margin-top: 1px;
}

.sitestaffr-settings .sitestaffr-smtp-tip strong {
    display: block;
    margin-bottom: 2px;
    color: #4a3f35;
}

.sitestaffr-settings .sitestaffr-smtp-tip p {
    margin: 0;
}

.sitestaffr-settings .sitestaffr-email-row {
    padding-top: 12px;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.sitestaffr-settings .sitestaffr-email-row-label {
    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;
    color: #1d2327;
    padding-top: 8px;
}

.sitestaffr-settings .sitestaffr-email-row-label .sitestaffr-tooltip-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 1px;
    vertical-align: middle;
    transform: translateY(-1px);
    line-height: 1;
}

.sitestaffr-settings .sitestaffr-email-row-label .sitestaffr-tooltip-trigger .dashicons {
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 16px;
}

.sitestaffr-settings .sitestaffr-email-row-control {
    min-width: 0;
}

.sitestaffr-settings .sitestaffr-notification-cc-input {
    width: 100%;
    max-width: none;
}

/* Keep CC + Custom Greeting placeholders equally subtle (lighter than input value text). */
.sitestaffr-settings .sitestaffr-notification-cc-input::placeholder,
.sitestaffr-settings .sitestaffr-custom-greeting-input::placeholder {
    color: #9ca3af;
    opacity: 1;
}

.sitestaffr-settings .sitestaffr-email-row-control .description {
    margin: 6px 0 0;
    color: #646970;
}

.sitestaffr-settings .sitestaffr-email-checkbox-label {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    line-height: 1.35;
    cursor: pointer;
}

.sitestaffr-settings .sitestaffr-email-checkbox-label input[type="checkbox"] {
    flex-shrink: 0;
    margin: 2px 0 0;
    width: 16px;
    height: 16px;
}

.sitestaffr-settings .sitestaffr-notification-email-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.sitestaffr-settings .sitestaffr-notification-email-row .regular-text {
    width: 100%;
    max-width: none;
}

.sitestaffr-settings .sitestaffr-notification-email-row .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.sitestaffr-settings .sitestaffr-email-test-panel .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.sitestaffr-settings .sitestaffr-email-test-panel .button .dashicons {
    margin-right: 0 !important;
    margin-top: 0;
    line-height: 1;
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.sitestaffr-settings .sitestaffr-email-test-panel {
    border: 1px solid #d9e4ec;
    border-radius: 8px;
    background: #f8fbfd;
    padding: 14px;
}

.sitestaffr-settings .sitestaffr-email-test-panel h3 {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.3;
}

.sitestaffr-settings .sitestaffr-email-test-panel p {
    margin: 0 0 12px;
    color: #4d5863;
}

.sitestaffr-settings .sitestaffr-email-test-panel .sitestaffr-inline-status {
    margin-left: 0;
    margin-top: 10px;
}

.sitestaffr-settings .sitestaffr-settings-subsection {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #edf0f2;
}

.sitestaffr-settings .sitestaffr-settings-subsection h3 {
    margin: 0 0 6px;
    font-size: 16px;
    line-height: 1.3;
}

.sitestaffr-settings .sitestaffr-inline-status {
    display: inline-block;
    margin-left: 10px;
}

@media screen and (max-width: 900px) {
    .sitestaffr-settings .sitestaffr-form-table th,
    .sitestaffr-settings .form-table th {
        width: auto;
    }

    .sitestaffr-settings .sitestaffr-business-grid {
        grid-template-columns: 1fr;
    }

    .sitestaffr-settings .sitestaffr-business-main {
        grid-template-rows: auto auto auto;
    }

    .sitestaffr-settings .sitestaffr-profile-region textarea {
        min-height: 140px;
    }

    .sitestaffr-settings .sitestaffr-voice-display {
        grid-template-columns: minmax(180px, 32%) minmax(0, 1fr) 170px;
    }

    .sitestaffr-settings .sitestaffr-email-layout {
        grid-template-columns: 1fr;
    }

    .sitestaffr-settings .sitestaffr-email-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .sitestaffr-settings .sitestaffr-email-row-label {
        padding-top: 0;
    }
}

@media screen and (max-width: 782px) {
    .sitestaffr-settings .sitestaffr-settings-card-header {
        padding: 0 14px;
    }

    .sitestaffr-settings .sitestaffr-settings-card-body {
        padding: 14px;
    }

    .sitestaffr-settings .sitestaffr-voice-name {
        font-size: 21px;
    }

    .sitestaffr-settings .sitestaffr-voice-details {
        padding: 14px 16px 16px;
        gap: 10px;
    }

    .sitestaffr-settings .sitestaffr-voice-toolbar-controls {
        width: 100%;
    }

    .sitestaffr-settings .sitestaffr-business-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .sitestaffr-settings .sitestaffr-business-label {
        padding-top: 0;
    }

    .sitestaffr-settings .sitestaffr-voice-image {
        width: 100%;
        min-height: 400px;
    }

    .sitestaffr-settings .sitestaffr-voice-display {
        grid-template-columns: 1fr;
    }

    .sitestaffr-settings .sitestaffr-voice-preview-column {
        border-left: 0;
        border-top: 1px solid #e7ecf0;
        padding: 10px 0 12px;
    }

    .sitestaffr-settings .sitestaffr-voice-preview-btn--icon {
        width: 120px !important;
        min-height: 120px !important;
        height: 120px !important;
        flex-direction: row !important;
        border-width: 4px !important;
    }

    .sitestaffr-settings .sitestaffr-voice-preview-btn--icon .dashicons {
        font-size: 64px;
        width: 64px;
        height: 64px;
    }

    .sitestaffr-settings .sitestaffr-voice-preview-caption {
        font-size: 14px;
    }

    .sitestaffr-settings .sitestaffr-voice-avatar-strip {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .sitestaffr-settings .sitestaffr-day-controls {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        width: auto;
    }
}

.sitestaffr-settings .sitestaffr-custom-greeting-locked {
    border: 1px solid #d7dde3;
    border-radius: 8px;
    background: #f7fafc;
    padding: 12px;
}

.sitestaffr-settings .sitestaffr-custom-greeting-locked p {
    margin: 0;
}

.sitestaffr-settings .sitestaffr-custom-greeting-locked .description {
    margin: 1rem 0;
}

.sitestaffr-settings .sitestaffr-custom-greeting-locked .dashicons {
    margin-right: 6px;
    color: #7a5b00;
}

.sitestaffr-settings .sitestaffr-custom-greeting-tone-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.sitestaffr-settings .sitestaffr-custom-greeting-tone-label {
    display: inline-block;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

.sitestaffr-settings .sitestaffr-custom-greeting-tone-select {
    min-width: 240px;
}

.sitestaffr-settings .sitestaffr-greeting-tone-preview-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sitestaffr-settings .sitestaffr-greeting-tone-preview-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Profile region help — says which agent actually reads each box. The pair of
   tooltips that used to carry this copy was never rendered (the view drops the
   field titles), so owners read the Detailed Profile as live agent knowledge. */
.sitestaffr-settings .sitestaffr-profile-region-help {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--sitestaffr-text-muted, #646970);
}

/* The Summary sits on the dark teal panel. */
.sitestaffr-settings .sitestaffr-profile-region--summary .sitestaffr-profile-region-help {
    color: #b9e6ec;
}

.sitestaffr-settings .sitestaffr-profile-region--summary .sitestaffr-profile-region-help a {
    color: #ffffff;
    text-decoration: underline;
}

/* ==========================================================================
   Dashboard "receptionist's desk" redesign (2026-07-14 spec)
   Follow-up slips, day-grouped activity, agent-health sidebar, compact header.
   ========================================================================== */

/* --- Follow-up "while you were out" slips --------------------------------- */
.sitestaffr-slip-list {
    display: flex;
    flex-direction: column;
}
.sitestaffr-slip {
    display: block;
    padding: 16px 0;
    border-bottom: 1px solid var(--sitestaffr-border-soft);
}
.sitestaffr-slip:first-child {
    padding-top: 4px;
}
.sitestaffr-slip:last-child {
    border-bottom: 0;
    padding-bottom: 4px;
}
.sitestaffr-slip-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.sitestaffr-slip-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--sitestaffr-teal-ink);
    letter-spacing: 0.01em;
}
.sitestaffr-slip-meta {
    font-size: 12px;
    color: var(--sitestaffr-text-muted);
    white-space: nowrap;
}
.sitestaffr-slip-recap {
    margin: 8px 0 12px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--sitestaffr-text-soft);
}
.sitestaffr-slip-recap p {
    margin: 0 0 6px;
    font-size: 13px;
}
.sitestaffr-slip-recap ul {
    margin: 6px 0 0 2px;
    padding: 0;
    list-style: none;
}
.sitestaffr-slip-recap li {
    margin: 0 0 4px;
    padding-left: 14px;
    position: relative;
}
.sitestaffr-slip-recap li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sitestaffr-teal-soft);
}
.sitestaffr-slip-view {
    margin-left: auto;
}
.sitestaffr-slip-view + .sitestaffr-slip-done {
    margin-left: 0;
}
.sitestaffr-slip-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sitestaffr-slip-action,
.sitestaffr-slip-done {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    line-height: 1;
    padding: 7px 10px;
    border-radius: 4px;
    text-decoration: none;
    border: 1px solid var(--sitestaffr-teal-soft);
    background: #fff;
    color: var(--sitestaffr-teal-dark);
    cursor: pointer;
}
.sitestaffr-slip-action:hover,
.sitestaffr-slip-action:focus {
    border-color: var(--sitestaffr-teal);
    color: var(--sitestaffr-teal-ink);
}
.sitestaffr-slip-action .dashicons,
.sitestaffr-slip-done .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}
.sitestaffr-slip-done {
    margin-left: auto;
    border-color: var(--sitestaffr-gray-line);
    color: var(--sitestaffr-text-muted);
}
.sitestaffr-slip-done:hover,
.sitestaffr-slip-done:focus {
    border-color: var(--sitestaffr-green);
    color: var(--sitestaffr-green);
}

/* --- Activity feed: day headers + brief group ------------------------------ */
.sitestaffr-day-header {
    margin: 14px 0 4px;
    padding: 0 4px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sitestaffr-text-muted);
    border-bottom: 1px solid var(--sitestaffr-border-soft);
}
.sitestaffr-activity-feed .sitestaffr-day-header:first-child {
    margin-top: 0;
}
.sitestaffr-brief-group {
    margin: 2px 0;
}
.sitestaffr-brief-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 10px;
    font-size: 12.5px;
    color: var(--sitestaffr-text-muted);
    background: transparent;
    border: 1px dashed var(--sitestaffr-gray-line);
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
}
.sitestaffr-brief-toggle:hover,
.sitestaffr-brief-toggle:focus {
    color: var(--sitestaffr-text-soft);
    border-color: var(--sitestaffr-gray-border);
}
.sitestaffr-brief-toggle .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}
.sitestaffr-brief-toggle .dashicons-arrow-down-alt2,
.sitestaffr-brief-toggle .dashicons-arrow-up-alt2 {
    margin-left: auto;
}
.sitestaffr-brief-items .sitestaffr-call-item {
    opacity: 0.75;
}

/* --- Minutes ring (AI Minutes tile) ---------------------------------------- */
.sitestaffr-dash-tile--minutes {
    position: relative;
}
.sitestaffr-minutes-ring {
    position: absolute;
    top: var(--sitestaffr-space-lg);
    right: var(--sitestaffr-space-lg);
    width: 58px;
    height: 58px;
    color: var(--sitestaffr-green);
}
.sitestaffr-dash-tile--minutes.status-medium .sitestaffr-minutes-ring { color: #f59e0b; }
.sitestaffr-dash-tile--minutes.status-critical .sitestaffr-minutes-ring { color: var(--sitestaffr-red); }
.sitestaffr-minutes-ring-track {
    fill: none;
    stroke: var(--sitestaffr-border);
    stroke-width: 4;
}
.sitestaffr-minutes-ring-fill {
    fill: none;
    stroke: currentColor;
    stroke-width: 4;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dasharray 0.4s ease;
}
.sitestaffr-minutes-ring-text {
    fill: var(--sitestaffr-text-soft);
    font-size: 11px;
    font-weight: 700;
    text-anchor: middle;
}

/* --- Sparkline area fill ---------------------------------------------------- */
.sitestaffr-sparkline-area {
    fill: currentColor;
    opacity: 0.12;
    stroke: none;
}

/* --- Follow-ups clear (slim reassurance bar when no follow-ups) ------------- */
.sitestaffr-followups-clear {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--sitestaffr-space-lg);
    padding: 12px 18px;
    background: #fff;
    border: 1px solid var(--sitestaffr-border);
    border-radius: var(--sitestaffr-radius);
    font-size: 13.5px;
    color: var(--sitestaffr-text-soft);
}
.sitestaffr-followups-clear .dashicons {
    flex: 0 0 auto;
    color: var(--sitestaffr-green);
    font-size: 20px;
    width: 20px;
    height: 20px;
}
.sitestaffr-followups-clear strong {
    color: var(--sitestaffr-text);
    font-weight: 700;
    margin-right: 4px;
}

@media (max-width: 782px) {
    .sitestaffr-slip-done {
        margin-left: 0;
    }
    .sitestaffr-slip-meta {
        white-space: normal;
    }
    .sitestaffr-minutes-ring {
        width: 46px;
        height: 46px;
    }
}
.sitestaffr-brief-items .sitestaffr-badge-new {
    display: none;
}

/* --- Columns: Activity (left) + Agent health / Quick Actions (right) ------- */
.sitestaffr-dash-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--sitestaffr-space-md);
    align-items: start;
}
.sitestaffr-dash-columns > .sitestaffr-widget {
    margin-bottom: 0;
}
/* Legacy order rules (old 30/70 grid) must not flip the columns grid. */
.sitestaffr-dash-columns > .sitestaffr-calls-widget {
    order: 0;
}
.sitestaffr-dash-columns-side {
    order: 1;
}
.sitestaffr-dash-columns-side {
    display: flex;
    flex-direction: column;
    gap: var(--sitestaffr-space-md);
}
.sitestaffr-dash-columns-side .sitestaffr-widget {
    margin-bottom: 0;
    min-height: 0;
}
@media (max-width: 1100px) {
    .sitestaffr-dash-columns {
        grid-template-columns: 1fr;
    }
}

/* --- Agent Health rows -----------------------------------------------------
   Affordance system (this section only): a CREAM row is a status read-out
   (static, not clickable); a WHITE row is a fix to act on (link, arrow, hover).
   A healthy agent shows all-cream — visibly calmer and distinct from the
   all-white Quick Actions list beside it. */
.sitestaffr-health-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px 20px;
}
.sitestaffr-health-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--sitestaffr-radius-sm, 8px);
    text-decoration: none;
    color: var(--sitestaffr-text);
}
.sitestaffr-health-row .sitestaffr-sidebar-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--hr-bg);
    color: var(--hr-fg);
}
.sitestaffr-health-row .sitestaffr-sidebar-icon .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}
.sitestaffr-health-row .sitestaffr-sidebar-content { flex: 1; min-width: 0; }
.sitestaffr-health-row .sitestaffr-action-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sitestaffr-text);
}
.sitestaffr-health-row .sitestaffr-action-desc {
    font-size: 12px;
    color: var(--sitestaffr-text-muted);
    margin-top: 1px;
}
.sitestaffr-health-row > .dashicons-arrow-right-alt2 {
    flex-shrink: 0;
    color: var(--sitestaffr-text-muted);
}

/* Status icon tints */
.sitestaffr-health-row.is-ok   { --hr-bg: #E7F7EF; --hr-fg: #0B7A4B; }
.sitestaffr-health-row.is-warn { --hr-bg: #FBF3DD; --hr-fg: #8A6116; }
.sitestaffr-health-row.is-bad  { --hr-bg: #FDECEC; --hr-fg: #B42318; }

/* Agent Health container: cream/transparent like Quick Actions (not a white
   block), so the two sidebar widgets read as one system. */
.sitestaffr-health-widget {
    background: transparent;
    border-color: #e0e0e0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

/* Cream = status read-out (not clickable). A firmer border keeps it defined
   against the cream container. */
.sitestaffr-health-row.is-static {
    background: var(--sitestaffr-bg-alt);
    border: 1px solid var(--sitestaffr-border);
    cursor: default;
}

/* White = a fix to act on (clickable) */
a.sitestaffr-health-row {
    background: #fff;
    border: 1px solid var(--sitestaffr-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
a.sitestaffr-health-row:hover,
a.sitestaffr-health-row:focus {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
    color: var(--sitestaffr-text);
}
a.sitestaffr-health-row.is-bad:hover,
a.sitestaffr-health-row.is-bad:focus { border-color: #E6A5A5; }
a.sitestaffr-health-row.is-warn:hover,
a.sitestaffr-health-row.is-warn:focus { border-color: #E3C878; }

/* --- Unread Activity rows: visible tint so unread reads at a glance --- */
.sitestaffr-activity-feed .sitestaffr-call-item.sitestaffr-call-unread {
    background: var(--sitestaffr-teal-light);
    border-color: var(--sitestaffr-teal-soft);
}
/* Junk rows inside the collapsed brief group never shout, unread or not. */
.sitestaffr-brief-items .sitestaffr-call-item.sitestaffr-call-unread {
    background: var(--sitestaffr-bg-alt);
    border-color: var(--sitestaffr-border-soft);
}
.sitestaffr-activity-feed .sitestaffr-call-item.sitestaffr-call-unread:hover {
    background: #fff;
}

/* --- Metric tiles are all links now --- */
a.sitestaffr-dash-tile {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
a.sitestaffr-dash-tile:hover,
a.sitestaffr-dash-tile:focus {
    border-color: var(--sitestaffr-teal);
    box-shadow: var(--sitestaffr-shadow-pop);
    color: var(--sitestaffr-text);
}
