/* ES Cloud Main Styles - Sharp & Minimal */

:root {
    /* Core colors */
    --es-bg: #ffffff;
    --es-bg-secondary: #f8fafc;
    --es-bg-tertiary: #f1f5f9;
    --es-bg-hover: #f8fafc;
    --es-border: #e2e8f0;
    --es-border-strong: #cbd5e1;
    --es-text: #0f172a;
    --es-text-muted: #64748b;
    --es-text-light: #94a3b8;
    --es-text-inverse: #ffffff;
    
    /* Accent colors */
    --es-primary: #1e293b;
    --es-primary-light: #334155;
    --es-success: #10b981;
    --es-success-light: #d1fae5;
    --es-warning: #f59e0b;
    --es-warning-light: #fef3c7;
    --es-danger: #ef4444;
    --es-danger-light: #fee2e2;
    --es-info: #3b82f6;
    --es-info-light: #dbeafe;
    
    /* Fonts */
    --es-font-head: 'Syne', sans-serif;
    --es-font-body: 'Urbanist', sans-serif;
    
    /* Shadows */
    --es-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --es-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --es-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    
    /* Spacing */
    --es-space-xs: 4px;
    --es-space-sm: 8px;
    --es-space-md: 16px;
    --es-space-lg: 24px;
    --es-space-xl: 32px;
    --es-space-2xl: 40px;
    
    /* Sharp Border radius */
    --es-radius-sm: 0;
    --es-radius-md: 0;
    --es-radius-lg: 0;
    
    /* Transitions */
    --es-transition: all 0.2s ease;
    
    /* Layout */
    --es-sidebar-width: 260px;
    --es-content-max-width: 1400px;

    /* Mobile topbar height — used to offset fixed/sticky elements on mobile */
    --es-mobile-topbar-height: 60px;
}

/* Dark mode */
body.es-dark {
    --es-bg: #1a1a1a;
    --es-bg-secondary: #222222;
    --es-bg-tertiary: #2a2a2a;
    --es-bg-hover: #333333;
    --es-border: #333333;
    --es-border-strong: #444444;
    --es-text: #f0f0f0;
    --es-text-muted: #a0a0a0;
    --es-text-light: #808080;
    --es-text-inverse: #1a1a1a;
    
    --es-primary: #3b4b5e;
    --es-primary-light: #4a5b6e;
    
    --es-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --es-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --es-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--es-font-body);
    background: var(--es-bg);
    color: var(--es-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

#es-cloud-app {
    height: 100vh;
    overflow: hidden;
}

/* Tooltip Helpers */
.fa-info-circle {
    cursor: help;
    opacity: 0.7;
    margin-left: 4px;
    font-size: 0.85em;
    transition: opacity 0.2s;
}
.fa-info-circle:hover {
    opacity: 1;
    color: var(--es-primary);
}

select {
    cursor: pointer;
}

/* ========== TYPOGRAPHY ========== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--es-font-head);
    font-weight: 700;
    color: var(--es-text);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

/* ========== LAYOUT ========== */
.es-layout {
    display: flex;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* Mobile Topbar */
.es-mobile-topbar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: var(--es-space-md) var(--es-space-lg);
    background: var(--es-bg);
    border-bottom: 1px solid var(--es-border);
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--es-mobile-topbar-height);
    flex-shrink: 0;
}

.es-mobile-logo {
    height: 32px;
    width: auto;
}

.es-mobile-toggle {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-sm);
    color: var(--es-text);
    font-size: 1.25rem;
    cursor: pointer;
}

/* Sidebar */
.es-sidebar {
    width: var(--es-sidebar-width);
    background: var(--es-bg);
    border-right: 1px solid var(--es-border);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: 30;
    flex-shrink: 0;
}

.es-sidebar-header {
    padding: var(--es-space-xl) var(--es-space-lg);
    border-bottom: 1px solid var(--es-border);
}

.es-sidebar-logo {
    height: 32px;
    width: auto;
}

.es-sidebar-nav {
    flex: 1;
    padding: var(--es-space-md);
    overflow-y: auto;
}

.es-nav-item {
    display: flex;
    align-items: center;
    gap: var(--es-space-md);
    padding: var(--es-space-md) var(--es-space-lg);
    color: var(--es-text-muted);
    border-radius: var(--es-radius-sm);
    cursor: pointer;
    margin-bottom: 2px;
    border: 1px solid transparent;
    min-height: 44px; /* Touch target */
}

.es-nav-item:hover {
    background: var(--es-bg-tertiary);
    border-color: var(--es-border);
    color: var(--es-text);
}

.es-nav-item.active {
    background: var(--es-bg-tertiary);
    border-color: transparent;
    color: var(--es-text);
    font-weight: 600;
}

.es-nav-item .icon {
    width: 20px;
    text-align: center;
}

/* Sidebar Footer */
.es-sidebar-footer {
    padding: var(--es-space-lg);
    border-top: 1px solid var(--es-border);
}

.es-user-info {
    display: flex;
    align-items: center;
    gap: var(--es-space-md);
    padding: var(--es-space-sm);
    border-radius: var(--es-radius-sm);
    cursor: pointer;
    transition: var(--es-transition);
}

.es-user-info:hover {
    background: var(--es-bg-tertiary);
}

.es-user-avatar {
    width: 40px;
    height: 40px;
    background: var(--es-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
}

.es-user-details {
    flex: 1;
    min-width: 0;
}

.es-user-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.es-user-role {
    font-size: 0.75rem;
    color: var(--es-text-muted);
}

/* Sidebar Overlay */
.es-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 35;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.es-sidebar-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* Main Content */
.es-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--es-bg-secondary);
    min-width: 0; /* Prevent flex blowout */
}

/* Global Top Bar */
.es-global-topbar {
    display: flex;
    justify-content: flex-end;
    padding: 15px 24px;
    background: var(--es-bg);
    border-bottom: 1px solid var(--es-border);
    gap: 15px;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 20;
    flex-shrink: 0;
}

/* Activity panel — desktop: dropdown from topbar */
.es-activity-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    background: var(--es-bg);
    border: 1px solid var(--es-border);
    box-shadow: var(--es-shadow-lg);
    z-index: 100;
    transform-origin: top right;
    animation: dropdownSlideIn 0.2s ease forwards;
    display: flex;
    flex-direction: column;
    max-height: 480px;
}

.es-activity-panel-header {
    padding: 15px;
    border-bottom: 1px solid var(--es-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.es-activity-panel-filter {
    padding: 10px;
    border-bottom: 1px solid var(--es-border);
    flex-shrink: 0;
}

.es-activity-panel-body {
    overflow-y: auto;
    flex: 1;
}

/* ========== CONTENT & MODULE LAYOUT ========== */
.es-content {
    flex: 1;
    padding: 0;
    max-width: var(--es-content-max-width);
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Scrollable module body — use inside each page view */
.es-module-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--es-space-xl);
}

/* Ensure headers/tabs/filters don't shrink */
.es-page-header,
.es-tabs,
.es-filters {
    flex-shrink: 0;
}

/* ========== PAGE HEADER ========== */
.es-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--es-space-xl);
    flex-wrap: wrap;
    gap: var(--es-space-md);
}

.es-header-actions {
    display: flex;
    gap: var(--es-space-sm);
    flex-wrap: wrap;
}

/* ========== BUTTONS ========== */
.es-btn-primary,
.es-btn-secondary,
.es-btn-danger {
    padding: 0.75rem 1.5rem;
    border-radius: var(--es-radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid transparent;
    transition: var(--es-transition);
    text-decoration: none;
    min-height: 44px; /* Touch target */
}

.es-btn-primary {
    background: var(--es-primary);
    color: white;
}

.es-btn-primary:hover:not(:disabled) {
    background: var(--es-primary-light);
    transform: translateY(-1px);
    box-shadow: var(--es-shadow-md);
}

.es-btn-secondary {
    background: transparent;
    color: var(--es-text);
    border-color: var(--es-border);
}

.es-btn-secondary:hover:not(:disabled) {
    border-color: var(--es-text);
}

.es-btn-danger {
    background: var(--es-danger-light);
    color: var(--es-danger);
    border-color: transparent;
}

.es-btn-danger:hover:not(:disabled) {
    background: #fecaca;
}

.es-btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    min-height: 36px;
}

.es-icon-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-sm);
    color: var(--es-text-muted);
    cursor: pointer;
    transition: var(--es-transition);
}

.es-icon-btn:hover {
    border-color: var(--es-text);
    color: var(--es-text);
    background: var(--es-bg-tertiary);
}

.es-icon-btn.delete:hover {
    color: var(--es-danger);
    background: var(--es-danger-light);
    border-color: var(--es-danger);
}

/* ========== STATS GRID ========== */
.es-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--es-space-lg);
    margin-bottom: var(--es-space-xl);
}

.es-stat-card {
    background: var(--es-bg);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-md);
    padding: var(--es-space-lg);
    display: flex;
    align-items: center;
    gap: var(--es-space-lg);
    cursor: pointer;
    transition: var(--es-transition);
}

.es-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--es-shadow-md);
    border-color: var(--es-text);
}

.es-stat-icon {
    width: 48px;
    height: 48px;
    background: var(--es-bg-tertiary);
    border-radius: var(--es-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--es-primary);
    flex-shrink: 0;
}

.es-stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Stat cards inside modals — smaller figures to suit compact layout */
.es-modal .es-stat-value {
    font-size: 1.1rem;
}

.es-modal .es-stat-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
}

.es-stat-label {
    font-size: 0.85rem;
    color: var(--es-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ========== CARDS ========== */
.es-card {
    background: var(--es-bg);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-md);
    padding: var(--es-space-lg);
    transition: var(--es-transition);
}

.es-card:hover {
    border-color: var(--es-text);
    box-shadow: var(--es-shadow-md);
}

.es-card h3 {
    margin-bottom: var(--es-space-md);
    padding-bottom: var(--es-space-sm);
    border-bottom: 1px solid var(--es-border);
}

.es-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--es-space-md);
}

.es-card-header h3 {
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
}

/* ========== TABLES ========== */
.es-table-container {
    background: var(--es-bg);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-md);
    overflow: auto;
}

.es-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.es-table th {
    text-align: left;
    padding: var(--es-space-md) var(--es-space-lg);
    background: var(--es-bg-tertiary);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--es-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--es-border);
}

.es-table td {
    padding: var(--es-space-md) var(--es-space-lg);
    border-bottom: 1px solid var(--es-border);
}

.es-table tr:last-child td {
    border-bottom: none;
}

/* Clickable Table Rows styling */
.es-table tbody tr {
    transition: background-color 0.2s ease;
}

.es-table tbody tr[style*="cursor: pointer"]:hover {
    background-color: var(--es-bg-hover);
}

.es-table tbody tr[style*="cursor: pointer"]:active {
    background-color: var(--es-bg-tertiary);
}

.es-table .es-title {
    font-weight: 600;
    color: var(--es-text);
    text-decoration: none;
}

/* Document link styling */
.es-file-link {
    color: var(--es-text);
    text-decoration: none;
    font-weight: 500;
    transition: var(--es-transition);
}

.es-file-link i {
    color: var(--es-text-muted);
    margin-right: 5px;
}

.es-file-link:hover {
    color: var(--es-primary-light);
    text-decoration: underline;
}

/* Reusable table link styling */
.es-table-link {
    color: var(--es-text);
    text-decoration: none;
    font-weight: 500;
    transition: var(--es-transition);
}

.es-table-link:hover {
    color: var(--es-primary-light);
    text-decoration: underline;
}

/* ========== BADGES ========== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 0;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.badge-discovery { background: var(--es-info-light); color: var(--es-info); border-color: var(--es-info); }
.badge-build { background: var(--es-success-light); color: var(--es-success); border-color: var(--es-success); }
.badge-care { background: var(--es-warning-light); color: var(--es-warning); border-color: var(--es-warning); }
.badge-draft { background: transparent; color: var(--es-text-muted); border-color: var(--es-border); }
.badge-active { background: var(--es-success-light); color: var(--es-success); border-color: var(--es-success); }
.badge-pending { background: var(--es-warning-light); color: var(--es-warning); border-color: var(--es-warning); }
.badge-final { background: var(--es-success-light); color: var(--es-success); border-color: var(--es-success); }
.badge-warning { background: var(--es-warning-light); color: var(--es-warning); border-color: var(--es-warning); }

/* ========== FORMS & FILTERS ========== */
.es-form-group {
    margin-bottom: var(--es-space-lg);
}

.es-form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: var(--es-space-xs);
    color: var(--es-text);
}

.es-form-group input,
.es-form-group select,
.es-form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-sm);
    font-size: 0.95rem;
    background: var(--es-bg);
    color: var(--es-text);
    min-height: 44px; /* Touch target */
}

.es-form-group input:focus,
.es-form-group select:focus,
.es-form-group textarea:focus {
    outline: none;
    border-color: var(--es-primary);
}

.es-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--es-space-md);
    margin-bottom: var(--es-space-md);
}

.es-form-actions {
    display: flex;
    gap: var(--es-space-md);
    justify-content: flex-end;
    margin-top: var(--es-space-xl);
    padding-top: var(--es-space-lg);
    border-top: 1px solid var(--es-border);
    flex-wrap: wrap;
}

/* Filters Component */
.es-filters {
    background: var(--es-bg);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-md);
    padding: var(--es-space-lg);
    margin-bottom: var(--es-space-xl);
}

.es-filter-row {
    display: flex;
    gap: var(--es-space-md);
    flex-wrap: wrap;
    align-items: flex-end;
}

.es-filter-group {
    flex: 1;
    min-width: 160px;
}

.es-filter-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--es-text-muted);
    margin-bottom: var(--es-space-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.es-filter-group input,
.es-filter-group select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-sm);
    font-size: 0.95rem;
    background: var(--es-bg);
    color: var(--es-text);
    min-height: 44px; /* Touch target */
}

/* ========== MODAL ========== */
.es-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--es-space-md);
}

.es-modal {
    background: var(--es-bg);
    border-radius: var(--es-radius-md);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--es-shadow-lg);
    overflow: hidden;
}

.es-modal.es-modal-lg {
    max-width: 800px;
}

.es-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--es-space-lg) var(--es-space-xl);
    border-bottom: 1px solid var(--es-border);
    background: var(--es-bg);
    flex-shrink: 0;
}

.es-modal-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--es-text-muted);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--es-radius-sm);
}

.es-modal-close:hover {
    background: var(--es-bg-tertiary);
    color: var(--es-text);
}

.es-modal-body {
    padding: var(--es-space-xl);
    overflow-y: auto;
    flex: 1;
}

.es-modal-footer {
    padding: var(--es-space-lg) var(--es-space-xl);
    border-top: 1px solid var(--es-border);
    display: flex;
    justify-content: flex-end;
    gap: var(--es-space-md);
    background: var(--es-bg);
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ========== MEDIA GRID ========== */
.es-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--es-space-md);
}

/* ── Media filter chips ─────────────────────────────────── */
.es-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--es-border);
    background: var(--es-bg-tertiary);
    color: var(--es-text-muted);
    transition: all 0.12s;
    font-family: inherit;
    white-space: nowrap;
}
.es-filter-chip:hover { color: var(--es-text); border-color: var(--es-primary); }
.es-filter-chip.active {
    background: var(--es-bg-secondary);
    color: var(--es-primary);
    border-color: var(--es-primary);
}

