/**
 * ShefaDash Frontend Styles
 * Standalone — no WP admin CSS dependency.
 */

/* ---- Reset ---- */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ---- Body ---- */
body.shefadash-standalone {
    margin: 0;
    padding: 0;
    background: #f0f0f1;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #1d2327;
    line-height: 1.5;
}

/* ---- Shared "thinking" dots ----
   Base sizing + bounce for the three-dot AI processing indicator, used by
   every Alfred surface (Monthly Reports summary, AI Insights, Ask Alfred).
   Defined here in the always-enqueued base stylesheet so the dots are visible
   regardless of which page-specific CSS is loaded. Surfaces may still override
   the color via a scoped `.shefadash-typing-dot { background: … }` rule. */
.shefadash-typing-dot {
    width: 8px;
    height: 8px;
    background: #8b5cf6;
    border-radius: 50%;
    animation: shefadash-typing-bounce 1.2s ease-in-out infinite;
}
.shefadash-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.shefadash-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes shefadash-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30%           { transform: translateY(-5px); opacity: 1; }
}

/* ---- Layout Wrapper (login page) ---- */
.shefadash-frontend-wrap {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

/* ---- Dashboard Shell ---- */
.shefadash-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ---- Topbar ---- */
.shefadash-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    background: #fff;
    border-bottom: 1px solid #c3c4c7;
    padding: 0 20px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.shefadash-topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.shefadash-topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.shefadash-topbar-logos {
    display: flex;
    align-items: center;
    gap: 12px;
}

.shefadash-topbar-logo-panda {
    height: 32px;
    width: auto;
}

.shefadash-topbar-logo-studios {
    height: 32px;
    width: auto;
    border-radius: 4px;
}

/* ---- Hamburger Menu Toggle ---- */
.shefadash-menu-toggle {
    display: none; /* Hidden on desktop */
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 36px;
    height: 36px;
    padding: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.shefadash-menu-toggle:hover {
    background: #f0f0f1;
}

.shefadash-menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: #1d2327;
    border-radius: 1px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.shefadash-user-greeting {
    font-size: 14px;
    color: #1d2327;
}

.shefadash-logout-btn {
    display: inline-block;
    padding: 6px 16px;
    background: #d63638;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s ease;
}

.shefadash-logout-btn:hover {
    background: #b32d2e;
    color: #fff;
}

/* ---- Sidebar ---- */
.shefadash-sidebar {
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    width: 230px;
    background: #fff;
    border-right: 1px solid #c3c4c7;
    z-index: 900;
    overflow-y: auto;
    transition: transform 0.25s ease;
}

.shefadash-nav {
    list-style: none;
    margin: 0;
    padding: 12px 0;
}

.shefadash-nav li {
    margin: 0;
    padding: 0;
}

.shefadash-nav li.shefadash-nav-section {
    margin-top: 20px;
    padding: 14px 20px 6px 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.shefadash-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: #646970;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

/* Texts inbox unread badge (#168). Lives here, not in the lazy-loaded inbox
   stylesheet, because it shows on every page. */
/* Workflows waiting badge (#380), same reason. */
.sd-inbox-nav-count,
.sd-wf-nav-count {
    margin-left: auto;
    background: #2271b1;
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 7px;
    min-width: 20px;
    text-align: center;
}

.shefadash-nav-link:hover {
    color: #1d2327;
    background: #f6f7f7;
}

.shefadash-nav-link.is-active {
    color: #2271b1;
    background: #f0f6fc;
    border-left-color: #2271b1;
    font-weight: 600;
}

.shefadash-nav-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.shefadash-nav-label {
    white-space: nowrap;
}

.shefadash-nav-badge {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 8px;
    background: #f0ebe4;
    color: #8a8680;
    margin-left: 6px;
    white-space: nowrap;
}

.shefadash-nav-section {
    pointer-events: none;
}

.shefadash-nav li.shefadash-nav-divider {
    margin: 8px 20px;
    border-top: 1px dashed rgba(0, 0, 0, 0.15);
}

.shefadash-nav-section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9e9a91;
}

/* ---- Collapsible nav section ---- */
.shefadash-nav li.shefadash-nav-section-toggle {
    pointer-events: auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    user-select: none;
}

.shefadash-nav li.shefadash-nav-section-toggle:hover .shefadash-nav-section-label,
.shefadash-nav li.shefadash-nav-section-toggle:hover .shefadash-nav-section-caret {
    color: #646970;
}

.shefadash-nav-section-caret {
    flex-shrink: 0;
    color: #9e9a91;
    transform: rotate(90deg);
    transition: transform 0.15s ease;
}

.shefadash-nav li.shefadash-nav-section-toggle.is-collapsed .shefadash-nav-section-caret {
    transform: rotate(0deg);
}

.shefadash-nav li.shefadash-nav-section-toggle.is-collapsed ~ li.shefadash-nav-proto-item {
    display: none;
}

/* ---- Sidebar Backdrop (mobile) ---- */
.shefadash-sidebar-backdrop {
    display: none;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 899;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.shefadash-sidebar-backdrop.is-visible {
    opacity: 1;
}

/* ---- Main Content Area ---- */
.shefadash-content {
    margin-top: 56px;
    margin-left: 230px;
    padding: 24px;
    min-height: calc(100vh - 56px);
    background: #f0f0f1;
}

/* ---- Page Containers ---- */
.shefadash-page {
    max-width: 100%;
}

.shefadash-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.shefadash-page-header .shefadash-sync-controls {
    margin-bottom: 0;
}

.shefadash-page-title {
    margin: 0;
    font-size: 1.6em;
    font-weight: 600;
}

/* ---- Reset Filters Button ---- */
.shefadash-reset-filters-btn {
    margin-left: auto;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, background .15s, border-color .15s;
}
.shefadash-reset-filters-btn:hover {
    color: #1f2937;
    background: #e5e7eb;
    border-color: #9ca3af;
}

/* ---- Login ---- */
.shefadash-login-container {
    max-width: 400px;
    margin: 80px auto;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    padding: 32px 40px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.shefadash-login-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 28px;
}

.shefadash-login-logo-panda {
    height: 72px;
    width: auto;
}

.shefadash-login-logo-studios {
    height: 72px;
    width: auto;
    border-radius: 10px;
    overflow: hidden;
}

.shefadash-login-container .login-username,
.shefadash-login-container .login-password {
    margin-bottom: 16px;
}

.shefadash-login-container label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
    color: #1d2327;
}

.shefadash-login-container input[type="text"],
.shefadash-login-container input[type="password"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #8c8f94;
    border-radius: 3px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.shefadash-login-container input[type="text"]:focus,
.shefadash-login-container input[type="password"]:focus {
    border-color: #2271b1;
    outline: none;
    box-shadow: 0 0 0 1px #2271b1;
}

.shefadash-login-container .login-remember {
    margin-bottom: 16px;
    font-size: 13px;
}

.shefadash-login-container .login-remember label {
    font-weight: normal;
    display: inline;
}

.shefadash-login-container input[type="submit"] {
    width: 100%;
    padding: 10px 16px;
    background: #2271b1;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.shefadash-login-container input[type="submit"]:hover {
    background: #135e96;
}

.shefadash-lost-password {
    text-align: center;
    margin-top: 16px;
    font-size: 13px;
}

.shefadash-lost-password a {
    color: #2271b1;
    text-decoration: none;
}

.shefadash-lost-password a:hover {
    text-decoration: underline;
}

/* ---- Studio Tabs ---- */
.shefadash-studio-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    padding: 4px 0 12px;
    border-bottom: 1px solid #e0e0e0;
    align-items: center;
}

.shefadash-studio-tab {
    padding: 7px 18px;
    border: 1.5px solid #dde0e4;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: #646970;
    cursor: pointer;
    border-radius: 20px;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
    white-space: nowrap;
    line-height: 1.4;
}

.shefadash-studio-tab:hover {
    color: #2271b1;
    border-color: #2271b1;
    background: #f0f6fc;
}

.shefadash-studio-tab.is-active {
    color: #fff;
    background: #2271b1;
    border-color: #2271b1;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(34, 113, 177, 0.25);
}

/* ---- Month Picker (header control) ---- */
.shefadash-mr-month-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-right: auto;
    background: #fff;
    border: 1.5px solid #dde0e4;
    border-radius: 22px;
    padding: 2px 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.shefadash-mr-mp-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    color: #646970;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.shefadash-mr-mp-arrow:hover {
    background: #f0f6fc;
    color: #2271b1;
}

.shefadash-mr-mp-label {
    padding: 4px 12px;
    border: none;
    border-radius: 16px;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: #1d2327;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: all 0.15s ease;
}

.shefadash-mr-mp-label:hover {
    color: #2271b1;
}

/* Dropdown panel */
.shefadash-mr-mp-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    padding: 12px;
    z-index: 100;
    min-width: 240px;
}

.shefadash-mr-mp-year-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.shefadash-mr-mp-year-label {
    font-size: 15px;
    font-weight: 600;
    color: #1d2327;
}

.shefadash-mr-mp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.shefadash-mr-mp-cell {
    padding: 7px 0;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: #1d2327;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    transition: all 0.15s ease;
}

.shefadash-mr-mp-cell:hover {
    border-color: #2271b1;
    color: #2271b1;
}

.shefadash-mr-mp-cell.is-active {
    background: #2271b1;
    border-color: #2271b1;
    color: #fff;
}

.shefadash-mr-mp-cell.is-active:hover {
    background: #135e96;
    border-color: #135e96;
}

/* ---- Generic Header Picker (year arrows & dropdown selects) ---- */
.shefadash-header-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-right: auto;
    background: #fff;
    border: 1.5px solid #dde0e4;
    border-radius: 22px;
    padding: 2px 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.shefadash-hp-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    color: #646970;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.shefadash-hp-arrow:hover {
    background: #f0f6fc;
    color: #2271b1;
}

.shefadash-hp-label {
    padding: 4px 12px;
    border: none;
    border-radius: 16px;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: #1d2327;
    white-space: nowrap;
    font-family: inherit;
    transition: all 0.15s ease;
}

.shefadash-hp-label-select {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.shefadash-hp-label-select:hover {
    color: #2271b1;
}

.shefadash-hp-caret {
    font-size: 10px;
    line-height: 1;
    transition: transform 0.15s ease;
}

.shefadash-header-picker-dropdown.is-open .shefadash-hp-caret {
    transform: rotate(180deg);
}

/* Dropdown panel */
.shefadash-hp-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    padding: 4px 0;
    z-index: 100;
    min-width: 160px;
}

.shefadash-hp-option {
    display: block;
    width: 100%;
    padding: 8px 16px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: #1d2327;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.1s ease;
}

.shefadash-hp-option:hover {
    background: #f0f6fc;
    color: #2271b1;
}

.shefadash-hp-option.is-active {
    background: #2271b1;
    color: #fff;
}

.shefadash-hp-option.is-active:hover {
    background: #135e96;
}

