/* 
   WhatsApp CRM & AI Automation Design System
   Vanilla CSS with CSS Variables, Grid, Glassmorphism, and Animations.
*/

:root {
    /* Fonts */
    --font-primary: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Transitions - calmer, more deliberate easing for a confident feel */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    /* Layout Constants */
    --sidebar-width: 260px;
    --header-height: 70px;
    --sim-drawer-width: 380px;

    /* Radius scale - used consistently instead of ad-hoc values */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
}

/* DARK THEME TOKENS (DEFAULT)
   A deep ink-navy base (rather than a lighter slate) with a warm brass
   primary and a jewel-toned emerald accent for messaging actions - a more
   restrained, boutique-SaaS palette than a bright orange/grass-green pair. */
:root, [data-theme="dark"] {
    --bg-app: hsl(224, 46%, 7%);
    --bg-surface: hsl(223, 40%, 11%);
    --bg-surface-glass: rgba(15, 21, 36, 0.72);
    --bg-surface-active: hsl(223, 38%, 16%);
    --bg-input: hsl(224, 46%, 6%);
    
    --border-color: rgba(255, 255, 255, 0.07);
    --border-color-strong: rgba(255, 255, 255, 0.14);
    
    --text-primary: hsl(210, 32%, 96%);
    --text-secondary: hsl(215, 16%, 72%);
    --text-muted: hsl(215, 12%, 52%);
    
    /* Core Brand Colors - warm brass, not candy amber */
    --color-primary: hsl(35, 72%, 51%);
    --color-primary-hover: hsl(35, 76%, 58%);
    --color-primary-soft: rgba(214, 158, 65, 0.14);
    
    --color-accent: hsl(160, 55%, 38%); /* deep emerald for messaging actions */
    --color-accent-hover: hsl(160, 55%, 44%);
    --color-accent-soft: rgba(23, 138, 101, 0.16);

    --color-info: hsl(206, 70%, 54%);
    --color-warning: hsl(38, 80%, 52%);
    --color-danger: hsl(354, 62%, 54%);
    --color-danger-soft: rgba(206, 62, 74, 0.16);

    /* Message Bubbles Colors */
    --msg-inbound: hsl(223, 38%, 16%);
    --msg-outbound-agent: hsl(35, 65%, 22%);
    --msg-outbound-ai: hsl(160, 45%, 18%);
    --msg-outbound-auto: hsl(268, 40%, 24%);
    --msg-outbound-text: #fff;
    
    /* Softer, more layered elevation - no colored neon glow by default */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24), 0 1px 1px rgba(0, 0, 0, 0.16);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.38), 0 6px 16px rgba(0, 0, 0, 0.24);
    --glow-primary: 0 6px 18px -4px hsla(35, 72%, 51%, 0.45);
    --glow-accent: 0 6px 18px -4px hsla(160, 55%, 38%, 0.4);
    --glass-blur: blur(14px);
}

/* LIGHT THEME TOKENS - same brass/emerald language, tuned for a bright surface */
[data-theme="light"] {
    --bg-app: hsl(220, 28%, 97%);
    --bg-surface: hsl(0, 0%, 100%);
    --bg-surface-glass: rgba(255, 255, 255, 0.82);
    --bg-surface-active: hsl(220, 24%, 94%);
    --bg-input: hsl(220, 24%, 98%);
    
    --border-color: rgba(15, 23, 42, 0.08);
    --border-color-strong: rgba(15, 23, 42, 0.16);
    
    --text-primary: hsl(222, 45%, 13%);
    --text-secondary: hsl(215, 18%, 34%);
    --text-muted: hsl(215, 13%, 50%);
    
    --color-primary: hsl(32, 68%, 45%);
    --color-primary-hover: hsl(32, 68%, 40%);
    --color-primary-soft: rgba(191, 130, 46, 0.12);
    
    --color-accent: hsl(160, 58%, 33%);
    --color-accent-hover: hsl(160, 58%, 28%);
    --color-accent-soft: rgba(20, 122, 89, 0.12);

    --color-info: hsl(206, 75%, 42%);
    --color-warning: hsl(38, 85%, 42%);
    --color-danger: hsl(354, 62%, 47%);
    --color-danger-soft: rgba(196, 58, 70, 0.1);

    --msg-inbound: hsl(220, 24%, 92%);
    --msg-outbound-agent: hsl(35, 75%, 92%);
    --msg-outbound-ai: hsl(160, 45%, 90%);
    --msg-outbound-auto: hsl(268, 40%, 93%);
    /* Light theme's outbound bubbles are pale tints, not the dark/saturated
       colors dark theme uses - dark text stays readable on all of them. */
    --msg-outbound-text: hsl(222, 45%, 13%);
    
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
    --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.07), 0 2px 6px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.1), 0 6px 16px rgba(15, 23, 42, 0.06);
    --glow-primary: 0 6px 18px -4px hsla(32, 68%, 45%, 0.3);
    --glow-accent: 0 6px 18px -4px hsla(160, 58%, 33%, 0.25);
    --glass-blur: blur(14px);
}

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: inherit;
}

body {
    background-color: var(--bg-app);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 15px;
    line-height: 1.5;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    transition: background-color var(--transition-normal);
}

/* Accessible keyboard focus (mouse/touch users never see this) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-item:focus-visible,
.kanban-card:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border-color-strong);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ==========================================================================
   LAYOUT UTILITIES
   ========================================================================== */
.app-layout {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.app-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.app-main-content {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    background-color: var(--bg-app);
}

.sub-view {
    animation: fadeIn var(--transition-normal) forwards;
}

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

/* ==========================================================================
   SIDEBAR COMPONENT
   ========================================================================== */
.app-sidebar {
    width: var(--sidebar-width);
    background-color: var(--bg-surface);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: 10;
    flex-shrink: 0;
    transition: background-color var(--transition-normal);
}

/* ===== SIDEBAR BRAND LOGO ===== */
.sidebar-brand {
    height: var(--header-height);
    display: flex;
    align-items: center;
    padding: 0 18px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.sidebar-brand-inner {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.sidebar-brand-logo {
    display: block;
    height: 32px;
    width: auto;
    max-width: 155px;
    object-fit: contain;
    object-position: left center;
    image-rendering: -webkit-optimize-contrast;
    filter: none;
    transition: filter var(--transition-normal);
}

[data-theme="light"] .sidebar-brand-logo {
    filter: brightness(0);
}

.sidebar-brand-sub {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.sidebar-menu {
    flex: 1;
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 12px;
    font-weight: 500;
    gap: 12px;
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-item i {
    font-size: 18px;
    width: 24px;
    text-align: center;
}

.nav-item:hover {
    background-color: var(--bg-surface-active);
    color: var(--text-primary);
}

.nav-item.active {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 600;
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 3px;
    background-color: var(--color-primary);
    border-radius: 0 4px 4px 0;
}

.sidebar-footer {
    padding: 16px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #1a1204;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.user-info h4 {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.user-info span {
    font-size: 11px;
    color: var(--text-muted);
}

.btn-logout {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all var(--transition-fast);
}

.btn-logout:hover {
    color: var(--color-danger);
    background-color: var(--color-danger-soft);
}

/* ==========================================================================
   APP HEADER COMPONENT
   ========================================================================== */
.app-header {
    height: var(--header-height);
    background-color: var(--bg-surface-glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    flex-shrink: 0;
    gap: 12px;
    z-index: 20;
}

.header-left h2 {
    font-size: 20px;
    font-weight: 600;
}

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

/* ==========================================================================
   BUTTONS & INPUTS
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal), filter var(--transition-normal);
}
.btn:active {
    filter: brightness(0.96);
}
.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.btn-primary {
    background: var(--color-primary);
    color: #1a1204;
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
    background: var(--color-primary-hover);
    box-shadow: var(--glow-primary);
}

.btn-accent {
    background: var(--color-accent);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.btn-accent:hover {
    background: var(--color-accent-hover);
    box-shadow: var(--glow-accent);
}

.btn-secondary {
    background-color: var(--bg-surface-active);
    color: var(--text-primary);
    border-color: var(--border-color);
}
.btn-secondary:hover {
    background-color: var(--border-color-strong);
}

.btn-danger {
    background: var(--color-danger);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.btn-danger:hover {
    background: hsl(354, 62%, 48%);
    box-shadow: 0 6px 18px -4px rgba(206, 62, 74, 0.45);
}

.btn-outline {
    background-color: transparent;
    border-color: var(--border-color-strong);
    color: var(--text-primary);
}
.btn-outline:hover {
    background-color: var(--bg-surface-active);
    border-color: var(--color-primary);
}

.btn-block {
    display: flex;
    width: 100%;
}

.btn-round {
    border-radius: 50%;
    width: 42px;
    height: 42px;
    padding: 0;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 6px;
}

/* Leads bulk-action toolbar (multi-select assign/stage/export/delete). A
   dedicated block rather than reusing bare .form-control/.btn defaults —
   those have mismatched heights (selects ~40px, .btn-sm ~28px) which
   made this row look uneven. Everything here shares one fixed height so
   the two dropdowns and three buttons sit flush on one line. */
#leads-bulk-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: linear-gradient(135deg, hsla(250, 89%, 65%, 0.12) 0%, hsla(250, 89%, 65%, 0.04) 100%);
    border: 1px solid hsla(250, 89%, 65%, 0.35);
    border-left: 3px solid var(--color-primary);
}

#leads-bulk-toolbar .leads-bulk-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
}

#leads-bulk-toolbar .leads-bulk-count strong {
    color: var(--color-primary);
    font-size: 15px;
}

#leads-bulk-toolbar select.form-control,
#leads-bulk-toolbar .btn {
    height: 36px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 13px;
}

#leads-bulk-toolbar select.form-control {
    padding-left: 12px;
    padding-right: 34px;
    background-position: right 10px center;
    background-size: 14px;
    border-radius: 8px;
    max-width: 170px;
}

#leads-bulk-toolbar .btn {
    border-radius: 8px;
    white-space: nowrap;
}

#leads-bulk-toolbar .leads-bulk-divider {
    width: 1px;
    height: 24px;
    background-color: var(--border-color);
    flex-shrink: 0;
}

.icon-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.icon-btn:hover {
    background-color: var(--bg-surface-active);
    color: var(--text-primary);
}

.icon-btn-sm {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    transition: all var(--transition-fast);
}
.icon-btn-sm:hover {
    background-color: var(--bg-surface-active);
    color: var(--text-primary);
}

.link-btn {
    background: transparent;
    border: none;
    color: var(--color-primary);
    font-weight: 500;
    cursor: pointer;
    font-size: 13px;
}
.link-btn:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.form-control {
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    outline: none;
    transition: border-color var(--transition-fast);
    width: 100%;
}
.form-control:focus {
    border-color: var(--color-primary);
}

textarea.form-control {
    resize: vertical;
}

/* Custom themed dropdown arrow — replaces native browser arrow for all .form-select and select.form-control */
.form-select,
select.form-select,
select.form-control {
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 10px 14px;
    padding-right: 40px;
    border-radius: 10px;
    font-size: 14px;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    width: 100%;
    display: block;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    cursor: pointer;
}
.form-select:hover,
select.form-select:hover,
select.form-control:hover {
    border-color: var(--border-color-strong);
}
.form-select:focus,
select.form-select:focus,
select.form-control:focus {
    border-color: var(--color-primary);
}
select.form-control option {
    background-color: var(--bg-surface);
    color: var(--text-primary);
}

.input-icon-wrapper {
    position: relative;
    width: 100%;
}

.input-icon-wrapper i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.input-icon-wrapper input {
    padding-left: 40px;
}

.form-tip {
    font-size: 12px;
    color: var(--text-muted);
}

.radio-group {
    display: flex;
    gap: 16px;
}
.radio-group label {
    font-weight: normal;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ==========================================================================
   CARDS & GRIDS
   ========================================================================== */
.card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-normal), box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}

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

/* Table/list cards (.card-table) sit flush against surrounding content
   and hold a scrollable list, not a single glanceable stat — lifting
   them on hover reads as a layout jump rather than an affordance, so
   they opt back out of the generic .card hover above. */
.card-table:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--border-color);
}

.card-table {
    padding: 0;
    overflow: hidden;
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.stat-card:hover {
    transform: translateY(-5px);
}

.stat-card:has(.icon-blue):hover {
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.18), 0 0 12px rgba(59, 130, 246, 0.15);
    border-color: #3b82f6;
}

.stat-card:has(.icon-orange):hover {
    box-shadow: 0 12px 30px rgba(249, 115, 22, 0.18), 0 0 12px rgba(249, 115, 22, 0.15);
    border-color: #f97316;
}

.stat-card:has(.icon-red):hover {
    box-shadow: 0 12px 30px rgba(210, 65, 80, 0.18), 0 0 12px rgba(210, 65, 80, 0.15);
    border-color: #d24150;
}