/* ── Slide-up Vue transition (bulk action bar) ──────────── */
.es-slide-up-enter-active,
.es-slide-up-leave-active {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
}
.es-slide-up-enter-from,
.es-slide-up-leave-to {
    transform: translateX(-50%) translateY(80px) !important;
    opacity: 0;
}

.es-media-item {
    background: var(--es-bg);
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-md);
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.es-media-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--es-shadow-md);
    border-color: var(--es-text);
}

.es-media-item.selected {
    border: 2px solid var(--es-primary);
}

.es-media-checkbox {
    position: absolute;
    top: var(--es-space-sm);
    left: var(--es-space-sm);
    z-index: 2;
}

.es-media-thumbnail {
    height: 150px;
    background: var(--es-bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--es-border);
}

.es-media-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.es-media-details {
    padding: var(--es-space-md);
}

.es-media-name {
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.es-media-meta {
    font-size: 0.75rem;
    color: var(--es-text-muted);
}

.es-media-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--es-space-xs);
    padding: var(--es-space-sm) var(--es-space-md);
    border-top: 1px solid var(--es-border);
    background: var(--es-bg-tertiary);
}

/* ========== FOLDER TREE ========== */
.es-folder-list {
    max-height: 400px;
    overflow-y: auto;
}

.es-folder-item {
    display: flex;
    align-items: center;
    gap: var(--es-space-sm);
    padding: var(--es-space-sm);
    border-radius: var(--es-radius-sm);
    cursor: pointer;
    border: 1px solid transparent;
    min-height: 40px;
}

.es-folder-item:hover {
    background: var(--es-bg-tertiary);
    border-color: var(--es-border);
}

.es-folder-item.active {
    border-color: transparent;
    background: var(--es-bg-tertiary);
}

.es-folder-item .fa-folder {
    color: #f59e0b;
    margin-right: var(--es-space-xs);
}

.es-folder-name {
    flex: 1;
}

.es-folder-count {
    color: var(--es-text-muted);
    font-size: 0.75rem;
    margin-left: auto;
    margin-right: var(--es-space-sm);
}

.es-folder-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
}

.es-folder-item:hover .es-folder-actions {
    opacity: 1;
}

.es-folder-children {
    margin-left: var(--es-space-lg);
    border-left: 1px dashed var(--es-border);
}

.es-folder-child {
    margin-left: 20px;
    position: relative;
}
.es-folder-child::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    width: 10px;
    height: 1px;
    background: var(--es-border);
}

/* ========== TABS ========== */
.es-tabs {
    display: flex;
    border-bottom: 1px solid var(--es-border);
    margin-bottom: var(--es-space-xl);
    gap: var(--es-space-xs);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

.es-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.es-tab {
    padding: var(--es-space-md) var(--es-space-lg);
    cursor: pointer;
    color: var(--es-text-muted);
    border-bottom: 2px solid transparent;
    font-weight: 500;
    white-space: nowrap;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.es-tab:hover {
    color: var(--es-text);
}

.es-tab.active {
    color: var(--es-text);
    border-bottom-color: var(--es-primary);
}

/* ========== BULK ACTIONS ========== */
.es-bulk-actions {
    background: var(--es-primary);
    color: white;
    padding: var(--es-space-md) var(--es-space-lg);
    border-radius: var(--es-radius-md);
    margin-bottom: var(--es-space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--es-space-md);
}

/* ========== FILE UPLOAD ========== */
.es-file-upload {
    border: 2px dashed var(--es-border);
    border-radius: var(--es-radius-md);
    padding: var(--es-space-xl);
    text-align: center;
    cursor: pointer;
    background: var(--es-bg-tertiary);
}

.es-file-upload:hover {
    border-color: var(--es-primary);
}

.es-upload-icon {
    font-size: 2rem;
    margin-bottom: var(--es-space-md);
    color: var(--es-text-muted);
}

.es-upload-text {
    font-weight: 600;
    margin-bottom: var(--es-space-xs);
}

.es-upload-hint {
    font-size: 0.8rem;
    color: var(--es-text-muted);
}

/* ========== TAGS / PILLS ========== */
.es-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: var(--es-bg-tertiary);
    border: 1px solid var(--es-border);
    border-radius: 0;
    font-size: 0.75rem;
    color: var(--es-text-muted);
    margin: 0.125rem;
    cursor: pointer;
}

.es-tag:hover {
    background: var(--es-bg-hover);
    border-color: var(--es-text);
}

.es-tag.active {
    background: var(--es-primary-light);
    color: white;
    border-color: var(--es-primary);
}

/* ========== LOADING ========== */
.es-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.es-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--es-border);
    border-top-color: var(--es-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ========== TOAST ========== */
.es-toast {
    position: fixed;
    bottom: var(--es-space-xl);
    right: var(--es-space-xl);
    padding: var(--es-space-md) var(--es-space-lg);
    background: var(--es-text);
    color: white;
    border-radius: var(--es-radius-md);
    z-index: 1500;
    animation: slideIn 0.3s;
    box-shadow: var(--es-shadow-lg);
    display: flex;
    align-items: center;
    gap: var(--es-space-sm);
    max-width: 360px;
}

.es-toast.success { background: var(--es-success); }
.es-toast.error { background: var(--es-danger); }
.es-toast.warning { background: var(--es-warning); }
.es-toast.info { background: var(--es-info); }

@keyframes slideIn {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ========== ACTIVITY PANEL ========== */
@keyframes dropdownSlideIn {
    from { opacity: 0; transform: scaleY(0.95) translateY(-10px); }
    to { opacity: 1; transform: scaleY(1) translateY(0); }
}

/* ========== TIMELINE ========== */
.es-timeline {
    position: relative;
    padding-left: 30px;
    margin-top: 10px;
    margin-bottom: 20px;
}
.es-timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--es-border-strong);
}
.es-timeline-item {
    position: relative;
    margin-bottom: 25px;
}
.es-timeline-item:last-child {
    margin-bottom: 0;
}
.es-timeline-marker {
    position: absolute;
    left: -30px;
    top: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--es-primary);
    border: 3px solid var(--es-bg);
    box-shadow: 0 0 0 1px var(--es-border-strong);
    z-index: 1;
}
.es-timeline-date {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--es-text-muted);
    margin-bottom: 5px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.es-timeline-content {
    background: var(--es-bg);
    border: 1px solid var(--es-border);
    border-radius: 0;
    padding: 20px;
    transition: var(--es-transition);
    position: relative;
}
.es-timeline-content:hover {
    border-color: var(--es-text);
    box-shadow: var(--es-shadow-sm);
}

/* ========== DASHBOARD ========== */

.es-dashboard-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 32px 36px 0;
}

.es-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 48px;
    flex-shrink: 0;
    gap: var(--es-space-lg);
    flex-wrap: wrap;
}

.es-dashboard-title {
    font-family: var(--es-font-head);
    font-size: 2rem;
    letter-spacing: -1px;
    margin: 0;
    line-height: 1.1;
}

.es-dashboard-subtitle {
    color: var(--es-text-muted);
    margin: 8px 0 0 0;
    font-size: 1rem;
}

.es-quick-create-wrap {
    position: relative;
    flex-shrink: 0;
}

.es-quick-create-dropdown {
    position: absolute;
    right: 0;
    top: 52px;
    background: var(--es-bg);
    border: 1px solid var(--es-border);
    width: 220px;
    box-shadow: var(--es-shadow-lg);
    z-index: 100;
}

.es-quick-create-item {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    border-bottom: 1px solid var(--es-border);
    cursor: pointer;
    transition: var(--es-transition);
    min-height: 44px;
}

.es-quick-create-item:last-child {
    border-bottom: none;
}

.es-quick-create-item:hover {
    background: var(--es-bg-secondary);
    padding-left: 25px;
}

.es-activity-stream-label {
    font-family: var(--es-font-head);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--es-text-muted);
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.es-activity-stream-label span {
    height: 1px;
    background: var(--es-border);
    flex: 1;
    display: block;
}

/* Dashboard scrollable stream */
.es-dashboard-stream {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 32px;
    -webkit-overflow-scrolling: touch;
}

/* Activity stream items */
.es-stream-item {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    cursor: pointer;
}

.es-stream-marker-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.es-stream-dot {
    width: 12px;
    height: 12px;
    background: var(--es-border-strong);
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
    transition: var(--es-transition);
}

.es-stream-dot.unread {
    background: var(--es-primary);
}

.es-stream-line {
    width: 1px;
    background: var(--es-border);
    flex: 1;
    margin-top: 10px;
    min-height: 16px;
}

.es-stream-content {
    padding-bottom: 6px;
    flex: 1;
    min-width: 0;
}

.es-stream-text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--es-text);
}

.es-stream-time {
    font-size: 0.75rem;
    color: var(--es-text-muted);
    margin-right: 8px;
}

.es-stream-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.es-stream-type-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 2px 8px;
    background: var(--es-bg-secondary);
    border: 1px solid var(--es-border);
    color: var(--es-text-muted);
}

.es-stream-delete {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    color: var(--es-text-muted);
    font-size: 0.75rem;
    opacity: 0.4;
    transition: var(--es-transition);
    min-height: 28px;
    min-width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.es-stream-delete:hover {
    opacity: 1;
    color: var(--es-danger);
}

/* ========== OFFICE MODULE ========== */

.es-office-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.es-office-pinned {
    flex-shrink: 0;
    padding: 32px 36px 0;
}

.es-office-body {
    padding: 0 36px 32px;
}

.es-filter-group--wide {
    flex: 2;
}

/* ========== SEND MAIL ========== */

.es-mail-layout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.es-mail-compose {
    flex: 1;
    min-width: 0;
}

.es-mail-from-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.es-mail-from-option {
    flex: 1;
    min-width: 160px;
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.15s;
    background: var(--es-bg-tertiary);
    color: var(--es-text);
    border: 2px solid var(--es-border);
    min-height: 44px;
}

.es-mail-from-option.active {
    background: var(--es-primary);
    color: #fff;
    border-color: var(--es-primary);
}

/* Add to main.css - around where .es-mail-from-option is defined */
.es-mail-from-option {
    flex: 1;
    min-width: 160px;
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.15s;
    background: var(--inactive-bg, var(--es-bg-tertiary)); /* Fallback if --inactive-bg not set */
    color: var(--es-text);
    border: 2px solid var(--es-border);
    min-height: 44px;
}

.es-mail-from-option.active {
    background: var(--active-bg, var(--es-primary));
    color: #fff;
    border-color: var(--active-border, var(--es-primary));
}

.es-mail-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--es-bg-secondary);
    border: 1px solid var(--es-border);
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    overflow: hidden;
}

.es-mail-suggestion-item {
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--es-border);
    transition: background 0.1s;
    min-height: 44px;
}

.es-mail-suggestion-item:hover {
    background: var(--es-bg-tertiary);
}

.es-mail-suggestion-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--es-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.es-mail-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}

/* ========== ADDRESS BOOK ========== */

.es-address-book-wrap {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    width: 44px;
    transition: width 0.2s;
}

.es-address-book-wrap.expanded {
    width: 300px;
}

.es-address-book-strip {
    width: 44px;
    background: var(--es-bg-secondary);
    border: 1px solid var(--es-border);
    padding: 14px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: var(--es-text-muted);
    transition: color 0.15s;
    min-height: 100px;
}

.es-address-book-strip:hover {
    color: var(--es-primary);
}

.es-address-book-strip-label {
    writing-mode: vertical-rl;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}

.es-address-book-panel {
    background: var(--es-bg-secondary);
    border: 1px solid var(--es-border);
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 680px;
}

.es-address-book-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--es-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.es-address-book-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--es-text-muted);
    font-size: 0.95rem;
    padding: 4px 8px;
    min-height: 36px;
    min-width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--es-transition);
}

.es-address-book-btn:hover {
    color: var(--es-primary);
}

.es-address-book-search {
    padding: 10px 12px;
    border-bottom: 1px solid var(--es-border);
    flex-shrink: 0;
}

.es-address-book-search-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--es-border);
    background: var(--es-bg-tertiary);
    color: var(--es-text);
    font-size: 0.85rem;
    box-sizing: border-box;
    min-height: 36px;
}

.es-address-book-list {
    overflow-y: auto;
    flex: 1;
}

.es-address-book-empty {
    padding: 20px;
    text-align: center;
    color: var(--es-text-muted);
    font-size: 0.85rem;
}

.es-address-book-contact {
    padding: 10px 14px;
    border-bottom: 1px solid var(--es-border);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.1s;
    min-height: 44px;
}

.es-address-book-contact:hover {
    background: var(--es-bg-tertiary);
}

.es-address-book-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--es-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.82rem;
    flex-shrink: 0;
}

.es-address-book-info {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.es-address-book-name {
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.es-address-book-sub {
    font-size: 0.78rem;
    color: var(--es-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.es-address-book-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.es-address-book-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    font-size: 0.8rem;
    min-height: 32px;
    min-width: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s;
}

.es-address-book-action-btn:hover {
    opacity: 0.7;
}

/* ========== ENGAGEMENT MODULE ========== */

.es-eng-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.es-eng-pinned {
    flex-shrink: 0;
    padding: 32px 36px 0;
}

.es-eng-body {
    padding: 0 36px 32px;
}

/* Back nav + title row */
.es-detail-back {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
}

.es-detail-title {
    font-weight: 600;
    font-size: 1.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Engagements / detail 2-col grid */
.es-detail-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

/* Portal link row */
.es-portal-link-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.es-portal-link-input {
    flex: 1;
    padding: 8px;
    border: 1px solid var(--es-border);
    background: var(--es-bg-tertiary);
    font-size: 0.85rem;
    color: var(--es-text);
    min-height: 40px;
}

/* Billing tab header */
.es-billing-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: var(--es-space-md);
}

/* ========== FUNNEL ========== */

.es-funnel-source-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--es-bg-tertiary);
    border: 1px solid var(--es-border);
    border-bottom: none;
    font-size: 0.875rem;
    color: var(--es-text-muted);
    flex-wrap: wrap;
}

.es-funnel-source-date {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--es-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Contact info bar */
.es-funnel-infobar {
    display: flex;
    align-items: center;
    border: 1px solid var(--es-border);
    border-bottom: none;
    background: var(--es-bg);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.es-funnel-infobar-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-right: 1px solid var(--es-border);
    flex-shrink: 0;
}

.es-funnel-avatar {
    width: 36px;
    height: 36px;
    background: var(--es-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}

.es-funnel-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--es-text);
    white-space: nowrap;
}

.es-funnel-company {
    font-size: 11px;
    color: var(--es-text-muted);
    white-space: nowrap;
}

.es-funnel-infobar-meta {
    display: flex;
    align-items: center;
    flex: 1;
    overflow: hidden;
}

.es-funnel-meta-pill {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 18px;
    border-right: 1px solid var(--es-border);
    flex-shrink: 0;
}

.es-funnel-meta-pill--flex {
    flex: 1;
    min-width: 0;
    flex-shrink: 1;
}

.es-funnel-meta-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--es-text-light);
    margin-bottom: 3px;
}