/* ---- Cards ---- */
.shefadash-card {
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    padding: 20px 24px;
    margin-bottom: 20px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.shefadash-card h2 {
    margin-top: 0;
    padding: 0;
    font-size: 1.3em;
}

/* ---- Notice ---- */
.shefadash-notice {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.shefadash-notice-warning {
    background: #fcf9e8;
    border: 1px solid #dba617;
    color: #6e4e00;
}

.shefadash-notice p {
    margin: 0;
}

/* ---- Buttons ---- */
.shefadash-btn {
    display: inline-block;
    padding: 8px 20px;
    border: none;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.4;
    transition: background 0.15s ease;
    font-family: inherit;
}

.shefadash-btn-primary {
    background: #2271b1;
    color: #fff;
}

.shefadash-btn-primary:hover {
    background: #135e96;
}

.shefadash-btn-primary:disabled {
    background: #a7aaad;
    cursor: not-allowed;
}

.shefadash-btn-secondary {
    background: #f0f0f1;
    color: #1d2327;
    border: 1px solid #c3c4c7;
}

.shefadash-btn-secondary:hover {
    background: #e0e0e0;
}

.shefadash-btn-secondary:disabled {
    color: #a7aaad;
    cursor: not-allowed;
}

.shefadash-btn-outline {
    background: transparent;
    color: #2271b1;
    border: 1px solid #2271b1;
}

.shefadash-btn-outline:hover {
    background: #f0f7fc;
}

.shefadash-btn-outline:disabled {
    color: #a7aaad;
    border-color: #c3c4c7;
    cursor: not-allowed;
}

.shefadash-btn-small {
    padding: 4px 12px;
    font-size: 12px;
}

/* ---- Result messages ---- */
.shefadash-result {
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.5;
}

.shefadash-result.success {
    background: #edfaef;
    border: 1px solid #00a32a;
    color: #0a3622;
}

.shefadash-result.error {
    background: #fcf0f1;
    border: 1px solid #d63638;
    color: #8a1215;
}

.shefadash-result.warning {
    background: #fcf9e8;
    border: 1px solid #dba617;
    color: #7a5b00;
}

.shefadash-result.loading {
    background: #f0f6fc;
    border: 1px solid #72aee6;
    color: #135e96;
}

/* ---- Spinner ---- */
.shefadash-spinner {
    display: none;
    width: 20px;
    height: 20px;
    border: 3px solid #f0f0f1;
    border-top-color: #2271b1;
    border-radius: 50%;
    animation: shefadash-spin 0.8s linear infinite;
}

.shefadash-spinner.is-active {
    display: inline-block;
}

@keyframes shefadash-spin {
    to { transform: rotate(360deg); }
}

/* ---- P&L Report Header ---- */
.shefadash-pnl-header {
    margin-bottom: 16px;
}

.shefadash-pnl-header h2 {
    margin: 0 0 4px;
    font-size: 1.4em;
}

.shefadash-pnl-subtitle {
    color: #646970;
    margin: 0;
    font-size: 14px;
}

/* ---- Sync Controls ---- */
.shefadash-std-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}

.shefadash-sync-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.shefadash-sync-status {
    color: #8c8f94;
    font-size: 12px;
    font-style: italic;
}

/* Make sync/get-latest buttons look crisper */
.shefadash-sync-controls .shefadash-btn-secondary {
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 20px;
    border-color: #c3c4c7;
    background: #fff;
}

.shefadash-sync-controls .shefadash-btn-secondary:hover {
    background: #f0f6fc;
    border-color: #2271b1;
    color: #2271b1;
}

/* ---- Standardized P&L Card ---- */
.shefadash-std-card {
    max-width: none;
}

/* Scroll container */
.shefadash-std-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---- Standardized P&L Table ---- */
.shefadash-std-table {
    border-collapse: collapse;
    font-size: 13px;
    min-width: 1200px;
    width: 100%;
}

.shefadash-std-table th {
    background: #f0f0f1;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 10px 8px;
    text-align: right;
    white-space: nowrap;
}

.shefadash-std-label-col {
    text-align: left !important;
    min-width: 280px;
    position: sticky;
    left: 0;
    z-index: 2;
    background: #f0f0f1;
}

.shefadash-std-amount-col {
    min-width: 85px;
}

.shefadash-std-total-col {
    background: #f6f7f7 !important;
    font-weight: 600;
    border-left: 2px solid #c3c4c7;
}

/* Rows */
.shefadash-std-row td {
    padding: 5px 8px;
    border-bottom: 1px solid #f0f0f1;
}

.shefadash-std-label {
    text-align: left;
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
    white-space: nowrap;
}

.shefadash-std-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.shefadash-std-negative {
    color: #d63638;
}

/* Income row — neutral */
.shefadash-std-income-row td {
    background: #f6f7f7;
    font-weight: 600;
    border-bottom: 2px solid #8c8f94;
}

.shefadash-std-income-row .shefadash-std-label {
    background: #f6f7f7;
}

/* Section headers */
.shefadash-std-section-header td {
    padding: 12px 8px 6px;
    font-size: 13px;
    color: #1d2327;
    border-bottom: 2px solid #c3c4c7;
    background: #fff;
}

/* Subtotal: G&A total row — neutral */
.shefadash-std-subtotal td {
    border-top: 1px solid #c3c4c7;
    background: #f6f7f7;
}

.shefadash-std-subtotal .shefadash-std-label {
    background: #f6f7f7;
}

.shefadash-std-ga-total td {
    background: #f6f7f7;
}

.shefadash-std-ga-total .shefadash-std-label {
    background: #f6f7f7;
}

/* Total Expenses row — neutral */
.shefadash-std-total-expenses td {
    border-top: 2px solid #1d2327;
    border-bottom: 2px solid #1d2327;
    background: #f6f7f7;
    font-size: 13px;
}

.shefadash-std-total-expenses .shefadash-std-label {
    background: #f6f7f7;
}

/* Net Operating Income — lavender (Operating Breakeven family) */
.shefadash-std-noi td {
    background: #eee8ff;
    font-size: 14px;
}

.shefadash-std-noi .shefadash-std-label {
    background: #eee8ff;
}

/* Info icon for tooltips (Unicode circle-i instead of dashicons) */
.shefadash-info-icon {
    font-size: 14px;
    vertical-align: middle;
    color: #a7aaad;
    cursor: help;
    margin-left: 4px;
    font-style: normal;
}

/* Custom tooltip bubble */
.shefadash-tooltip-bubble {
    position: absolute;
    z-index: 100000;
    max-width: 280px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.4;
    color: #fff;
    background: #1d2327;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    white-space: normal;
}

.shefadash-tooltip-bubble.is-visible {
    opacity: 1;
}

/* Below-the-line items */
.shefadash-std-below-line td {
    color: #646970;
    font-style: italic;
}

/* True NOI — light magenta (True Operating Breakeven family) */
.shefadash-std-true-noi td {
    background: #f3d1f9;
    border-top: 1px solid #c86ad8;
}

.shefadash-std-true-noi .shefadash-std-label {
    background: #f3d1f9;
}

/* Net Income — light green (Breakeven family) */
.shefadash-std-net-income td {
    background: #ddefcf;
    border-top: 1px solid #8cbf6e;
}

.shefadash-std-net-income .shefadash-std-label {
    background: #ddefcf;
}

/* True Net Income — light mint (True Breakeven family) */
.shefadash-std-true-net td {
    background: #c2f0cb;
    border-top: 1px solid #4cc764;
    border-bottom: 2px solid #4cc764;
}

.shefadash-std-true-net .shefadash-std-label {
    background: #c2f0cb;
}

/* Uncategorized row highlight */
.shefadash-std-uncategorized td {
    background: #fef8ee;
}

.shefadash-std-uncategorized .shefadash-std-label {
    background: #fef8ee;
}

/* Spacer */
.shefadash-std-spacer td {
    height: 8px;
    border: none;
    padding: 0;
}

/* Section divider — thick border separating main P&L from summary sections */
.shefadash-std-section-divider td {
    height: 4px;
    background: #1d2327;
    border: none;
    padding: 0;
}

/* Lavender rows — Operating Breakeven / NOI family */
.shefadash-std-lavender td {
    background: #eee8ff;
}

.shefadash-std-lavender .shefadash-std-label {
    background: #eee8ff;
}

/* Light magenta rows — True Operating Breakeven / True NOI family */
.shefadash-std-magenta td {
    background: #f3d1f9;
}

.shefadash-std-magenta .shefadash-std-label {
    background: #f3d1f9;
}

/* Light green rows — Breakeven / Net Income family */
.shefadash-std-green td {
    background: #ddefcf;
}

.shefadash-std-green .shefadash-std-label {
    background: #ddefcf;
}

/* Light mint rows — True Breakeven / True Net Income family */
.shefadash-std-mint td {
    background: #c2f0cb;
}

.shefadash-std-mint .shefadash-std-label {
    background: #c2f0cb;
}

/* ---- P&L View Toggle (Monthly / Cumulative) ---- */
.shefadash-pnl-view-toggle {
    display: flex;
    gap: 0;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.shefadash-pnl-view-btn {
    background: #fff;
    border: none;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #50575e;
    cursor: pointer;
    line-height: 1.4;
    transition: background 0.1s, color 0.1s;
}

.shefadash-pnl-view-btn + .shefadash-pnl-view-btn {
    border-left: 1px solid #c3c4c7;
}

.shefadash-pnl-view-btn:hover {
    background: #f6f7f7;
    color: #1d2327;
}

.shefadash-pnl-view-btn.is-active {
    background: #2271b1;
    color: #fff;
}

/* ---- Grouped month header (two-row layout) ---- */
th.shefadash-std-month-group {
    text-align: center;
    font-weight: 600;
    border-bottom: 1px solid #c3c4c7;
    border-left: 1px solid #dcdcde;
    padding: 5px 8px;
    white-space: nowrap;
}

th.shefadash-std-month-group:first-of-type {
    border-left: none;
}

th.shefadash-std-subheader {
    font-size: 11px;
    font-weight: 400;
    color: #646970;
    padding: 3px 8px 4px;
    border-top: none;
}

/* ---- Delta $ column ---- */
th.shefadash-std-delta-header {
    color: #646970;
    font-style: italic;
    min-width: 70px;
    border-left: 1px dashed #dcdcde;
}

td.shefadash-std-delta-col {
    min-width: 70px;
    border-left: 1px dashed #dcdcde;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding: 0 !important; /* inner span handles padding */
}

td.shefadash-std-delta-col span,
td.shefadash-std-delta-col strong {
    display: block;
    padding: 5px 8px;
    border-radius: 3px;
}

/* ---- Future month columns (current year only) ---- */
th.shefadash-std-future-col {
    color: #a7aaad !important;
    opacity: 0.6;
}

td.shefadash-std-future-col {
    background: #fafafa !important;
    color: #c3c4c7 !important;
}

.shefadash-std-future-val {
    color: #c3c4c7;
}

/* ---- WordPress Admin Bar Offset ---- */
.admin-bar .shefadash-topbar {
    top: 32px;
}

.admin-bar .shefadash-sidebar {
    top: 88px; /* 32px admin bar + 56px topbar */
}

.admin-bar .shefadash-sidebar-backdrop {
    top: 88px;
}

.admin-bar .shefadash-content {
    margin-top: 88px;
}

.admin-bar .shefadash-login-container {
    margin-top: 48px;
}

@media screen and (max-width: 782px) {
    .admin-bar .shefadash-topbar {
        top: 46px;
    }

    .admin-bar .shefadash-sidebar {
        top: 102px; /* 46px admin bar + 56px topbar */
    }

    .admin-bar .shefadash-sidebar-backdrop {
        top: 102px;
    }

    .admin-bar .shefadash-content {
        margin-top: 102px;
    }
}

/* =========================================================================
   REVENUE GOALS PAGE
   ========================================================================= */

/* Pie chart + table side-by-side layout */
.shefadash-pie-layout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

@media (max-width: 900px) {
    .shefadash-pie-layout {
        flex-direction: column;
    }

    #shefadash-revenue-pie-chart {
        width: 100% !important;
        flex: none !important;
    }

    #shefadash-revenue-pie-table-container {
        min-width: 0 !important;
        width: 100%;
        overflow-x: auto;
    }
}

/* Pie companion table */
.shefadash-pie-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.shefadash-pie-table th {
    background: #f0f0f1;
    padding: 6px 8px;
    font-weight: 600;
    border-bottom: 2px solid #c3c4c7;
    font-size: 12px;
    white-space: nowrap;
}

.shefadash-pie-table td {
    padding: 5px 8px;
    border-bottom: 1px solid #f0f0f1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.shefadash-pie-table-row {
    cursor: pointer;
    transition: background 0.12s;
}

.shefadash-pie-table-row:hover,
.shefadash-pie-table-row.is-highlighted {
    background: #eef3f8;
}

.shefadash-pie-table-total td {
    border-top: 2px solid #1d2327;
    padding: 8px 8px;
}

.shefadash-pie-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    vertical-align: middle;
}

/* Studio chart tabs */
.shefadash-chart-studio-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 16px;
    border-bottom: 2px solid #c3c4c7;
}

.shefadash-chart-studio-tab {
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #50575e;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    font-family: inherit;
}

.shefadash-chart-studio-tab:hover {
    color: #2271b1;
}

.shefadash-chart-studio-tab.is-active {
    color: #2271b1;
    border-bottom-color: #2271b1;
}

/* =========================================================================
   TEACHERS PAGE
   ========================================================================= */

/* Summary stats */
.shefadash-teachers-summary-row {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.shefadash-teachers-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px;
}

.shefadash-teachers-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #1d2327;
    line-height: 1.2;
}

.shefadash-teachers-stat-label {
    font-size: 12px;
    color: #646970;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Period pill filter */
.shefadash-teachers-period-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}

.shefadash-teachers-pill {
    padding: 6px 16px;
    border: 1px solid #c3c4c7;
    border-radius: 20px;
    background: #fff;
    color: #50575e;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.shefadash-teachers-pill:hover {
    border-color: #2271b1;
    color: #2271b1;
}

.shefadash-teachers-pill.is-active {
    background: #2271b1;
    border-color: #2271b1;
    color: #fff;
}

/* Filter bar */
.shefadash-teachers-filter-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.shefadash-teachers-search {
    width: 100%;
    min-width: 240px;
    padding: 6px 10px;
    border: 1px solid #8c8f94;
    border-radius: 3px;
    font-size: 14px;
    font-family: inherit;
}

.shefadash-teachers-search:focus {
    border-color: #2271b1;
    outline: none;
    box-shadow: 0 0 0 1px #2271b1;
}

/* Teachers data table */
.shefadash-teachers-data-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
}

.shefadash-teachers-data-table th {
    background: #f0f0f1;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 10px 8px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 2px solid #c3c4c7;
}

.shefadash-teachers-data-table td {
    padding: 8px;
    border-bottom: 1px solid #f0f0f1;
    vertical-align: middle;
}

.shefadash-teachers-data-table tbody tr:hover td {
    background: #f6f7f7;
}

.shefadash-teachers-data-table a {
    color: #2271b1;
    text-decoration: none;
}

.shefadash-teachers-data-table a:hover {
    text-decoration: underline;
}

.shefadash-teachers-data-table .shefadash-teachers-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.shefadash-teachers-sortable {
    cursor: pointer;
    user-select: none;
}

.shefadash-teachers-sortable:hover {
    color: #2271b1;
}

/* Photo */
.shefadash-teachers-photo-cell {
    width: 44px;
    padding: 4px 8px !important;
}