.stat-card:has(.icon-green):hover {
    box-shadow: 0 12px 30px rgba(44, 150, 115, 0.18), 0 0 12px rgba(44, 150, 115, 0.15);
    border-color: #2c9673;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.icon-blue { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.icon-orange { background: rgba(249, 115, 22, 0.15); color: #f97316; }
.icon-red { background: rgba(210, 65, 80, 0.15); color: #d24150; }
.icon-green { background: rgba(44, 150, 115, 0.15); color: #2c9673; }

.stat-content h3 {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.dashboard-charts-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.chart-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    flex: 1;
    min-width: 300px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

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

.chart-card.flex-2 {
    flex: 2;
    min-width: 400px;
}

.card-header {
    margin-bottom: 16px;
}

.card-header h3 {
    font-size: 16px;
    font-weight: 600;
}

.chart-container {
    position: relative;
    height: 260px;
    width: 100%;
}

.stat-summary-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 10px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.summary-item span {
    color: var(--text-secondary);
}

.summary-item strong {
    font-size: 18px;
    color: var(--text-primary);
}

.summary-item.highlight {
    border-bottom: none;
    background: var(--color-primary-soft);
    padding: 12px;
    border-radius: 8px;
}

.summary-item.highlight span {
    color: var(--color-primary);
    font-weight: 600;
}
.summary-item.highlight strong {
    color: var(--color-primary);
    font-weight: 700;
}

/* ==========================================================================
   DATA TABLES & PACKAGES
   ========================================================================== */
.table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.search-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
}

.table-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.sortable-th i.fa-sort {
    opacity: 0.4;
    margin-left: 4px;
    font-size: 11px;
}

.table-responsive {
    overflow-x: auto;
    width: 100%;
    padding: 4px 12px 12px 12px;
}

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    text-align: left;
}

.data-table th {
    background: transparent;
    font-weight: 600;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 16px 8px;
    border-bottom: none;
}

.data-table tbody tr {
    background: var(--bg-surface-glass);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.data-table tbody tr:hover {
    background: var(--bg-surface-active);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.data-table tbody td {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    white-space: nowrap;
}

.data-table tbody td:first-child {
    border-left: 1px solid var(--border-color);
    border-radius: 12px 0 0 12px;
}

.data-table tbody td:last-child {
    border-right: 1px solid var(--border-color);
    border-radius: 0 12px 12px 0;
}

.table-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 24px;
    gap: 8px;
}

/* ==========================================================================
   BADGES & PILLS
   ========================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: capitalize;
    line-height: 1;
    border: 1px solid transparent;
}

.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    display: inline-block;
    flex-shrink: 0;
}

.badge-primary { background-color: var(--color-primary-soft); color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 30%, transparent); }
.badge-accent, .badge-success { background-color: var(--color-accent-soft); color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.badge-danger { background-color: var(--color-danger-soft); color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 30%, transparent); }
.badge-warning { background-color: rgba(191, 130, 46, 0.14); color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 30%, transparent); }
.badge-info { background-color: rgba(59, 130, 246, 0.14); color: var(--color-info); border-color: color-mix(in srgb, var(--color-info) 30%, transparent); }
.badge-secondary { background-color: var(--bg-input); color: var(--text-secondary); border-color: var(--border-color); }

/* Avatars & Org/Contact Cells */
.crm-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.crm-avatar-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.crm-avatar-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.crm-avatar-name {
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
}

.crm-avatar-subtext {
    font-size: 11.5px;
    color: var(--text-muted);
}

/* Row Actions & Divider */
.row-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}

.actions-divider {
    width: 1px;
    height: 16px;
    background-color: var(--border-color);
    margin: 0 4px;
    display: inline-block;
}

.icon-btn-sm {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.icon-btn-sm:hover {
    transform: translateY(-1px);
    border-color: var(--border-color-strong);
    color: var(--text-primary);
    background: var(--bg-surface-active);
}

.icon-btn-sm-danger:hover {
    background: var(--color-danger-soft);
    color: var(--color-danger);
    border-color: rgba(210, 65, 80, 0.3);
}

.icon-btn-sm-success:hover {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border-color: rgba(44, 150, 115, 0.3);
}

/* Title Icon Chips */
.title-icon-chip {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.view-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Color utilities — referenced throughout inbox.js/contacts.js/automations.js
   for status icons (sent/delivered ticks, delete/archive actions, step
   type icons) but never had a defined rule. */
.text-green { color: var(--color-accent); }
.text-blue { color: var(--color-info); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }

.form-control-sm {
    padding: 6px 10px;
    font-size: 13px;
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
}

/* ==========================================================================
   AGENT INBOX LAYOUT & VIEWS
   ========================================================================== */
.inbox-layout {
    display: flex;
    position: relative; /* anchors the profile panel overlay (.inbox-right) */
    height: calc(100vh - var(--header-height) - 48px); /* Account for padding */
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--bg-surface);
}

/* Left panel: chats listing */
.inbox-left {
    width: 320px;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background-color: var(--bg-surface);
}

.inbox-search {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

.inbox-search i {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.inbox-search input {
    width: 100%;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    outline: none;
    color: var(--text-primary);
    padding: 10px 10px 10px 40px;
    border-radius: 10px;
    font-size: 14px;
}

.inbox-filters-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    padding: 4px;
    background-color: var(--bg-input);
    gap: 4px;
}

.filter-tab {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 0;
    cursor: pointer;
    border-radius: 6px;
    text-align: center;
    transition: all var(--transition-fast);
}

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

.filter-tab.active {
    background-color: var(--bg-surface);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.conversation-list {
    flex: 1;
    overflow-y: auto;
}

.chat-item {
    display: flex;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    gap: 12px;
    position: relative;
    transition: background-color var(--transition-fast);
}

.chat-item:hover {
    background-color: var(--bg-surface-active);
}

.chat-item.active {
    background-color: var(--color-primary-soft);
}

.chat-item.unread::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: var(--color-primary);
    border-radius: 50%;
}

.chat-item-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--border-color-strong);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    flex-shrink: 0;
}

.chat-item-info {
    flex: 1;
    min-width: 0;
}

.chat-item-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.chat-item-info-header h4 {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}

.chat-item-time {
    font-size: 11px;
    color: var(--text-muted);
}

.chat-item-preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.chat-item-preview {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.chat-item-badge-row {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Center window: messages stream */
.inbox-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%; /* Propagate height from layout container */
    min-height: 0;
    background-color: var(--bg-input);
}

#chat-active-window {
    display: flex;
    flex-direction: column;
    height: 100%; /* Propagate height from inbox-center */
    min-height: 0;
}

.chat-header {
    height: var(--header-height);
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    flex-shrink: 0;
}

.chat-user-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.chat-title-info h3 {
    font-size: 15px;
    font-weight: 600;
}
.chat-title-info span {
    font-size: 12px;
    color: var(--text-muted);
}

.chat-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.chat-header-actions::-webkit-scrollbar {
    display: none;
}

.chat-header-actions .btn {
    white-space: nowrap;
    padding: 6px 14px;
    font-size: 13px;
    height: 36px;
    line-height: 1;
    border-radius: 8px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.chat-header-actions .badge {
    white-space: nowrap;
    flex-shrink: 0;
}

.chat-messages-thread {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0; /* Constraints to enable scrolling */
}

/* Message Bubbles */
.msg-row {
    display: flex;
    width: 100%;
    animation: fadeInMsg 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes fadeInMsg {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.msg-row.inbound {
    justify-content: flex-start;
}

.msg-row.outbound {
    justify-content: flex-end;
}

.msg-bubble {
    max-width: 70%;
    padding: 12px 18px;
    border-radius: 16px;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform var(--transition-fast);
}

.msg-row.inbound .msg-bubble {
    background-color: var(--msg-inbound);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.msg-row.outbound .msg-bubble {
    border-bottom-right-radius: 4px;
}

.msg-row.outbound.sender-agent .msg-bubble {
    background: linear-gradient(135deg, var(--msg-outbound-agent) 0%, hsl(250, 80%, 35%) 100%);
    color: var(--msg-outbound-text);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.2);
}

.msg-row.outbound.sender-ai .msg-bubble {
    background: linear-gradient(135deg, var(--msg-outbound-ai) 0%, hsl(160, 55%, 30%) 100%);
    color: var(--msg-outbound-text);
    box-shadow: 0 4px 14px rgba(44, 150, 115, 0.2);
}

.msg-row.outbound.sender-automation .msg-bubble {
    background: linear-gradient(135deg, var(--msg-outbound-auto) 0%, hsl(280, 60%, 30%) 100%);
    color: var(--msg-outbound-text);
    box-shadow: 0 4px 14px rgba(168, 85, 247, 0.2);
}

.msg-content {
    font-size: 14px;
    word-break: break-word;
    white-space: pre-line;
}

.msg-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    font-size: 10px;
    opacity: 0.7;
    margin-top: 2px;
}

.msg-row.outbound .msg-meta {
    color: var(--msg-outbound-text);
    opacity: 0.7;
}

.msg-row.inbound .msg-meta {
    color: var(--text-muted);
}

.msg-status-tick {
    display: inline-flex;
    font-size: 12px;
}

.msg-status-tick.blue,
.msg-status-tick .blue,
.msg-status-tick i.blue,
.msg-status-tick i.fa-check-double.blue {
    color: #38bdf8 !important;
}

.msg-sender-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    opacity: 0.8;
}

/* Quoted Message / Reply Feature Styles */
.msg-quoted-snippet {
    background: rgba(0, 0, 0, 0.22);
    border-left: 3px solid #38bdf8;
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 11px;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.msg-quoted-snippet:hover {
    background: rgba(56, 189, 248, 0.15);
}

.msg-reply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transition: all var(--transition-fast);
}

.msg-reply-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    opacity: 1 !important;
    transform: scale(1.1);
}

.msg-row.highlight-row .msg-bubble {
    animation: highlightPulse 1.5s ease-in-out;
}

@keyframes highlightPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.6); }
    50% { transform: scale(1.02); box-shadow: 0 0 16px 4px rgba(56, 189, 248, 0.8); }
    100% { transform: scale(1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
}

/* Media previews inside messages */
.msg-media-preview {
    margin-bottom: 6px;
    border-radius: 8px;
    overflow: hidden;
    max-width: 260px;
    border: 1px solid var(--border-color);
}

.msg-media-preview img {
    width: 100%;
    display: block;
    height: auto;
}

.audio-player-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    min-width: 200px;
}

.audio-player-wrapper button {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: inherit;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audio-waveform-sim {
    flex: 1;
    height: 12px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.audio-waveform-progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: currentColor;
    border-radius: 6px;
}

/* Composer */
.chat-composer {
    background-color: var(--bg-surface);
    border-top: 1px solid var(--border-color);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.composer-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.composer-attachments {
    display: flex;
    gap: 8px;
    position: relative;
}

.composer-input-wrapper {
    display: flex;
    gap: 12px;
    align-items: center;
    border-radius: 12px;
    transition: box-shadow 0.15s ease;
}

.composer-input-wrapper.composer-drag-over {
    box-shadow: 0 0 0 2px var(--accent-color, #6366f1);
}

.composer-preview {
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.composer-preview-body {
    display: flex;
    align-items: center;
    gap: 12px;
}

.composer-preview-body img {
    max-height: 96px;
    max-width: 140px;
    border-radius: 8px;
    object-fit: cover;
}

.composer-preview-body .composer-preview-file {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.composer-preview-body .composer-preview-file .file-name {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.composer-preview-body audio {
    flex: 1;
    height: 36px;
}

.composer-preview-caption {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: 16px;
    font-size: 13px;
    outline: none;
}

.composer-preview-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.composer-input-wrapper textarea {
    flex: 1;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 10px 16px;
    border-radius: 20px;
    font-size: 14px;
    outline: none;
    resize: none;
    line-height: 20px;
    height: 40px;
    max-height: 120px;
}

.emoji-picker {
    position: absolute;
    bottom: 44px;
    left: 40px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color-strong);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    gap: 8px;
    box-shadow: var(--shadow-md);
    z-index: 100;
}

.emoji-picker span {
    font-size: 20px;
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.emoji-picker span:hover {
    transform: scale(1.2);
}

.quick-replies-wrapper {
    position: relative;
}

.quick-replies-dropdown {
    position: absolute;
    bottom: 36px;
    right: 0;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color-strong);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    width: 280px;
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
}

.reply-item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid var(--border-color);
    transition: background-color var(--transition-fast);
}
.reply-item:hover {
    background-color: var(--bg-surface-active);
}
.reply-item:last-child {
    border-bottom: none;
}

/* Right Panel: Customer Profile Details */
/* Contact info panel: like real WhatsApp Web, this is NOT a permanent
   third column. It stays hidden until the contact name/avatar in the
   chat header is clicked, then slides in as an overlay above the chat
   (never pushing the message column narrower), and closes via the X
   button, the Escape key, or a click on the backdrop. */
.inbox-right {
    width: 320px;
    max-width: 100%;
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background-color: var(--bg-surface);
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    z-index: 100;
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--transition-slow);
}

.inbox-right.open {
    transform: translateX(0);
}

/* Dims the chat behind the panel, and lets a click anywhere outside
   close it — same affordance WhatsApp Web uses. */
.inbox-right-backdrop {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
    z-index: 90;
}

.inbox-right-backdrop.open {
    display: block;
}

.chat-user-meta {
    cursor: pointer;
    border-radius: 10px;
    transition: background-color var(--transition-fast);
}

.chat-user-meta:hover {
    background-color: var(--bg-surface-active);
}

.profile-panel-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background-color: var(--bg-surface-active);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.profile-panel-close-btn:hover {
    background-color: var(--border-color-strong);
    color: var(--text-primary);
}

.profile-scroll {
    flex: 1;
    overflow-y: auto;
}

.profile-header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 16px 20px;
    text-align: center;
    background:
        radial-gradient(120% 100% at 50% 0%, hsla(250, 89%, 65%, 0.16) 0%, transparent 60%),
        linear-gradient(180deg, hsla(250, 89%, 65%, 0.06) 0%, transparent 100%);
    border-bottom: 1px solid var(--border-color);
}

.profile-avatar-ring {
    position: relative;
    width: 72px;
    height: 72px;
    margin-bottom: 14px;
}

.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--color-primary) 0%, hsl(265, 85%, 58%) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    box-shadow: var(--glow-primary), 0 0 0 3px var(--bg-surface);
    letter-spacing: 0.5px;
}

.profile-avatar-status {
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--color-accent);
    border: 3px solid var(--bg-surface);
    box-shadow: 0 0 0 1px hsla(160, 55%, 38%, 0.4);
}

.profile-header h3 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    max-width: 100%;
    overflow-wrap: break-word;
}

.profile-company-badge {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    background-color: var(--bg-surface-active);
    border: 1px solid var(--border-color-strong);
    border-radius: 999px;
    letter-spacing: 0.2px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-section {
    padding: 18px 16px;
}

.border-top {
    border-top: 1px solid var(--border-color);
}

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

.profile-section h4 {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

/* Subtitle shown under the customer name (phone number, not a fake
   "Private Customer" placeholder) — only the real company badge shows
   when a contact actually has a company on file. */
.profile-subtitle-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.2px;
}

.profile-subtitle-phone i {
    color: var(--color-accent);
    font-size: 13px;
}

/* Collapsible accordion sections (Tags, Notes, Appointments, Orders,
   Activity) — premium compact panel instead of one long scroll. */
.profile-accordion {
    padding: 0;
}

.profile-accordion > summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 16px;
    margin-bottom: 0;
    user-select: none;
    transition: background-color 0.15s ease;
}

.profile-accordion > summary::-webkit-details-marker {
    display: none;
}

.profile-accordion > summary:hover {
    background-color: var(--bg-surface-active);
}

.profile-accordion > summary h4 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-accordion > summary h4 i {
    color: var(--color-primary);
    font-size: 12px;
    width: 14px;
    text-align: center;
}