.es-funnel-meta-value {
    font-size: 12px;
    color: var(--es-text-muted);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
}

.es-funnel-meta-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
}

.es-funnel-source-badge {
    background: var(--es-primary);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.2rem 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.es-funnel-infobar-edit {
    padding: 14px 16px;
    flex-shrink: 0;
}

/* Stage progress bar */
.es-funnel-stages {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--es-border);
    border-bottom: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.es-funnel-stage {
    flex: 1;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    padding: 12px 16px 10px;
    cursor: pointer;
    transition: all 0.2s;
    gap: 5px;
    background: var(--es-bg);
}

.es-funnel-stage--active {
    background: var(--es-primary);
}

.es-funnel-stage--done {
    background: var(--es-bg-secondary);
}

.es-funnel-stage-name {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--es-text-muted);
}

.es-funnel-stage--active .es-funnel-stage-name { color: rgba(255,255,255,0.7); }
.es-funnel-stage--done .es-funnel-stage-name { color: var(--es-text-light); }

.es-funnel-stage-track {
    height: 4px;
    background: var(--es-border);
}

.es-funnel-stage-status {
    font-size: 10px;
    display: flex;
    align-items: center;
    gap: 3px;
    color: transparent;
}

.es-funnel-stage--active .es-funnel-stage-status { color: rgba(255,255,255,0.5); }
.es-funnel-stage--done .es-funnel-stage-status { color: var(--es-success); }

/* Funnel panel (sequence / templates) */
.es-funnel-panel {
    border: 1px solid var(--es-border);
}

.es-funnel-panel-tabs {
    display: flex;
    border-bottom: 1px solid var(--es-border);
    background: var(--es-bg);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.es-funnel-panel-tab {
    padding: 14px 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    color: var(--es-text-muted);
    min-height: 44px;
}

.es-funnel-panel-tab.active {
    color: var(--es-text);
    border-bottom-color: var(--es-primary);
}

.es-funnel-tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: var(--es-space-sm);
}

/* Queue timeline */
.es-funnel-queue {
    position: relative;
    padding-left: 30px;
}

.es-funnel-queue::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--es-border-strong);
}

.es-funnel-queue-item {
    position: relative;
    margin-bottom: 16px;
}

.es-funnel-queue-dot {
    position: absolute;
    left: -30px;
    top: 14px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid var(--es-bg);
    box-shadow: 0 0 0 1px var(--es-border-strong);
    z-index: 1;
}

.es-funnel-queue-card {
    background: var(--es-bg);
    border: 1px solid var(--es-border);
    padding: 14px 16px;
    transition: all 0.2s;
}

.es-funnel-queue-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.es-funnel-queue-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.es-funnel-queue-date {
    font-size: 11px;
    font-weight: 600;
    color: var(--es-text-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Template grid */
.es-template-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.es-template-card {
    background: var(--es-bg-secondary);
    border: 1px solid var(--es-border);
    padding: 14px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.es-template-card:hover {
    border-color: var(--es-text);
}

.es-template-card-key {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--es-text-light);
    margin-bottom: 6px;
}

.es-template-card-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--es-text);
    margin-bottom: 4px;
}

.es-template-card-subject {
    font-size: 12px;
    color: var(--es-text-muted);
    font-style: italic;
    margin-bottom: 12px;
    line-height: 1.4;
}

.es-template-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.es-template-card-delay {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--es-text-light);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Correspondence tab */
.es-correspondence-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: var(--es-space-md);
}

.es-correspondence-title-row {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.es-correspondence-check-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--es-text-muted);
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    transition: color 0.15s;
    min-height: 32px;
}

.es-correspondence-check-btn:hover {
    color: var(--es-primary);
}

.es-correspondence-item-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

/* Brief card in engagement detail */
.es-brief-card {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--es-space-md);
    flex-wrap: wrap;
}

.es-brief-info {
    flex: 1;
    min-width: 0;
}

/* Artefact rows in deliverables timeline */
.es-artefact-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--es-space-md);
}

.es-artefact-icon-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.es-artefact-icon {
    width: 40px;
    height: 40px;
    background: var(--es-bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--es-border);
    flex-shrink: 0;
}

.es-artefact-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

/* ========== MODAL COMPONENTS ========== */

/* Danger modal variant */
.es-modal-danger {
    border: 1px solid var(--es-danger);
}

.es-modal-header--danger {
    background: var(--es-danger-light);
}

/* Delete warning box */
.es-delete-warning-box {
    background: var(--es-bg-tertiary);
    padding: 15px;
    border-left: 4px solid var(--es-danger);
    margin-bottom: 20px;
}

/* Upload progress bar */
.es-upload-progress {
    margin-bottom: 15px;
}

.es-upload-progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 0.85rem;
}

.es-upload-progress-bar {
    height: 6px;
    background: var(--es-border);
    border-radius: 3px;
    overflow: hidden;
}

.es-upload-progress-fill {
    height: 100%;
    background: var(--es-success);
    transition: width 0.2s;
}

/* Selected file row */
.es-selected-file {
    margin-top: 10px;
    padding: 10px;
    background: var(--es-bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--es-space-sm);
}

.es-selected-file-name {
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.es-selected-file-remove {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* Pill tag list in modals */
.es-pill-list {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    min-height: 24px;
}

.es-pill-remove {
    background: none;
    border: none;
    color: inherit;
    margin-left: 4px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

/* View modal meta rows */
.es-view-meta-row {
    display: flex;
    gap: 20px;
    color: var(--es-text-muted);
    font-size: 0.85rem;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.es-view-file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--es-space-md);
    flex-wrap: wrap;
}

.es-view-file-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.es-tag-list {
    margin-top: 20px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* View data grid (2-col) */
.es-view-data-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.es-view-data-grid--3col {
    grid-template-columns: repeat(3, 1fr);
}

.es-view-data-cell {
    background: var(--es-bg-tertiary);
    padding: 12px;
}

.es-view-data-label {
    color: var(--es-text-muted);
    font-size: 0.8rem;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.es-view-data-value-lg {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--es-primary);
}

/* Credential copy row */
.es-cred-copy-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--es-bg-tertiary);
    padding: 10px;
    border: 1px solid var(--es-border);
    gap: var(--es-space-sm);
}

.es-cred-value {
    font-family: monospace;
    font-size: 1.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* Upload file list */
.es-upload-file-list {
    list-style: none;
    margin: 10px 0 20px;
    max-height: 150px;
    overflow-y: auto;
    background: var(--es-bg-tertiary);
    border: 1px solid var(--es-border);
}

.es-upload-file-list li {
    padding: 10px;
    border-bottom: 1px solid var(--es-border);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.es-upload-file-size {
    color: var(--es-text-muted);
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* Media preview box */
.es-media-preview-box {
    text-align: center;
    margin-bottom: 20px;
    background: var(--es-bg-tertiary);
    padding: 20px;
}

.es-media-preview-img {
    max-width: 100%;
    max-height: 50vh;
    box-shadow: var(--es-shadow-md);
}

.es-media-preview-video {
    max-width: 100%;
    max-height: 50vh;
}

.es-media-preview-pdf {
    width: 100%;
    height: 50vh;
}

.es-media-preview-fallback {
    padding: 40px 0;
}

/* Preview modal two-column layout */
.es-media-preview-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    min-height: 360px;
}

.es-media-preview-left {
    border-right: 1px solid var(--es-border);
    border-radius: 0;
    margin-bottom: 0;
}

.es-media-preview-right {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 16px;
    overflow-y: auto;
}

/* Profile modal */
.es-profile-layout {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.es-profile-avatar-col {
    text-align: center;
    width: 150px;
    flex-shrink: 0;
}

.es-profile-avatar {
    width: 120px;
    height: 120px;
    font-size: 48px;
    margin: 0 auto 15px;
    position: relative;
}

.es-profile-avatar-uploading {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.es-profile-fields {
    flex: 1;
    min-width: 0;
}

.es-security-form {
    max-width: 400px;
    margin: 0 auto;
}

.es-sessions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: var(--es-space-md);
}

.es-session-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border: 1px solid var(--es-border);
    margin-bottom: 10px;
    gap: var(--es-space-md);
}

.es-session-info {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    min-width: 0;
}

.es-session-device-icon {
    width: 40px;
    height: 40px;
    background: var(--es-bg-tertiary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.es-session-meta {
    font-size: 12px;
    color: var(--es-text-muted);
    margin-top: 3px;
}

/* Split footer (sign out left, actions right) */
.es-modal-footer--split {
    justify-content: space-between;
}

/* Share modal security box */
.es-share-security-box {
    background: var(--es-bg-tertiary);
    padding: 15px;
}

/* Checkbox label */
.es-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 600;
    color: var(--es-text);
}

.es-checkbox {
    width: auto;
    transform: scale(1.2);
    cursor: pointer;
}

/* Template stats row */
.es-template-stats-row {
    display: flex;
    gap: 20px;
    margin-top: 15px;
}

.es-template-stat {
    text-align: center;
    flex: 1;
    padding: 12px;
    background: var(--es-bg-tertiary);
}

.es-template-stat-value {
    font-size: 22px;
    font-weight: 700;
}

.es-template-stat-label {
    font-size: 12px;
    color: var(--es-text-muted);
}

/* Queue item pending actions */
.es-queue-item-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

/* Delay row in template modal */
.es-delay-row {
    display: flex;
    gap: 10px;
}

.es-delay-value {
    width: 80px;
    flex-shrink: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--es-border);
    background: var(--es-bg);
    color: var(--es-text);
    min-height: 44px;
}

.es-delay-unit {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--es-border);
    background: var(--es-bg);
    color: var(--es-text);
    min-height: 44px;
}

/* Reply quote */
.es-reply-quote {
    background: var(--es-bg-tertiary);
    border-left: 3px solid var(--es-border);
    padding: 10px 15px;
    margin-bottom: 15px;
    font-size: 0.88rem;
    color: var(--es-text-muted);
}

/* ========== MEDIA MODULE ========== */

.es-media-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.es-media-pinned {
    flex-shrink: 0;
    padding: 32px 36px 0;
}

/* Desktop: folder tree + grid side by side */
.es-media-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
    padding: 0 36px 32px;
}

.es-media-tree {
    display: none; /* Tree panel removed — folders are now a dropdown chip */
}

.es-media-files {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    min-width: 0;
}

.es-media-pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    gap: 5px;
    align-items: center;
}

/* Mobile folder toggle — hidden on desktop */
.es-media-folder-toggle {
    display: none;
}