.shefadash-teachers-photo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.shefadash-teachers-photo-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #dcdcde;
    color: #50575e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
}


/* =========================================================================
   REVENUE GOALS KPI ROW
   ========================================================================= */

.shefadash-rev-kpi-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.shefadash-rev-kpi-card {
    border-radius: 6px;
    padding: 18px 20px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.shefadash-rev-kpi-title {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1d2327;
    margin-bottom: 6px;
}

.shefadash-rev-kpi-value {
    font-size: 26px;
    font-weight: 700;
    color: #1d2327;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

/* Stats area below the value */
.shefadash-rev-kpi-stats {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.shefadash-rev-kpi-stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    color: #50575e;
    padding: 2px 0;
}

.shefadash-rev-kpi-stat-label {
    font-weight: 400;
}

.shefadash-rev-kpi-stat-val {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.shefadash-rev-kpi-stat-val.positive { color: #00a32a; }
.shefadash-rev-kpi-stat-val.negative { color: #d63638; }

/* Card background colors */
.shefadash-rev-kpi--ly         { background: #f0f0f0; }
.shefadash-rev-kpi--op-be      { background: #eee8ff; }
.shefadash-rev-kpi--true-op-be { background: #f3d1f9; }
.shefadash-rev-kpi--be         { background: #ddefcf; }
.shefadash-rev-kpi--true-be    { background: #c2f0cb; }

/* =========================================================================
   MONTHLY REPORT PAGE
   ========================================================================= */

/* (Month pills removed — replaced by header month picker) */

/* ---- KPI Cards Row ---- */
.shefadash-mr-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.shefadash-mr-kpi-card {
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.shefadash-mr-kpi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.shefadash-mr-kpi-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #646970;
}

.shefadash-mr-kpi-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.shefadash-mr-kpi-dot.shefadash-mr-status-green { background: #00a32a; box-shadow: 0 0 4px rgba(0, 163, 42, 0.4); }
.shefadash-mr-kpi-dot.shefadash-mr-status-yellow { background: #dba617; box-shadow: 0 0 4px rgba(219, 166, 23, 0.4); }
.shefadash-mr-kpi-dot.shefadash-mr-status-red { background: #d63638; box-shadow: 0 0 4px rgba(214, 54, 56, 0.4); }

.shefadash-mr-kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: #1d2327;
    margin-bottom: 12px;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.shefadash-mr-kpi-cmp-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 6px;
    align-items: baseline;
    font-size: 11px;
    padding: 3px 0;
    border-top: 1px solid #f0f0f1;
}

.shefadash-mr-kpi-cmp-label {
    color: #646970;
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.shefadash-mr-kpi-cmp-square {
    font-size: 9px;
    line-height: 1;
    flex-shrink: 0;
}

.shefadash-mr-kpi-cmp-label .shefadash-info-icon {
    font-size: 10px;
    margin-left: 1px;
    flex-shrink: 0;
}

.shefadash-mr-kpi-cmp-base {
    color: #50575e;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.shefadash-mr-kpi-cmp-delta {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* ---- AI Report Summary Card ---- */
.shefadash-mr-ai-summary {
    background: linear-gradient(135deg, #faf8ff 0%, #f0f4ff 100%);
    border: 1px solid #c3b8e8;
    border-radius: 6px;
    margin-bottom: 20px;
    overflow: hidden;
}
.shefadash-mr-ai-summary-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(139, 92, 246, 0.08);
    border-bottom: 1px solid #ddd6f3;
}
.shefadash-mr-ai-summary-icon {
    font-size: 18px;
}
.shefadash-mr-ai-summary-title {
    font-weight: 600;
    font-size: 14px;
    color: #5b21b6;
    flex: 1;
}
.shefadash-mr-ai-summary-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #888;
    line-height: 1;
    padding: 0 4px;
}
.shefadash-mr-ai-summary-close:hover {
    color: #333;
}
.shefadash-mr-ai-summary-body {
    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.7;
    color: #1d2327;
}
.shefadash-mr-ai-summary-body p {
    margin: 0 0 10px;
}
.shefadash-mr-ai-summary-body p:last-child {
    margin-bottom: 0;
}
.shefadash-mr-ai-summary-body ul {
    margin: 6px 0 10px 20px;
    padding: 0;
}
.shefadash-mr-ai-summary-body li {
    margin-bottom: 4px;
}
.shefadash-mr-ai-summary-body strong {
    color: #1e1e1e;
}
.shefadash-mr-ai-summary-body table.shefadash-mr-ai-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 13px;
}
.shefadash-mr-ai-table th,
.shefadash-mr-ai-table td {
    padding: 6px 10px;
    border: 1px solid #ddd6f3;
    text-align: left;
}
.shefadash-mr-ai-table th {
    background: rgba(139, 92, 246, 0.06);
    font-weight: 600;
}
.shefadash-mr-ai-summary-footer {
    padding: 8px 16px;
    font-size: 11px;
    color: #8b8b9a;
    border-top: 1px solid #ddd6f3;
    text-align: right;
}
.shefadash-mr-ai-error {
    color: #d63638;
    margin: 0;
}
.shefadash-mr-ai-loading {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
}
.shefadash-mr-ai-loading .shefadash-typing-dot {
    background: #8b5cf6;
}

/* ---- Projected E21 Toggle ---- */
.shefadash-mr-projected-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #1d2327;
}
.shefadash-mr-projected-toggle label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 500;
    margin: 0;
}
.shefadash-mr-projected-toggle input[type="checkbox"] {
    margin: 0;
}

/* ---- Net Income Summary Bar ---- */
.shefadash-mr-net-bar {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex-wrap: wrap;
    padding: 0;
}

.shefadash-mr-net-group {
    flex: 1 1 0;
    min-width: 180px;
    padding: 14px 20px;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}
.shefadash-mr-net-group:last-child { border-right: none; }

.shefadash-mr-net-group-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    color: #1d2327;
    text-align: center;
}

.shefadash-mr-net-pair {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.shefadash-mr-net-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}

.shefadash-mr-net-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #646970;
}

.shefadash-mr-net-value {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.shefadash-mr-net-value.positive { color: #00a32a; }
.shefadash-mr-net-value.negative { color: #d63638; }

/* Theme colors — match PNL table rows */
.shefadash-mr-net--noi      { background: #eee8ff; }
.shefadash-mr-net--true-noi { background: #f3d1f9; }
.shefadash-mr-net--ni       { background: #ddefcf; }
.shefadash-mr-net--true-ni  { background: #c2f0cb; }

/* ---- Monthly Snapshot Bar Charts ---- */
.shefadash-mr-bar-charts-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.shefadash-mr-bar-chart-card {
    flex: 1;
    min-width: 0;
}

/* ---- Chart Header + Toggle ---- */
.shefadash-mr-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.shefadash-mr-chart-header h3 {
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
}

.shefadash-mr-chart-toggle-wrap {
    display: flex;
    gap: 0;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    overflow: hidden;
}

.shefadash-mr-chart-mode {
    padding: 5px 16px;
    font-size: 12px;
    font-weight: 500;
    border: none;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    color: #1d2327;
    transition: background 0.15s ease, color 0.15s ease;
    border-right: 1px solid #c3c4c7;
}

.shefadash-mr-chart-mode:last-child { border-right: none; }

.shefadash-mr-chart-mode:hover {
    background: #f0f6fc;
}

.shefadash-mr-chart-mode.is-active {
    background: #2271b1;
    color: #fff;
}

/* Delta coloring */
.shefadash-mr-delta-positive {
    color: #00a32a;
}

.shefadash-mr-delta-negative {
    color: #d63638;
}


/* ---- P&L label collapse popover ---- */
.shefadash-label-popover {
    position: fixed;
    background: #1d2327;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 9px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.1s;
    max-width: 200px;
    white-space: normal;
}
.shefadash-label-popover.is-visible {
    opacity: 1;
}

/* ---- P&L label collapse ---- */
/* Toggle button: hidden on desktop, shown on mobile via media query */
.shefadash-std-label-toggle {
    display: none;
    background: #fff;
    border: none;
    border-left: 1px solid #c3c4c7;
    padding: 6px 10px;
    font-size: 15px;
    color: #50575e;
    cursor: pointer;
    line-height: 1;
    transition: background 0.1s, color 0.1s;
}
.shefadash-std-label-toggle:hover {
    background: #f6f7f7;
    color: #1d2327;
}
.shefadash-std-label-toggle.is-collapsed {
    background: #f0f6fc;
    color: #2271b1;
}
/* Label spans: code hidden by default, text always shown */
.shefadash-std-label-code {
    display: none;
}
.shefadash-std-label-text {
    display: inline;
}
.shefadash-cat-dispnum {
    font-size: 0.75em;
    color: #999;
    font-weight: 400;
    margin-right: 2px;
}

/* ---- Responsive ---- */

/* Medium screens: 2 KPI cards per row, 2 net groups per row, 1 chart per row */
@media screen and (max-width: 1400px) {
    .shefadash-mr-kpi-row {
        grid-template-columns: 1fr 1fr;
    }

    .shefadash-mr-net-bar {
        flex-wrap: wrap;
    }

    .shefadash-mr-net-group {
        flex: 1 1 45%;
        min-width: 0;
    }

    .shefadash-mr-bar-charts-row {
        flex-direction: column;
    }
}

@media screen and (max-width: 768px) {
    /* Login adjustments */
    .shefadash-login-container {
        margin: 30px auto;
        padding: 24px 20px;
    }

    /* Tighter card padding on mobile to maximize chart canvas space */
    .shefadash-card {
        padding: 14px 12px;
    }

    /* Topbar */
    .shefadash-topbar {
        padding: 0 12px;
    }

    .shefadash-menu-toggle {
        display: flex;
    }

    .shefadash-topbar-logo-panda {
        height: 26px;
    }

    .shefadash-topbar-logo-studios {
        height: 26px;
    }

    .shefadash-user-greeting {
        display: none;
    }

    /* Sidebar: off-screen by default on mobile */
    .shefadash-sidebar {
        transform: translateX(-100%);
    }

    .shefadash-sidebar.is-open {
        transform: translateX(0);
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    }

    /* Backdrop: visible only on mobile when sidebar is open */
    .shefadash-sidebar-backdrop.is-visible {
        display: block;
    }

    /* Content: full width on mobile */
    .shefadash-content {
        margin-left: 0;
        padding: 16px 12px;
    }

    /* Page header: title on its own row, then picker + sync on the row below */
    .shefadash-page-header {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
    }

    .shefadash-page-title {
        font-size: 1.25em;
        margin: 0;
        width: 100%; /* forces title onto its own row */
        flex: 0 0 100%;
    }

    /* Picker: natural (content) width, no stretching */
    .shefadash-header-picker,
    .shefadash-mr-month-picker {
        flex: 0 0 auto;
        width: auto;
        margin-right: 0;
        display: inline-flex;
    }

    /* Sync controls: stays on same row as picker */
    .shefadash-page-header .shefadash-sync-controls {
        flex: 0 0 auto;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 0;
        flex-wrap: nowrap;
        gap: 8px;
    }

    /* Studio tabs: pill scroll on mobile */
    .shefadash-studio-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
        padding-bottom: 10px;
        /* Fade-out hint on the right */
        -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
        mask-image: linear-gradient(to right, black 85%, transparent 100%);
        border-bottom: 1px solid #e0e0e0;
    }

    .shefadash-studio-tab {
        padding: 6px 16px;
        font-size: 13px;
    }

    /* Report header stacks on mobile */
    .shefadash-std-header-row {
        flex-direction: column;
    }

    /* P&L label toggle button: show on mobile */
    .shefadash-std-label-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Collapsed: shrink label column to icon-only width */
    .shefadash-std-scroll.std-labels-collapsed .shefadash-std-label-col,
    .shefadash-std-scroll.std-labels-collapsed .shefadash-std-label {
        min-width: 36px !important;
        width: 36px !important;
        max-width: 36px !important;
        overflow: hidden;
        text-align: center !important;
        padding: 4px 2px !important;
        cursor: pointer;
    }
    .shefadash-std-scroll.std-labels-collapsed .shefadash-std-label-text {
        display: none;
    }
    .shefadash-std-scroll.std-labels-collapsed .shefadash-std-label-code {
        display: inline-block;
        font-size: 16px;
        line-height: 1;
        font-style: normal;
    }

    /* Charts stack vertically on mobile */
    .shefadash-pnl-chart-row {
        flex-direction: column;
    }

    /* Teachers page mobile */
    .shefadash-teachers-filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .shefadash-teachers-search {
        margin-left: 0;
        min-width: auto;
    }

    .shefadash-teachers-summary-row {
        gap: 16px;
    }

    #shefadash-teachers-chart {
        height: 300px !important;
    }

    /* Teachers table: horizontal scroll on mobile */
    .shefadash-teachers-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .shefadash-teachers-data-table {
        font-size: 12px;
        min-width: 520px;
    }

    /* Revenue Goals KPI: 2-col on tablet */
    .shefadash-rev-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .shefadash-rev-kpi-value {
        font-size: 20px;
    }

    /* Revenue pie chart: cap height on mobile */
    #shefadash-revenue-pie-chart {
        height: 320px !important;
    }

    /* YTD Trends chart: taller on mobile to accommodate wrapped legend rows */
    #shefadash-mr-trend-chart {
        height: 560px !important;
    }

    /* Monthly Report mobile */
    .shefadash-mr-kpi-row {
        grid-template-columns: 1fr 1fr;
    }

    .shefadash-mr-kpi-value {
        font-size: 22px;
    }

    /* Net income bar: remove right border when stacked */
    .shefadash-mr-net-group {
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        min-width: 0;
    }

    .shefadash-mr-net-group:last-child {
        border-bottom: none;
    }

    .shefadash-mr-net-bar {
        gap: 24px;
    }

    .shefadash-mr-bar-charts-row {
        flex-direction: column;
    }

    .shefadash-mr-month-pills {
        gap: 4px;
    }

    .shefadash-mr-month-pill {
        padding: 5px 10px;
        font-size: 12px;
    }
}

@media screen and (max-width: 480px) {
    .shefadash-rev-kpi-row {
        grid-template-columns: 1fr;
    }

    .shefadash-rev-kpi-value {
        font-size: 18px;
    }

    .shefadash-mr-kpi-row {
        grid-template-columns: 1fr;
    }

    .shefadash-mr-net-bar {
        flex-direction: column;
        gap: 0;
    }

    .shefadash-mr-net-group {
        padding: 12px 16px;
    }
}

/* =========================================================================
   P&L DRILL-DOWN — Clickable cells + Transaction Modal
   ========================================================================= */

/* Clickable actual-amount cells */
.shefadash-std-drilldown {
    cursor: pointer;
    position: relative;
}
.shefadash-std-drilldown:hover {
    background: rgba(0, 115, 170, 0.07) !important;
    outline: 1px solid rgba(0, 115, 170, 0.25);
    outline-offset: -1px;
}

/* Modal overlay */
.shefadash-txn-overlay {
    position: fixed;
    inset: 0;
    z-index: 100200;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    transition: background 0.15s ease;
}
.shefadash-txn-overlay.is-visible {
    background: rgba(0, 0, 0, 0.55);
}

/* Prevent body scroll while modal open */
body.shefadash-modal-open {
    overflow: hidden;
}

/* Dialog box */
.shefadash-txn-dialog {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
    width: 100%;
    max-width: 760px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transform: translateY(12px);
    transition: transform 0.15s ease;
}
.shefadash-txn-overlay.is-visible .shefadash-txn-dialog {
    transform: translateY(0);
}

/* Header */
.shefadash-txn-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}
.shefadash-txn-title {
    font-size: 16px;
    font-weight: 600;
    color: #1d2327;
    line-height: 1.3;
}
.shefadash-txn-subtitle {
    font-size: 13px;
    color: #646970;
    margin-top: 2px;
}
.shefadash-txn-close {
    background: none;
    border: none;
    padding: 0 4px;
    font-size: 22px;
    line-height: 1;
    color: #646970;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: -2px;
}
.shefadash-txn-close:hover {
    color: #1d2327;
}

/* Scrollable body */
.shefadash-txn-body {
    overflow-y: auto;
    padding: 16px 20px 20px;
    flex: 1;
}

/* Loading state */
.shefadash-txn-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #646970;
    padding: 20px 0;
    font-size: 14px;
}
.shefadash-txn-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #c3c4c7;
    border-top-color: #0073aa;
    border-radius: 50%;
    animation: shefadash-spin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes shefadash-spin {
    to { transform: rotate(360deg); }
}

/* Error state */
.shefadash-txn-error {
    color: #d63638;
    font-size: 14px;
    padding: 12px 0;
}

/* Empty state */
.shefadash-txn-empty {
    color: #646970;
    font-size: 14px;
    padding: 12px 0;
    margin: 0;
}

/* Transaction table */
.shefadash-txn-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.shefadash-txn-table th {
    text-align: left;
    padding: 7px 10px;
    border-bottom: 2px solid #c3c4c7;
    color: #1d2327;
    font-weight: 600;
    white-space: nowrap;
}
.shefadash-txn-sortable {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.shefadash-txn-sortable:hover {
    color: #0073aa;
}
.shefadash-txn-sorted {
    color: #0073aa;
}
.shefadash-txn-sort-arrow {
    font-size: 10px;
    margin-left: 3px;
}
.shefadash-txn-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #f0f0f1;
    vertical-align: top;
    color: #1d2327;
}
.shefadash-txn-table tbody tr:last-child td {
    border-bottom: none;
}
.shefadash-txn-table tbody tr:hover td {
    background: #f6f7f7;
}
.shefadash-txn-amt-col {
    text-align: right !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.shefadash-txn-negative {
    color: #d63638;
}
.shefadash-txn-total-row td {
    border-top: 2px solid #c3c4c7 !important;
    border-bottom: none !important;
    padding-top: 8px;
    padding-bottom: 8px;
}

@media screen and (max-width: 600px) {
    .shefadash-txn-dialog {
        max-height: 95vh;
        border-radius: 6px;
    }
    .shefadash-txn-table th,
    .shefadash-txn-table td {
        padding: 5px 7px;
        font-size: 12px;
    }
}

/* ==========================================================================
   Send Report Modal
   ========================================================================== */

.shefadash-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100100;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.shefadash-modal {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
    padding: 24px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.shefadash-modal--send-report {
    max-width: 480px;
}

.shefadash-modal--send-report h3 {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 600;
    color: #1d2327;
}

.shefadash-mr-send-field {
    margin-bottom: 18px;
}

.shefadash-mr-send-field > label:first-child {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: #1d2327;
    margin-bottom: 8px;
}

.shefadash-mr-send-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.shefadash-mr-send-checkboxes label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #2c3338;
    cursor: pointer;
}

.shefadash-mr-send-radios {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.shefadash-mr-send-radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #2c3338;
    cursor: pointer;
}

.shefadash-mr-send-input {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    box-sizing: border-box;
}

.shefadash-mr-send-input:focus {
    border-color: #2271b1;
    outline: none;
    box-shadow: 0 0 0 1px #2271b1;
}

.shefadash-mr-send-hint {
    display: block;
    font-size: 12px;
    color: #8c8f94;
    margin-top: 4px;
}

.shefadash-mr-send-ai-textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    line-height: 1.6;
    border: 1px solid #c3b8e8;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
    background: #faf8ff;
    color: #1d2327;
    margin-top: 6px;
}
.shefadash-mr-send-ai-textarea:focus {
    border-color: #8b5cf6;
    outline: none;
    box-shadow: 0 0 0 1px #8b5cf6;
}
.shefadash-mr-send-ai-textarea:disabled {
    opacity: 0.6;
    cursor: wait;
}

.shefadash-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f1;
}

#shefadash-mr-send-status {
    margin-top: 12px;
}

/* Send button in monthly report header — sits inside sync-controls */
#shefadash-mr-send-btn {
    margin-left: 4px;
}

/* Send modal header with month picker */
.shefadash-mr-send-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 12px;
}

.shefadash-mr-send-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1d2327;
}

.shefadash-mr-send-month-picker {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f0f0f1;
    border-radius: 6px;
    padding: 4px 6px;
}

.shefadash-mr-send-month-arrow {
    background: none;
    border: none;
    font-size: 18px;
    font-weight: 600;
    color: #2271b1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
}

.shefadash-mr-send-month-arrow:hover {
    background: #e0e0e0;
}

.shefadash-mr-send-month-label {
    font-size: 14px;
    font-weight: 600;
    color: #1d2327;
    min-width: 110px;
    text-align: center;
}

/* Studios field header with toggle */
.shefadash-mr-send-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.shefadash-mr-send-field-header label {
    margin-bottom: 0;
}

.shefadash-mr-send-toggle-all {
    background: none;
    border: none;
    font-size: 12px;
    color: #2271b1;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.shefadash-mr-send-toggle-all:hover {
    color: #135e96;
}

@media screen and (max-width: 600px) {
    .shefadash-modal--send-report {
        max-width: 100%;
    }

    .shefadash-mr-send-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   Members Page
   ========================================================================== */

.shefadash-members-kpis {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.shefadash-members-kpi-card {
    background: #fff;
    border: 1px solid #e3dfd6;
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shefadash-members-kpi-label {
    font-size: 12px;
    color: #8a8680;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.shefadash-members-kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: #2a2622;
    line-height: 1.2;
}

.shefadash-members-kpi-value--small {
    font-size: 14px;
    font-weight: 500;
    color: #646970;
}

.shefadash-members-kpi-note {
    font-size: 11px;
    color: #b0a899;
    font-weight: 400;
}

.shefadash-members-studio-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    padding: 4px 0 12px;
    border-bottom: 1px solid #e0e0e0;
    align-items: center;
}

.shefadash-members-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.shefadash-members-search-wrap {
    position: relative;
    flex: 1;
    max-width: 480px;
}

.shefadash-members-search-wrap svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.shefadash-members-search {
    width: 100%;
    padding: 10px 12px 10px 38px;
    border: 1px solid #e3dfd6;
    border-radius: 10px;
    font-size: 14px;
    background: #fff;
    color: #2a2622;
    outline: none;
    transition: border-color 0.15s;
}

.shefadash-members-search:focus {
    border-color: #6b8e4e;
    box-shadow: 0 0 0 2px rgba(107,142,78,0.12);
}

.shefadash-members-status-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    position: relative;
    align-items: center;
}

.shefadash-members-status-tab {
    padding: 6px 14px;
    border: 1px solid #e3dfd6;
    border-radius: 20px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #646970;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.shefadash-members-status-tab:hover {
    border-color: #6b8e4e;
    color: #2a2622;
}

.shefadash-members-status-tab.active {
    background: #6b8e4e;
    border-color: #6b8e4e;
    color: #fff;
}
.shefadash-members-status-tab--inactive.active {
    background: #8a8680;
    border-color: #8a8680;
}
.shefadash-members-status-tab--uncategorized.active {
    background: #b0a899;
    border-color: #b0a899;
}

.shefadash-members-status-count {
    font-size: 12px;
    font-weight: 600;
}

.shefadash-members-filter-note {
    padding: 8px 16px;
    background: #fef9ef;
    border: 1px solid #e8dcc8;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #8a7a5e;
}

/* Sync dropdown */
.shefadash-sync-dropdown {
    position: relative;
    display: inline-block;
}
.shefadash-sync-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.shefadash-sync-chevron {
    margin-left: 2px;
    transition: transform 0.2s;
}
.shefadash-sync-dropdown.is-open .shefadash-sync-chevron {
    transform: rotate(180deg);
}
.shefadash-sync-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 300px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    z-index: 100;
    padding: 4px 0;
}
.shefadash-sync-dropdown.is-open .shefadash-sync-dropdown-menu {
    display: block;
}
.shefadash-sync-dropdown-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.shefadash-sync-dropdown-item:hover {
    background: #f0f7fc;
}
.shefadash-sync-dropdown-item:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.shefadash-sync-dropdown-item:disabled:hover {
    background: none;
}
.shefadash-sync-dropdown-label {
    font-size: 13px;
    font-weight: 600;
    color: #1d2327;
    display: flex;
    align-items: center;
    gap: 6px;
}
.shefadash-sync-dropdown-desc {
    font-size: 12px;
    color: #8c8f94;
    margin-top: 2px;
}
.shefadash-sync-dropdown-divider {
    height: 1px;
    background: #eee;
    margin: 4px 0;
}
.shefadash-sync-dropdown-item--danger .shefadash-sync-dropdown-label {
    color: #b32d2e;
}
.shefadash-sync-dropdown-item--danger:hover {
    background: #fef1f1;
}
.shefadash-sync-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    background: #f0f0f1;
    color: #646970;
    line-height: 1.4;
}
.shefadash-sync-badge:empty {
    display: none;
}

.shefadash-sync-enrich-options {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid #e3dfd6;
}
.shefadash-sync-enrich-limit-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #646970;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.shefadash-sync-enrich-limit-label input {
    width: 70px;
    padding: 4px 8px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    font-size: 13px;
    text-align: center;
}
.shefadash-sync-enrich-hint {
    font-size: 11px;
    color: #8c8f94;
    white-space: nowrap;
}
.shefadash-sync-enrich-hint:empty {
    display: none;
}

.shefadash-members-sync-status {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 20px;
    background: #f9f7f3;
    border: 1px solid #e3dfd6;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 14px;
    color: #646970;
}
.shefadash-sync-status-top {
    display: flex;
    align-items: center;
    gap: 10px;
}
.shefadash-sync-scope {
    flex: 1;
    font-weight: 600;
    color: #3c434a;
    font-size: 13px;
}
.shefadash-sync-log {
    max-height: 180px;
    overflow-y: auto;
    font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
    font-size: 12px;
    line-height: 1.6;
    padding: 4px 0;
}
.shefadash-sync-log:empty {
    display: none;
}
.shefadash-sync-log-entry {
    color: #646970;
}
.shefadash-sync-log-time {
    color: #a7aaad;
    margin-right: 6px;
}
.shefadash-sync-log-error {
    color: #b32d2e;
    font-weight: 600;
}
.shefadash-sync-log-done {
    color: #4a7c59;
    font-weight: 600;
}
.shefadash-sync-stop-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    background: #fff;
    color: #b32d2e;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.shefadash-sync-stop-btn:hover {
    background: #fef1f1;
    border-color: #b32d2e;
}
.shefadash-sync-stop-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.shefadash-sync-dismiss-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border: none;
    border-radius: 4px;
    background: none;
    color: #a7aaad;
    cursor: pointer;
}
.shefadash-sync-dismiss-btn:hover {
    color: #3c434a;
    background: #e8e4dc;
}