.accordion-chevron {
    font-size: 11px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.profile-accordion[open] > summary .accordion-chevron {
    transform: rotate(180deg);
}

.profile-accordion > summary ~ * {
    padding-left: 16px;
    padding-right: 16px;
}

.profile-accordion > summary ~ *:last-child {
    padding-bottom: 18px;
}

.profile-tags-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    height: auto;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-primary);
    background: transparent;
    border: 1px dashed var(--border-color-strong);
    border-radius: 6px;
    padding: 4px 10px;
    margin-bottom: 8px;
    cursor: pointer;
}

.profile-tags-add-btn:hover {
    background-color: var(--bg-surface-active);
}

.profile-info-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
}

.profile-info-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 10px;
    transition: background-color var(--transition-fast);
}

.profile-info-list li:hover {
    background-color: var(--bg-surface-active);
}

.profile-info-list li i {
    color: var(--color-primary);
    background-color: var(--color-primary-soft);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.info-label {
    font-size: 10.5px;
    color: var(--text-muted);
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 1px;
}

/* Same size/color as .info-label but WITHOUT the uppercase transform —
   for rows that display real data (email, phone, agent name) rather than
   a section label. Using .info-label for both was forcing values like
   "talha@example.com" to render as "TALHA@EXAMPLE.COM". */
.info-row {
    font-size: 12px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 1px;
}

.info-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.tag-pills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag-selector-wrapper {
    margin-top: 10px;
    border: 1px solid var(--border-color);
    padding: 10px;
    border-radius: 8px;
    background-color: var(--bg-input);
}

.tag-checklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 120px;
    overflow-y: auto;
}

.tag-check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}

.notes-feed {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 240px;
    overflow-y: auto;
}

.note-item {
    background-color: var(--bg-input);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.note-meta {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.note-body {
    font-size: 13px;
    color: var(--text-secondary);
}

.chat-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

.chat-empty-state i {
    font-size: 64px;
    color: var(--border-color-strong);
    margin-bottom: 16px;
}

.chat-empty-state h3 {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* Typing loading state simulator */
.typing-indicator {
    align-self: flex-start;
    background-color: var(--msg-inbound);
    padding: 12px 18px;
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    display: flex;
    gap: 4px;
    align-items: center;
    box-shadow: var(--shadow-sm);
}

.typing-indicator span {
    width: 6px;
    height: 6px;
    background-color: var(--text-muted);
    border-radius: 50%;
    display: inline-block;
    animation: bounce 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1.0); }
}

/* ==========================================================================
   LEADS KANBAN BOARD SYSTEM
   ========================================================================== */
.kanban-board {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 12px;
    align-items: flex-start;
    height: calc(100vh - var(--header-height) - 120px);
}

.kanban-column {
    width: 280px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.kanban-column-header {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--border-color);
}

.kanban-column-header h4 {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-primary);
}

.kanban-cards-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 150px;
}

.kanban-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    cursor: grab;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.kanban-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.kanban-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.kanban-card-company {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.kanban-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 8px;
    margin-top: 8px;
}

.kanban-card-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-accent);
}

.kanban-card-agent {
    font-size: 11px;
    color: var(--text-muted);
    background-color: var(--bg-surface-active);
    padding: 2px 6px;
    border-radius: 4px;
}

/* ==========================================================================
   AUTOMATION WORKFLOW BUILDER
   ========================================================================== */
.automations-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.automation-workflow-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color var(--transition-fast);
}
.automation-workflow-card:hover {
    border-color: var(--color-primary);
}

.workflow-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.workflow-card-header h3 {
    font-size: 15px;
    font-weight: 600;
}

.workflow-steps-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-color: var(--bg-input);
    padding: 12px;
    border-radius: 8px;
}

.workflow-step-summary-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.workflow-step-summary-item i {
    width: 14px;
    text-align: center;
}

.workflow-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
}

.switch-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
}

.switch-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-toggle {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--border-color-strong);
    transition: .3s;
    border-radius: 34px;
}

.slider-toggle:before {
    position: absolute;
    content: "";
    height: 16px; width: 16px;
    left: 3px; bottom: 3px;
    transition: .3s;
    border-radius: 50%;
    background-color: #fff;
}

input:checked + .slider-toggle {
    background-color: var(--color-primary);
}

input:checked + .slider-toggle:before {
    transform: translateX(18px);
}

/* ==========================================================================
   SETTINGS COMPONENT
   ========================================================================== */
.settings-grid {
    display: flex;
    gap: 24px;
    align-items: stretch;
    width: 100%;
    min-height: calc(100vh - 120px);
}

.settings-nav-pane {
    flex: 0 0 270px !important;
    width: 270px !important;
    min-width: 270px !important;
    max-width: 270px !important;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px 10px;
    overflow-y: auto;
    min-height: 0;
}

.settings-tab-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 10px 14px !important;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap !important;
    margin-bottom: 2px;
}

.settings-tab-btn i {
    width: 20px !important;
    height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
}

.settings-tab-btn:hover {
    background-color: var(--bg-surface-active);
    color: var(--text-primary);
}

.settings-tab-btn.active {
    background-color: var(--color-primary-soft) !important;
    color: var(--color-primary) !important;
    font-weight: 600 !important;
}

.settings-content-pane {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 24px;
    overflow-y: auto;
}

.settings-tab-content h3 {
    font-size: 18px;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

/* ==========================================================================
   MODAL DIALOG POPUPS
   ========================================================================== */
.modal-backdrop {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    animation: fadeIn var(--transition-fast) forwards;
}

.modal-dialog {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color-strong);
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: calc(100vh - 40px);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    animation: slideUp var(--transition-normal) forwards;
}

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

.modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h3 {
    font-size: 16px;
    font-weight: 600;
}

.modal-body {
    padding: 24px;
    max-height: 75vh;
    overflow-y: auto;
}

/* Every modal's action row (Save/Cancel, Confirm/Delete, ...) previously
   had no dedicated class, so each script styled its own buttons inline
   with slightly different spacing. This gives every popup a consistent,
   sticky footer: it stays pinned to the bottom of the dialog even when
   .modal-body scrolls, so the primary action is never scrolled out of
   view on a long form. */
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    background-color: var(--bg-surface);
    border-radius: 0 0 16px 16px;
}

.modal-footer.modal-footer-split {
    justify-content: space-between;
}

/* Confirmation dialog icon (Cancel follow-up / Cancel meeting / etc.) */
.confirm-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 22px;
}
.confirm-icon-danger {
    background-color: var(--color-danger-soft);
    color: var(--color-danger);
}

/* ==========================================================================
   WHATSAPP SIMULATION CONTROL PANEL DRAWER
   ========================================================================== */
.simulation-drawer {
    position: fixed;
    right: calc(-1 * var(--sim-drawer-width));
    top: 0;
    width: var(--sim-drawer-width);
    height: 100vh;
    background-color: var(--bg-surface);
    border-left: 1px solid var(--border-color-strong);
    box-shadow: var(--shadow-lg);
    z-index: 500;
    display: flex;
    flex-direction: column;
    transition: right var(--transition-slow);
}

.simulation-drawer.open {
    right: 0;
}

.drawer-header {
    height: var(--header-height);
    padding: 0 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.drawer-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-primary);
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.sim-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

/* ==========================================================================
   AUTHENTICATION VIEW STYLES
   ========================================================================== */
.auth-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100vw;
    background-color: var(--bg-app);
    background-image: radial-gradient(circle at 15% 15%, var(--color-primary-soft), transparent 45%),
                       radial-gradient(circle at 85% 85%, var(--color-accent-soft), transparent 45%);
    overflow-y: auto;
    padding: 24px;
}

.auth-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 44px 40px;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow-lg);
    margin: auto;
}

.auth-logo {
    text-align: center;
    margin-bottom: 32px;
}

/* Auth page: Lets Work logo image (dark mode = natural, light mode = dark mono) */
.auth-brand-logo {
    display: block;
    height: 52px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    margin: 0 auto 18px;
    filter: none;
    transition: filter var(--transition-normal);
}

[data-theme="light"] .auth-brand-logo {
    filter: brightness(0);
}

.auth-logo h2 {
    font-size: 24px;
    font-weight: 700;
}

.auth-logo p {
    font-size: 13px;
    color: var(--text-muted);
}

.error-msg {
    color: var(--color-danger);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 12px;
}

/* Notification Popups */
.bell-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background-color: var(--color-danger);
    border-radius: 50%;
}

.notification-bell-wrapper {
    position: relative;
}

.notification-dropdown {
    position: absolute;
    top: 44px;
    right: 0;
    width: 320px;
    max-width: calc(100vw - 24px);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color-strong);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 200;
    display: none;
    flex-direction: column;
}

.notification-dropdown.open {
    display: flex;
}

.dropdown-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dropdown-header h3 {
    font-size: 14px;
    font-weight: 600;
}

.dropdown-list {
    max-height: 280px;
    overflow-y: auto;
}

.notification-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}
.notification-item:hover {
    background-color: var(--bg-surface-active);
}
.notification-item.unread {
    background-color: var(--color-primary-soft);
    font-weight: 500;
}
.notification-item-time {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
}

.empty-state {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* Skeleton Loaders */
.skeleton-loader-chat {
    height: 76px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(90deg, var(--bg-surface) 25%, var(--bg-surface-active) 50%, var(--bg-surface) 75%);
    background-size: 200% 100%;
    animation: loadingSkeleton 1.5s infinite;
}

@keyframes loadingSkeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Toast System */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 2000;
}

.toast {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color-strong);
    color: var(--text-primary);
    padding: 14px 20px;
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
    max-width: 400px;
    transform: translateX(120%);
    animation: slideInToast 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideInToast {
    to { transform: translateX(0); }
}

.toast.toast-success { border-left: 4px solid var(--color-accent); }
.toast.toast-error { border-left: 4px solid var(--color-danger); }
.toast.toast-warning { border-left: 4px solid var(--color-warning); }
.toast.toast-info { border-left: 4px solid var(--color-info); }

/* Voice recording blinking animations */
.animate-pulse-voice {
    animation: pulseVoice 1.2s infinite ease-in-out;
}

@keyframes pulseVoice {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.15); color: hsl(354, 62%, 58%); }
}

.text-red {
    color: var(--color-danger) !important;
}

/* ==========================================================================
   HAMBURGER BUTTON & OVERLAY — hidden on desktop, shown via media query
   ========================================================================== */
.sidebar-hamburger-btn {
    display: none; /* Desktop: sidebar always visible, button not needed */
}

.sidebar-overlay {
    display: none; /* Desktop: no overlay needed */
}

/* ==========================================================================
   RESPONSIVE DESIGN — MOBILE (≤768px): HORIZONTAL ICON-STRIP TOPBAR
   Strategy: sidebar becomes a permanent horizontal icon row below the
   header — always visible, no hamburger, no off-canvas drawer.
   ========================================================================== */
@media (max-width: 768px) {

    body { overflow-y: auto; }

    /* Stack vertically: icon-strip on top, header+content below */
    .app-layout {
        flex-direction: column;
        height: 100dvh;
        overflow: hidden;
    }

    .app-content-wrapper {
        display: contents;
    }

    .app-sidebar {
        order: 1;
        position: relative;
        transform: none;
        width: 100%;
        height: auto;
        flex-direction: row;
        align-items: center;
        flex-shrink: 0;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .app-header {
        order: 2;
        width: 100%;
        flex-shrink: 0;
        padding-left: 24px;
        padding-right: 12px;
    }

    .sidebar-brand {
        flex-shrink: 0;
        padding: 8px 12px;
        border-right: 1px solid var(--border-color);
    }
    .sidebar-brand-sub { display: none; }

    .sidebar-menu {
        flex: 1;
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 6px 8px;
        gap: 2px;
        scrollbar-width: none;
    }
    .sidebar-menu::-webkit-scrollbar { display: none; }

    .nav-item {
        flex-direction: column;
        flex-shrink: 0;
        padding: 8px 14px;
        gap: 2px;
    }
    .nav-item span { display: none; }
    .nav-item i { font-size: 20px; }
    .nav-item.active::before { display: none; }

    .sidebar-footer { display: none; }

    .sidebar-hamburger-btn,
    .sidebar-overlay { display: none !important; }

    .header-left h2 { font-size: 17px; }
    .header-right { gap: 8px; }

    .app-main-content {
        order: 3;
        flex: 1;
        width: 100%;
        padding: 12px;
        overflow-y: auto;
        min-height: 0;
    }

    /* ── Inbox: single-panel mode (unchanged logic, height now flex-based) ── */
    #view-inbox.sub-view {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        margin: -12px;
        width: calc(100% + 24px);
        border-radius: 0;
        min-height: 0;
    }
    .inbox-layout { flex: 1; height: 100%; overflow: hidden; }
    .inbox-left { width: 100%; height: 100%; max-height: 100%; flex-shrink: 0; border-right: none; overflow: hidden; }
    .inbox-center { display: none; flex: 1; min-height: 0; overflow: hidden; }
    .inbox-right { display: none; }

    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; border-radius: 8px; }
    .dashboard-charts-row { flex-direction: column; }
    .chart-card { width: 100% !important; min-width: 0 !important; }

    .settings-grid { flex-direction: column; height: auto; }
    .settings-nav-pane { width: 100%; flex-direction: row; overflow-x: auto; padding: 8px; border-right: none; border-bottom: 1px solid var(--border-color); }
    .settings-tab-btn { white-space: nowrap; flex-shrink: 0; }

    .simulation-drawer { width: 100%; right: -100%; }
    .view-header-row { align-items: stretch; }
    .view-header-row > .btn { width: 100%; justify-content: center; }

    .modal-overlay { padding: 0; align-items: flex-end; }
    .modal { border-radius: 20px 20px 0 0; max-height: 92dvh; width: 100%; max-width: 100%; }
    .modal-body { max-height: 65dvh !important; }
    .modal-header, .modal-body { padding: 16px !important; }

    .btn, .icon-btn { min-height: 44px; }
    input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
    select, textarea { min-height: 44px; }

    #view-social-comments { padding: 0 !important; flex: 1; display: flex; flex-direction: column; min-height: 0; }
    .card { padding: 16px; }
}

/* Small phones: tighten spacing further and drop non-essential button labels */
@media (max-width: 480px) {
    .app-main-content {
        padding: 12px;
    }

    .analytics-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 12px;
    }

    .stat-card {
        padding: 14px;
        gap: 12px;
        border-radius: 14px;
    }

    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 17px;
    }

    .stat-value {
        font-size: 20px;
    }

    #toggle-sim-panel-btn .btn-label-text {
        display: none;
    }

    #toggle-sim-panel-btn {
        padding: 10px 12px;
    }

    .auth-card {
        padding: 28px 20px;
        border-radius: 16px;
    }

    .modal-header, .modal-body {
        padding: 16px;
    }

    .data-table th, .data-table td {
        padding: 12px 14px;
        font-size: 13px;
    }

    .kanban-column {
        width: 250px;
    }
}