/* ========== RESPONSIVE — 1024px ========== */
@media (max-width: 1024px) {
    .es-module-body { padding: var(--es-space-lg); }
    .es-stats-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* ========== RESPONSIVE — 768px ========== */
@media (max-width: 768px) {

    /* Layout shell */
    .es-layout {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }

    #es-cloud-app {
        height: auto;
        min-height: 100vh;
        overflow: auto;
    }

    /* Mobile topbar */
    .es-mobile-topbar {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 40;
    }

    /* Sidebar — full-height drawer */
    .es-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 50;
        width: min(var(--es-sidebar-width), 85vw);
    }

    .es-sidebar.open {
        transform: translateX(0);
    }

    .es-sidebar-overlay {
        display: block;
    }

    /* Main — sits below fixed mobile topbar */
    .es-main {
        height: auto;
        min-height: calc(100vh - var(--es-mobile-topbar-height));
        margin-top: var(--es-mobile-topbar-height);
        overflow-y: auto;
    }

    /* Hide the desktop global topbar on mobile — the mobile topbar replaces it */
    .es-global-topbar {
        display: none;
    }

    /* Content area */
    .es-content {
        overflow: visible;
        height: auto;
    }

    /* Module body padding */
    .es-module-body {
        padding: var(--es-space-md);
        overflow: visible;
    }

    /* Page header — stack on very narrow screens */
    .es-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--es-space-sm);
        margin-bottom: var(--es-space-lg);
    }

    .es-header-actions {
        width: 100%;
    }

    .es-header-actions .es-btn-primary,
    .es-header-actions .es-btn-secondary {
        flex: 1;
        justify-content: center;
    }

    /* Stats grid — 2-up on mobile, not 1-up */
    .es-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--es-space-sm);
    }

    .es-stat-card {
        padding: var(--es-space-md);
        gap: var(--es-space-sm);
    }

    .es-stat-value { font-size: 1.5rem; }
    .es-stat-icon { width: 36px; height: 36px; font-size: 1.1rem; }

    /* Typography */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }

    /* Dashboard header */
    .es-dashboard-header {
        margin-bottom: var(--es-space-xl);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--es-space-md);
    }

    .es-dashboard-title { font-size: 1.5rem; }

    .es-quick-create-wrap {
        width: 100%;
    }

    .es-quick-create-wrap .es-btn-primary {
        width: 100%;
        justify-content: space-between;
    }

    .es-quick-create-dropdown {
        width: 100%;
        right: auto;
        left: 0;
    }

    /* Filters — stack full-width */
    .es-filter-row {
        flex-direction: column;
        gap: var(--es-space-sm);
    }

    .es-filter-group {
        min-width: 0;
        width: 100%;
        flex: none;
    }

    /* Tabs — scrollable, no wrapping */
    .es-tabs {
        margin-bottom: var(--es-space-lg);
    }

    .es-tab {
        padding: var(--es-space-sm) var(--es-space-md);
        font-size: 0.85rem;
    }

    /* Form rows — single column */
    .es-form-row {
        grid-template-columns: 1fr;
    }

    .es-form-actions {
        flex-direction: column-reverse;
    }

    .es-form-actions .es-btn-primary,
    .es-form-actions .es-btn-secondary {
        width: 100%;
        justify-content: center;
    }

    /* Media grid — 2-up */
    .es-media-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--es-space-sm);
    }

    .es-media-thumbnail { height: 110px; }

    /* Folder tree — hidden by default on mobile; shown via toggle if needed */
    .es-folder-list { max-height: none; }

    /* Modal — full-screen on mobile */
    .es-modal-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .es-modal,
    .es-modal.es-modal-lg {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 0;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    .es-modal-body {
        padding: var(--es-space-lg);
    }

    .es-modal-footer {
        padding: var(--es-space-md) var(--es-space-lg);
        flex-direction: column-reverse;
        gap: var(--es-space-sm);
    }

    .es-modal-footer .es-btn-primary,
    .es-modal-footer .es-btn-secondary,
    .es-modal-footer .es-btn-danger {
        width: 100%;
        justify-content: center;
    }

    /* Modal components */
    .es-view-data-grid {
        grid-template-columns: 1fr;
    }

    .es-view-data-grid--3col {
        grid-template-columns: 1fr;
    }

    .es-view-file-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .es-view-file-actions {
        width: 100%;
    }

    .es-view-file-actions .es-btn-primary,
    .es-view-file-actions .es-btn-secondary {
        flex: 1;
        justify-content: center;
    }

    .es-cred-copy-row {
        flex-wrap: wrap;
    }

    .es-cred-value {
        width: 100%;
    }

    .es-profile-layout {
        flex-direction: column;
        align-items: center;
    }

    .es-profile-avatar-col {
        width: 100%;
    }

    .es-security-form {
        max-width: none;
    }

    .es-sessions-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .es-sessions-header .es-btn-danger {
        width: 100%;
        justify-content: center;
    }

    .es-session-item {
        flex-wrap: wrap;
    }

    .es-modal-footer--split {
        flex-direction: column-reverse;
        gap: var(--es-space-sm);
    }

    .es-modal-footer--split > * {
        width: 100%;
        justify-content: center;
    }

    .es-modal-footer--split > div {
        display: flex;
        flex-direction: column-reverse;
        gap: var(--es-space-sm);
        width: 100%;
    }

    .es-modal-footer--split > div .es-btn-primary,
    .es-modal-footer--split > div .es-btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .es-template-stats-row {
        gap: var(--es-space-sm);
    }

    .es-queue-item-actions {
        flex-direction: column;
    }

    .es-delay-row {
        flex-wrap: wrap;
    }

    .es-delay-value {
        width: 100%;
    }

    .es-media-preview-img,
    .es-media-preview-video,
    .es-media-preview-pdf {
        max-height: 35vh;
    }

    /* Media module */
    .es-media-view {
        height: auto;
        overflow: visible;
    }

    .es-media-pinned {
        padding: var(--es-space-lg) var(--es-space-md) 0;
    }

    /* Body becomes vertical stack */
    .es-media-body {
        flex-direction: column;
        overflow: visible;
        padding: var(--es-space-md) var(--es-space-md) var(--es-space-xl);
        gap: 0;
    }

    /* Folder tree — collapsed by default, shown via toggle */
    .es-media-tree {
        min-width: 0;
        max-width: none;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        border: none;
        padding: 0;
        margin-bottom: 0;
        transition: max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
        align-self: auto;
    }

    .es-media-tree--open {
        max-height: 400px;
        overflow-y: auto;
        border: 1px solid var(--es-border);
        padding: 15px;
        margin-bottom: var(--es-space-md);
    }

    /* Mobile toggle button — shown on mobile */
    .es-media-folder-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 10px 14px;
        background: var(--es-bg);
        border: 1px solid var(--es-border);
        color: var(--es-text);
        font-size: 0.875rem;
        font-weight: 600;
        cursor: pointer;
        margin-bottom: var(--es-space-md);
        min-height: 44px;
        transition: var(--es-transition);
    }

    .es-media-folder-toggle:hover {
        background: var(--es-bg-secondary);
    }

    .es-media-folder-toggle-badge {
        background: var(--es-primary);
        color: white;
        border-radius: 50%;
        width: 18px;
        height: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
    }

    /* Files area — full width */
    .es-media-files {
        overflow: visible;
        min-height: 0;
    }

    /* Pagination */
    .es-media-pagination {
        justify-content: center;
    }

    /* Engagement module */
    .es-eng-view {
        height: auto;
        overflow: visible;
    }

    .es-eng-pinned {
        padding: var(--es-space-lg) var(--es-space-md) 0;
    }

    .es-eng-body {
        padding: 0 var(--es-space-md) var(--es-space-xl);
        overflow: visible;
    }

    .es-detail-back {
        min-width: 0;
        flex-wrap: wrap;
        gap: var(--es-space-sm);
    }

    .es-detail-title {
        font-size: 1rem;
        white-space: normal;
    }

    /* 2-col grids → single column */
    .es-detail-grid {
        grid-template-columns: 1fr;
    }

    .es-template-grid {
        grid-template-columns: 1fr;
    }

    /* Billing header */
    .es-billing-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .es-billing-header .es-btn-primary {
        width: 100%;
        justify-content: center;
    }

    /* Funnel infobar — scrollable horizontally, don't stack */
    .es-funnel-infobar {
        overflow-x: auto;
    }

    /* Funnel stages — scrollable horizontally */
    .es-funnel-stages {
        overflow-x: auto;
    }

    .es-funnel-stage {
        min-width: 90px;
        padding: 10px 12px 8px;
    }

    /* Correspondence header */
    .es-correspondence-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .es-correspondence-header > div:last-child {
        width: 100%;
    }

    .es-correspondence-header .es-btn-primary,
    .es-correspondence-header .es-btn-secondary {
        flex: 1;
        justify-content: center;
    }

    /* Correspondence item body — stack on very narrow */
    .es-correspondence-item-body {
        flex-wrap: wrap;
    }

    /* Brief card */
    .es-brief-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .es-brief-card .es-btn-primary {
        width: 100%;
        justify-content: center;
    }

    /* Artefact row */
    .es-artefact-row {
        flex-wrap: wrap;
    }

    /* Office module */
    .es-office-view {
        height: auto;
        overflow: visible;
    }

    .es-office-pinned {
        padding: var(--es-space-lg) var(--es-space-md) 0;
    }

    .es-office-body {
        padding: 0 var(--es-space-md) var(--es-space-xl);
        overflow: visible;
    }

    .es-filter-group--wide {
        flex: none;
        width: 100%;
    }

    /* Dashboard */
    .es-dashboard-view {
        padding: var(--es-space-lg) var(--es-space-md) 0;
        height: auto;
        overflow: visible;
    }

    .es-dashboard-header {
        margin-bottom: var(--es-space-xl);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--es-space-md);
    }

    .es-dashboard-title { font-size: 1.5rem; }

    .es-quick-create-wrap {
        width: 100%;
    }

    .es-quick-create-btn {
        width: 100%;
        justify-content: space-between;
    }

    .es-quick-create-dropdown {
        width: 100%;
        right: auto;
        left: 0;
        top: calc(100% + 4px);
    }

    .es-activity-stream-label {
        margin-bottom: var(--es-space-lg);
    }

    .es-dashboard-stream {
        overflow: visible;
        padding-bottom: var(--es-space-xl);
    }

    .es-stream-item {
        gap: 14px;
    }

    /* Activity panel backdrop */
    .es-activity-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 199;
    }

    /* Activity panel — full-width bottom sheet on mobile */
    .es-activity-panel {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 70vh;
        border-radius: 8px 8px 0 0;
        animation: sheetSlideUp 0.25s ease forwards;
        z-index: 200;
    }

    @keyframes sheetSlideUp {
        from { transform: translateY(100%); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    /* Toast — full-width */
    .es-toast {
        bottom: var(--es-space-md);
        right: var(--es-space-md);
        left: var(--es-space-md);
        max-width: none;
    }

    /* Tables — horizontal scroll */
    .es-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .es-table {
        min-width: 500px;
    }

    /* Bulk actions */
    .es-bulk-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Timeline */
    .es-timeline {
        padding-left: 20px;
    }

    .es-timeline-marker {
        left: -20px;
        width: 12px;
        height: 12px;
    }

    .es-timeline-content {
        padding: var(--es-space-md);
    }
}

/* Activity panel backdrop — mobile only */
.es-activity-backdrop {
    display: none;
}

/* ========== RESPONSIVE — 480px ========== */
@media (max-width: 480px) {
    .es-stats-grid {
        grid-template-columns: 1fr;
    }

    .es-media-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .es-dashboard-title { font-size: 1.35rem; }
}
/* ==========================================================================
   ES Cloud — Mobile UX Improvements Patch
   v3.1 — Append to or merge into main.css
   
   Covers:
   1.  Button sizing — compact on mobile without losing touch targets
   2.  Typography scaling — tighter hierarchy on small screens
   3.  Table → card-list pattern for key modules
   4.  Module padding tightened across the board
   5.  Form/filter inputs — reduced padding, smaller feel
   6.  Activity stream — native-app density
   7.  Dashboard — compact header, tight stat cards
   8.  Topbar — slimmer, cleaner
   9.  Tabs — shorter, pill-style option
   10. Icon button clusters in tables — compact action menus
   11. Badge sizing — subtle reduction on mobile
   12. Filters — collapsed by default with expand toggle support
   13. Funnel infobar — stacks gracefully on very narrow screens
   14. Miscellaneous spacing tightening
   ========================================================================== */


/* ==========================================================================
   1. BUTTON SIZING
   Primary/secondary buttons are 44px min-height on desktop (correct for
   touch). On mobile they look oversized with the full 0.75rem 1.5rem padding.
   Reduce to a tighter feel while keeping 40px touch target.
   ========================================================================== */

@media (max-width: 768px) {

    /* Standard action buttons — tighter padding, slightly smaller text */
    .es-btn-primary,
    .es-btn-secondary,
    .es-btn-danger {
        padding: 0.55rem 1.1rem;
        font-size: 0.82rem;
        min-height: 40px;
        gap: 0.4rem;
    }

    /* Small buttons — barely changed but consistent */
    .es-btn-small {
        padding: 0.4rem 0.8rem;
        font-size: 0.75rem;
        min-height: 34px;
    }

    /* Icon buttons — reduce from 44×44 to 36×36.
       Still comfortably tappable, much less bulky in table action cells. */
    .es-icon-btn {
        width: 36px;
        height: 36px;
        font-size: 0.8rem;
    }

    /* Table action cells: pull icon buttons closer together */
    .es-table td .es-icon-btn + .es-icon-btn {
        margin-left: 2px;
    }

    /* Quick Create button specific — keep full-width but tighter */
    .es-quick-create-btn {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
        min-height: 40px;
    }

    /* Quick Create dropdown items — tighter rows */
    .es-quick-create-item {
        padding: 11px 16px;
        font-size: 0.84rem;
        min-height: 40px;
    }

    /* Modal footer buttons — full-width already handled, just tighten padding */
    .es-modal-footer .es-btn-primary,
    .es-modal-footer .es-btn-secondary,
    .es-modal-footer .es-btn-danger {
        padding: 0.6rem 1rem;
        font-size: 0.84rem;
    }

}


/* ==========================================================================
   2. TYPOGRAPHY SCALING
   Base headings are way too large. The 768px breakpoint already scales h1-h3
   but not far enough and misses h4 and body sizes.
   ========================================================================== */

@media (max-width: 768px) {

    /* Reduce base heading scale */
    h1 { font-size: 1.4rem; letter-spacing: -0.5px; }
    h2 { font-size: 1.2rem; letter-spacing: -0.3px; }
    h3 { font-size: 1.05rem; }
    h4 { font-size: 0.95rem; }

    /* Module body text — tighten line height for denser reading on small screens */
    body {
        font-size: 0.9rem;
        line-height: 1.45;
    }

    /* Page header title in detail views */
    .es-detail-title {
        font-size: 0.95rem;
    }

}

@media (max-width: 480px) {
    h1 { font-size: 1.25rem; }
    h2 { font-size: 1.1rem; }
    h3 { font-size: 1rem; }
}


/* ==========================================================================
   3. TABLE → CARD-LIST PATTERN
   Horizontal scrolling tables feel like desktop web on mobile. For the main
   data lists (documents, transactions, credentials, clients), we swap in a
   stacked card layout on small screens. The table is hidden; a sibling
   card list (generated in Vue with v-if) replaces it.
   
   To implement this, add class="es-table-mobile-hidden" to each <table> and 
   wrap your card list in class="es-card-list" (shown below). Or use the CSS 
   below which auto-hides the table container and shows the card list.
   
   CSS-only approach: hide scrollable table, show card list instead.
   The card list div must exist in the template with class="es-card-list".
   (Template changes needed — see companion notes below this block.)
   ========================================================================== */

/* Desktop: card list hidden, table shown (default) */
.es-card-list {
    display: none;
}

@media (max-width: 768px) {

    /* Hide the table scroll container */
    .es-table-container {
        display: none;
    }

    /* Show the card list */
    .es-card-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /* Individual card */
    .es-card-list-item {
        background: var(--es-bg);
        border: 1px solid var(--es-border);
        padding: 14px 14px 10px;
        cursor: pointer;
        transition: background 0.15s;
        display: flex;
        flex-direction: column;
        gap: 5px;
        position: relative;
    }

    .es-card-list-item:active {
        background: var(--es-bg-secondary);
    }

    /* Primary label (name/title) */
    .es-card-list-primary {
        font-weight: 600;
        font-size: 0.88rem;
        color: var(--es-text);
        line-height: 1.3;
        padding-right: 60px; /* leave room for actions */
    }

    /* Secondary line (meta: date, merchant, email, etc.) */
    .es-card-list-secondary {
        font-size: 0.78rem;
        color: var(--es-text-muted);
        line-height: 1.35;
    }

    /* Footer row: badge on left, actions on right */
    .es-card-list-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 4px;
    }

    /* Inline action buttons inside a card (compact group) */
    .es-card-list-actions {
        display: flex;
        gap: 4px;
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .es-card-list-actions .es-icon-btn {
        width: 32px;
        height: 32px;
        font-size: 0.72rem;
    }

}

/*
   ── TEMPLATE COMPANION NOTES ──────────────────────────────────────────────
   For each table, add a sibling div like this (example: Documents):

   <div class="es-card-list">
     <div v-for="doc in office.documents" :key="doc.id"
          class="es-card-list-item"
          @click="viewDocument(doc)">
       <span class="es-card-list-primary">{{ doc.title }}</span>
       <span class="es-card-list-secondary">{{ formatDate(doc.created_at) }}
         <span v-if="doc.file_name"> · <i class="fas fa-paperclip"></i> {{ doc.file_name }}</span>
       </span>
       <div class="es-card-list-actions" @click.stop>
         <button class="es-icon-btn" @click="openShareModal('document', doc)" title="Share"><i class="fas fa-share-nodes"></i></button>
         <button class="es-icon-btn" @click="openDocumentModal(doc)" title="Edit"><i class="fas fa-pen-to-square"></i></button>
         <button class="es-icon-btn delete" @click="deleteDocument(doc.id)" title="Delete"><i class="fas fa-trash-can"></i></button>
       </div>
       <div v-if="!office.documents.length" style="text-align:center;padding:30px;color:var(--es-text-muted);font-size:0.85rem;">No documents found.</div>
     </div>
   </div>

   Repeat for transactions, credentials, clients — adjusting fields shown.
   For Clients, show: name (primary), email + primary_contact (secondary),
   engagement count badge + portal status badge in footer, actions top-right.
   ─────────────────────────────────────────────────────────────────────── */


/* ==========================================================================
   4. MODULE PADDING
   The pinned headers and module bodies still have generous desktop padding.
   Tighten across all modules.
   ========================================================================== */

@media (max-width: 768px) {

    /* All pinned headers — consistent 14px horizontal, 14px top */
    .es-office-pinned,
    .es-eng-pinned,
    .es-media-pinned {
        padding: 14px 14px 0;
    }

    /* All module scrollable bodies */
    .es-module-body,
    .es-office-body,
    .es-eng-body {
        padding: 10px 14px 24px;
    }

    /* Dashboard view */
    .es-dashboard-view {
        padding: 14px 14px 0;
    }

    /* Page header margins */
    .es-page-header {
        margin-bottom: 12px;
    }

    /* Card padding — tighter on mobile */
    .es-card {
        padding: 14px;
    }

    /* Timeline items — tighter */
    .es-timeline {
        padding-left: 18px;
    }

    .es-timeline-content {
        padding: 12px;
    }

    .es-timeline-marker {
        left: -18px;
        width: 10px;
        height: 10px;
    }

}


/* ==========================================================================
   5. FORM & FILTER INPUTS
   Input fields at 0.75rem 1rem padding look chunky on mobile.
   Trim to something more native-feeling.
   ========================================================================== */

@media (max-width: 768px) {

    .es-form-group input,
    .es-form-group select,
    .es-form-group textarea,
    .es-filter-group input,
    .es-filter-group select {
        padding: 0.55rem 0.8rem;
        font-size: 0.875rem;
        min-height: 40px;
    }

    .es-form-group label,
    .es-filter-group label {
        font-size: 0.78rem;
        margin-bottom: 3px;
    }

    /* Filters panel — tighter internal padding */
    .es-filters {
        padding: 12px;
        margin-bottom: 14px;
        border-radius: 0;
    }

    .es-filter-row {
        gap: 10px;
    }

    /* Form actions margin — less wasteful on small screens */
    .es-form-actions {
        margin-top: 14px;
        padding-top: 12px;
        gap: 8px;
    }

    /* Form row gap */
    .es-form-group {
        margin-bottom: 12px;
    }

}


/* ==========================================================================
   6. ACTIVITY STREAM — NATIVE APP DENSITY
   The current stream feels spacious like a website. Tighten it to feel
   like a native activity feed.
   ========================================================================== */

@media (max-width: 768px) {

    /* Activity stream label — less bottom margin */
    .es-activity-stream-label {
        font-size: 0.72rem;
        letter-spacing: 1.5px;
        margin-bottom: 16px;
    }

    /* Stream items — tighter gap */
    .es-stream-item {
        gap: 10px;
        margin-bottom: 14px;
    }

    /* Stream dot — smaller */
    .es-stream-dot {
        width: 9px;
        height: 9px;
        margin-top: 4px;
    }

    /* Stream line — thinner visual connector */
    .es-stream-line {
        min-height: 10px;
    }

    /* Stream text — slightly smaller */
    .es-stream-text {
        font-size: 0.82rem;
        line-height: 1.4;
    }

    /* Stream time — more subtle */
    .es-stream-time {
        font-size: 0.68rem;
        display: block;
        margin-bottom: 2px;
        margin-right: 0;
    }

    /* Stream meta row — tighter */
    .es-stream-meta {
        margin-top: 4px;
        gap: 6px;
    }

    /* Stream type badge — smaller */
    .es-stream-type-badge {
        font-size: 0.58rem;
        padding: 1px 6px;
        letter-spacing: 0.8px;
    }

    /* Stream delete — 28px compact */
    .es-stream-delete {
        min-height: 24px;
        min-width: 24px;
        padding: 2px 4px;
    }

    /* Notification panel feed items — denser */
    .es-activity-panel > div > div {
        /* Feed items inside the panel */
    }

}


/* ==========================================================================
   7. DASHBOARD — COMPACT HEADER & STAT CARDS
   The greeting + subtitle take up too much vertical space on mobile.
   Stat cards at 2-up grid should feel snappier.
   ========================================================================== */

@media (max-width: 768px) {

    /* Dashboard header — tighter all round */
    .es-dashboard-header {
        margin-bottom: 16px;
        gap: 12px;
    }

    .es-dashboard-title {
        font-size: 1.25rem;
        letter-spacing: -0.5px;
    }

    .es-dashboard-subtitle {
        font-size: 0.8rem;
        margin-top: 4px;
    }

    /* Stat cards — compact 2-up */
    .es-stats-grid {
        gap: 8px;
        margin-bottom: 16px;
    }

    .es-stat-card {
        padding: 12px;
        gap: 10px;
    }

    .es-stat-value {
        font-size: 1.3rem;
    }

    .es-stat-label {
        font-size: 0.7rem;
        letter-spacing: 0.3px;
    }

    .es-stat-icon {
        width: 32px;
        height: 32px;
        font-size: 0.95rem;
    }

}

@media (max-width: 480px) {

    /* Single column for very narrow — but keep 2-up if possible */
    .es-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .es-stat-value {
        font-size: 1.15rem;
    }

    /* Collapse icon on very small to save space */
    .es-stat-icon {
        display: none;
    }

}


/* ==========================================================================
   8. MOBILE TOPBAR — SLIMMER
   60px topbar is fine but the internal padding is a bit generous.
   ========================================================================== */

@media (max-width: 768px) {

    :root {
        --es-mobile-topbar-height: 54px;
    }

    .es-mobile-topbar {
        padding: 0 14px;
        height: 54px;
    }

    .es-mobile-logo {
        height: 26px;
    }

    /* Toggle/icon buttons in topbar — tighter */
    .es-mobile-toggle {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
    }

    /* The icon buttons (bell, moon) in topbar */
    .es-mobile-topbar .es-icon-btn {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
        border: none; /* Remove border in topbar — looks cleaner */
    }

}


/* ==========================================================================
   9. TABS — TIGHTER, MORE NATIVE
   Tab bar items have too much padding vertically. On mobile they should feel
   more like a segmented control.
   ========================================================================== */

@media (max-width: 768px) {

    .es-tabs {
        margin-bottom: 14px;
        gap: 0;
    }

    .es-tab {
        padding: 8px 12px;
        font-size: 0.78rem;
        min-height: 38px;
        letter-spacing: 0.01em;
    }

    /* Funnel panel tabs — same treatment */
    .es-funnel-panel-tab {
        padding: 10px 14px;
        font-size: 0.72rem;
        min-height: 38px;
    }

}


/* ==========================================================================
   10. BADGES — SLIGHTLY SMALLER ON MOBILE
   ========================================================================== */

@media (max-width: 768px) {

    .badge {
        font-size: 0.62rem;
        padding: 0.2rem 0.55rem;
        letter-spacing: 0.3px;
    }

}


/* ==========================================================================
   11. ACTIVITY NOTIFICATION PANEL — FULL-SCREEN BOTTOM SHEET IMPROVEMENTS
   The existing bottom-sheet approach is good but needs tighter internal
   density and a visible drag handle.
   ========================================================================== */

@media (max-width: 768px) {

    .es-activity-panel {
        max-height: 75vh; /* Give a bit more room */
    }

    /* Drag handle visual cue */
    .es-activity-panel::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: var(--es-border-strong);
        border-radius: 2px;
        margin: 10px auto 0;
        flex-shrink: 0;
    }

    /* Panel header — tighter */
    .es-activity-panel > div:first-of-type {
        padding: 10px 14px 10px;
    }

    /* Feed items — denser */
    .es-activity-panel div[style*="padding: 11px"] {
        padding: 9px 14px !important;
    }

}