.shefadash-members-table-wrap {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 75vh;
}

.shefadash-members-empty {
    color: #8a8680;
    padding: 40px 20px;
    text-align: center;
    font-size: 14px;
}

/* Members Data Table */
.shefadash-members-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.shefadash-members-data-table thead th {
    text-align: left;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #8a8680;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #e3dfd6;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.shefadash-members-data-table thead th:hover {
    color: #2a2622;
}

.shefadash-members-data-table thead th .sort-arrow {
    font-size: 10px;
    margin-left: 3px;
    opacity: 0.4;
}

.shefadash-members-data-table thead th.sorted .sort-arrow {
    opacity: 1;
    color: #6b8e4e;
}

.shefadash-members-data-table tbody tr {
    border-bottom: 1px solid #f2efe9;
    transition: background 0.1s;
}

.shefadash-members-data-table tbody tr:hover {
    background: #faf9f7;
}

.shefadash-members-data-table td {
    padding: 12px;
    vertical-align: middle;
    color: #2a2622;
}

/* Member cell: avatar + name + email */
.shefadash-member-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
}

.shefadash-member-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #d4c9b0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

.shefadash-member-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.shefadash-member-name {
    font-weight: 600;
    color: #2a2622;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shefadash-member-email {
    font-size: 12px;
    color: #8a8680;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status badge */
.shefadash-member-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.shefadash-member-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Category badge colors */
.shefadash-member-status--monthly-membership .shefadash-member-status-dot { background: #6b8e4e; }
.shefadash-member-status--monthly-membership { color: #6b8e4e; }

.shefadash-member-status--annual-membership .shefadash-member-status-dot { background: #3a7d5c; }
.shefadash-member-status--annual-membership { color: #3a7d5c; }

.shefadash-member-status--punchcard .shefadash-member-status-dot { background: #c49a3c; }
.shefadash-member-status--punchcard { color: #c49a3c; }

.shefadash-member-status--drop-in .shefadash-member-status-dot { background: #8b7355; }
.shefadash-member-status--drop-in { color: #8b7355; }

.shefadash-member-status--classpass .shefadash-member-status-dot { background: #7b68a7; }
.shefadash-member-status--classpass { color: #7b68a7; }

.shefadash-member-status--inactive .shefadash-member-status-dot { background: #b0a899; }
.shefadash-member-status--inactive { color: #8a8680; }

.shefadash-member-status--uncategorized .shefadash-member-status-dot { background: #d5cec4; }
.shefadash-member-status--uncategorized { color: #b0a899; }

/* Payment status badges */
.shefadash-payment-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    vertical-align: middle;
    line-height: 1.4;
    letter-spacing: 0.02em;
}
.shefadash-payment-badge--declined {
    background: #fce8e6;
    color: #c0392b;
}
.shefadash-payment-badge--suspended {
    background: #fef3e0;
    color: #b8760f;
}

/* Sub-tabs row for active category breakdown */
.shefadash-members-sub-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    width: 100%;
    padding-top: 6px;
}
.shefadash-members-sub-tab {
    padding: 4px 12px;
    border: 1px solid #e3dfd6;
    border-radius: 14px;
    background: #faf8f5;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: #8a8680;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 4px;
}
.shefadash-members-sub-tab:hover {
    border-color: #6b8e4e;
    color: #4a3f35;
}
.shefadash-members-sub-tab.active {
    background: #e8f0e0;
    border-color: #6b8e4e;
    color: #4a6a30;
}
.shefadash-members-sub-tab .shefadash-members-status-count {
    font-size: 11px;
}

/* Legend section headers */
.shefadash-category-legend-section {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #b0a899;
    padding: 4px 0 2px;
}

/* Legacy statuses (Mindbody passthrough — kept for panel/fallback) */
.shefadash-member-status--active .shefadash-member-status-dot { background: #6b8e4e; }
.shefadash-member-status--active { color: #6b8e4e; }
.shefadash-member-status--non-member .shefadash-member-status-dot { background: #b0a899; }
.shefadash-member-status--non-member { color: #8a8680; }
.shefadash-member-status--terminated .shefadash-member-status-dot { background: #c0392b; }
.shefadash-member-status--terminated { color: #c0392b; }
.shefadash-member-status--stale .shefadash-member-status-dot { background: #b0a899; }
.shefadash-member-status--stale { color: #b0a899; }

/* Category legend help icon */
.shefadash-members-category-legend {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 4px 6px;
    opacity: 0.6;
    transition: opacity 0.15s;
    position: relative;
}
.shefadash-members-category-legend:hover { opacity: 1; }

/* Category legend popup */
.shefadash-category-legend-popup {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: #fff;
    border: 1px solid #e0d6c8;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    padding: 16px 20px;
    z-index: 100;
    min-width: 380px;
    font-size: 13px;
}
.shefadash-category-legend-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 10px;
    color: #4a3f35;
}
.shefadash-category-legend-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid #f0ebe4;
}
.shefadash-category-legend-row:last-child { border-bottom: none; }
.shefadash-category-legend-row .shefadash-member-status {
    min-width: 140px;
    flex-shrink: 0;
}
.shefadash-category-legend-desc {
    color: #8a8680;
    font-size: 12px;
    line-height: 1.4;
}

/* On-demand enrich button in member panel */
.shefadash-member-panel-enrich-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 16px 0;
    padding: 8px 14px;
    background: #f8f5f0;
    border: 1px solid #e0d6c8;
    border-radius: 6px;
    font-size: 13px;
    color: #6b5e4f;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.shefadash-member-panel-enrich-btn:hover {
    background: #ede8e0;
    border-color: #c9bfb0;
}
.shefadash-member-panel-enrich-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.shefadash-member-panel-enrich-btn svg {
    flex-shrink: 0;
}

/* Date sub-label */
.shefadash-member-date-sub {
    display: block;
    font-size: 11px;
    color: #b0a899;
}

/* LTV bar */
.shefadash-member-ltv-bar {
    width: 60px;
    height: 6px;
    background: #f2efe9;
    border-radius: 3px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
}

.shefadash-member-ltv-fill {
    height: 100%;
    background: #6b8e4e;
    border-radius: 3px;
    transition: width 0.3s;
}

/* Numeric columns right-align */
.shefadash-members-data-table .col-classes,
.shefadash-members-data-table .col-spent,
.shefadash-members-data-table .col-ltv {
    text-align: right;
}

/* Member count bar */
.shefadash-members-count-bar {
    padding: 10px 0 4px;
    font-size: 13px;
    color: #646970;
    text-align: center;
}

/* Responsive */
@media (max-width: 1100px) {
    .shefadash-members-kpis {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .shefadash-members-kpis {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .shefadash-members-kpis {
        grid-template-columns: 1fr;
    }

    .shefadash-members-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .shefadash-members-search-wrap {
        max-width: 100%;
    }
}

/* ── Member Detail Side Panel ── */
.shefadash-member-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}

.shefadash-member-panel-overlay.active {
    opacity: 1;
    visibility: visible;
}

.shefadash-member-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 680px;
    max-width: 92vw;
    height: 100vh;
    background: #fff;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.shefadash-member-panel.active {
    transform: translateX(0);
}

.shefadash-member-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px 24px 16px;
    border-bottom: 1px solid #f2efe9;
}

.shefadash-member-panel-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.shefadash-member-panel-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #d4c9b0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.shefadash-member-panel-avatar.has-photo {
    background: transparent;
    color: transparent;
}

.shefadash-member-panel-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.shefadash-member-panel-demographics {
    padding: 0 0 4px;
}

.shefadash-member-panel-demographics .shefadash-member-panel-grid {
    gap: 8px 24px;
}

.shefadash-member-panel-name {
    font-size: 17px;
    font-weight: 700;
    color: #2a2622;
    margin: 0 0 2px;
    line-height: 1.3;
}

.shefadash-member-panel-email {
    font-size: 13px;
    color: #8a8680;
    word-break: break-all;
}

.shefadash-member-panel-phone {
    display: block;
    font-size: 13px;
    color: #8a8680;
    margin-top: 2px;
}

.shefadash-member-panel-id {
    display: block;
    font-size: 12px;
    color: #9ca3af;
    margin-top: 2px;
}

.shefadash-member-panel-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #8a8680;
    padding: 4px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.shefadash-member-panel-close:hover {
    background: #f2efe9;
    color: #2a2622;
}

.shefadash-member-panel-body {
    padding: 20px 24px 32px;
    flex: 1;
}

.shefadash-member-panel-section {
    margin-bottom: 24px;
}

.shefadash-member-panel-section-title {
    font-size: 11px;
    font-weight: 600;
    color: #8a8680;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f2efe9;
}

.shefadash-member-panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}

.shefadash-member-panel-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shefadash-member-panel-label {
    font-size: 11px;
    font-weight: 500;
    color: #b0a899;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.shefadash-member-panel-value {
    font-size: 14px;
    font-weight: 600;
    color: #2a2622;
}

.shefadash-member-panel-value--big {
    font-size: 22px;
    font-weight: 700;
}

.shefadash-member-panel-sub {
    font-size: 12px;
    color: #b0a899;
}

.shefadash-member-panel-ltv-wrap {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shefadash-member-panel-ltv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.shefadash-member-panel-ltv-pctl {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.02em;
}
.shefadash-member-panel-ltv-pctl.ltv-pctl--top {
    color: #6b8e4e;
}
.shefadash-member-panel-ltv-pctl.ltv-pctl--bottom {
    color: #9ca3af;
}

.shefadash-member-panel-ltv-chart-wrap {
    width: 100%;
    height: 80px;
    border-radius: 4px;
    overflow: hidden;
    background: #fafaf7;
}
.shefadash-member-panel-ltv-chart-wrap canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.shefadash-member-panel-mb-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #6b8e4e;
    text-decoration: none;
    padding: 8px 14px;
    border: 1px solid #d6e4c8;
    border-radius: 8px;
    transition: background 0.15s, border-color 0.15s;
}

.shefadash-member-panel-mb-link:hover {
    background: #f2f7ec;
    border-color: #6b8e4e;
}

/* ── Member Panel Tabs ── */
.shefadash-member-panel-tabs {
    display: flex;
    border-bottom: 1px solid #f2efe9;
    padding: 0 24px;
    gap: 0;
}

.shefadash-member-panel-tab {
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #8a8680;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.shefadash-member-panel-tab:hover {
    color: #2a2622;
}

.shefadash-member-panel-tab.active {
    color: #2a2622;
    border-bottom-color: #6b8e4e;
}

.shefadash-member-panel-tab-content {
    display: none;
}

.shefadash-member-panel-tab-content.active {
    display: block;
}

/* ── Insights Tab ── */
.shefadash-insights-prompt {
    text-align: center;
    padding: 40px 16px;
}

.shefadash-insights-prompt p {
    font-size: 13px;
    color: #8a8680;
    margin: 0 0 20px;
    line-height: 1.5;
}

.shefadash-insights-fetch-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: #6b8e4e;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.shefadash-insights-fetch-btn:hover {
    background: #5a7a40;
}

.shefadash-insights-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 16px;
    font-size: 13px;
    color: #8a8680;
}

.shefadash-insights-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #f2efe9;
    border-top-color: #6b8e4e;
    border-radius: 50%;
    animation: shefadash-spin 0.7s linear infinite;
}

@keyframes shefadash-spin {
    to { transform: rotate(360deg); }
}

/* Insights Cards (memberships / class passes) */
.shefadash-insights-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.shefadash-insights-card {
    border: 1px solid #f2efe9;
    border-radius: 8px;
    padding: 12px 14px;
    background: #faf9f7;
}

.shefadash-insights-card-header {
    font-size: 13px;
    font-weight: 600;
    color: #2a2622;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.shefadash-insights-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 10px;
}

.shefadash-insights-badge--active {
    background: #e6f2da;
    color: #4a7a2e;
}

.shefadash-insights-badge--inactive {
    background: #f2efe9;
    color: #8a8680;
}

.shefadash-insights-card-details {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 12px;
    color: #6b5e4f;
}

.shefadash-insights-card-details strong {
    font-weight: 700;
    color: #2a2622;
}

.shefadash-insights-empty {
    font-size: 13px;
    color: #b0a899;
    text-align: center;
    padding: 12px 0;
    margin: 0;
}

/* Insights Horizontal Bars */
.shefadash-insights-h-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shefadash-insights-h-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.shefadash-insights-h-bar-label {
    font-size: 12px;
    color: #2a2622;
    width: 140px;
    min-width: 140px;
    flex-shrink: 0;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.shefadash-insights-h-bar-label small {
    color: #b0a899;
}

.shefadash-insights-h-bar-track {
    flex: 1;
    height: 8px;
    background: #f2efe9;
    border-radius: 4px;
    overflow: hidden;
}

.shefadash-insights-h-bar-fill {
    height: 100%;
    background: #c9a96e;
    border-radius: 4px;
    transition: width 0.3s;
}

.shefadash-insights-h-bar-fill--alt {
    background: #7a9ec4;
}

.shefadash-insights-h-bar-fill--green {
    background: #6b8e4e;
}

.shefadash-insights-h-bar-pct {
    font-size: 12px;
    font-weight: 600;
    color: #6b5e4f;
    min-width: 32px;
    text-align: right;
}

/* Insights Vertical Bar Chart (monthly visits) */
.shefadash-insights-chart-wrap {
    margin-top: 16px;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.shefadash-insights-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 80px;
    padding-top: 18px;
    overflow: visible;
}

.shefadash-insights-bar-chart.is-dense {
    height: 110px;
    gap: 1px;
    padding-top: 18px;
    margin-bottom: 18px;
    width: fit-content;
    min-width: 100%;
}

.shefadash-insights-bar-chart.is-very-dense {
    height: 120px;
    gap: 1px;
    padding-top: 18px;
    margin-bottom: 18px;
    width: fit-content;
    min-width: 100%;
}

.shefadash-insights-bar-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    overflow: visible;
    position: relative;
}

.shefadash-insights-bar {
    width: 100%;
    max-width: 24px;
    background: #6b8e4e;
    border-radius: 3px 3px 0 0;
    position: relative;
    min-height: 2px;
    transition: height 0.3s;
}

.shefadash-insights-bar-chart.is-dense .shefadash-insights-bar-col,
.shefadash-insights-bar-chart.is-very-dense .shefadash-insights-bar-col {
    min-width: 14px;
    flex: 0 0 auto;
}

.shefadash-insights-bar-chart.is-dense .shefadash-insights-bar,
.shefadash-insights-bar-chart.is-very-dense .shefadash-insights-bar {
    max-width: none;
    border-radius: 2px 2px 0 0;
    width: 100%;
}

.shefadash-insights-bar-chart.is-dense .shefadash-insights-bar-label,
.shefadash-insights-bar-chart.is-very-dense .shefadash-insights-bar-label {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 1;
}

.shefadash-insights-bar-val {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 600;
    color: #6b5e4f;
}

.shefadash-insights-bar-label {
    font-size: 9px;
    color: #b0a899;
    margin-top: 4px;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.2;
    flex-shrink: 0;
}

/* Insights Visit List */
.shefadash-insights-visit-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.shefadash-insights-visit-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f8f6f3;
    font-size: 12px;
}

.shefadash-insights-visit-row:last-child {
    border-bottom: none;
}

.shefadash-insights-visit-date {
    color: #8a8680;
    min-width: 80px;
    flex-shrink: 0;
}

.shefadash-insights-visit-class {
    color: #2a2622;
    font-weight: 500;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shefadash-insights-visit-teacher {
    color: #b0a899;
    flex-shrink: 0;
}

.shefadash-insights-more {
    font-size: 11px;
    color: #b0a899;
    text-align: center;
    padding: 8px 0 0;
    margin: 0;
}

/* Insights Sub-title */
.shefadash-insights-sub-title {
    font-size: 12px;
    font-weight: 600;
    color: #6b5e4f;
    margin: 16px 0 10px;
}

/* Insights Purchase Pie Chart */
.shefadash-insights-purchase-breakdown {
    margin-top: 8px;
}

.shefadash-insights-pie-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.shefadash-insights-pie-wrap {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}

.shefadash-insights-pie {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.shefadash-insights-pie circle {
    transition: stroke-dasharray 0.3s;
}

.shefadash-insights-pie-legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.shefadash-insights-pie-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #2a2622;
}

.shefadash-insights-pie-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.shefadash-insights-pie-amt {
    margin-left: auto;
    font-weight: 600;
    color: #6b5e4f;
    white-space: nowrap;
}

/* Stacked Bar Charts (Transaction Mix / Revenue Flow) */
.shefadash-insights-bar-subtitle {
    font-size: 11px;
    color: #8a8680;
    margin: 0 0 8px;
}

.shefadash-insights-stacked-bar {
    display: flex;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    background: #f5f0eb;
}

.shefadash-insights-stacked-seg {
    min-width: 1px;
    transition: opacity 0.2s;
    cursor: default;
}

.shefadash-insights-stacked-seg:hover {
    opacity: 0.7;
}

.shefadash-insights-bar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.shefadash-insights-bar-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #2a2622;
}

/* Year Selector for Cadence Chart */
.shefadash-insights-year-selector {
    display: flex;
    gap: 4px;
    margin: 12px 0 4px;
    flex-wrap: wrap;
}

.shefadash-insights-year-btn {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    color: #8a8680;
    background: #f8f6f3;
    border: 1px solid #f2efe9;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.15s;
}

.shefadash-insights-year-btn:hover {
    color: #2a2622;
    border-color: #d4c9b0;
}

.shefadash-insights-year-btn.active {
    color: #fff;
    background: #6b8e4e;
    border-color: #6b8e4e;
}

/* Day of Week Chart */
.shefadash-insights-dow-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 80px;
    padding-top: 8px;
}

.shefadash-insights-dow-chart .shefadash-insights-bar-col {
    flex: 1;
}

.shefadash-insights-bar--dow {
    background: #c9a96e;
}

/* Insights Refresh Bar */
.shefadash-insights-refresh-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    margin-bottom: 16px;
    background: #f8f6f3;
    border-radius: 8px;
    font-size: 12px;
}

.shefadash-insights-refresh-time {
    color: #8a8680;
}

.shefadash-insights-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    color: #6b8e4e;
    background: none;
    border: 1px solid #d6e4c8;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.shefadash-insights-refresh-btn:hover {
    background: #f2f7ec;
    border-color: #6b8e4e;
}

.shefadash-insights-cost {
    font-size: 11px;
    color: #ccc;
    text-align: right;
    margin: 16px 0 0;
}

/* Clickable member rows */
.shefadash-members-data-table tbody tr {
    cursor: pointer;
}

.shefadash-members-data-table tbody tr.shefadash-member-row-active {
    background: #f4f1eb;
}

/* ── Data-freshness label (shared across tabs) ── */
.sd-data-freshness {
    display: block;
    text-align: right;
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
}

/* ===================================================================
   Admin → Data Sync (#data-sync)
   =================================================================== */

/* Sub-tab bar */
.shefadash-subtabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #dcdcde;
    margin-bottom: 20px;
}
.shefadash-subtab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #50575e;
    cursor: pointer;
    margin-bottom: -1px;
}
.shefadash-subtab:hover {
    color: #2271b1;
}
.shefadash-subtab.is-active {
    color: #2271b1;
    border-bottom-color: #2271b1;
}
.shefadash-subtab-content {
    display: none;
}
.shefadash-subtab-content.is-active {
    display: block;
}

/* Intro + studio selector */
.shefadash-ds-intro {
    color: #50575e;
    font-size: 14px;
    max-width: 760px;
    margin: 0 0 20px;
}
.shefadash-ds-studio-block {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
.shefadash-ds-studio-label {
    font-size: 13px;
    font-weight: 600;
    color: #1d2327;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Cards */
.shefadash-ds-card {
    margin-bottom: 16px;
    max-width: 760px;
}
.shefadash-ds-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.shefadash-ds-card-head h2 {
    margin: 0;
    font-size: 16px;
}
.shefadash-ds-lastsync {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
}
/* Per-studio last-synced rows under the Mindbody card. */
.shefadash-ds-studio-rows {
    margin: 6px 0 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.shefadash-ds-studio-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: #50575e;
}
.shefadash-ds-studio-row .shefadash-ds-studio-name {
    font-weight: 600;
    min-width: 120px;
}
.shefadash-ds-studio-row .shefadash-ds-studio-time {
    color: #888;
}
.shefadash-ds-studio-row.is-failed .shefadash-ds-studio-name {
    color: #d63638;
}
.shefadash-ds-studio-row .shefadash-ds-studio-err {
    flex-basis: 100%;
    color: #8a1215;
    font-style: italic;
}
.shefadash-ds-card-desc {
    color: #50575e;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 14px;
}
.shefadash-ds-card .shefadash-sync-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}
.shefadash-ds-card .shefadash-sync-status {
    font-size: 13px;
    color: #50575e;
}

/* "Heads up" note under the heavy actions */
.shefadash-ds-card-note {
    font-size: 12.5px;
    line-height: 1.5;
    color: #8a6d3b;
    background: #fcf8e3;
    border: 1px solid #faebcc;
    border-radius: 4px;
    padding: 8px 12px;
    margin: 0 0 14px;
}

/* Progress bar */
.shefadash-ds-progress {
    margin-top: 14px;
}
.shefadash-ds-progress-track {
    height: 8px;
    background: #e9e9ed;
    border-radius: 999px;
    overflow: hidden;
}
.shefadash-ds-progress-fill {
    height: 100%;
    width: 0;
    background: #2271b1;
    border-radius: 999px;
    transition: width 0.3s ease;
}
.shefadash-ds-progress-label {
    margin-top: 6px;
    font-size: 12px;
    color: #50575e;
}

/* ==========================================================================
   Communication → Emails inbox (#page-emails)
   ========================================================================== */

/* ── Filters bar ─────────────────────────────────────────────────────────── */
.sd-emails-filters {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #dcdcde;
    border-radius: 6px;
}
/* Row 1: studio tabs (left) + search (right). Row 2: dropdown-pill filters. */
.sd-emails-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.sd-emails-filter-row--main {
    flex-wrap: nowrap;
    justify-content: space-between;
}
.sd-emails-filter-row--sub {
    gap: 6px;
    row-gap: 8px;
}
/* Thin separator after the view toggle (which now leads the sub-row). */
.sd-emails-filter-sep {
    width: 1px;
    align-self: stretch;
    background: #e5e7eb;
    margin: 2px 4px;
}
/* "Reset filters" — a subtle pill that appears only when a filter is active
   (see anyFilterActive()). Sits at the end of the sub-row, muted until hover. */
.sd-emails-reset {
    height: 32px;
    margin-left: auto;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #c3c4c7;
    border-radius: 16px;
    background: #fff;
    color: #6b7280;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: color .12s, border-color .12s, background .12s;
}
.sd-emails-reset:hover {
    color: #b91c1c;
    border-color: #b91c1c;
    background: #fef2f2;
}
/* Search box wrapper — lets the active-state highlight + clear button sit
   over the input, mirroring the dropdown-pill "is-filtered" treatment. */
.sd-emails-search-wrap {
    position: relative;
    display: inline-flex;
    min-width: 240px;
    flex: 0 1 280px;
}
.sd-emails-search {
    height: 32px;
    /* Right padding leaves room for the clear (×) button. */
    padding: 0 32px 0 12px;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    font-size: 13px;
    color: #1d2327;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}
/* Active search — blue accent matching the dropdown pills (#4756f5). */
.sd-emails-search-wrap.is-active .sd-emails-search {
    border-color: #c7cbff;
    background: #eef0ff;
    color: #4756f5;
}
.sd-emails-search-wrap.is-active .sd-emails-search::placeholder {
    color: #8f97c9;
}
/* Clear (×) button — hidden until a search term is present. */
.sd-emails-search-clear {
    display: none;
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    color: #4756f5;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}
.sd-emails-search-wrap.is-active .sd-emails-search-clear {
    display: inline-flex;
}
.sd-emails-search-clear:hover { background: #dde0ff; }

/* ── Sync control (main row, right of search): last-poll label + button ─── */
.sd-emails-sync {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    white-space: nowrap;
}
.sd-emails-sync-time {
    font-size: 12px;
    color: #6b7280;
}
.sd-emails-sync-btn {
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
    line-height: 30px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.sd-emails-sync-btn[disabled] {
    opacity: 0.6;
    cursor: default;
}

/* ── Studio tabs (mirrors the Members tab studio tabs) ──────────────────── */
.sd-emails-studio-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* Studio tabs take remaining width (wrapping internally) so the search box
   stays on the right of the same row. */
.sd-emails-filter-row--main .sd-emails-studio-tabs {
    flex: 1 1 auto;
    min-width: 0;
}
.sd-emails-filter-row--main .sd-emails-search-wrap {
    flex: 0 1 280px;
}
.sd-emails-studio-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    color: #555;
    transition: all 0.15s;
}
.sd-emails-studio-tab:hover { border-color: #aaa; }
.sd-emails-studio-tab.is-active {
    background: #2271b1;
    color: #fff;
    border-color: #2271b1;
}
.sd-emails-count {
    display: inline-block;
    min-width: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.08);
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    color: inherit;
}
.sd-emails-studio-tab.is-active .sd-emails-count {
    background: rgba(255, 255, 255, 0.25);
}

/* ── Dropdown-pill filters — Direction / Inbox (mirrors Members .sd-mv2-fd) ─ */
.sd-emails-fd {
    position: relative;
    display: inline-block;
}
.sd-emails-fd-btn {
    padding: 5px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    cursor: pointer;
    color: #555;
    transition: all 0.12s;
    white-space: nowrap;
}
.sd-emails-fd-btn:hover { border-color: #aaa; }
.sd-emails-fd.is-filtered .sd-emails-fd-btn {
    background: #eef0ff;
    border-color: #c7cbff;
    color: #4756f5;
    font-weight: 600;
}
.sd-emails-fd.is-open .sd-emails-fd-btn {
    border-color: #4756f5;
    box-shadow: 0 0 0 1px #4756f5;
}
.sd-emails-fd-arrow {
    font-size: 10px;
    margin-left: 3px;
    opacity: 0.5;
}
.sd-emails-fd-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 180px;
    width: max-content;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 100;
    padding: 4px 0;
}
.sd-emails-fd.is-open .sd-emails-fd-dropdown {
    display: block;
}
.sd-emails-fd-option {
    padding: 6px 14px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333;
    transition: background 0.1s;
}
.sd-emails-fd-option:hover {
    background: #f3f4f6;
}
.sd-emails-fd-option.is-selected {
    background: #eef0ff;
    color: #4756f5;
    font-weight: 600;
}
.sd-emails-fd-count {
    font-size: 11px;
    color: #9ca3af;
    margin-left: 8px;
    font-weight: 400;
}

/* ── Status / error bar ──────────────────────────────────────────────────── */
.sd-emails-status {
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 12px;
    font-size: 13px;
}
.sd-emails-status--error {
    background: #fbeaea;
    color: #8b1d1d;
    border: 1px solid #f5c2c2;
}

/* ── Table ───────────────────────────────────────────────────────────────── */
.sd-emails-table-wrap {
    overflow-x: auto;
    max-height: calc(100vh - 320px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid #dcdcde;
    border-radius: 6px;
}
.sd-emails-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.sd-emails-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}
.sd-emails-table thead tr {
    background: #f6f7f7;
}
.sd-emails-table th {
    padding: 10px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: #646970;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #dcdcde;
    white-space: nowrap;
}
.sd-emails-table td {
    padding: 9px 12px;
    border-bottom: 1px solid #f0f0f1;
    color: #1d2327;
    vertical-align: middle;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sd-emails-table tbody tr:last-child td {
    border-bottom: none;
}
.sd-emails-row-preview {
    cursor: pointer;
    transition: background 0.1s;
}
.sd-emails-row-preview:hover {
    background: #f8f9fa;
}
.sd-emails-loading {
    text-align: center;
    color: #646970;
    padding: 32px 0 !important;
}
.sd-emails-empty {
    text-align: center;
    color: #9ca3af;
    padding: 40px 0 !important;
    font-size: 14px;
}
.sd-emails-col-subject {
    max-width: 360px;
    font-weight: 500;
    white-space: normal;
}
.sd-emails-subject-line {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sd-emails-snippet {
    display: block;
    margin-top: 2px;
    font-weight: 400;
    font-size: 12px;
    color: #9ca3af;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sd-emails-col-date {
    white-space: nowrap;
    color: #646970;
    font-size: 12px;
}
.sd-emails-col-cat {
    white-space: nowrap;
}

/* ── Sortable headers ────────────────────────────────────────────────────── */
.sd-emails-th-sort {
    cursor: pointer;
    user-select: none;
    transition: color 0.1s, background 0.1s;
}
.sd-emails-th-sort:hover {
    color: #1d2327;
    background: #eef0f1;
}
.sd-emails-th-sort.is-sorted {
    color: #1d2327;
}
.sd-emails-sort-arrow {
    font-size: 9px;
    color: #2271b1;
}
.sd-emails-sort-arrow--idle {
    color: #c3c4c7;
}
.sd-emails-th-sort:hover .sd-emails-sort-arrow--idle {
    color: #8c8f94;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.sd-emails-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.sd-emails-badge--sent {
    background: #dbeafe;
    color: #1e40af;
}
.sd-emails-badge--received {
    background: #dcfce7;
    color: #166534;
}
.sd-emails-badge--error {
    background: #fee2e2;
    color: #991b1b;
}
.sd-emails-badge--failed {
    background: #fee2e2;
    color: #991b1b;
}

/* ── View toggle (Flat / Threaded) ───────────────────────────────────────── */
.sd-emails-viewtoggle {
    display: inline-flex;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
}
.sd-emails-viewbtn {
    border: 0;
    background: #fff;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    cursor: pointer;
}
.sd-emails-viewbtn + .sd-emails-viewbtn { border-left: 1px solid #d1d5db; }
.sd-emails-viewbtn:hover { background: #f9fafb; }
.sd-emails-viewbtn.is-active { background: #111827; color: #fff; }

.sd-emails-unanswered {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #374151;
    cursor: pointer;
}

/* Active date-range chip — appears when a drill-through from Email Analytics
   sets a date window. Removable via the × (clears the date filter). */
.sd-emails-datechip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px 3px 10px;
    font-size: 12px;
    line-height: 1.4;
    color: #1e40af;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
}
.sd-emails-datechip-label { white-space: nowrap; }
.sd-emails-datechip-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    font-size: 15px;
    line-height: 1;
    color: #1e40af;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}
.sd-emails-datechip-clear:hover { background: #dbeafe; }

/* ── Threaded view ───────────────────────────────────────────────────────── */
.sd-emails-thread-group { cursor: pointer; }
.sd-emails-thread-group:hover { background: #f9fafb; }
.sd-emails-thread-group.is-open { background: #f3f6fb; }
.sd-emails-thread-group.is-open > td { border-bottom-color: transparent; }

/* Caret column — a large, obvious expand control. */
.sd-emails-table th.sd-emails-th-caret,
.sd-emails-col-caret {
    width: 40px;
    text-align: center;
    padding-left: 6px;
    padding-right: 6px;
}
.sd-emails-thread-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    color: #6b7280;
    font-size: 14px;
    transition: transform 0.12s ease, background 0.12s ease;
}
.sd-emails-thread-group:hover .sd-emails-thread-caret { background: #e9eef6; color: #2271b1; }
.sd-emails-thread-group.is-open .sd-emails-thread-caret {
    transform: rotate(90deg);
    background: #2271b1;
    color: #fff;
}

/* Conversation cell — who (bold) over subject + msg count. */
.sd-emails-col-conv {
    max-width: 460px;
    white-space: normal;
}
.sd-emails-thread-who {
    display: block;
    font-weight: 600;
    color: #1d2327;
}
.sd-emails-thread-subject {
    display: block;
    margin-top: 1px;
    font-size: 12px;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sd-emails-thread-count {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
}

/* ── Inline conversation timeline (expanded thread) ──────────────────────── */
.sd-emails-thread-detail > td {
    padding: 0;
    background: #f8fafc;
    border-bottom: 2px solid #e5e7eb;
}
.sd-emails-timeline {
    padding: 6px 16px 10px 46px;
}
.sd-emails-tl-item {
    position: relative;
    display: flex;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.1s;
}
.sd-emails-tl-item:hover { background: #eef2f7; }
.sd-emails-tl-rail {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    padding-top: 1px;
}
.sd-emails-tl-dir {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}
.sd-emails-tl-dir--sent     { background: #dbeafe; color: #1e40af; }
.sd-emails-tl-dir--received { background: #dcfce7; color: #166534; }
.sd-emails-tl-body { flex: 1 1 auto; min-width: 0; }
.sd-emails-tl-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.sd-emails-tl-who {
    font-weight: 600;
    font-size: 13px;
    color: #1d2327;
}
.sd-emails-tl-date {
    margin-left: auto;
    font-size: 12px;
    color: #9ca3af;
    white-space: nowrap;
}
.sd-emails-tl-snippet {
    margin-top: 2px;
    font-size: 12px;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Status chip (thread group row) */
.sd-emails-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}
.sd-emails-chip--ok   { background: #dcfce7; color: #166534; }
.sd-emails-chip--warn { background: #fee2e2; color: #991b1b; }
.sd-emails-chip--wait { background: #fef3c7; color: #92400e; }
.sd-emails-chip--mute { background: #f3f4f6; color: #6b7280; }

/* Category chips — a distinct cool/neutral palette so the "who started it"
   dimension reads differently from the green/red/yellow status chips. */
.sd-emails-chip--cat-inquiry  { background: #e0f2fe; color: #075985; } /* client inquiry / opener */
.sd-emails-chip--cat-outreach { background: #ede9fe; color: #5b21b6; } /* studio outreach / client reply */
.sd-emails-chip--cat-cold     { background: #ecfeff; color: #155e63; } /* cold outbound / studio opener */
.sd-emails-chip--cat-note     { background: #f1f5f9; color: #475569; } /* internal note / studio reply */

/* Campaign chip — marks mail belonging to a detected outbound campaign (blast or
   reply). Clickable: scopes the flat inbox to that campaign. Amber to stand apart
   from the cool category palette and read as "outbound / promotional". */
.sd-emails-chip--campaign {
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa;
    cursor: pointer;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.sd-emails-chip--campaign:hover { background: #ffedd5; }

/* Opener / reply badge (thread message row) */
.sd-emails-role {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 6px;
    border-radius: 8px;
    white-space: nowrap;
}
.sd-emails-role--opener { background: #ede9fe; color: #5b21b6; }
.sd-emails-role--reply  { background: #f1f5f9; color: #475569; }

/* Time-to-respond pill (thread message row) */
.sd-emails-ttr {
    font-size: 11px;
    font-weight: 600;
    color: #166534;
    white-space: nowrap;
}
.sd-emails-ttr--open { color: #b45309; }
.sd-emails-ttr-avg { font-size: 10px; font-weight: 500; color: #6b7280; }

/* ── Tickets view: status chip + menu, age, reply-time ───────────────────── */
.sd-emails-ticket {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sd-emails-ticket-chip {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    cursor: pointer;
    background: #f3f4f6;
    color: #374151;
}
.sd-emails-ticket-chip:hover { filter: brightness( 0.97 ); }
.sd-emails-ticket--open .sd-emails-ticket-chip     { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.sd-emails-ticket--pending .sd-emails-ticket-chip  { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.sd-emails-ticket--resolved .sd-emails-ticket-chip { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.sd-emails-ticket--unset .sd-emails-ticket-chip    { background: #f3f4f6; color: #6b7280; border-color: #e5e7eb; }
.sd-emails-ticket-manual { font-size: 10px; color: #9ca3af; white-space: nowrap; }
.sd-emails-ticket-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    margin-top: 4px;
    min-width: 110px;
    padding: 4px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.12 );
}
.sd-emails-ticket.is-open .sd-emails-ticket-menu { display: block; }
.sd-emails-ticket-set {
    display: block;
    width: 100%;
    padding: 5px 8px;
    border: 0;
    border-radius: 6px;
    text-align: left;
    font-size: 12px;
    color: #374151;
    background: transparent;
    cursor: pointer;
}
.sd-emails-ticket-set:hover { background: #f3f4f6; }
.sd-emails-age {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.sd-emails-age--ok      { color: #166534; }
.sd-emails-age--warn    { color: #b45309; }
.sd-emails-age--overdue { color: #b91c1c; }
.sd-emails-age--none    { color: #9ca3af; font-weight: 500; }
.sd-emails-age--done    { color: #166534; }
.sd-emails-age--pending { color: #6b7280; font-weight: 500; }

/* ── Drawer: AI category editor ──────────────────────────────────────────── */
.sd-emails-cat-select {
    font-size: 12px;
    padding: 2px 6px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    max-width: 220px;
}
.sd-emails-cat-status {
    margin-left: 6px;
    font-size: 11px;
    color: #059669;
}

/* ── Tickets view: AI intent chip, sentiment, summary, non-actionable ────── */
.sd-emails-intent {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    background: #eef2ff;
    color: #4338ca;
    vertical-align: middle;
}
/* A few intent accents; unlisted slugs fall back to the indigo default above. */
.sd-emails-intent--cancellation,
.sd-emails-intent--refund_request,
.sd-emails-intent--billing_issue,
.sd-emails-intent--complaint     { background: #fee2e2; color: #b91c1c; }
.sd-emails-intent--praise,
.sd-emails-intent--thank_you     { background: #dcfce7; color: #166534; }
.sd-emails-intent--unsubscribe   { background: #fef3c7; color: #92400e; }
.sd-emails-intent--spam_auto,
.sd-emails-intent--fyi           { background: #f3f4f6; color: #6b7280; }
.sd-emails-sentiment { font-size: 11px; vertical-align: middle; }
.sd-emails-sentiment--pos { color: #16a34a; }
.sd-emails-sentiment--neg { color: #dc2626; }
.sd-emails-noaction {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: #9ca3af;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 0 5px;
    vertical-align: middle;
}
.sd-emails-ai-summary {
    display: block;
    font-size: 12px;
    color: #6b7280;
    font-style: italic;
    margin-top: 2px;
}
.sd-emails-thread-group.is-noaction { opacity: 0.62; }
.sd-emails-thread-group.is-noaction:hover { opacity: 1; }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.sd-emails-pagination {
    margin-top: 14px;
}
.sd-emails-pg-inner {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.sd-emails-pg-count {
    font-size: 12px;
    color: #646970;
    margin-right: 8px;
}
.sd-emails-page-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
    color: #1d2327;
    transition: background 0.1s, border-color 0.1s;
}
.sd-emails-page-btn:hover:not([disabled]) {
    background: #f0f0f1;
    border-color: #8c8f94;
}
.sd-emails-page-btn.is-active {
    background: #2271b1;
    border-color: #2271b1;
    color: #fff;
    font-weight: 600;
}
.sd-emails-page-btn[disabled] {
    opacity: 0.4;
    cursor: default;
}
.sd-emails-pg-arrow {
    font-size: 15px;
}
.sd-emails-pg-ellipsis {
    color: #646970;
    padding: 0 4px;
    font-size: 13px;
}

/* ── Infinite scroll footer / loading-more row ───────────────────────────── */
.sd-emails-scroll-status {
    margin-top: 10px;
    text-align: center;
    font-size: 12px;
    color: #646970;
}
.sd-emails-loading-more td {
    padding: 12px;
    text-align: center;
    font-size: 12px;
    color: #646970;
}

/* ── Preview drawer ──────────────────────────────────────────────────────── */
.sd-emails-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 9998;
}
.sd-emails-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 560px;
    max-width: 95vw;
    height: 100vh;
    background: #fff;
    border-left: 1px solid #dcdcde;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sd-emails-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #dcdcde;
    background: #f6f7f7;
    flex-shrink: 0;
}
.sd-emails-drawer-subject {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1d2327;
    line-height: 1.4;
    word-break: break-word;
}
.sd-emails-drawer-close {
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #646970;
    padding: 0 2px;
    margin-top: -2px;
}
.sd-emails-drawer-close:hover {
    color: #1d2327;
}
.sd-emails-drawer-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 20px;
    border-bottom: 1px solid #f0f0f1;
    background: #fafafa;
    flex-shrink: 0;
    font-size: 12px;
    color: #646970;
}
.sd-emails-meta-item {
    display: block;
}
.sd-emails-meta-item strong {
    color: #1d2327;
}
.sd-emails-member-link {
    color: #2271b1;
    cursor: pointer;
    text-decoration: underline;
}
.sd-emails-member-link:hover {
    color: #135e96;
}
.sd-emails-mark-staff {
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 11px;
    line-height: 1.6;
    color: #646970;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 3px;
    cursor: pointer;
    vertical-align: baseline;
}
.sd-emails-mark-staff:hover {
    border-color: #8c8f94;
    color: #1d2327;
    background: #f6f7f7;
}
.sd-emails-mark-staff:disabled {
    opacity: 0.6;
    cursor: default;
}
.sd-emails-staff-status {
    margin-left: 8px;
    font-size: 11px;
    color: #646970;
}
.sd-emails-staff-status.is-done {
    color: #2271b1;
}
.sd-emails-staff-status.is-error {
    color: #b32d2e;
}
.sd-emails-staff-reload {
    color: #2271b1;
    text-decoration: underline;
    cursor: pointer;
}
.sd-emails-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px;
    font-size: 13px;
    line-height: 1.6;
    color: #1d2327;
}
.sd-emails-plain {
    white-space: pre-wrap;
    font-family: monospace;
    font-size: 12px;
}
.sd-emails-error {
    color: #c0392b;
}
body.sd-emails-drawer-open {
    overflow: hidden;
}

/* ── Inbox reply (Phase 5) ─────────────────────────────────────────────────── */
.sd-emails-drawer-actions {
    display: flex;
    gap: 8px;
    padding: 10px 20px;
    border-bottom: 1px solid #e6e8ec;
    flex: 0 0 auto;
}
.sd-emails-reply-btn { cursor: pointer; }

/* Neutralize Avada/Fusion `button.button` inflation on frontend email-compose
   controls (Send email, Reply, Reply all, Draft with Alfred, Refine, Send,
   Cancel). The theme bumps any bare `.button` to padding:13px 29px on live;
   anchor on `.shefadash-frontend-wrap` to win specificity without !important. */
.shefadash-frontend-wrap button.button,
.shefadash-frontend-wrap .button.mv2-comm-new-btn,
.shefadash-frontend-wrap .button.sd-emails-reply-btn {
    padding: 6px 14px;
    font-size: 13px;
    line-height: 1.4;
    height: auto;
    min-height: 0;
}

.sd-emails-reply-form {
    flex: 0 0 auto;
    padding: 14px 20px 18px;
    border-top: 1px solid #e6e8ec;
    background: #fafbfc;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 60vh;
    overflow-y: auto;
}
.sd-emails-reply-title {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
}
.sd-emails-reply-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sd-emails-reply-field > span {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}
.sd-emails-reply-field input,
.sd-emails-reply-field select,
.sd-emails-reply-field textarea {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    box-sizing: border-box;
}
.sd-emails-reply-ccrow {
    display: flex;
    gap: 10px;
}
.sd-emails-reply-ccrow .sd-emails-reply-field { flex: 1; }
.sd-emails-reply-cctoggle {
    font-size: 12px;
    color: #2563eb;
    text-decoration: none;
    cursor: pointer;
    margin-top: -4px;
}
.sd-emails-reply-cctoggle:hover { text-decoration: underline; }
.sd-emails-reply-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sd-emails-reply-status { font-size: 12px; }

/* ── Alfred email drafting ─────────────────────────────────────────────────── */
.sd-emails-alfred {
    margin: 4px 0 10px;
    padding: 10px 12px;
    border: 1px dashed #c7b8e6;
    border-radius: 8px;
    background: #faf8ff;
}
.sd-emails-alfred-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sd-emails-alfred-row + .sd-emails-alfred-row { margin-top: 8px; }
.sd-emails-alfred-input { flex: 1 1 auto; }
.sd-emails-alfred-status {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    min-height: 14px;
}

/* ── Email Log (Phase 6) ───────────────────────────────────────────────────── */
.sd-elog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0 14px;
    flex-wrap: wrap;
}
.sd-elog-filters { display: flex; gap: 6px; }
.sd-elog-fbtn {
    padding: 6px 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    color: #555;
}
.sd-elog-fbtn:hover { border-color: #aaa; }
.sd-elog-fbtn.is-active {
    background: #2271b1;
    color: #fff;
    border-color: #2271b1;
}
.sd-elog-tablewrap {
    overflow-x: auto;
    border: 1px solid #e6e8ec;
    border-radius: 8px;
}
.sd-elog-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.sd-elog-table thead th {
    text-align: left;
    padding: 10px 12px;
    background: #f7f8fa;
    border-bottom: 1px solid #e6e8ec;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    white-space: nowrap;
}
.sd-elog-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f1f4;
    vertical-align: top;
    color: #1d2327;
}
.sd-elog-table tbody tr:last-child td { border-bottom: none; }
.sd-elog-date { white-space: nowrap; color: #6b7280; }
.sd-elog-subject { max-width: 320px; }
.sd-elog-subrecip { font-size: 11px; color: #9ca3af; }
.sd-elog-empty {
    text-align: center;
    padding: 28px 12px;
    color: #9ca3af;
}
.sd-elog-error { color: #c0392b; }
.sd-elog-ok { color: #cbd5e1; }
.sd-elog-err { color: #b32d2e; font-size: 12px; margin-bottom: 6px; max-width: 340px; }

.sd-elog-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}
.sd-elog-badge--sent   { background: #e7f6ec; color: #1a7f37; }
.sd-elog-badge--failed { background: #fdecec; color: #b32d2e; }

.sd-elog-resend { font-size: 12px; padding: 3px 10px; }
.sd-elog-resend--done { background: #e7f6ec; color: #1a7f37; border-color: #bfe6cc; }

.sd-elog-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
}
.sd-elog-pageinfo { font-size: 12px; color: #6b7280; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Hide secondary columns by class (not position) so both the flat and
       threaded 7-column layouts collapse to their essential columns. */
    .sd-emails-table th.sd-emails-col-studio,
    .sd-emails-table td.sd-emails-col-studio,
    .sd-emails-table th.sd-emails-col-cat,
    .sd-emails-table td.sd-emails-col-cat,
    .sd-emails-table th.sd-emails-col-source,
    .sd-emails-table td.sd-emails-col-source {
        display: none;
    }
    .sd-emails-drawer {
        width: 100vw;
    }
    .sd-emails-filters {
        gap: 8px;
    }
}

/* ── Email Analytics page ────────────────────────────────────────────────────
   Consumes the shared design system (.shefadash-page-header, .shefadash-studio-tabs,
   .sd-card, .sd-acq-section, .sd-acq-toggle*) from shefadash-overview.css +
   shefadash-acquisition.css, which the router lazy-loads before init. Only the
   comm-analytics-specific bits (accent token, status line, per-section layout,
   chart + table) live here. */

/* Communication accent for the Reply Rate stat card. Reuses the acquisition
   blue token value so the card reads as a first-class KPI with no new colour. */
.sd-card-communication { --sd-card-accent: #3b82f6; }

.sd-ca-status {
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #646970;
    background: #f6f7f7;
}

/* One-line description of the active view (Inbound/Outbound is chosen from the
   sidebar nav), mirroring the .sd-acq-section-hint copy. */
.sd-ca-tab-hint {
    margin: 0 0 16px;
    font-size: 13px;
    color: #646970;
}

/* Page-level control row (Grain + Direction), styled like Acquisition's
   .sd-acq-controls but with a small label per group. */
.sd-ca-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}
.sd-ca-control-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sd-ca-control-label {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
}

/* Per-section header: title/hint on the left, in-section toggles on the right. */
.sd-ca-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.sd-ca-section-head-titles { min-width: 200px; }
.sd-ca-section-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.sd-ca-section-body {
    width: 100%;
}

.sd-ca-chart {
    width: 100%;
}

/* ── Phase 4 intelligence panels (SLA / intent / campaigns) ──────────────── */
.sd-ca-panel { margin-top: 18px; }
.sd-ca-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 16px;
}
@media ( max-width: 780px ) { .sd-ca-two-col { grid-template-columns: 1fr; } }
.sd-ca-mini-h { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
.sd-ca-mini-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sd-ca-mini-table th { text-align: left; padding: 6px 8px; color: #6b7280; font-weight: 600; border-bottom: 1px solid #e5e7eb; }
.sd-ca-mini-table td { padding: 6px 8px; border-bottom: 1px solid #f3f4f6; }
.sd-ca-num { text-align: right; white-space: nowrap; }

/* Intent distribution bars */
.sd-ca-bars { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.sd-ca-bar-row { display: grid; grid-template-columns: 160px 1fr 44px; align-items: center; gap: 10px; font-size: 13px; }
.sd-ca-bar-label { color: #374151; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-ca-bar-track { background: #f3f4f6; border-radius: 999px; height: 14px; overflow: hidden; }
.sd-ca-bar-fill { display: block; height: 100%; background: #3b82f6; border-radius: 999px; }
.sd-ca-bar-val { color: #6b7280; font-weight: 600; text-align: right; }
.sd-ca-empty { color: #9ca3af; font-size: 13px; padding: 8px 0; }

/* Sentiment chips */
.sd-ca-sent-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.sd-ca-sent { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.sd-ca-sent--positive { background: #dcfce7; color: #166534; }
.sd-ca-sent--neutral  { background: #f3f4f6; color: #4b5563; }
.sd-ca-sent--negative { background: #fee2e2; color: #b91c1c; }

/* Campaign ROI table */
.sd-ca-camp-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.sd-ca-camp-table th { text-align: left; padding: 8px; color: #6b7280; font-weight: 600; border-bottom: 1px solid #e5e7eb; }
.sd-ca-camp-table td { padding: 8px; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
.sd-ca-pct { color: #9ca3af; font-weight: 500; }
.sd-ca-camp-kind { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 6px; border-radius: 4px; margin-right: 4px; }
.sd-ca-camp-kind--sales_promo  { background: #fef3c7; color: #92400e; }
.sd-ca-camp-kind--announcement { background: #dbeafe; color: #1e40af; }
.sd-ca-camp-kind--winback      { background: #ede9fe; color: #6d28d9; }
.sd-ca-camp-kind--transactional { background: #f3f4f6; color: #4b5563; }

/* Table view (rendered inside a section body). */
.sd-ca-table-wrap {
    overflow-x: auto;
}

.sd-ca-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #1d2327;
}

.sd-ca-table th,
.sd-ca-table td {
    padding: 6px 10px;
    text-align: right;
    border-bottom: 1px solid #f0f0f1;
    white-space: nowrap;
}

.sd-ca-table thead th {
    font-weight: 600;
    color: #646970;
    border-bottom: 2px solid #dcdcde;
    background: #f6f7f7;
}

.sd-ca-table .sd-ca-th-slicer,
.sd-ca-table .sd-ca-td-slicer {
    text-align: left;
    font-weight: 600;
    position: sticky;
    left: 0;
    background: #fff;
}

.sd-ca-table thead .sd-ca-th-slicer {
    background: #f6f7f7;
}

.sd-ca-table .sd-ca-th-total,
.sd-ca-table .sd-ca-td-total {
    font-weight: 700;
    border-left: 1px solid #dcdcde;
}

/* Drillable value cells — click to open the matching slice in the inbox. */
.sd-ca-table td.sd-ca-cell-click {
    cursor: pointer;
    color: #2563eb;
}
.sd-ca-table td.sd-ca-cell-click:hover {
    background: #eff6ff;
    text-decoration: underline;
}

.sd-ca-table .sd-ca-tr-total td {
    font-weight: 700;
    border-top: 2px solid #dcdcde;
    background: #fafafa;
}

.sd-ca-table-note {
    margin: 10px 2px 0;
    font-size: 12px;
    color: #646970;
    font-style: italic;
}