/* Premium Segmented control buttons for Kanban / Table View */
.tabs-btn-group {
    background-color: var(--bg-surface-active);
    border: 1px solid var(--border-color);
    padding: 4px;
    border-radius: 12px;
    display: inline-flex;
    gap: 4px;
}

.tab-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

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

.tab-btn.active {
    background-color: var(--bg-surface);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.view-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.mb-3 {
    margin-bottom: 16px !important;
}

/* ==========================================================================
   SPACING / LAYOUT UTILITIES
   Used throughout the JS-rendered modal forms (contacts, follow-ups,
   knowledge base, automations, campaigns, team, etc.) — kept centralized
   here so every view gets consistent spacing instead of each script
   re-declaring its own inline styles.
   ========================================================================== */
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 16px !important; }
.mt-4 { margin-top: 24px !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-4 { margin-bottom: 24px !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.d-flex { display: flex !important; }
.d-none { display: none !important; }

/* Follow-ups & Meetings additions */
.icon-purple { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }

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

.btn-link-sm {
    font-size: 12px;
    color: var(--color-primary);
    text-decoration: none;
}

.btn-link-sm:hover {
    text-decoration: underline;
}

.flex-gap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.meeting-schedule-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.06));
}

.meeting-schedule-item:last-child {
    border-bottom: none;
}

.meeting-schedule-time {
    font-weight: 600;
    color: var(--color-primary);
    min-width: 64px;
}

/* ==========================================================================
   TABLET BREAKPOINT (769px - 1024px)
   The app previously only had a desktop layout and a <=768px "mobile"
   layout (sidebar becomes a horizontal scrolling top bar). Everything
   in between — iPad-class tablets, small/split-screen laptop windows —
   fell back to the full desktop layout, where a fixed 260px sidebar eats
   a disproportionate share of a ~768-1024px viewport and squeezes
   grids/tables into a cramped middle column. This narrows the sidebar
   and lets grid components drop to fewer columns instead, while keeping
   the desktop (not horizontal-topbar) sidebar layout, which still fits
   comfortably at this width.
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --sidebar-width: 210px;
    }

    .app-main-content {
        padding: 18px;
    }

    .sidebar-brand {
        padding: 16px;
    }

    .nav-item span {
        font-size: 13px;
    }

    .analytics-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 16px;
    }

    .dashboard-charts-row {
        flex-wrap: wrap;
    }

    .chart-card {
        min-width: 280px !important;
    }

    .modal-dialog {
        max-width: 90vw;
    }

    .simulation-drawer {
        width: min(var(--sim-drawer-width), 90vw);
    }
}

/* ==========================================================================
   POPUP / MODAL MOBILE POLISH
   The existing @media (max-width: 480px) block above already shrinks
   modal-header/modal-body padding, but left the dialog itself sized and
   positioned like a desktop popup (centered, rounded on all 4 corners,
   a fixed max-height that can strand a tall form's Save button below
   the fold with no way to reach it except scrolling the whole page
   behind the backdrop). On a phone a centered card is also the
   least ergonomic shape - a bottom/full sheet is far easier to reach
   one-handed and matches the native-app pattern people already know
   from WhatsApp itself.
   ========================================================================== */
@media (max-width: 640px) {
    .modal-backdrop {
        padding: 0;
        align-items: flex-end;
    }

    .modal-dialog {
        max-width: 100%;
        width: 100%;
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
        border-bottom: none;
        animation: slideUpSheet var(--transition-normal) forwards;
    }

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

    .modal-footer {
        border-radius: 0;
        /* Respect the home-indicator safe area on notched phones so the
           primary action button never sits underneath it. */
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }

    .notification-dropdown {
        position: fixed;
        top: var(--header-height);
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
    }
}

/* ==========================================================================
   SPACING SCALE
   A formal scale to reach for in place of one-off pixel values —
   consistent 4px rhythm rather than the mix of 12/14/18/20/22px gaps
   scattered through component rules above. Additive: nothing existing
   was changed to use these, so there's zero risk of shifting any
   current layout; they're here for any new component/view going
   forward to stay visually consistent with the rest of the app.
   ========================================================================== */
:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 999px;
}
/* ==========================================================================
   URDU TEXT / RTL SUPPORT FIX
   ========================================================================== */
.urdu-text {
    direction: rtl !important;
    text-align: right !important;
    unicode-bidi: plaintext;
}

/* Inbox Channel Filter Tabs styling */
.inbox-channel-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-surface);
}

.channel-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    background: var(--bg-input);
    border: 1px solid transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    padding: 6px 4px;
    border-radius: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
    min-width: 0;
}
.channel-tab:hover {
    color: var(--text-primary);
    border-color: var(--border-color-strong);
}
.channel-tab.active {
    background-color: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--text-primary);
}

.channel-tab-label {
    display: none !important;
}

.channel-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 11px;
    color: #fff;
    flex-shrink: 0;
}
.channel-icon-all { background: linear-gradient(135deg, hsl(250,89%,65%), hsl(250,89%,50%)); }
.channel-icon-whatsapp { background: #25D366; }
.channel-icon-instagram { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.channel-icon-facebook { background: #0084FF; }
.channel-icon-tiktok { background: #010101; }

.channel-tab-count {
    background: var(--bg-surface-active);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}
.channel-tab.active .channel-tab-count {
    background: var(--color-primary);
    color: #fff;
}

.chat-item-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.chat-item-channel-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    .nav-item span {
        font-size: 13px;
    }

    .analytics-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 16px;
    }

    .dashboard-charts-row {
        flex-wrap: wrap;
    }

    .chart-card {
        min-width: 280px !important;
    }

    .modal-dialog {
        max-width: 90vw;
    }

    .simulation-drawer {
        width: min(var(--sim-drawer-width), 90vw);
    }
}

/* ==========================================================================
   POPUP / MODAL MOBILE POLISH
   The existing @media (max-width: 480px) block above already shrinks
   modal-header/modal-body padding, but left the dialog itself sized and
   positioned like a desktop popup (centered, rounded on all 4 corners,
   a fixed max-height that can strand a tall form's Save button below
   the fold with no way to reach it except scrolling the whole page
   behind the backdrop). On a phone a centered card is also the
   least ergonomic shape - a bottom/full sheet is far easier to reach
   one-handed and matches the native-app pattern people already know
   from WhatsApp itself.
   ========================================================================== */
@media (max-width: 640px) {
    .modal-backdrop {
        padding: 0;
        align-items: flex-end;
    }

    .modal-dialog {
        max-width: 100%;
        width: 100%;
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
        border-bottom: none;
        animation: slideUpSheet var(--transition-normal) forwards;
    }

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

    .modal-footer {
        border-radius: 0;
        /* Respect the home-indicator safe area on notched phones so the
           primary action button never sits underneath it. */
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }

    .notification-dropdown {
        position: fixed;
        top: var(--header-height);
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
    }
}

/* ==========================================================================
   SPACING SCALE
   A formal scale to reach for in place of one-off pixel values —
   consistent 4px rhythm rather than the mix of 12/14/18/20/22px gaps
   scattered through component rules above. Additive: nothing existing
   was changed to use these, so there's zero risk of shifting any
   current layout; they're here for any new component/view going
   forward to stay visually consistent with the rest of the app.
   ========================================================================== */
:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 999px;
}
/* ==========================================================================
   URDU TEXT / RTL SUPPORT FIX
   ========================================================================== */
.urdu-text {
    direction: rtl !important;
    text-align: right !important;
    unicode-bidi: plaintext;
}

/* Inbox Channel Filter Tabs styling */
.inbox-channel-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-surface);
}

.channel-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    background: var(--bg-input);
    border: 1px solid transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    padding: 6px 4px;
    border-radius: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
    min-width: 0;
}
.channel-tab:hover {
    color: var(--text-primary);
    border-color: var(--border-color-strong);
}
.channel-tab.active {
    background-color: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--text-primary);
}

.channel-tab-label {
    display: none !important;
}

.channel-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 11px;
    color: #fff;
    flex-shrink: 0;
}
.channel-icon-all { background: linear-gradient(135deg, hsl(250,89%,65%), hsl(250,89%,50%)); }
.channel-icon-whatsapp { background: #25D366; }
.channel-icon-instagram { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.channel-icon-facebook { background: #0084FF; }
.channel-icon-tiktok { background: #010101; }

.channel-tab-count {
    background: var(--bg-surface-active);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}
.channel-tab.active .channel-tab-count {
    background: var(--color-primary);
    color: #fff;
}

.chat-item-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.chat-item-channel-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #fff;
    border: 2px solid var(--bg-surface);
}

/* Premium Search Inputs styling */
.inbox-search input,
.input-icon-wrapper input[placeholder*="Search"] {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 24px !important;
    color: var(--text-primary) !important;
    font-size: 13px !important;
    font-family: 'Outfit', sans-serif !important;
    padding: 10px 16px 10px 42px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: var(--shadow-sm) !important;
}

.inbox-search input::placeholder,
.input-icon-wrapper input[placeholder*="Search"]::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s ease !important;
}

/* Hover State */
.inbox-search input:hover,
.input-icon-wrapper input[placeholder*="Search"]:hover {
    border-color: var(--border-color-strong) !important;
    background-color: var(--bg-surface-active) !important;
}

/* Premium Focus Glow State */
.inbox-search input:focus,
.input-icon-wrapper input[placeholder*="Search"]:focus {
    border-color: var(--color-primary) !important;
    background-color: var(--bg-surface) !important;
    box-shadow: 0 0 0 3px var(--color-primary-soft), var(--shadow-sm) !important;
    outline: none !important;
}

/* Magnifying glass icon transitions */
.inbox-search i,
.input-icon-wrapper i {
    transition: color 0.3s ease, transform 0.3s ease !important;
    color: var(--text-muted) !important;
}

.inbox-search:focus-within i,
.input-icon-wrapper:focus-within i {
    color: var(--color-primary) !important;
    transform: translateY(-50%) scale(1.1) !important;
}

/* Session Loading Screen — theme-aware */
.session-loading-inner {
    text-align: center;
    color: var(--text-primary);
}

.session-loading-spinner {
    font-size: 32px;
    color: var(--color-primary);
}

.session-loading-text {
    margin-top: 12px;
    font-size: 14px;
    font-family: var(--font-primary);
    color: var(--text-secondary);
    opacity: 0.85;
}
/* ==========================================================================
   COMPREHENSIVE RESPONSIVE OVERHAUL
   Fixes all views and components for small screens (phones & narrow tablets)
   ========================================================================== */

/* ── ≤ 768 px ── */
@media (max-width: 768px) {

    /* Table Headers: stack search + actions vertically */
    .table-header {
        flex-direction: column;
        align-items: stretch;
        padding: 12px 16px;
        gap: 10px;
    }
    .table-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
    .table-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
        font-size: 12px;
        padding: 8px 12px;
    }

    /* Hide low-priority table columns on mobile */
    .data-table .col-hide-mobile,
    .data-table th.col-hide-mobile,
    .data-table td.col-hide-mobile {
        display: none;
    }
    .data-table th,
    .data-table td {
        padding: 10px 12px;
        font-size: 13px;
    }

    /* View header row — wrap buttons */
    .view-header-row {
        flex-wrap: wrap;
        gap: 8px;
    }
    .view-header-row .btn {
        font-size: 13px;
        padding: 8px 14px;
    }

    /* Inbox pane heights on mobile */
    .inbox-layout {
        flex-direction: column;    /* Mobile inbox: show ONLY the list panel by default (full height).
       JS will swap to the chat panel when a conversation is tapped. */
    }
    .inbox-left {
        width: 100%;
        height: 100%;
        max-height: 100%;
        flex-shrink: 0;
        border-right: none;
        border-bottom: none;
        overflow: hidden;
    }
    .inbox-center {
        display: none; /* hidden until JS shows it */
        width: 100%;
        min-height: 0;
        overflow: hidden;
    }
    .inbox-right {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--border-color);
        max-height: 50vh;
        overflow-y: auto;
    }

    /* Social Comments mobile layout (matches Agent Inbox) */
    .social-comments-layout {
        flex-direction: column;
        height: calc(100vh - 100px);
    }
    .social-comments-layout .comments-list-panel {
        width: 100% !important;
        height: 100% !important;
        border-right: none;
        display: flex !important;
    }
    .social-comments-layout .comment-detail-panel {
        display: none !important;
        width: 100% !important;
        height: 100% !important;
    }
    .social-comments-layout.show-detail-mobile .comments-list-panel {
        display: none !important;
    }
    .social-comments-layout.show-detail-mobile .comment-detail-panel {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Follow-ups / Meetings — cards wrap */
    .followup-cards-grid,
    .meetings-cards-grid {
        grid-template-columns: 1fr !important;
    }

    /* Campaigns / Automation cards wrap */
    .campaign-cards-grid,
    .automation-cards-grid {
        grid-template-columns: 1fr !important;
    }

    /* Contacts: hide less-important columns */
    #contacts-table .col-company,
    #contacts-table .col-source,
    #contacts-table .col-tags {
        display: none;
    }

    /* Leads: hide lower-priority columns */
    #leads-table .col-source,
    #leads-table .col-score {
        display: none;
    }

    /* Header: shrink simulator button label */
    #toggle-sim-panel-btn .btn-label-text {
        display: none;
    }
    #toggle-sim-panel-btn {
        padding: 10px 12px;
    }

    /* Header title smaller */
    .header-left h2 {
        font-size: 16px;
    }

    /* Analytics grid wraps */
    .analytics-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 12px;
    }

    /* Settings grid stack */
    .settings-grid {
        flex-direction: column;
        height: auto;
    }
    .settings-nav-pane {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding: 8px;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
    .settings-tab-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Kanban: horizontal scroll, narrower columns */
    .kanban-board {
        overflow-x: auto;
        padding-bottom: 16px;
    }
    .kanban-column {
        min-width: 240px;
        width: 240px;
        flex-shrink: 0;
    }

    /* Modal dialog full-width */
    .modal-dialog {
        max-width: calc(100vw - 24px);
        margin: 12px auto;
    }

    /* Form groups: full width selects/inputs */
    .form-group .form-control,
    .form-group select.form-control {
        width: 100%;
        max-width: 100% !important;
    }

    /* Social comments platform/status filters wrap */
    .comments-filter-row {
        flex-wrap: wrap;
        gap: 8px;
    }
    .comments-filter-row select {
        flex: 1 1 140px;
    }

    /* Pagination: smaller buttons */
    .table-pagination {
        flex-wrap: wrap;
        padding: 12px 16px;
        justify-content: center;
    }
    .table-pagination .btn {
        font-size: 12px;
        padding: 6px 12px;
    }

    /* Channel tabs: reduce padding on mobile */
    .channel-tab {
        padding: 5px 2px;
        font-size: 10px;
    }
    .channel-tab-count {
        padding: 1px 4px;
        font-size: 9px;
    }
}