/* ==========================================================================
   12. FUNNEL INFOBAR — STACK ON VERY NARROW
   At < 480px the horizontal scroll infobar gets very awkward.
   Stack identity + meta vertically.
   ========================================================================== */

@media (max-width: 480px) {

    .es-funnel-infobar {
        flex-direction: column;
        overflow-x: hidden;
    }

    .es-funnel-infobar-identity {
        border-right: none;
        border-bottom: 1px solid var(--es-border);
        width: 100%;
        padding: 10px 14px;
    }

    .es-funnel-infobar-meta {
        flex-wrap: wrap;
        overflow: hidden;
    }

    .es-funnel-meta-pill {
        border-right: none;
        border-bottom: 1px solid var(--es-border);
        padding: 7px 14px;
        flex: 1 1 45%;
        min-width: 0;
    }

    .es-funnel-meta-pill:last-child {
        border-bottom: none;
    }

    .es-funnel-infobar-edit {
        padding: 10px 14px;
        border-top: 1px solid var(--es-border);
        width: 100%;
    }

    /* Funnel stages — allow shorter min-width on tiny screens */
    .es-funnel-stage {
        min-width: 68px;
        padding: 8px 8px 6px;
    }

    .es-funnel-stage-name {
        font-size: 8.5px;
    }

}


/* ==========================================================================
   13. SIDEBAR — TIGHTER INTERIOR ON MOBILE
   When the sidebar slides open it inherits desktop spacing.
   ========================================================================== */

@media (max-width: 768px) {

    .es-sidebar-header {
        padding: 16px 16px;
    }

    .es-sidebar-logo {
        height: 26px;
    }

    .es-sidebar-nav {
        padding: 8px;
    }

    .es-nav-item {
        padding: 10px 14px;
        font-size: 0.88rem;
        min-height: 42px;
        gap: 12px;
    }

    .es-nav-item .icon {
        width: 18px;
    }

    .es-sidebar-footer {
        padding: 12px 14px;
    }

    .es-user-avatar {
        width: 34px;
        height: 34px;
        font-size: 0.85rem;
    }

    .es-user-name {
        font-size: 0.85rem;
    }

    .es-user-role {
        font-size: 0.7rem;
    }

}


/* ==========================================================================
   14. MODAL IMPROVEMENTS
   Modals on mobile are already bottom-sheet style. Tighten the header/body
   spacing and ensure the modal body scrolls cleanly with rubber-banding.
   ========================================================================== */

@media (max-width: 768px) {

    .es-modal {
        max-height: 88vh; /* A touch shorter so the overlay peeks through */
    }

    .es-modal-header {
        padding: 14px 16px;
    }

    .es-modal-header h2,
    .es-modal-header h3 {
        font-size: 1rem;
    }

    .es-modal-body {
        padding: 14px 16px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain; /* Prevent page scroll bleed-through */
    }

    .es-modal-footer {
        padding: 10px 16px;
    }

    /* View data grids inside modals — already 1-col, just tighten */
    .es-view-data-cell {
        padding: 10px;
    }

    .es-view-data-label {
        font-size: 0.7rem;
    }

}


/* ==========================================================================
   15. CORRESPONDENCE & BILLING LIST ITEMS
   These appear as bordered cards inside module bodies.
   ========================================================================== */

@media (max-width: 768px) {

    /* Correspondence item body — stack direction and actions */
    .es-correspondence-item-body {
        flex-direction: column;
        gap: 8px;
    }

    /* Brief card — tighter */
    .es-brief-card {
        margin-bottom: 16px;
        gap: 10px;
    }

    /* Artefact row — wrap */
    .es-artefact-icon {
        width: 32px;
        height: 32px;
    }

    /* Billing header spacing */
    .es-billing-header {
        margin-bottom: 16px;
    }

    /* Quote/invoice stat value in modal */
    .es-view-data-value-lg {
        font-size: 1.15rem;
    }

}


/* ==========================================================================
   16. TOAST — HIGHER POSITION ON MOBILE
   The fixed bottom toast can clash with browser navigation bars.
   Move it slightly higher.
   ========================================================================== */

@media (max-width: 768px) {

    .es-toast {
        bottom: 72px; /* Above nav bar safe zone */
        right: 12px;
        left: 12px;
        font-size: 0.82rem;
        padding: 10px 14px;
        gap: 8px;
    }

}


/* ==========================================================================
   17. SPINNER — SIZED DOWN
   The 40px spinner looks large inside compact cards on mobile.
   ========================================================================== */

@media (max-width: 768px) {

    .es-spinner {
        width: 28px;
        height: 28px;
        border-width: 2.5px;
    }

}


/* ==========================================================================
   18. FILE UPLOAD — MORE COMPACT ON MOBILE
   ========================================================================== */

@media (max-width: 768px) {

    .es-file-upload {
        padding: 20px 16px;
    }

    .es-upload-icon {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }

    .es-upload-text {
        font-size: 0.85rem;
    }

    .es-upload-hint {
        font-size: 0.75rem;
    }

}


/* ==========================================================================
   19. MEDIA MODULE — TIGHTER GRID
   ========================================================================== */

@media (max-width: 768px) {

    .es-media-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .es-media-thumbnail {
        height: 100px;
    }

    .es-media-details {
        padding: 8px 10px;
    }

    .es-media-name {
        font-size: 0.8rem;
    }

    .es-media-meta {
        font-size: 0.68rem;
    }

    .es-media-actions {
        padding: 6px 10px;
        gap: 2px;
    }

    /* Folder toggle button — tighter */
    .es-media-folder-toggle {
        padding: 8px 12px;
        font-size: 0.82rem;
        min-height: 40px;
        margin-bottom: 10px;
    }

}