/* ── ≤ 480 px (small phones) ── */
@media (max-width: 480px) {

    .nav-item i {
        font-size: 18px;
        margin: 0;
    }

    /* Inbox conversation left pane smaller */
    .inbox-left {
        max-height: 38vh;
    }

    /* Auth card: full-width, no horizontal margin */
    .auth-card {
        border-radius: 16px;
        padding: 24px 16px;
    }
    .auth-container {
        padding: 12px;
    }

    /* Stat cards: 2-column grid */
    .analytics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .stat-card {
        padding: 12px;
    }
    .stat-icon {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }
    .stat-value {
        font-size: 18px;
    }

    /* Book Meeting button text hidden on very small screens */
    #book-meeting-btn .btn-label-text {
        display: none;
    }

    /* Reduce button padding */
    .btn {
        padding: 8px 14px;
        font-size: 13px;
    }

    /* Notification dropdown centered fixed on mobile */
    .notification-dropdown {
        position: fixed !important;
        top: 60px !important;
        left: 12px !important;
        right: 12px !important;
        width: calc(100vw - 24px) !important;
        max-width: 420px !important;
        margin: 0 auto !important;
        z-index: 1050 !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    }

    /* Table scroll touch optimization */
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
    }

    /* Modal dialog responsive sizing */
    .modal-dialog {
        max-width: 92vw !important;
        margin: 10px auto !important;
        border-radius: 14px !important;
    }

    .modal-body {
        padding: 16px !important;
        max-height: 70vh !important;
    }

    /* Card padding reduce */
    .card {
        padding: 16px;
    }

    /* Message input bar */
    .chat-input-area {
        padding: 8px;
        gap: 6px;
    }
    .chat-input-area textarea {
        font-size: 14px;
    }
}

/* ==========================================================================
   MOBILE CHAT HEADER — Responsive fix
   Prevents chat header overflow on narrow phone screens
   ========================================================================== */
@media (max-width: 768px) {

    /* Chat header becomes 2-row layout */
    .chat-header {
        height: auto;
        min-height: 56px;
        padding: 8px 10px;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }

    /* Back button: compact */
    #chat-back-to-list-btn {
        width: 32px;
        height: 32px;
        font-size: 15px;
        flex-shrink: 0;
    }

    /* Avatar: smaller */
    .chat-header .chat-avatar {
        width: 34px;
        height: 34px;
        font-size: 13px;
        flex-shrink: 0;
    }

    /* Contact name: truncate if too long */
    .chat-user-meta {
        gap: 8px;
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }
    .chat-title-info {
        overflow: hidden;
    }
    .chat-title-info h3 {
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .chat-title-info span {
        display: none;
    }

    /* Action row: push below contact info on its own line */
    .chat-header-actions {
        width: 100%;
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }
    .chat-header-actions::-webkit-scrollbar { display: none; }

    /* Hide text labels on action buttons — icons only */
    .chat-header-actions .btn span {
        display: none;
    }
    .chat-header-actions .btn {
        padding: 7px 10px;
        font-size: 13px;
        flex-shrink: 0;
        border-radius: 8px;
    }

    /* Compact mode badge */
    #chat-header-review-badge {
        display: none !important;
    }
    #chat-header-mode-badge {
        font-size: 10px;
        padding: 2px 6px;
        flex-shrink: 0;
    }

    /* Mobile Layout & Full Height Fix */
    html, body, .app-layout, .app-content-wrapper {
        height: 100vh;
        height: 100dvh;
    }

    .app-main-content {
        padding: 0 !important;
        height: calc(100dvh - var(--header-height, 60px)) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .sub-view {
        min-height: 100%;
        padding: 12px;
        box-sizing: border-box;
    }

    #view-inbox, #view-social-comments {
        padding: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        display: flex;
        flex-direction: column;
        margin: 0 !important;
    }

    .inbox-layout {
        height: 100% !important;
        max-height: 100% !important;
        display: flex;
        flex-direction: column;
        margin: 0 !important;
        padding: 0 !important;
    }

    .inbox-center, #chat-active-window {
        height: 100% !important;
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
    }

    /* Chat messages: less padding on mobile */
    .chat-messages-thread {
        padding: 12px 10px;
        gap: 10px;
        flex: 1;
        overflow-y: auto;
    }

    /* Composer: compact & zero bottom gap on mobile */
    .chat-composer {
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) 10px !important;
        background: var(--bg-surface) !important;
        border-top: 1px solid var(--border-color);
        margin: 0 !important;
        position: relative !important;
        bottom: 0 !important;
        width: 100% !important;
        flex-shrink: 0;
        z-index: 10;
    }
}

/* ==========================================================================
   ULTRA-PREMIUM CONVERT TO LEAD BANNER & BUTTON
   ========================================================================== */
.lead-convert-banner {
    position: relative;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-md) !important;
    backdrop-filter: blur(16px);
    border-radius: 14px !important;
    padding: 16px 20px !important;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

[data-theme="dark"] .lead-convert-banner {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
    border: 1px solid rgba(99, 102, 241, 0.35) !important;
}

.lead-convert-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
}

.lead-convert-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.lead-convert-header i {
    color: #818cf8;
    font-size: 13px;
}

.lead-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
}

.lead-status-badge.no-lead {
    background: var(--bg-surface-active);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.lead-status-badge.active-lead {
    background: rgba(44, 150, 115, 0.15);
    color: var(--color-accent);
    border: 1px solid rgba(52, 211, 153, 0.35);
}

.lead-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

.lead-status-dot.no-lead {
    background: var(--text-muted);
}

.lead-status-dot.active-lead {
    background: #2c9673;
    box-shadow: 0 0 10px #2c9673, 0 0 4px #2c9673;
}

/* Vibrant Ultra-Premium Gradient Button */
.btn-convert-lead-premium {
    position: relative;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 22px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.25) inset !important;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn-convert-lead-premium:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 28px rgba(139, 92, 246, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.35) inset !important;
    filter: brightness(1.1) !important;
}

.btn-convert-lead-premium:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.4) !important;
}

.btn-view-lead-premium {
    background: var(--color-primary-soft) !important;
    color: var(--color-primary) !important;
    border: 1px solid var(--border-color-strong) !important;
    padding: 9px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.btn-view-lead-premium:hover {
    background: var(--bg-surface-active) !important;
    color: var(--color-primary-hover) !important;
    transform: translateY(-1px) !important;
}

/* ==========================================================================
   ULTRA-PREMIUM SUPER ADMIN SAAS DASHBOARD STYLES
   ========================================================================== */
.sa-card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-md) !important;
    backdrop-filter: blur(16px);
    overflow: hidden;
    margin-bottom: 24px;
}

.sa-card-header {
    background: var(--bg-surface-glass);
    border-bottom: 1px solid var(--border-color);
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.sa-card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sa-card-title i {
    color: var(--color-warning);
}

.sa-btn-primary {
    background: linear-gradient(135deg, #ffab00 0%, #ff6d00 100%) !important;
    color: #000000 !important;
    font-weight: 700 !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 18px rgba(255, 171, 0, 0.35) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.sa-btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(255, 171, 0, 0.5) !important;
    filter: brightness(1.1);
}

.sa-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.sa-table th {
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
}

.sa-table td {
    padding: 16px 18px;
    color: var(--text-primary);
    font-size: 13.5px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.sa-table tbody tr {
    transition: background 0.2s ease;
}

.sa-table tbody tr:hover {
    background: var(--bg-surface-active);
}

.sa-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sa-badge-active {
    background: rgba(44, 150, 115, 0.15);
    color: var(--color-accent);
    border: 1px solid rgba(52, 211, 153, 0.35);
}

.sa-badge-suspended {
    background: rgba(210, 65, 80, 0.15);
    color: var(--color-danger);
    border: 1px solid rgba(248, 113, 113, 0.35);
}

.sa-badge-trial {
    background: rgba(245, 158, 11, 0.15);
    color: var(--color-warning);
    border: 1px solid rgba(251, 191, 36, 0.35);
}

.sa-btn-action {
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    border: 1px solid transparent;
}

.sa-btn-impersonate {
    background: rgba(255, 171, 0, 0.15) !important;
    color: var(--color-warning) !important;
    border-color: rgba(255, 171, 0, 0.35) !important;
}

.sa-btn-impersonate:hover {
    background: rgba(255, 171, 0, 0.3) !important;
    color: var(--text-primary) !important;
    transform: translateY(-1px);
}

.sa-btn-suspend {
    background: rgba(245, 158, 11, 0.15) !important;
    color: var(--color-warning) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}

.sa-btn-suspend:hover {
    background: rgba(245, 158, 11, 0.3) !important;
    color: var(--text-primary) !important;
}

.sa-btn-activate {
    background: rgba(44, 150, 115, 0.15) !important;
    color: var(--color-accent) !important;
    border-color: rgba(52, 211, 153, 0.35) !important;
}

.sa-btn-activate:hover {
    background: rgba(44, 150, 115, 0.3) !important;
    color: var(--text-primary) !important;
}

.sa-btn-delete {
    background: rgba(210, 65, 80, 0.15) !important;
    color: var(--color-danger) !important;
    border-color: rgba(248, 113, 113, 0.35) !important;
}

.sa-btn-delete:hover {
    background: rgba(210, 65, 80, 0.3) !important;
    color: var(--text-primary) !important;
}

/* ==========================================================================
   ORGANIZATIONS TABLE — refined row layout
   ========================================================================== */

/* Header icon gets its own tinted chip instead of a bare glyph. */
.sa-card-title {
    gap: 12px;
}

.sa-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--color-primary-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.sa-card-title i {
    color: inherit;
}

/* Toolbar: search + filter, unified pill controls. */
.sa-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.sa-search-wrap {
    position: relative;
    flex: 1 1 280px;
    max-width: 360px;
}

.sa-search-wrap i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 13px;
    pointer-events: none;
}

.sa-search-wrap input {
    width: 100%;
    padding: 10px 14px 10px 36px !important;
    border-radius: 10px !important;
    background: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    font-size: 13.5px;
    transition: border-color var(--transition-fast);
}

.sa-search-wrap input:focus {
    outline: none;
    border-color: var(--color-primary) !important;
}

.sa-toolbar select {
    padding: 10px 14px !important;
    border-radius: 10px !important;
    background: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
    font-size: 13px;
    font-weight: 600;
}

/* Table becomes a stack of separated, elevated rows rather than one flat
   grid — reads less like a spreadsheet, easier to scan per-tenant. */
.sa-table {
    border-collapse: separate;
    border-spacing: 0 10px;
}

.sa-table thead th {
    background: transparent;
    border-bottom: none;
    padding: 0 18px 8px;
    color: var(--text-muted);
    font-size: 10.5px;
}

.sa-table tbody tr {
    background: var(--bg-surface-glass);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.sa-table tbody tr:hover {
    background: var(--bg-surface-active);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.sa-table tbody td {
    border-bottom: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
}

.sa-table tbody td:first-child {
    border-left: 1px solid var(--border-color);
    border-radius: 12px 0 0 12px;
}

.sa-table tbody td:last-child {
    border-right: 1px solid var(--border-color);
    border-radius: 0 12px 12px 0;
}

/* Org identity: avatar + name + id, replaces a bare "#N" column. */
.sa-org-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sa-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}

.sa-org-name {
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.sa-org-id {
    font-size: 11.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Subdomain shown as a chip rather than raw <code>, with the edit action
   folded in instead of floating a separate button next to plain text. */
.sa-domain-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 6px 5px 10px;
    border-radius: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    font-size: 12.5px;
    color: var(--color-primary);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

.sa-domain-chip-empty {
    color: var(--text-muted);
    font-family: var(--font-primary);
}

.sa-domain-chip i.fa-link {
    font-size: 10.5px;
    opacity: 0.7;
}

.sa-domain-edit {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.sa-domain-edit:hover {
    background: var(--bg-surface-active);
    color: var(--color-primary);
}

.sa-domain-edit-accent {
    color: var(--color-primary);
}

/* Status badge with a solid dot instead of an outlined icon glyph. */
.sa-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

/* Plan badge — quiet by default, warmer only for the paid tier. */
.sa-plan-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: var(--bg-input);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    text-transform: capitalize;
}

.sa-plan-pro,
.sa-plan-premium,
.sa-plan-enterprise {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-color: rgba(255, 171, 0, 0.3);
}

.sa-users-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.sa-users-pill i {
    font-size: 11px;
    color: var(--text-muted);
}

/* Action buttons: icon-only circles + one labeled primary action, so a row
   of five text buttons doesn't compete with the data next to it. */
.sa-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}

.sa-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.sa-icon-btn:hover {
    transform: translateY(-1px);
    border-color: var(--border-color-strong);
}

.sa-icon-btn-warning:hover {
    background: rgba(245, 158, 11, 0.15);
    color: var(--color-warning);
}

.sa-icon-btn-success:hover {
    background: rgba(44, 150, 115, 0.15);
    color: var(--color-accent);
}

.sa-icon-btn-danger:hover {
    background: rgba(210, 65, 80, 0.15);
    color: var(--color-danger);
}

.sa-actions-divider {
    width: 1px;
    height: 18px;
    background: var(--border-color);
    margin: 0 2px;
}

/* AI Management Theme Adaptive Styles */
.ai-provider-card {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}
.ai-provider-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-color-strong) !important;
}
.keys-manager-block {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
}
.ai-active-banner-card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
}
[data-theme="dark"] .ai-active-banner-card {
    background: linear-gradient(135deg, rgba(30,30,50,0.95), rgba(40,40,75,0.95)) !important;
    border: 1px solid rgba(99,102,241,0.3) !important;
}

/* ==========================================================================
   SUPER ADMIN & GLOBAL FORM CONTROL STYLES
   ========================================================================== */
.form-label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.2px;
}

.form-group {
    margin-bottom: 22px !important;
}

.form-control {
    width: 100% !important;
    padding: 11px 16px !important;
    border-radius: 10px !important;
    background: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
    box-shadow: none !important;
}

.form-control:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-soft) !important;
}

.form-control::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.7;
}

/* ==========================================================================
   COMPREHENSIVE MOBILE RESPONSIVENESS SYSTEM (375px - 768px - 1280px+)
   ========================================================================== */

/* Tablet & Mobile Layout Adjustments (max-width: 768px) */
@media (max-width: 768px) {
    /* Top Header & Toolbar Wrap */
    .app-header {
        padding: 8px 12px !important;
        height: auto !important;
        min-height: 56px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .header-right {
        gap: 6px !important;
        flex-wrap: wrap;
    }

    .header-right .btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    /* Modals & Dialogs responsiveness */
    .modal-backdrop {
        padding: 10px !important;
    }

    .modal-dialog {
        width: 96% !important;
        max-width: 520px !important;
        margin: 0 auto !important;
        max-height: 92vh !important;
        border-radius: 14px !important;
    }

    .modal-header {
        padding: 12px 16px !important;
    }

    .modal-body {
        padding: 16px !important;
        max-height: 70vh !important;
    }

    .modal-footer {
        padding: 12px 16px !important;
        flex-wrap: wrap;
        gap: 8px !important;
    }

    /* Dashboard Stats & Charts */
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
        gap: 10px !important;
    }

    .charts-row {
        flex-direction: column !important;
        gap: 16px !important;
    }

    /* Inbox Module Enhancements */
    .chat-header {
        padding: 8px 12px !important;
        flex-wrap: wrap;
        gap: 8px;
    }

    .chat-header-actions {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .chat-footer {
        padding: 8px 10px !important;
        gap: 6px !important;
    }

    .chat-footer textarea {
        font-size: 14px !important;
    }

    /* Leads Kanban Board Responsiveness (Horizontal Scroll with snap cards) */
    .kanban-board {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 14px !important;
        padding-bottom: 16px !important;
        scroll-snap-type: x mandatory !important;
    }

    .kanban-column {
        min-width: 82vw !important;
        max-width: 85vw !important;
        flex-shrink: 0 !important;
        scroll-snap-align: start !important;
    }

    .leads-toolbar,
    .contacts-filter-bar,
    .campaigns-toolbar,
    .templates-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .leads-toolbar > div,
    .contacts-filter-bar > div,
    .campaigns-toolbar > div {
        width: 100% !important;
        flex-wrap: wrap;
        gap: 8px !important;
    }

    /* Settings Page Responsiveness */
    .settings-grid {
        flex-direction: column !important;
        height: auto !important;
        gap: 16px !important;
    }

    .settings-nav-pane {
        width: 100% !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 8px !important;
        gap: 6px !important;
        border-bottom: 1px solid var(--border-color) !important;
        flex-shrink: 0 !important;
    }

    .settings-tab-btn {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    .settings-content-pane {
        width: 100% !important;
        overflow-y: visible !important;
    }

    /* Tables Horizontally Scrollable */
    .table-responsive {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* Small Mobile Phones (max-width: 480px / 375px iPhone SE) */
@media (max-width: 480px) {
    .kanban-column {
        min-width: 88vw !important;
        max-width: 90vw !important;
    }

    .header-right .btn span,
    .header-right #inbox-send-template-btn span {
        display: inline !important;
    }

    .chat-header-actions .btn {
        padding: 5px 8px !important;
        font-size: 11px !important;
    }

    .form-control, select, textarea {
        font-size: 14px !important;
    }

    .modal-footer button {
        flex: 1 1 auto;
    }
}

/* ==========================================================================
   Content Calendar (Multi-Tenant Social Publishing Grid - Redesign v2)
   ========================================================================== */

/* Warning Banner Utility */
.calendar-alert-warning {
    border-radius: var(--radius-md);
    background: var(--color-warning-soft, rgba(234, 179, 8, 0.12));
    border: 1px solid var(--color-warning);
    color: var(--color-warning);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.calendar-alert-warning p {
    color: var(--color-warning) !important;
}

/* Dedicated Single-Row Toolbar */
.calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
}

/* Toolbar Left: Segmented View Switcher Pill */
.calendar-toolbar-left {
    display: flex;
    align-items: center;
}
.calendar-view-switcher {
    display: inline-flex;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 3px;
    gap: 2px;
}
.calendar-view-mode-btn {
    border: none;
    background: transparent;
    padding: 6px 14px;
    border-radius: calc(var(--radius-md) - 3px);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.calendar-view-mode-btn:hover {
    color: var(--text-primary);
}
.calendar-view-mode-btn.active {
    background: var(--bg-surface-active);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

/* Toolbar Center: Date Navigator */
.calendar-toolbar-center {
    display: flex;
    align-items: center;
    gap: 8px;
}
.calendar-nav-btn {
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 5px 12px;
    font-size: 13px;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.calendar-nav-btn:hover {
    background-color: var(--bg-surface-active);
    border-color: var(--border-color-strong);
    color: var(--text-primary);
}
.calendar-date-label {
    min-width: 170px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 4px;
}

/* Toolbar Right: Filters, Actions, Legend & Buttons */
.calendar-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex-wrap: wrap;
}

.calendar-filter-select {
    width: 130px;
    height: 34px;
    padding: 4px 24px 4px 10px;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
.calendar-filter-select:hover, .calendar-filter-select:focus {
    border-color: var(--border-color-strong);
    color: var(--text-primary);
}

.calendar-toolbar-divider {
    height: 22px;
    width: 1px;
    background-color: var(--border-color-strong);
    margin: 0 2px;
}

/* CSV Import/Export Grouped Action Pair */
.calendar-icon-group {
    display: inline-flex;
    align-items: center;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 2px;
    gap: 2px;
}
.calendar-icon-action {
    background: transparent;
    border: none;
    color: var(--text-muted);
    width: 28px;
    height: 28px;
    border-radius: calc(var(--radius-sm) - 2px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.calendar-icon-action:hover {
    background: var(--bg-surface-active);
    color: var(--text-primary);
}

/* Inline Legend Bar */
.calendar-legend-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--text-muted);
    margin: 0 4px;
}
.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}
.legend-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}
.legend-dot.scheduled { background-color: var(--color-primary); }
.legend-dot.posted { background-color: var(--color-accent); }
.legend-dot.failed { background-color: var(--color-danger); }
.legend-dot.draft { background-color: var(--text-muted); }

/* Secondary Button Hierarchy: AI Generator */
.btn-ai-generate {
    background: var(--color-accent-soft);
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    transition: background var(--transition-fast), color var(--transition-fast);
}
.btn-ai-generate:hover {
    background: var(--color-accent);
    color: #ffffff;
}

/* Calendar Container Wrapper & State Overlays */
#calendar-container-wrapper,
.calendar-container-wrapper {
    position: relative;
    min-height: 500px;
}

#social-accounts-missing-banner {
    display: none; /* Controlled by JS updateAccountsConnectionWarning() */
}

/* Skeleton Grid & Overlay */
#calendar-loading-overlay,
.calendar-loading-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-surface-glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    z-index: 10;
    border-radius: var(--radius-lg);
    flex-direction: column;
    padding: 12px;
}
.calendar-skeleton-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 12px;
}
.skeleton-day-cell {
    background: var(--bg-surface-active);
    border-radius: var(--radius-md);
    min-height: 88px;
    animation: calendarPulse 1.5s infinite ease-in-out;
}
@keyframes calendarPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.85; }
}

/* Month View Layout */
.calendar-grid-month {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 12px;
    box-shadow: var(--shadow-sm);
}

.calendar-grid-header {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    text-align: center;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 8px 0;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.calendar-grid-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

/* Day Cell: Reduced min-height & Always visible low-opacity add button */
.calendar-day-cell {
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    min-height: 88px;
    min-width: 0;
    padding: 8px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.calendar-day-cell:hover {
    border-color: var(--border-color-strong);
    box-shadow: var(--shadow-sm);
}
.calendar-day-cell.other-month {
    opacity: 0.45;
    background: var(--bg-input);
}
.calendar-day-cell.today {
    border: 2px solid var(--color-primary);
    border-top-width: 3px;
    background: var(--color-primary-soft);
}
.calendar-day-cell.drag-over {
    border: 2px dashed var(--color-primary);
    background: var(--color-primary-soft);
}

.day-number-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.day-number {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
}
.calendar-day-cell.today .day-number {
    background: var(--color-primary);
    color: #ffffff;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
}

/* Quick Add Button: Low opacity by default (0.35) so empty cells feel intentional and actionable */
.btn-quick-add, .btn-quick-add-sm {
    background: var(--bg-surface-active);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 10px;
    transition: opacity var(--transition-fast), background var(--transition-fast);
    opacity: 0.35;
}
.calendar-day-cell:hover .btn-quick-add,
.week-day-header:hover .btn-quick-add-sm {
    opacity: 1;
}
.btn-quick-add:hover, .btn-quick-add-sm:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
    opacity: 1;
}

.day-posts-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

/* Week Grid Layout */
.calendar-grid-week {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 12px;
    box-shadow: var(--shadow-sm);
}

.week-header-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.week-day-header {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-primary);
}
.week-day-header.today {
    border: 2px solid var(--color-primary);
    background: var(--color-primary-soft);
}

.week-body-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    min-height: 400px;
}