@media (max-width: 380px) {

    /* Very small phones — single column media grid */
    .es-media-grid {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================================
   20. MISC SPACING & POLISH
   ========================================================================== */

@media (max-width: 768px) {

    /* Card hover effect — disable transform on touch (jank prevention) */
    .es-stat-card:hover,
    .es-media-item:hover,
    .es-card:hover {
        transform: none;
    }

    /* Portal link input */
    .es-portal-link-input {
        font-size: 0.8rem;
        padding: 6px 8px;
        min-height: 36px;
    }

    /* Page header actions spacing */
    .es-header-actions {
        gap: 6px;
    }

    /* Engagement detail — client action buttons */
    .es-page-header .es-header-actions {
        flex-wrap: wrap;
    }

    .es-page-header .es-header-actions .es-btn-danger {
        /* Push Delete to its own row if 3 buttons present */
        order: 3;
    }

    /* Billing summary stats inside client detail */
    .es-modal .es-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* Address book on mobile — panel max height */
    .es-address-book-panel {
        max-height: 300px;
    }

    /* Reply quote — compact */
    .es-reply-quote {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    /* Bulk actions — full width buttons */
    .es-bulk-actions {
        padding: 12px;
        gap: 10px;
    }

    /* Filter chips — smaller pill text */
    .es-filter-chip {
        font-size: 0.72rem;
        padding: 5px 11px;
    }

}
/* ==========================================================================
   ES Cloud — Modal Mobile UX Improvements Patch
   v3.1 — Append after main-mobile.patch.css
   
   Covers all modal templates:
   - tmplModalsOffice     (document, transaction, credential + view modals)
   - tmplModalsBilling    (quote, invoice, payment, status, convert, email)
   - tmplModalsEngagement (client, engagement, artefact, share, portal, funnel)
   - tmplModalsMedia      (upload, folder, preview, edit)
   - tmplModalsCorrespondence (log, view, reply, compose)
   - tmplModalsTeamCorrespondence (compose, view, reply)
   - tmplModalsProfile    (details, password, sessions)
   ========================================================================== */


/* ==========================================================================
   SHARED MODAL IMPROVEMENTS
   These apply to all modals — supplement the base rules already in
   main-mobile.patch.css.
   ========================================================================== */

@media (max-width: 768px) {

    /* Modal header — tighten h3 so long titles don't wrap badly */
    .es-modal-header h3 {
        font-size: 0.95rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
        max-width: calc(100% - 52px); /* leave room for the close button */
    }

    /* Modal close button — right-align it cleanly */
    .es-modal-close,
    .es-modal-header .es-icon-btn:last-child {
        flex-shrink: 0;
        margin-left: auto;
    }

    /* Modal body — ensure overscroll doesn't bleed */
    .es-modal-body {
        overscroll-behavior: contain;
    }

    /* Form rows inside modals — always single column on mobile */
    .es-modal .es-form-row,
    .es-modal [style*="grid-template-columns: 1fr 1fr"],
    .es-modal [style*="grid-template-columns: 2fr 1fr"],
    .es-modal [style*="grid-template-columns: 1fr 1fr; gap"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* View data grids inside modals — single column */
    .es-modal .es-view-data-grid,
    .es-modal .es-view-data-grid--3col {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* es-card inside modal body — tighter */
    .es-modal .es-card {
        padding: 12px;
    }

    .es-modal .es-card h4 {
        font-size: 0.88rem;
        margin-bottom: 8px;
    }

    /* Pill lists — wrap tightly */
    .es-modal .es-pill-list {
        gap: 3px;
        min-height: 20px;
    }

    .es-modal .es-tag {
        font-size: 0.7rem;
        padding: 0.2rem 0.55rem;
    }

    /* Select dropdowns inside modals */
    .es-modal select {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
        min-height: 40px;
    }

    /* Textarea — slightly shorter rows on mobile to avoid overflowing modal */
    .es-modal textarea[rows="8"],
    .es-modal textarea[rows="10"] {
        rows: 5; /* hint only; actual override via max-height */
        max-height: 160px;
    }

    .es-modal textarea[rows="6"],
    .es-modal textarea[rows="7"] {
        max-height: 130px;
    }

}


/* ==========================================================================
   OFFICE MODALS
   Document, Transaction, Credential (create + view)
   ========================================================================== */

@media (max-width: 768px) {

    /* View modals — meta row wraps */
    .es-view-meta-row {
        flex-direction: column;
        gap: 4px;
        font-size: 0.8rem;
        margin-bottom: 14px;
    }

    /* Credential copy row — value truncates properly */
    .es-cred-copy-row {
        gap: 6px;
    }

    .es-cred-value {
        font-size: 0.95rem;
    }

    /* File view row — stack label and actions */
    .es-view-file-row {
        gap: 8px;
    }

    .es-view-file-actions {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Upload progress in modals */
    .es-upload-progress {
        margin-bottom: 10px;
    }

    /* Selected file row */
    .es-selected-file {
        padding: 8px 10px;
    }

    .es-selected-file-name {
        font-size: 0.82rem;
    }

}


/* ==========================================================================
   BILLING MODALS
   Quote create, quote detail, invoice detail, payment, convert, email
   ========================================================================== */

@media (max-width: 768px) {

    /* Quote modal — line items grid needs special handling.
       The desktop layout is: 3fr 0.5fr 1fr 1fr 40px
       On mobile, collapse to a stacked card per line item. */
    .es-modal .billing-line-items-header {
        display: none; /* hide the column header row */
    }

    /* Line items grid → vertical stack.
       Target the inline grid on the line item rows. */
    .es-modal [style*="grid-template-columns: 3fr 0.5fr 1fr 1fr 40px"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        background: var(--es-bg) !important;
        border: 1px solid var(--es-border) !important;
        padding: 10px !important;
        margin-bottom: 8px !important;
    }

    /* Hide the column-header row (first child of the wrapper) */
    .es-modal [style*="grid-template-columns: 3fr 0.5fr 1fr 1fr 40px"]:first-child {
        display: none !important;
    }

    /* Totals block — already flex, just reduce gap */
    .es-modal [style*="justify-content: flex-end; gap: 40px"] {
        gap: 20px !important;
        font-size: 0.9rem !important;
    }

    /* Quote detail preview — the white A4 preview */
    .es-modal [style*="background: white"][style*="padding: 40px"] {
        padding: 16px !important;
    }

    /* Details tab 2-col grid → single column */
    .es-modal [style*="grid-template-columns: 1fr 1fr; gap: 20px"],
    .es-modal [style*="grid-template-columns: 2fr 1fr; gap: 20px"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* Invoice detail stat cards — 2-up */
    .es-modal .es-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-bottom: 14px;
    }

    .es-modal .es-stat-card {
        padding: 10px;
        gap: 8px;
    }

    .es-modal .es-stat-value {
        font-size: 0.9rem;
    }

    .es-modal .es-stat-label {
        font-size: 0.65rem;
    }

    .es-modal .es-stat-icon {
        display: none; /* hide icon to save space in modal stat cards */
    }

    /* Invoice detail items table — scrollable */
    .es-modal .es-card table {
        font-size: 0.8rem;
        width: 100%;
    }

    .es-modal .es-card table th,
    .es-modal .es-card table td {
        padding: 6px 8px;
    }

    /* Payment summary card — compact */
    .es-modal .es-card [style*="justify-content: space-between; padding: 8px 0"] {
        padding: 5px 0 !important;
        font-size: 0.85rem !important;
    }

    /* Quote detail modal footer — many buttons, scroll horizontally or stack */
    .es-modal-footer {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Billing modal footer buttons — equal width in 2-col on mobile */
    .es-modal-footer .es-btn-primary,
    .es-modal-footer .es-btn-secondary,
    .es-modal-footer .es-btn-danger {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
        justify-content: center;
        font-size: 0.8rem;
        padding: 0.5rem 0.5rem;
    }

    /* Close/Cancel buttons shouldn't flex-grow as much */
    .es-modal-footer .es-btn-secondary:only-child,
    .es-modal-footer .es-btn-secondary:last-child:not(:first-child) {
        flex: 0 0 auto;
    }

}


/* ==========================================================================
   ENGAGEMENT & FUNNEL MODALS
   Client, engagement, artefact, share, portal email, add lead, template
   ========================================================================== */

@media (max-width: 768px) {

    /* Share modal — tabs tight */
    .es-modal .es-tabs {
        margin-bottom: 14px;
    }

    /* Share security box */
    .es-share-security-box {
        padding: 12px;
    }

    .es-share-security-box h4 {
        font-size: 0.82rem;
        margin-bottom: 10px;
    }

    /* Portal link row */
    .es-portal-link-row {
        gap: 6px;
    }

    .es-portal-link-input {
        font-size: 0.78rem;
        padding: 6px 8px;
        min-height: 36px;
    }

    /* Add lead / artefact / engagement — checkbox label */
    .es-checkbox-label {
        font-size: 0.85rem;
        gap: 6px;
    }

    /* Funnel: Add lead modal — consent checkbox row */
    .es-modal .es-form-group [style*="width: 16px; height: 16px"] {
        flex-shrink: 0;
    }

    /* Template modal — delay row */
    .es-delay-row {
        flex-direction: column;
        gap: 8px;
    }

    .es-delay-value {
        width: 100%;
    }

    .es-delay-unit {
        width: 100%;
    }

    /* View template modal — stats row */
    .es-template-stats-row {
        gap: 8px;
    }

    .es-template-stat {
        padding: 10px;
    }

    .es-template-stat-value {
        font-size: 18px;
    }

    /* Queue item actions — stack */
    .es-queue-item-actions {
        flex-direction: column;
        gap: 8px;
    }

    .es-queue-item-actions .es-btn-primary,
    .es-queue-item-actions .es-btn-secondary {
        width: 100%;
        justify-content: center;
    }

    /* Artefact view modal — data grid 2-col is fine, but cards too padded */
    .es-modal .es-view-data-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

}


/* ==========================================================================
   MEDIA MODALS
   Upload, folder, preview, edit
   ========================================================================== */

@media (max-width: 768px) {

    /* Upload modal — folder + tags grid → single column */
    .es-modal [style*="grid-template-columns:1fr 1fr; gap:12px"],
    .es-modal [style*="grid-template-columns: 1fr 1fr; gap: 12px"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* Upload file list */
    .es-upload-file-list {
        max-height: 120px;
    }

    .es-upload-file-list li {
        padding: 8px;
        font-size: 0.82rem;
    }

    /* Media preview — images/video/pdf */
    .es-media-preview-img,
    .es-media-preview-video {
        max-height: 30vh;
    }

    .es-media-preview-pdf {
        height: 40vh;
    }

    .es-media-preview-box {
        padding: 12px;
        margin-bottom: 14px;
    }

    /* Preview modal — collapse to single column on mobile */
    .es-modal-preview {
        max-width: 100% !important;
        width: 100% !important;
    }

    .es-media-preview-layout {
        display: flex;
        flex-direction: column;
        min-height: unset;
    }

    .es-media-preview-left {
        border-right: none;
        border-bottom: 1px solid var(--es-border);
    }

    .es-media-preview-right {
        padding: 16px 20px;
        gap: 12px;
        overflow-y: visible;
    }

    .es-media-preview-right .es-btn-primary,
    .es-media-preview-right .es-btn-secondary {
        width: 100%;
        justify-content: center;
    }

}


/* ==========================================================================
   CORRESPONDENCE MODALS
   Log, view, reply, compose (both contact and team)
   ========================================================================== */

@media (max-width: 768px) {

    /* From/direction selector — mail-from-options */
    .es-mail-from-options {
        flex-direction: column;
        gap: 8px;
    }

    .es-mail-from-option {
        min-width: 0;
        width: 100%;
        padding: 10px 12px;
        min-height: 40px;
        font-size: 0.85rem;
    }

    .es-mail-from-option > div > div:first-child {
        font-size: 0.82rem;
    }

    .es-mail-from-option > div > div:last-child {
        font-size: 0.72rem;
    }

    /* Reply quote */
    .es-reply-quote {
        font-size: 0.8rem;
        padding: 8px 10px;
        margin-bottom: 12px;
    }

    /* View modal — from/to/date/source grid → 2-col */
    .es-modal .es-view-data-grid[style*="margin-bottom:20px"] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* Message body card */
    .es-modal .es-card [style*="font-size: 0.95rem; line-height: 1.7"] {
        font-size: 0.875rem !important;
        line-height: 1.55 !important;
    }

    /* Team compose: attachments list */
    .es-modal [style*="display:flex; flex-direction:column; gap:6px"] > div {
        padding: 6px 10px;
        font-size: 0.82rem;
    }

    /* Team compose: from-address display box */
    .es-modal [style*="display:flex; align-items:center; gap:10px; padding:10px 12px"] {
        padding: 8px 10px;
    }

}


/* ==========================================================================
   PROFILE MODAL
   Details, password, sessions
   ========================================================================== */

@media (max-width: 768px) {

    /* Profile tabs inside modal — tighter */
    .es-modal .es-tabs[style*="padding: 0 24px"] {
        padding: 0 14px !important;
    }

    /* Avatar section — centred, slightly smaller */
    .es-modal [style*="width: 80px; height: 80px"] {
        width: 70px !important;
        height: 70px !important;
    }

    .es-modal [style*="width: 80px; height: 80px"] img {
        width: 70px !important;
        height: 70px !important;
    }

    /* Profile fields grid → single column */
    .es-modal [style*="grid-template-columns: 1fr 1fr; gap: 0 16px"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* Sessions list */
    .es-session-item {
        padding: 12px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .es-session-device-icon {
        width: 32px;
        height: 32px;
    }

    .es-session-meta {
        font-size: 0.72rem;
    }

    .es-sessions-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 14px;
    }

    .es-sessions-header .es-btn-danger {
        width: 100%;
        justify-content: center;
    }

    /* Security form */
    .es-security-form {
        max-width: none;
    }

    /* Split footer (sign out left, save right) */
    .es-modal-footer--split {
        flex-direction: column-reverse;
        gap: 8px;
    }

    .es-modal-footer--split > * {
        width: 100%;
        justify-content: center;
    }

    .es-modal-footer--split > div {
        display: flex;
        flex-direction: column-reverse;
        gap: 8px;
        width: 100%;
    }

    .es-modal-footer--split > div .es-btn-primary,
    .es-modal-footer--split > div .es-btn-secondary {
        width: 100%;
        justify-content: center;
    }

}


/* ==========================================================================
   DELETE CONFIRM MODAL
   ========================================================================== */

@media (max-width: 768px) {

    .es-delete-warning-box {
        padding: 12px;
        font-size: 0.85rem;
    }

    .es-delete-warning-box p {
        margin-bottom: 4px;
    }

}


/* ==========================================================================
   TYPE-TO-DELETE INPUT
   ========================================================================== */

@media (max-width: 768px) {

    /* The "type DELETE here" input — make it unmissable */
    .es-modal-danger .es-form-group input {
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: 2px;
        text-align: center;
    }

}


/* ==========================================================================
   TOAST — ABOVE MODAL LAYER
   Keep toast visible when a modal is open.
   ========================================================================== */

@media (max-width: 768px) {

    .es-toast {
        z-index: 1600; /* above modal (1000) and activity panel (200) */
    }

}
/* ==========================================================================
   ES Cloud — Fix Patch v3.1.1
   Append after main-mobile-modals.patch.css
   
   Fixes:
   1. Office tabs behaving like anchor links (click target / overlap issue)
   2. Team Hub mobile styles — member list, detail view, inbox, data tab
   ========================================================================== */


/* ==========================================================================
   FIX 1: OFFICE (AND ALL MODULE) TABS — CLICK TARGET RELIABILITY
   
   The pinned header sections use flex-direction:column. On mobile, if the
   tab bar has any overflow or z-index issue the tabs become hard to tap.
   These rules ensure the tab bar is always fully interactive.
   ========================================================================== */

@media (max-width: 768px) {

    /* Ensure pinned sections never clip their children */
    .es-office-pinned,
    .es-eng-pinned,
    .es-media-pinned {
        overflow: visible;
    }

    /* Tab bar — ensure it sits above any sibling content and is fully tappable */
    .es-tabs {
        position: relative;
        z-index: 5;
        overflow-x: auto;
        overflow-y: visible; /* never clip vertically — kills tap targets */
        -webkit-overflow-scrolling: touch;
        /* Remove gap:0 from earlier patch — it was squashing tap areas */
        gap: 2px;
    }

    /* Individual tab — restore comfortable tap target and clear any
       text-decoration that could make them look like links */
    .es-tab {
        text-decoration: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        flex-shrink: 0; /* prevent tabs squashing below tap-target size */
        cursor: pointer;
    }

    /* Filters panel — ensure it doesn't overlap the tab bar below it.
       The original patch didn't set a bottom margin on filters. */
    .es-filters {
        margin-bottom: 0; /* tabs follow directly — no gap needed, pinned handles spacing */
    }

    /* Extra breathing room between the bottom of pinned and body content */
    .es-office-pinned .es-tabs,
    .es-eng-pinned .es-tabs {
        margin-bottom: 0; /* body padding handles the gap */
    }

}


/* ==========================================================================
   FIX 2: TEAM HUB — MOBILE STYLES
   Member list view, member detail view, inbox, data tab
   ========================================================================== */

@media (max-width: 768px) {

    /* ── Member list view ──────────────────────────────────────────── */

    /* Header actions — Team Chat + Team Inbox + Invite all in a row.
       On mobile, wrap them and let each button be full-width. */
    .es-eng-view .es-page-header .es-header-actions {
        flex-wrap: wrap;
        gap: 6px;
    }

    .es-eng-view .es-page-header .es-header-actions .es-btn-primary,
    .es-eng-view .es-page-header .es-header-actions .es-btn-secondary {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
        justify-content: center;
        font-size: 0.78rem;
    }

    /* ── Member detail view — header actions ───────────────────────── */

    /* Daily Reflection + Signal + Send Email + Edit + Delete
       Collapse to 2-per-row, danger button full width at bottom */
    .es-page-header .es-header-actions .es-btn-danger {
        flex: 1 1 100%;
        justify-content: center;
    }

    /* ── Thought logs tab — 2-col detail grid → single column ─────── */

    .es-detail-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Member card in right column — show above logs on mobile */
    .es-detail-grid > div:last-child {
        order: -1;
    }

    /* Member card inside right column — compact */
    .es-detail-grid .es-card {
        padding: 14px;
    }

    .es-detail-grid .es-card [style*="width:56px"] {
        width: 44px !important;
        height: 44px !important;
    }

    /* Thought log attachment row — stack on mobile */
    .es-timeline-content [style*="display: flex; align-items: center; gap: 10px; flex-wrap: wrap"] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .es-timeline-content [style*="display: flex; gap: 8px; margin-left: auto"] {
        margin-left: 0;
        width: 100%;
    }

    .es-timeline-content [style*="display: flex; gap: 8px; margin-left: auto"] .es-btn-primary,
    .es-timeline-content [style*="display: flex; gap: 8px; margin-left: auto"] .es-btn-secondary {
        flex: 1;
        justify-content: center;
    }

    /* ── Mail / Inbox tab ──────────────────────────────────────────── */

    /* Toolbar row — stack title and buttons */
    .es-module-body [style*="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px"] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .es-module-body [style*="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px"] > div {
        width: 100%;
        display: flex;
        gap: 6px;
    }

    .es-module-body [style*="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px"] > div .es-btn-secondary {
        flex: 1;
        justify-content: center;
    }

    /* Correspondence item body in inbox — stack direction/subject/meta */
    .es-timeline-content .es-correspondence-item-body {
        flex-direction: column;
        gap: 10px;
    }

    /* Action buttons in inbox items — always visible on mobile (no hover needed) */
    .es-correspondence-item-body > [style*="display:flex; gap:8px; align-items:center; flex-shrink:0"] {
        flex-shrink: 0;
        opacity: 1;
    }

    /* Badge row in inbox items — wrap */
    .es-correspondence-item-body [style*="display:flex; gap:8px; align-items:center; margin-bottom:6px; flex-wrap:wrap"] {
        gap: 4px;
    }

    /* Subject line — slightly smaller */
    .es-correspondence-item-body strong[style*="font-size:1rem"] {
        font-size: 0.88rem !important;
    }

    /* ── Data tab toolbar ───────────────────────────────────────────── */

    .es-module-body [style*="display:flex; justify-content:space-between; align-items:center; margin-bottom:24px"] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .es-module-body [style*="display:flex; justify-content:space-between; align-items:center; margin-bottom:24px"] .es-btn-primary {
        width: 100%;
        justify-content: center;
    }

    /* Data tab — secure label text */
    .es-module-body [style*="font-size:0.8rem; color:var(--es-text-muted); margin-bottom:8px"] {
        font-size: 0.75rem !important;
    }

    /* ── Team Hub member card in detail view ───────────────────────── */

    /* Avatar + name row in the card */
    .es-card [style*="display:flex; align-items:center; gap:15px; margin-bottom:20px"] {
        gap: 12px;
    }

    /* ── Team modals — edit member, invite, reflection ─────────────── */

    /* Avatar upload in edit modal — smaller on mobile */
    .es-modal [style*="width:80px; height:80px; cursor:pointer"] {
        width: 64px !important;
        height: 64px !important;
    }

    .es-modal [style*="width:80px; height:80px; cursor:pointer"] img {
        width: 64px !important;
        height: 64px !important;
    }

    /* Reflection modal textareas — limit height to avoid full-screen scroll */
    .es-modal textarea[rows="3"] {
        max-height: 100px;
    }

    /* Data record modal — secure details monospace area */
    .es-modal [style*="white-space:pre-wrap; font-family:monospace"] {
        font-size: 0.8rem !important;
        padding: 12px !important;
    }

    /* View data record modal — header row */
    .es-modal [style*="display:flex; justify-content:space-between; align-items:center; margin-bottom:14px"] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .es-modal [style*="display:flex; justify-content:space-between; align-items:center; margin-bottom:14px"] .es-btn-secondary {
        width: 100%;
        justify-content: center;
    }

    /* View data record attachment row */
    .es-modal [style*="display:flex; justify-content:space-between; align-items:center;"] > div:last-child {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }

    .es-modal [style*="display:flex; justify-content:space-between; align-items:center;"] .es-btn-secondary,
    .es-modal [style*="display:flex; justify-content:space-between; align-items:center;"] .es-btn-primary {
        flex: 1;
        justify-content: center;
    }

    /* Team compose modal — from-address display box */
    .es-modal [style*="display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--es-bg-secondary)"] img {
        width: 24px !important;
        height: 24px !important;
    }

}


/* ==========================================================================
   FIX 3: GENERAL INLINE-STYLE TOOLBAR ROWS
   Many toolbar rows in the app use inline styles like
   "display:flex; justify-content:space-between; align-items:center; margin-bottom:20px"
   The [style*="..."] selectors above cover Team Hub specifically. This broader
   rule catches any remaining cases across all modules.
   ========================================================================== */

@media (max-width: 768px) {

    /* Any h3 + button toolbar row that isn't already handled */
    .es-module-body > div > div[style*="justify-content:space-between"][style*="margin-bottom"] {
        flex-wrap: wrap;
        gap: 10px;
    }

}
/* ==========================================================================
   OFFICE MODULE — MOBILE FIXES
   ========================================================================== */

/* ── 1. Tab bar: shrink gracefully on small screens ── */

@media (max-width: 600px) {
    .es-office-tabs .es-tab {
        padding: 10px 10px;
        font-size: 0.8rem;
        flex-shrink: 0;
    }
    .es-office-tabs .es-tab i {
        margin-right: 5px !important;
    }
}

@media (max-width: 420px) {
    .es-office-tabs .es-tab-count {
        display: none;
    }
    .es-office-tabs .es-tab {
        padding: 10px 8px;
        font-size: 0.78rem;
    }
}

/* ── 2. Filter row: single-column stack on mobile ── */

@media (max-width: 640px) {
    .es-office-view .es-filter-row {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .es-office-view .es-filter-group,
    .es-office-view .es-filter-group--wide {
        width: 100%;
    }
    .es-office-view .es-filter-row input[type="date"] {
        height: 40px;
        -webkit-appearance: none;
        appearance: none;
    }
    .es-office-view .es-filters {
        padding-bottom: 10px;
    }
}

/* ── 3. Card list polish on mobile ── */

@media (max-width: 768px) {
    .es-office-body .es-card-list-item {
        min-height: 64px;
    }
    .es-office-body .es-card-list-secondary {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }
}

/* ── 4. Send Mail — address book overlays compose on mobile ── */

@media (max-width: 768px) {

    /* Keep compose + address book side by side */
    .es-mail-layout {
        flex-direction: row !important;
        align-items: flex-start;
        gap: 0;
        position: relative;
    }

    /* Compose area: fill all remaining space left of the strip */
    .es-mail-layout > div:first-child {
        flex: 1;
        min-width: 0;
        margin-right: 8px;
    }

    /* The wrap: always 44px in the flow — never grows and displaces compose */
    .es-address-book-wrap {
        width: 44px !important;
        flex-shrink: 0;
        position: relative;
    }

    /* Expanded state: wrap stays 44px — only the PANEL floats */
    .es-address-book-wrap.expanded {
        width: 44px !important;
    }

    /* The strip: stays as the vertical collapsed tab */
    .es-address-book-strip {
        width: 44px;
        flex-direction: column !important;
        padding: 14px 0;
        min-height: 100px;
        justify-content: flex-start;
        gap: 10px;
    }

    .es-address-book-strip-label {
        writing-mode: vertical-rl;
        font-size: 0.72rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-weight: 600;
    }

    /* The PANEL: fixed so it escapes overflow:hidden on parent containers */
    .es-address-book-panel {
        position: fixed;
        top: 54px;
        right: 0;
        width: 280px;
        height: auto;
        max-height: 70vh;
        overflow-y: auto;
        z-index: 500;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2);
        border-left: 1px solid var(--es-border);
        border-bottom: 1px solid var(--es-border);
        background: var(--es-bg-secondary);
    }

    /* Send From options — stack vertically */
    .es-mail-from-options {
        flex-direction: column;
    }

    .es-mail-from-option {
        min-width: 0;
        width: 100%;
    }

    /* Mail action buttons — stack vertically */
    .es-mail-actions {
        flex-direction: column;
    }

    .es-mail-actions .es-btn-primary,
    .es-mail-actions .es-btn-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   MENTION & NOTIFY — modal UI components
   ========================================================================== */

/* Stacked block — replaces the old 2-column es-form-row for mentions+tags */
.es-mention-tags-block {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--es-border);
    margin-top: 20px;
    padding-top: 16px;
}

.es-mention-tags-block .es-form-group {
    margin-bottom: 14px;
}

.es-mention-tags-block .es-form-group:last-child {
    margin-bottom: 0;
}

/* Loading spinner row */
.es-mention-loading {
    font-size: 0.8rem;
    color: var(--es-text-muted);
    padding: 4px 0 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Already-notified chips container */
.es-mentioned-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

/* Individual already-notified chip */
.es-mentioned-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px 4px 6px;
    background: var(--es-bg-tertiary);
    border: 1px solid var(--es-border);
    font-size: 0.78rem;
    color: var(--es-text);
    transition: border-color 0.15s;
}

.es-mentioned-chip img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.es-mentioned-chip-name {
    font-weight: 500;
}

/* Read/unread icons */
.es-mentioned-read {
    font-size: 0.65rem;
    color: var(--es-success);
    margin-left: 1px;
}

.es-mentioned-unread {
    font-size: 0.65rem;
    color: var(--es-text-light);
    margin-left: 1px;
}

/* Remove button on existing mention chip */
.es-mentioned-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--es-text-light);
    font-size: 0.6rem;
    padding: 0;
    margin-left: 2px;
    border-radius: 2px;
    transition: color 0.15s, background 0.15s;
}

.es-mentioned-remove:hover {
    color: var(--es-danger);
    background: var(--es-danger-light);
}

/* View modal — notified members section */
.es-notified-members {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--es-border);
}

.es-notified-members-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--es-text-muted);
    margin-bottom: 10px;
}

.es-notified-members-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.es-notified-member-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    background: var(--es-bg-secondary);
    border: 1px solid var(--es-border);
    font-size: 0.8rem;
}

.es-notified-member-chip img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.es-notified-member-read {
    font-size: 0.68rem;
    color: var(--es-success);
}

.es-notified-member-unread {
    font-size: 0.68rem;
    color: var(--es-text-light);
}

/* ==========================================================================
   CONTACTS MODULE — BILLING, CORRESPONDENCE & FUNNEL SUB-TAB MOBILE FIXES
   Targets the client-detail view sub-tabs that were missing mobile treatment.
   ========================================================================== */

/* ==========================================================================
   BILLING SUB-TAB
   ========================================================================== */

@media (max-width: 768px) {

    /* Stats grid outside a modal (in-page billing tab) — 2-up */
    .es-eng-body .es-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-bottom: 16px;
    }

    .es-eng-body .es-stat-card {
        padding: 12px;
        gap: 8px;
    }

    .es-eng-body .es-stat-value {
        font-size: 1rem;
    }

    .es-eng-body .es-stat-icon {
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
    }

    /* Billing header — stack title and button */
    .es-eng-body .es-billing-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 16px;
    }

    .es-eng-body .es-billing-header .es-btn-primary {
        width: 100%;
        justify-content: center;
    }

    /* Hide desktop tables in billing tab */
    .es-eng-body .es-table-container {
        display: none;
    }

    /* Billing card list — invoices */
    .es-billing-card-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 24px;
    }

    .es-billing-card-item {
        background: var(--es-bg);
        border: 1px solid var(--es-border);
        padding: 12px 14px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        cursor: pointer;
    }

    .es-billing-card-item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }

    .es-billing-card-item-number {
        font-weight: 700;
        font-size: 0.9rem;
    }

    .es-billing-card-item-meta {
        font-size: 0.78rem;
        color: var(--es-text-muted);
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .es-billing-card-item-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 4px;
    }

    .es-billing-card-item-amount {
        font-weight: 700;
        font-size: 1rem;
    }

}

/* Show billing card lists only on mobile */
.es-billing-card-list { display: none; }
@media (max-width: 768px) {
    .es-billing-card-list { display: flex; }
}


/* ==========================================================================
   CORRESPONDENCE SUB-TAB
   ========================================================================== */

@media (max-width: 768px) {

    /* Correspondence header — stack actions */
    .es-eng-body .es-correspondence-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 16px;
    }

    .es-eng-body .es-correspondence-header > div:last-child {
        width: 100%;
        display: flex;
        gap: 8px;
    }

    .es-eng-body .es-correspondence-header .es-btn-primary,
    .es-eng-body .es-correspondence-header .es-btn-secondary {
        flex: 1;
        justify-content: center;
    }

    /* Each correspondence timeline item body — stack content and actions */
    .es-correspondence-item-body {
        flex-direction: column;
        gap: 10px;
    }

    /* Action buttons row — sits below content, aligns right */
    .es-correspondence-item-body > div:last-child {
        justify-content: flex-end;
        width: 100%;
        padding-top: 6px;
        border-top: 1px solid var(--es-border);
    }

    /* Subject line — prevent overflow */
    .es-correspondence-item-body strong {
        font-size: 0.9rem;
        word-break: break-word;
    }

    /* From/To meta line — wrap gracefully */
    .es-correspondence-item-body > div:first-child > div:last-child {
        font-size: 0.78rem;
        flex-wrap: wrap;
        gap: 4px;
    }

    /* Timeline date — smaller */
    .es-eng-body .es-timeline-date {
        font-size: 0.7rem;
    }

    /* Timeline content padding — tighter */
    .es-eng-body .es-timeline-content {
        padding: 10px 12px;
    }

}


/* ==========================================================================
   FUNNEL / PIPELINE SUB-TAB
   ========================================================================== */