.week-day-column {
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Post Badges inside Grid Cells */
.calendar-post-badge {
    background: var(--bg-surface-active);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    font-size: 11px;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    user-select: none;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.unscheduled-drafts-list .calendar-post-badge {
    max-width: 320px;
    min-width: 220px;
    flex: 1 1 auto;
}
.calendar-post-badge:hover {
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.calendar-post-badge[draggable="true"]:active,
.calendar-post-badge.dragging {
    opacity: 0.5;
}

.calendar-post-badge.status-scheduled {
    border-left: 3px solid var(--color-primary);
}
.calendar-post-badge.status-posted,
.calendar-post-badge.status-published {
    border-left: 3px solid var(--color-accent);
}
.calendar-post-badge.status-failed {
    border-left: 3px solid var(--color-danger);
}
.calendar-post-badge.status-draft,
.calendar-post-badge.status-pending {
    border-left: 3px solid var(--text-muted);
}

.badge-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}
.badge-time {
    font-weight: 700;
    font-size: 10px;
    color: var(--text-muted);
}
.badge-platforms {
    display: flex;
    gap: 4px;
    font-size: 11px;
    color: var(--text-secondary);
}
.badge-caption {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    line-height: 1.3;
    min-width: 0;
    color: var(--text-secondary);
}
.badge-has-media {
    margin-top: 3px;
    font-size: 10px;
    color: var(--text-muted);
}

.calendar-more-badge {
    background: var(--bg-surface-active);
    border: 1px dashed var(--border-color-strong);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    padding: 3px 6px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    width: 100%;
    transition: background var(--transition-fast);
}
.calendar-more-badge:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

/* Mobile & Narrow Viewport Fallback */
@media (max-width: 768px) {
    .calendar-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .calendar-toolbar-right {
        margin-left: 0;
        justify-content: space-between;
    }
    .calendar-grid-header,
    .calendar-grid-days,
    .week-header-row,
    .week-body-row {
        grid-template-columns: repeat(7, minmax(110px, 1fr));
    }
    #calendar-body-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


.week-body-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    min-height: 400px;
}

.week-day-column {
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Post Badges inside Grid Cells */
.calendar-post-badge {
    background: var(--bg-surface-active);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    font-size: 11px;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    user-select: none;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.calendar-post-badge:hover {
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.calendar-post-badge[draggable="true"]:active,
.calendar-post-badge.dragging {
    opacity: 0.5;
}

.calendar-post-badge.status-scheduled {
    border-left: 3px solid var(--color-primary);
}
.calendar-post-badge.status-posted,
.calendar-post-badge.status-published {
    border-left: 3px solid var(--color-accent);
}
.calendar-post-badge.status-failed {
    border-left: 3px solid var(--color-danger);
}
.calendar-post-badge.status-draft,
.calendar-post-badge.status-pending {
    border-left: 3px solid var(--text-muted);
}

.badge-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}
.badge-time {
    font-weight: 700;
    font-size: 10px;
    color: var(--text-muted);
}
.badge-platforms {
    display: flex;
    gap: 4px;
    font-size: 11px;
    color: var(--text-secondary);
}
.badge-caption {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-secondary);
}
.badge-has-media {
    margin-top: 3px;
    font-size: 10px;
    color: var(--text-muted);
}

.calendar-more-badge {
    background: var(--bg-surface-active);
    border: 1px dashed var(--border-color-strong);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    padding: 3px 6px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    width: 100%;
    transition: background var(--transition-fast);
}
.calendar-more-badge:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

/* Mobile & Narrow Viewport Fallback */
@media (max-width: 768px) {
    .calendar-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .calendar-toolbar-right {
        margin-left: 0;
        justify-content: space-between;
    }
    .calendar-grid-header,
    .calendar-grid-days,
    .week-header-row,
    .week-body-row {
        grid-template-columns: repeat(7, minmax(110px, 1fr));
    }
    #calendar-body-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Premium Social Posting Page Components */
.social-pub-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.social-pub-card:hover {
    border-color: var(--border-color-strong);
}

.social-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.social-section-title-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.social-section-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    border: 1px solid var(--border-color-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.social-section-icon--ai {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.social-form-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.social-form-label-required {
    color: var(--color-danger, #ef4444);
}

.social-account-card {
    background: var(--bg-surface-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all var(--transition-fast);
}

.social-account-card:hover {
    border-color: var(--border-color-strong);
    box-shadow: var(--shadow-sm);
}

.social-account-platform-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.social-account-platform-icon.facebook {
    background: rgba(24, 119, 242, 0.15);
    color: #4294ff;
}

.social-account-platform-icon.instagram {
    background: rgba(225, 48, 108, 0.15);
    color: #ff6699;
}

.social-account-platform-icon.linkedin {
    background: rgba(10, 102, 194, 0.15);
    color: #70b5f9;
}

.social-empty-state {
    padding: 2rem 1.5rem;
    text-align: center;
    background: var(--bg-input);
    border: 1px dashed var(--border-color-strong);
    border-radius: var(--radius-md);
    color: var(--text-muted);
}
.social-empty-state-icon {
    font-size: 2rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    opacity: 0.6;
}

.text-primary-heading {
    color: var(--text-primary) !important;
}

.text-accent {
    color: var(--color-accent) !important;
}

/* ==========================================================================
   Social Publishing & Utility Classes
   ========================================================================== */

/* Button & Text Utilities */
.btn-info {
    background-color: rgba(10, 102, 194, 0.15);
    border: 1px solid rgba(10, 102, 194, 0.4);
    color: #70b5f9;
    transition: all var(--transition-fast);
}
.btn-info:hover, .btn-info:focus {
    background-color: #0a66c2;
    border-color: #0a66c2;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(10, 102, 194, 0.3);
}

.text-purple {
    color: #c084fc !important;
}

.text-gradient-purple {
    background: linear-gradient(135deg, var(--color-primary-light, #d4af37), var(--color-accent, #10b981));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Social Channel Connect Buttons */
.social-connect-box {
    background: var(--bg-input);
    border: 1px dashed var(--border-color-strong);
    border-radius: var(--radius-md);
    padding: 1.25rem;
}

.btn-social-connect {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    text-decoration: none !important;
    transition: all var(--transition-fast);
    cursor: pointer;
    line-height: 1.4;
}

.btn-social-connect--facebook {
    background: rgba(24, 119, 242, 0.12);
    border: 1px solid rgba(24, 119, 242, 0.35);
    color: #4294ff;
}
.btn-social-connect--facebook:hover {
    background: #1877f2;
    border-color: #1877f2;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.35);
    transform: translateY(-1px);
}

.btn-social-connect--instagram {
    background: rgba(225, 48, 108, 0.12);
    border: 1px solid rgba(225, 48, 108, 0.35);
    color: #ff6699;
}
.btn-social-connect--instagram:hover {
    background: linear-gradient(135deg, #e1306c, #fd1d1d, #f56040);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(225, 48, 108, 0.35);
    transform: translateY(-1px);
}

.btn-social-connect--linkedin {
    background: rgba(10, 102, 194, 0.12);
    border: 1px solid rgba(10, 102, 194, 0.35);
    color: #70b5f9;
}
.btn-social-connect--linkedin:hover {
    background: #0a66c2;
    border-color: #0a66c2;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(10, 102, 194, 0.35);
    transform: translateY(-1px);
}

/* ==========================================
   CONTENT CALENDAR - PREMIUM DESIGN SYSTEM
   ========================================== */
.cc-list-table-card {
    background: rgba(18, 24, 38, 0.8) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35) !important;
    overflow: hidden;
    margin-top: 8px;
}

.cc-list-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.cc-list-table th {
    background: rgba(255, 255, 255, 0.035) !important;
    color: #94a3b8 !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 14px 18px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.cc-table-row {
    transition: all 0.2s ease;
}

.cc-table-row:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

.cc-table-row td {
    padding: 14px 18px !important;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: var(--text-primary, #f1f5f9);
}

/* Date Cell Styling */
.cc-date-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    color: #e2e8f0;
}
.cc-date-cell i {
    color: #64748b;
    font-size: 0.8rem;
}

/* Platform Tag Pills */
.cc-platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-right: 4px;
}
.cc-platform-badge.facebook {
    background: rgba(24, 119, 242, 0.15);
    border: 1px solid rgba(24, 119, 242, 0.3);
    color: #4294ff;
}
.cc-platform-badge.instagram {
    background: rgba(225, 48, 108, 0.15);
    border: 1px solid rgba(225, 48, 108, 0.3);
    color: #ff6699;
}

/* Caption Preview */
.cc-caption-cell {
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.85rem;
    color: #cbd5e1;
}

/* Media Thumbnail Container */
.cc-media-thumb {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cc-media-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
.cc-no-media-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #64748b;
    font-size: 0.78rem;
}

/* Premium Status Badges */
.cc-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.cc-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

.cc-status-pill.failed, .cc-status-pill.bg-danger {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.cc-status-pill.failed .cc-status-dot, .cc-status-pill.bg-danger .cc-status-dot {
    background: #ef4444;
    box-shadow: 0 0 8px #ef4444;
}

.cc-status-pill.scheduled, .cc-status-pill.publishing, .cc-status-pill.bg-info {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(59, 130, 246, 0.3);
}
.cc-status-pill.scheduled .cc-status-dot, .cc-status-pill.publishing .cc-status-dot, .cc-status-pill.bg-info .cc-status-dot {
    background: #3b82f6;
    box-shadow: 0 0 8px #3b82f6;
}

.cc-status-pill.posted, .cc-status-pill.published, .cc-status-pill.bg-success {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.cc-status-pill.posted .cc-status-dot, .cc-status-pill.published .cc-status-dot, .cc-status-pill.bg-success .cc-status-dot {
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
}

.cc-status-pill.pending, .cc-status-pill.draft, .cc-status-pill.bg-secondary {
    background: rgba(148, 163, 184, 0.12) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(148, 163, 184, 0.3);
}
.cc-status-pill.pending .cc-status-dot, .cc-status-pill.draft .cc-status-dot, .cc-status-pill.bg-secondary .cc-status-dot {
    background: #94a3b8;
}

/* Glassmorphism Action Buttons */
.cc-action-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cc-action-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    font-size: 0.85rem;
    cursor: pointer;
    outline: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.cc-action-btn:hover {
    transform: translateY(-2px);
}

.cc-btn-history:hover {
    background: rgba(59, 130, 246, 0.25);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.cc-btn-edit:hover {
    background: rgba(168, 85, 247, 0.25);
    color: #c084fc;
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
}

.cc-btn-publish {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.3);
}
.cc-btn-publish:hover {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

.cc-btn-delete:hover {
    background: rgba(239, 68, 68, 0.25);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Sleek Toolbar Gradient Buttons */
.calendar-toolbar {
    background: rgba(18, 24, 38, 0.7) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}

.btn-ai-generate {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(168, 85, 247, 0.25) 100%) !important;
    border: 1px solid rgba(168, 85, 247, 0.4) !important;
    color: #c084fc !important;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.15) !important;
    transition: all 0.25s ease !important;
}
.btn-ai-generate:hover {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.4) !important;
    transform: translateY(-1px);
}

/* Ultra-Premium Social Post Creator Modal Styling */
#modal-create-edit-social-post .modal-content {
    background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7), 0 0 30px rgba(99, 102, 241, 0.12) !important;
    backdrop-filter: blur(16px);
}

#modal-create-edit-social-post .modal-title {
    background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}

#modal-create-edit-social-post .nav-pills {
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 5px !important;
}

#modal-create-edit-social-post .nav-link {
    color: #94a3b8 !important;
    border-radius: 8px !important;
    transition: all 0.25s ease !important;
}

#modal-create-edit-social-post .nav-link.active {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4) !important;
}

#modal-create-edit-social-post .form-control,
#modal-create-edit-social-post .form-select {
    background: rgba(15, 23, 42, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    transition: all 0.2s ease !important;
}

#modal-create-edit-social-post .form-control:focus,
#modal-create-edit-social-post .form-select:focus {
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
    background: rgba(15, 23, 42, 0.9) !important;
}

#modal-create-edit-social-post .platform-chip:hover {
    border-color: rgba(99, 102, 241, 0.5) !important;
    background: rgba(30, 41, 59, 0.9) !important;
}

#modal-create-edit-social-post .btn-primary {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4) !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    padding: 8px 22px !important;
    color: #ffffff !important;
}

#modal-create-edit-social-post .btn-primary:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.55) !important;
}

#modal-create-edit-social-post .btn-outline-secondary {
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 8px 18px !important;
    background: transparent !important;
}

#modal-create-edit-social-post .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

/* ===== Content Calendar: Post Modal Redesign ===== */
.cc-post-modal .cc-modal-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 20px;
    align-items: start;
}

.cc-post-modal .cc-panel-media {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 12px);
    padding: 14px;
}

.cc-post-modal .cc-platform-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--bg-input);
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.cc-post-modal .cc-count-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: 2px 9px;
    border-radius: 999px;
}

.cc-post-modal .cc-add-media-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.cc-post-modal .cc-add-media-row {
    display: flex;
    gap: 8px;
}

.cc-post-modal .cc-type-select {
    width: 100px;
    flex-shrink: 0;
}

.cc-post-modal .cc-ai-toggle {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 2px;
    cursor: pointer;
}

.cc-post-modal .cc-ai-toggle:hover {
    text-decoration: underline;
}

.cc-post-modal .cc-ai-panel {
    background: var(--bg-surface);
    border: 1px dashed var(--border-color-strong);
    border-radius: var(--radius-sm, 8px);
    padding: 10px;
    margin-bottom: 12px;
}

.cc-post-modal .cc-media-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-height: 260px;
    overflow-y: auto;
    padding-top: 4px;
}

.cc-post-modal .cc-media-card {
    position: relative;
    width: 84px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 8px);
    overflow: hidden;
    text-align: center;
    cursor: grab;
}

.cc-post-modal .cc-media-card.cc-dragging {
    opacity: 0.4;
    cursor: grabbing;
}

.cc-post-modal .cc-media-card .cc-drag-handle {
    position: absolute;
    bottom: 3px;
    left: 3px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.cc-post-modal .cc-media-card .cc-thumb {
    width: 100%;
    height: 60px;
    object-fit: cover;
    display: block;
    background: var(--bg-input);
}

.cc-post-modal .cc-media-card .cc-thumb-icon {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(56,189,248,0.12);
}

.cc-post-modal .cc-media-card .cc-order-badge {
    position: absolute;
    top: 3px;
    left: 3px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 10px;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 6px;
}

.cc-post-modal .cc-media-card .cc-remove-btn {
    position: absolute;
    top: 3px;
    right: 3px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    border: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
}

.cc-post-modal .cc-media-card .cc-remove-btn:hover {
    background: var(--color-danger);
}

.cc-post-modal .cc-media-card .cc-reorder-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 4px;
    border-top: 1px solid var(--border-color);
}

.cc-post-modal .cc-media-card .cc-reorder-row button {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 10px;
    padding: 2px 4px;
    cursor: pointer;
}

.cc-post-modal .cc-media-card .cc-reorder-row button:disabled {
    opacity: 0.25;
    cursor: default;
}

.cc-post-modal .cc-media-empty {
    width: 100%;
    text-align: center;
    padding: 20px 10px;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm, 8px);
    color: var(--text-muted);
    font-size: 12px;
}