@media (max-width: 768px) {

    /* Infobar — stack identity and meta vertically */
    .es-funnel-infobar {
        flex-direction: column;
        overflow-x: visible;
        gap: 0;
    }

    /* Identity block — full width */
    .es-funnel-infobar-identity {
        width: 100%;
        padding: 12px 14px;
        border-right: none;
        border-bottom: 1px solid var(--es-border);
    }

    /* Meta pills — wrap into a 2-column grid */
    .es-funnel-infobar-meta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        overflow: visible;
    }

    .es-funnel-meta-pill {
        border-right: 1px solid var(--es-border);
        border-bottom: 1px solid var(--es-border);
        padding: 8px 12px;
        min-width: 0;
    }

    /* Notes pill spans full width */
    .es-funnel-meta-pill--flex {
        grid-column: 1 / -1;
    }

    .es-funnel-meta-value {
        font-size: 0.8rem;
        word-break: break-word;
    }

    /* Edit button — full width bar */
    .es-funnel-infobar-edit {
        width: 100%;
        padding: 8px 14px;
        border-top: 1px solid var(--es-border);
        display: flex;
        justify-content: flex-end;
    }

    /* Stage progress bar — scrollable, stages slightly narrower */
    .es-funnel-stages {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .es-funnel-stage {
        min-width: 72px;
        padding: 8px 8px 6px;
    }

    .es-funnel-stage-name {
        font-size: 8.5px;
    }

    .es-funnel-stage-status {
        font-size: 8.5px;
    }

    /* Source banner — wrap text */
    .es-funnel-source-banner {
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    /* Funnel panel — full width, no side-by-side */
    .es-funnel-panel {
        width: 100%;
    }

    /* Panel tab header — stack count and button */
    .es-funnel-tab-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .es-funnel-tab-header > div {
        width: 100%;
        justify-content: flex-end;
    }

    .es-funnel-tab-header .es-btn-primary {
        width: 100%;
        justify-content: center;
    }

    /* Queue cards — full width, tighter */
    .es-funnel-queue-card {
        padding: 10px 12px;
    }

    .es-funnel-queue-card-header {
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 6px;
    }

    .es-funnel-queue-card-footer {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .es-funnel-queue-card-footer > div:last-child {
        width: 100%;
        justify-content: flex-start;
    }

    /* Template grid — single column */
    .es-template-grid {
        grid-template-columns: 1fr;
    }

    .es-template-card {
        padding: 12px;
    }

    /* Template card footer — wrap actions */
    .es-template-card-footer {
        flex-wrap: wrap;
        gap: 8px;
    }

}

/* ==========================================================================
   CONTACTS / CLIENT DETAIL — MOBILE TAB FIXES
   Mirrors the treatment already applied to .es-office-tabs so the four
   client-detail tabs (Engagements | Billing & Financials | Funnel & Pipeline
   | Correspondence) behave identically to the Office module tabs on mobile.
   ========================================================================== */

/* ── 1. Tab bar: shrink padding & font on small screens ── */

@media (max-width: 600px) {
    .es-client-detail-tabs .es-tab {
        padding: 10px 10px;
        font-size: 0.8rem;
        flex-shrink: 0;
    }
}

/* ── 2. Very small screens: tighten further ── */

@media (max-width: 420px) {
    .es-client-detail-tabs .es-tab {
        padding: 10px 8px;
        font-size: 0.78rem;
    }
}

/* ── 3. Header action buttons in client-detail: stack on very small screens ── */

@media (max-width: 480px) {
    .es-eng-view .es-page-header .es-header-actions {
        flex-wrap: wrap;
        gap: 6px;
    }

    .es-eng-view .es-page-header .es-header-actions .es-btn-primary,
    .es-eng-view .es-page-header .es-header-actions .es-btn-secondary,
    .es-eng-view .es-page-header .es-header-actions .es-btn-danger {
        font-size: 0.78rem;
        padding: 0.4rem 0.65rem;
    }
}

/* ==========================================================================
   CONTACTS / CLIENT DETAIL — SUB-TAB CONTENT SCALING
   Targets the inner content of each sub-tab for better density and
   readability on small screens. Complements the layout rules above.
   ========================================================================== */

/* ── Engagements sub-tab ── */

@media (max-width: 768px) {

    /* Section headings inside the eng body */
    .es-eng-body h3 {
        font-size: 1rem;
        margin-bottom: 12px !important;
    }

    .es-eng-body h4 {
        font-size: 0.9rem;
        margin-bottom: 10px;
    }

    /* Contact Details card — show above timeline on mobile */
    .es-eng-body .es-detail-grid > div:last-child {
        order: -1;
    }

    /* Contact Details card itself — tighter */
    .es-eng-body .es-detail-grid .es-card {
        padding: 14px;
    }

    /* Contact Details card p tags — smaller */
    .es-eng-body .es-detail-grid .es-card p {
        font-size: 0.85rem;
        margin-bottom: 6px !important;
    }

    /* Timeline item title — scale down the hardcoded 1.1rem */
    .es-eng-body .es-timeline-content strong[style*="font-size: 1.1rem"],
    .es-eng-body .es-timeline-content strong[style*="font-size:1.1rem"] {
        font-size: 0.92rem !important;
    }

    /* Timeline content card — tighter padding */
    .es-eng-body .es-timeline-content {
        padding: 10px 12px;
    }

}

@media (max-width: 480px) {

    .es-eng-body h3 {
        font-size: 0.95rem;
    }

    /* Contact Details card — very compact on tiny screens */
    .es-eng-body .es-detail-grid .es-card {
        padding: 12px;
    }

    .es-eng-body .es-detail-grid .es-card p {
        font-size: 0.82rem;
    }

}

/* ── Billing sub-tab ── */

@media (max-width: 768px) {

    /* Financial Overview heading row */
    .es-eng-body .es-billing-header h3 {
        font-size: 1rem !important;
    }

    .es-eng-body .es-billing-header p {
        font-size: 0.8rem;
    }

    /* Stat grid inside eng body — 3 cards in a row on mobile */
    .es-eng-body .es-stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: 20px;
    }

    .es-eng-body .es-stat-card {
        padding: 10px 8px;
        gap: 6px;
    }

    .es-eng-body .es-stat-value {
        font-size: 1.05rem;
    }

    .es-eng-body .es-stat-label {
        font-size: 0.65rem;
    }

    .es-eng-body .es-stat-icon {
        display: none;
    }

    /* Recent Invoices / Active Quotes h4 */
    .es-eng-body > div h4 {
        font-size: 0.88rem;
        margin-bottom: 10px;
    }

}

@media (max-width: 420px) {

    /* Collapse to 2-col on very narrow */
    .es-eng-body .es-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .es-eng-body .es-stat-value {
        font-size: 0.95rem;
    }

}

/* ── Correspondence sub-tab ── */

@media (max-width: 768px) {

    /* "Email Correspondence" heading */
    .es-eng-body .es-correspondence-header h3 {
        font-size: 1rem !important;
    }

    /* Subject line — scale down the hardcoded 1rem */
    .es-correspondence-item-body strong[style*="font-size:1rem"],
    .es-correspondence-item-body strong[style*="font-size: 1rem"] {
        font-size: 0.88rem !important;
    }

    /* From/To meta */
    .es-correspondence-item-body > div:first-child > div:last-child {
        font-size: 0.76rem;
    }

}

/* ==========================================================================
   MEDIA GRID — THUMBNAIL SHIMMER SKELETON
   ========================================================================== */

@keyframes es-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}

.es-thumb-shimmer {
    background: linear-gradient(
        90deg,
        var(--es-bg-tertiary)  25%,
        var(--es-bg-secondary) 50%,
        var(--es-bg-tertiary)  75%
    );
    background-size: 1200px 100%;
    animation: es-shimmer 1.6s infinite linear;
}

@media (prefers-reduced-motion: reduce) {
    .es-thumb-shimmer {
        animation: none;
        background: var(--es-bg-tertiary);
    }
}

/* ── General Skeleton Loading Placeholders ──────────────────── */
.es-skeleton {
    background: var(--es-bg-tertiary);
    background-image: linear-gradient(
        90deg,
        var(--es-bg-tertiary)  25%,
        var(--es-bg-secondary) 50%,
        var(--es-bg-tertiary)  75%
    );
    background-size: 1200px 100%;
    animation: es-shimmer 1.6s infinite linear;
    border-radius: 4px;
}
.es-skeleton-circle { border-radius: 50%; }
.es-skeleton-card {
    padding: 16px;
    border-bottom: 1px solid var(--es-border);
}
.es-skeleton-card:last-child { border-bottom: none; }

@media (prefers-reduced-motion: reduce) {
    .es-skeleton {
        animation: none;
        background: var(--es-bg-tertiary);
    }
}


/* ==========================================================================
   MEDIA PREVIEW MODAL — VIDEO WRAPPER
   Dark background behind the native <video> player so the browser's
   default grey oval/poster chrome blends away instead of dominating.
   Native controls are kept untouched for full mobile compatibility.
   ========================================================================== */

.es-video-wrap {
    width: 100%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.es-video-wrap video.es-media-preview-video {
    width: 100%;
    max-height: 50vh;
    display: block;
    background: #000;
}

/* Shimmer poster shown while video seeks to frame 1.
   Hidden via JS once @loadeddata fires. */
.es-video-poster-shimmer {
    position: absolute;
    inset: 0;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
}

@media (max-width: 768px) {
    .es-video-wrap video.es-media-preview-video {
        max-height: 30vh;
    }
}


/* ==========================================================================
   MEETINGS TAB — Team Hub
   Follows the exact same sharp/minimal design language as the rest of the
   app. All colour references use existing CSS variables.
   ========================================================================== */

/* ── Meeting list card ─────────────────────────────────────────────────────
   Replaces the ad-hoc inline styles from the template with proper classes.
   Mirrors the engagement card / correspondence item body conventions.
   ── */

.es-meeting-card {
    background: var(--es-bg);
    border: 1px solid var(--es-border);
    padding: 18px 22px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    position: relative;
}

.es-meeting-card:hover {
    border-color: var(--es-border-strong);
    box-shadow: var(--es-shadow-sm);
    background: var(--es-bg-hover);
}

.es-meeting-card:active {
    background: var(--es-bg-secondary);
}

.es-meeting-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.es-meeting-card-title {
    font-family: var(--es-font-head);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--es-text);
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}

.es-meeting-card-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 0.8rem;
    color: var(--es-text-muted);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.es-meeting-card-notes {
    font-size: 0.85rem;
    color: var(--es-text-muted);
    line-height: 1.5;
    /* Clamp to 2 lines for clean list density */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.es-meeting-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--es-border);
    font-size: 0.78rem;
    color: var(--es-text-light);
}

/* ── AI Intelligence Panel ────────────────────────────────────────────────
   Sits above the meeting list. Purple left-border signals AI origin,
   consistent with the existing AI Pulse tab approach.
   ── */

.es-ai-panel {
    background: var(--es-bg-secondary);
    border: 1px solid var(--es-border);
    border-left: 3px solid #8b5cf6;
    padding: 22px 24px;
    margin-bottom: 24px;
}

.es-ai-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.es-ai-panel-header h4 {
    margin: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.es-ai-panel-header p {
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: var(--es-text-muted);
}

/* Mode selector row */
.es-ai-mode-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.es-ai-mode-btn {
    padding: 7px 14px;
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-sm);
    background: var(--es-bg);
    color: var(--es-text-muted);
    font-size: 0.8rem;
    font-family: var(--es-font-body);
    font-weight: 500;
    cursor: pointer;
    transition: var(--es-transition);
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.es-ai-mode-btn:hover:not(.active) {
    border-color: var(--es-border-strong);
    color: var(--es-text);
    background: var(--es-bg-tertiary);
}

.es-ai-mode-btn.active {
    background: #8b5cf6;
    border-color: #8b5cf6;
    color: #ffffff;
}

/* Custom query input — full-width below mode buttons */
.es-ai-custom-input {
    margin-bottom: 4px;
}

.es-ai-custom-input input {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-sm);
    font-size: 0.9rem;
    background: var(--es-bg);
    color: var(--es-text);
    min-height: 42px;
    transition: border-color 0.15s;
}

.es-ai-custom-input input:focus {
    outline: none;
    border-color: #8b5cf6;
}

/* AI result area */
.es-ai-result {
    background: var(--es-bg);
    border: 1px solid var(--es-border);
    border-top: 2px solid #8b5cf6;
    padding: 20px 24px;
    font-size: 0.9rem;
    line-height: 1.75;
    margin-top: 14px;
}

/* Ensure AI-generated HTML looks clean within the result box */
.es-ai-result h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--es-text);
    margin: 16px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--es-border);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 0.78rem;
}

.es-ai-result h4:first-child {
    margin-top: 0;
}

.es-ai-result ul,
.es-ai-result ol {
    padding-left: 20px;
    margin: 0 0 12px;
}

.es-ai-result li {
    margin-bottom: 6px;
    color: var(--es-text);
    font-size: 0.88rem;
    line-height: 1.6;
}

.es-ai-result p {
    margin: 0 0 10px;
    color: var(--es-text-muted);
    font-size: 0.88rem;
}

.es-ai-result strong {
    color: var(--es-text);
    font-weight: 600;
}

/* AI empty/hint state */
.es-ai-hint {
    font-size: 0.82rem;
    color: var(--es-text-muted);
    margin-top: 6px;
    line-height: 1.5;
}

/* ── Meetings toolbar ──────────────────────────────────────────────────────
   Search + date filters + add button row, above the card list.
   ── */

.es-meetings-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.es-meetings-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.es-meetings-filters .es-input {
    flex: 1;
    min-width: 140px;
    max-width: 240px;
}

.es-meetings-filters .es-input[type="date"] {
    flex: 0 0 auto;
    width: 148px;
    min-width: unset;
    max-width: unset;
}

/* ── Generic .es-input class used by the meetings toolbar ─────────────────
   The existing CSS uses .es-form-group wrappers. The toolbar needs
   standalone inputs — this class mirrors the same sizing/appearance.
   ── */

.es-input {
    padding: 0.65rem 1rem;
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-sm);
    font-size: 0.9rem;
    font-family: var(--es-font-body);
    background: var(--es-bg);
    color: var(--es-text);
    min-height: 40px;
    transition: border-color 0.15s;
    width: 100%;
}

.es-input:focus {
    outline: none;
    border-color: var(--es-primary);
}

.es-input::placeholder {
    color: var(--es-text-light);
}

/* ── Meeting count footer ─────────────────────────────────────────────────  */
.es-meetings-count {
    font-size: 0.78rem;
    color: var(--es-text-muted);
    text-align: right;
    margin-top: 10px;
}

/* ── Dark mode adjustments ─────────────────────────────────────────────── */
body.es-dark .es-ai-panel {
    background: var(--es-bg-secondary);
}

body.es-dark .es-ai-result {
    background: var(--es-bg-tertiary);
}

body.es-dark .es-ai-mode-btn {
    background: var(--es-bg-secondary);
}

body.es-dark .es-meeting-card {
    background: var(--es-bg-secondary);
}

body.es-dark .es-meeting-card:hover {
    background: var(--es-bg-tertiary);
}

/* ── Responsive — 768px ────────────────────────────────────────────────── */

@media (max-width: 768px) {

    /* AI panel — reduce padding */
    .es-ai-panel {
        padding: 16px;
        margin-bottom: 16px;
    }

    .es-ai-panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* Run analysis button — full width on mobile */
    .es-ai-panel-header .es-btn-primary {
        width: 100%;
        justify-content: center;
    }

    /* Mode buttons — wrap naturally, slightly smaller */
    .es-ai-mode-btn {
        font-size: 0.76rem;
        padding: 6px 10px;
        min-height: 32px;
    }

    .es-ai-result {
        padding: 14px 16px;
    }

    /* Meetings toolbar — stack vertically */
    .es-meetings-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .es-meetings-toolbar .es-btn-primary {
        width: 100%;
        justify-content: center;
    }

    .es-meetings-filters {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }

    .es-meetings-filters .es-input,
    .es-meetings-filters .es-input[type="date"] {
        max-width: none;
        width: 100%;
        flex: none;
    }

    /* Meeting card — tighten on mobile */
    .es-meeting-card {
        padding: 14px 14px 12px;
    }

    .es-meeting-card-header {
        flex-direction: column;
        gap: 6px;
    }

    .es-meeting-card-meta {
        font-size: 0.76rem;
        gap: 6px;
    }

    /* Hide inline edit/delete from meta on mobile; use card long-press or footer */
    .es-meeting-card-meta .es-icon-btn {
        width: 32px;
        height: 32px;
    }

}

/* ── Print / reduced-motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .es-meeting-card,
    .es-ai-mode-btn,
    .es-ai-panel {
        transition: none;
    }
}