/* Focus visibility for accessibility */
.cc-post-modal button:focus-visible,
.cc-post-modal input:focus-visible,
.cc-post-modal select:focus-visible,
.cc-post-modal textarea:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Responsive: stack to single column on small screens */
@media (max-width: 760px) {
    .cc-post-modal .cc-modal-grid {
        grid-template-columns: 1fr;
    }
    .cc-post-modal .cc-media-strip {
        max-height: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cc-post-modal * {
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   BOOTSTRAP-STYLE UTILITY CLASSES
   This project doesn't load Bootstrap, but several newer sections (AI
   Management provider cards, the delete-key confirmation modal) were
   written using Bootstrap-like utility class names that had no definitions
   anywhere in this file. Without these, the elements rendered as plain
   unstyled blocks and did not lay out or shrink correctly on small screens.
   Adding the small set actually used, in this file's own design language.
   ========================================================================== */
.d-flex { display: flex; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: flex-end; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: 8px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.me-1 { margin-right: 4px; }
.me-2 { margin-right: 8px; }
.ms-1 { margin-left: 4px; }
.ms-2 { margin-left: 8px; }
.w-100 { width: 100%; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.fw-bold { font-weight: 700; }
.font-xs { font-size: 11px; }

.alert {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
}
.alert-danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

/* ==========================================================================
   INPUT GROUP — API key field + attached "Refresh Models" button
   (AI Management: Gemini / OpenAI / Claude / Groq / Mistral cards)
   ========================================================================== */
.input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    gap: 8px;
    flex-wrap: nowrap;
}
.input-group .form-control {
    flex: 1 1 auto;
    min-width: 0; /* let the input shrink instead of pushing the button off-screen */
    width: auto;
}
.input-group-append {
    display: flex;
    flex-shrink: 0;
}
.input-group-append .btn {
    white-space: nowrap;
    height: auto;
}

.btn-outline-primary {
    background-color: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}
.btn-outline-primary:hover {
    background-color: var(--color-primary);
    color: #1a1204;
}
.btn-outline-primary:disabled,
.btn-outline-primary[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    background-color: transparent;
    color: var(--color-primary);
}

/* AI provider cards grid — defined here (rather than only inline) so the
   phone breakpoint below can actually take effect; an inline style attribute
   would otherwise always win over a stylesheet media query. */
.ai-providers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 20px;
}

@media (max-width: 768px) {
    /* Single column once cards can no longer fit two-up comfortably */
    .ai-providers-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    /* Stack the API key input and the Refresh Models button instead of
       squeezing the button's label into a sliver, or letting it overflow
       the card horizontally. */
    .input-group {
        flex-direction: column;
    }
    .input-group-append {
        width: 100%;
    }
    .input-group-append .btn {
        width: 100%;
        justify-content: center;
    }

    /* Delete-key modal: let it use more of the available width on very
       small phones rather than staying pinned to a 440px max. */
    #modal-delete-ai-key .modal-dialog {
        max-width: 92vw;
    }
}

/* ==========================================================================
   LEADS PIPELINE REDESIGN & MULTI-PIPELINE KANBAN STYLES
   ========================================================================== */

/* Pipeline Switcher Container */
.pipeline-switcher-row {
    background-color: var(--bg-surface, #1e293b);
    border: 1px solid var(--border-color, #334155);
    border-radius: 12px;
}

/* Segmented Pipeline Switch */
.pipeline-switch-btn-group {
    display: inline-flex;
    background-color: var(--bg-surface-active, #0f172a);
    padding: 4px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #334155);
    gap: 2px;
}

.pipeline-switch-btn-group .btn {
    border: none !important;
    background: transparent;
    color: var(--text-secondary, #94a3b8);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.pipeline-switch-btn-group .btn:hover {
    color: var(--text-primary, #f8fafc);
    background-color: rgba(255, 255, 255, 0.05);
}

.pipeline-switch-btn-group .btn.active {
    background-color: var(--bg-surface, #1e293b) !important;
    color: var(--text-primary, #ffffff) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    font-weight: 600;
}

/* Responsive Visibility Helpers */
.leads-desktop-switch {
    display: flex;
    align-items: center;
    gap: 4px;
}
.leads-mobile-switch {
    display: none;
    width: 100%;
}

@media (min-width: 769px) {
    .d-md-flex { display: flex !important; }
    .d-md-none { display: none !important; }
}

@media (max-width: 768px) {
    .d-md-flex { display: none !important; }
    .d-md-none { display: block !important; }
    .leads-desktop-switch { display: none !important; }
    .leads-mobile-switch { display: block !important; }
}

/* Source Chips Row */
.source-chips-row {
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 4px;
}

.source-chips-row button.source-chip-btn,
button.source-chip-btn,
.source-chip-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #cbd5e1 !important;
    background: rgba(30, 41, 59, 0.85) !important;
    background-color: rgba(30, 41, 59, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

.source-chips-row button.source-chip-btn:hover,
button.source-chip-btn:hover,
.source-chip-btn:hover {
    color: #ffffff !important;
    background: rgba(51, 65, 85, 0.95) !important;
    background-color: rgba(51, 65, 85, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35) !important;
}

.source-chips-row button.source-chip-btn.active,
button.source-chip-btn.active,
.source-chip-btn.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    background-color: #2563eb !important;
    border-color: #60a5fa !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.5) !important;
    font-weight: 600 !important;
}

.source-chips-row button.source-chip-btn:focus-visible,
button.source-chip-btn:focus-visible,
.source-chip-btn:focus-visible {
    outline: 2px solid var(--color-primary, #6366f1) !important;
    outline-offset: 2px !important;
}

/* Underline View Tabs */
.tabs-btn-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tabs-btn-group .tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary, #94a3b8);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tabs-btn-group .tab-btn:hover {
    color: var(--text-primary, #ffffff);
}

.tabs-btn-group .tab-btn.active {
    color: var(--color-primary, #818cf8);
    border-bottom-color: var(--color-primary, #6366f1);
    font-weight: 600;
}

/* Kanban Board & Columns */
.kanban-board {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 16px;
    min-height: 500px;
    align-items: flex-start;
}

.kanban-column, .leads-kanban-column {
    width: 300px;
    min-width: 300px;
    max-width: 300px;
    flex-shrink: 0;
    background-color: var(--bg-surface, #1e293b);
    border: 1px solid var(--border-color, #334155);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    border-top: 3px solid var(--stage-color, var(--color-primary, #6366f1));
}

.kanban-column-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--bg-surface, #1e293b);
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color, #334155);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.kanban-column-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #f8fafc);
}

.kanban-cards-list {
    padding: 10px;
    overflow-y: auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 120px;
}

/* Empty Column Hint */
.leads-empty-column-hint {
    text-align: center;
    padding: 24px 12px;
    color: var(--text-muted, #64748b);
    font-size: 12px;
}

.leads-empty-column-hint i {
    font-size: 24px;
    display: block;
    margin-bottom: 6px;
    opacity: 0.5;
}

/* Swimlanes for "All" Pipeline View */
.leads-swimlane {
    background-color: var(--bg-surface, #1e293b);
    border: 1px solid var(--border-color, #334155);
    border-radius: 12px;
    margin-bottom: 20px;
    padding: 16px;
}

.leads-swimlane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color, #334155);
}

/* Pipeline Specific Cards */
.kanban-card {
    background-color: var(--bg-surface-active, #0f172a);
    border: 1px solid var(--border-color, #334155);
    border-radius: 8px;
    padding: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    cursor: grab;
}

.kanban-card:hover {
    border-color: var(--color-primary, #6366f1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}

/* Alert Strips */
.leads-alert-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 12px;
    background-color: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.3);
    color: #eab308;
}

/* Source Chip Buttons Premium Dark Glassmorphism Styling */
.source-chips-row {
    padding-top: 10px;
    margin-top: 8px;
}

.source-chips-row button.source-chip-btn,
button.source-chip-btn,
.source-chip-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #cbd5e1 !important;
    background: rgba(30, 41, 59, 0.85) !important;
    background-color: rgba(30, 41, 59, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

.source-chips-row button.source-chip-btn:hover,
button.source-chip-btn:hover,
.source-chip-btn:hover {
    color: #ffffff !important;
    background: rgba(51, 65, 85, 0.95) !important;
    background-color: rgba(51, 65, 85, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35) !important;
}

.source-chips-row button.source-chip-btn.active,
button.source-chip-btn.active,
.source-chip-btn.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    background-color: #2563eb !important;
    border-color: #60a5fa !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.5) !important;
    font-weight: 600 !important;
}

.source-chips-row button.source-chip-btn .chip-count,
button.source-chip-btn .chip-count,
.source-chip-btn .chip-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #cbd5e1 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 10px !important;
    min-width: 18px !important;
    height: 18px !important;
    line-height: 1 !important;
    margin-left: 4px !important;
}

.source-chips-row button.source-chip-btn.active .chip-count,
button.source-chip-btn.active .chip-count,
.source-chip-btn.active .chip-count {
    background-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

#triage-pending-count {
    font-size: 11px !important;
    padding: 2px 7px !important;
    border-radius: 10px !important;
}

/* ==========================================================================
   PREMIUM SETTINGS REDESIGN SHELL & COMPONENTS
   ========================================================================== */
.settings-nav-section {
    margin-bottom: 14px;
}

.settings-nav-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 4px 10px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.settings-header-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.settings-header-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-header-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.settings-card {
    background: var(--bg-surface-active);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    transition: border-color var(--transition-fast);
}

.settings-card:hover {
    border-color: var(--border-color-strong);
}

.settings-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 768px) {
    .settings-grid-2col {
        grid-template-columns: 1fr;
    }
}

.settings-help-text {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
    margin-bottom: 0;
}

.settings-sticky-bar {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-color);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 50;
    margin-top: 24px;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
}

.settings-unsaved-badge {
    font-size: 12px;
    font-weight: 600;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Day Pill Toggles */
.day-pill-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.day-pill {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.day-pill:hover {
    border-color: var(--color-primary);
    color: var(--text-primary);
}

.day-pill.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

/* Location Radio Cards */
.location-radio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (max-width: 640px) {
    .location-radio-grid {
        grid-template-columns: 1fr;
    }
}

.location-radio-card {
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    transition: all var(--transition-fast);
    background: var(--bg-surface);
}

.location-radio-card:hover {
    border-color: var(--color-primary-soft);
}

.location-radio-card.selected {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

/* Step Cards */
.step-card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
    background: var(--bg-surface);
    position: relative;
}

.step-badge {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

.placeholder-chip {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 12px;
    font-family: monospace;
    cursor: pointer;
    margin: 2px;
    border: 1px solid rgba(99, 102, 241, 0.3);
    transition: all var(--transition-fast);
}

.placeholder-chip:hover {
    background: var(--color-primary);
    color: #fff;
}






/* ==========================================================================
   SETTINGS POLISH (segmented tabs, outline buttons, header, spacing)
   ========================================================================== */
#view-settings .settings-tab-content h3.settings-header-title {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 4px;
}

#view-settings .segmented-control {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-surface, #0f172a);
    border: 1px solid var(--border-color, #334155);
    border-radius: 10px;
    flex-wrap: wrap;
}

#view-settings .segmented-option {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-secondary, #94a3b8);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}

#view-settings .segmented-option:hover {
    color: var(--text-primary, #f1f5f9);
    background: rgba(255, 255, 255, 0.05);
}

#view-settings .segmented-option.active {
    background: var(--color-primary-soft, rgba(245, 158, 11, 0.15));
    color: var(--color-primary, #f59e0b);
}

#view-settings .segmented-option:focus-visible,
#view-settings .day-pill:focus-visible,
#view-settings .btn:focus-visible {
    outline: 2px solid var(--color-primary, #f59e0b);
    outline-offset: 2px;
}

#view-settings .btn-outline-info,
#view-settings .btn-outline-primary,
#view-settings .btn-secondary {
    background: transparent;
    color: var(--text-primary, #f1f5f9);
    border: 1px solid var(--border-color-strong, #475569);
    border-radius: 8px;
    font-weight: 600;
}

#view-settings .btn-outline-info:hover,
#view-settings .btn-outline-primary:hover,
#view-settings .btn-secondary:hover {
    border-color: var(--color-primary, #f59e0b);
    color: var(--color-primary, #f59e0b);
    background: var(--color-primary-soft, rgba(245, 158, 11, 0.1));
}

#view-settings .settings-sticky-bar .btn-primary {
    min-width: 150px;
}

/* Settings: mobile navigation (sections nested inside the nav pane) */
@media (max-width: 768px) {
    #view-settings .settings-grid { flex-direction: column; height: auto; gap: 12px; }
    #view-settings .settings-nav-pane {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        padding: 8px;
        -webkit-overflow-scrolling: touch;
    }
    #view-settings .settings-nav-section {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        margin-bottom: 0;
        flex-shrink: 0;
    }
    #view-settings .settings-nav-header { display: none; }
    #view-settings .settings-tab-btn { white-space: nowrap; flex-shrink: 0; width: auto; }
    #view-settings .settings-content-pane { width: 100%; padding: 16px; }
    #view-settings .settings-grid-2col { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    #view-settings .settings-nav-pane {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }
    #view-settings .settings-nav-section { display: contents; }
    #view-settings .settings-header-banner { flex-wrap: wrap; gap: 12px; }
}

@media (max-width: 768px) {
    #view-settings .settings-nav-pane .settings-tab-btn {
        width: auto !important;
        flex: 0 0 auto !important;
        padding: 8px 14px !important;
        white-space: nowrap;
    }
}
/* ==========================================================================
   LEADS "ALL" = PIPELINE OVERVIEW
   Read-only hub: KPIs, one summary card per pipeline, latest leads.
   ========================================================================== */
.kanban-board.kanban-board--overview {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-bottom: 24px !important;
    scroll-snap-type: none !important;
}

.leads-overview {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.overview-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
}

.overview-section-title,
.overview-section-title h3 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.overview-section-title h3 { margin: 0; }

/* KPI strip */
.overview-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.overview-kpi {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    min-width: 0;
}

.overview-kpi-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
}

.overview-kpi-value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.overview-kpi-label {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
}

.overview-kpi--danger .overview-kpi-icon { background-color: var(--color-danger-soft); color: var(--color-danger); }
.overview-kpi--danger .overview-kpi-value { color: var(--color-danger); }
.overview-kpi--warning .overview-kpi-icon { background-color: rgba(191, 130, 46, 0.14); color: var(--color-warning); }

/* Pipeline cards */
.pipeline-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

.pipeline-card {
    --pipeline-accent: #6366f1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--pipeline-accent);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.pipeline-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-color-strong);
    border-top-color: var(--pipeline-accent);
}

.pipeline-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.pipeline-card-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--pipeline-accent);
    background-color: color-mix(in srgb, var(--pipeline-accent) 16%, transparent);
}

.pipeline-card-title { flex: 1; min-width: 0; }
.pipeline-card-title h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--text-primary); }
.pipeline-card-title p { margin: 2px 0 0; font-size: 12px; color: var(--text-muted); }

.pipeline-card-total { text-align: right; flex-shrink: 0; }
.pipeline-card-total strong {
    display: block;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.pipeline-card-total span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }

.pipeline-card-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.pipeline-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 8px;
    background-color: var(--bg-surface-active);
    min-width: 0;
}
.pipeline-metric span { font-size: 11px; color: var(--text-muted); }
.pipeline-metric strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pipeline-metric--danger strong { color: var(--color-danger); }

.pipeline-stage-bar {
    display: flex;
    gap: 2px;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background-color: var(--bg-surface-active);
}
.pipeline-stage-bar > span { min-width: 4px; }

.pipeline-stage-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pipeline-stage-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--stage-color, #64748b);
}

.pipeline-stage-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-family: inherit;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.pipeline-stage-chip strong { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.pipeline-stage-chip:hover {
    color: var(--text-primary);
    border-color: var(--stage-color, var(--border-color-strong));
    background-color: color-mix(in srgb, var(--stage-color, #64748b) 10%, transparent);
}
.pipeline-stage-chip:focus-visible,
.overview-lead-row:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.pipeline-card-empty {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 0;
    font-size: 12px;
    color: var(--text-muted);
}

.pipeline-card-footer { margin-top: auto; }
.pipeline-card-footer .btn { width: 100%; justify-content: center; }

/* Latest leads */
.overview-panel {
    padding: 16px 18px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}
.overview-panel .overview-section-title { margin-bottom: 8px; }

.overview-lead-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(110px, auto) minmax(110px, auto) 80px 72px;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 8px;
    font-family: inherit;
    color: inherit;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.overview-lead-row:last-child { border-bottom-color: transparent; }
.overview-lead-row:hover { background-color: var(--bg-surface-active); }

.overview-lead-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.overview-lead-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.overview-lead-source { flex-shrink: 0; }

.overview-pipeline-pill {
    --pipeline-accent: #6366f1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--pipeline-accent);
    background-color: color-mix(in srgb, var(--pipeline-accent) 14%, transparent);
    border-radius: 999px;
}

.overview-stage-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.overview-lead-value { font-size: 13px; font-weight: 600; text-align: right; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.overview-lead-time { font-size: 12px; text-align: right; color: var(--text-muted); white-space: nowrap; }

/* Empty state */
.overview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 56px 16px;
    text-align: center;
    color: var(--text-muted);
    background-color: var(--bg-surface);
    border: 1px dashed var(--border-color-strong);
    border-radius: 12px;
}
.overview-empty > i { font-size: 32px; opacity: 0.5; }
.overview-empty h3 { margin: 0; font-size: 16px; color: var(--text-primary); }
.overview-empty p { margin: 0 0 8px; font-size: 13px; }

/* Column highlight when arriving from an overview stage chip */
.kanban-column--flash { animation: kanbanColumnFlash 1.6s ease; }
@keyframes kanbanColumnFlash {
    0%, 100% { box-shadow: var(--shadow-sm); }
    30% { box-shadow: 0 0 0 3px var(--color-primary), var(--shadow-md); }
}

@media (max-width: 768px) {
    .overview-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pipeline-overview-grid { grid-template-columns: minmax(0, 1fr); }
    .overview-lead-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
    .overview-lead-main { grid-column: 1 / -1; }
    .overview-lead-value { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    .kanban-column--flash { animation: none; outline: 2px solid var(--color-primary); }
    .pipeline-card, .pipeline-stage-chip, .overview-lead-row { transition: none; }
}

/* Stellar Cleaning brand: full-colour logo on a light plate, no theme inversion */
.sidebar-brand-logo,
.auth-brand-logo,
[data-theme="light"] .sidebar-brand-logo,
[data-theme="light"] .auth-brand-logo {
    filter: none;
    background: #fff;
    border-radius: 8px;
    padding: 3px 8px;
    box-sizing: content-box;
    object-position: center;
}