/* ============================================
   CHAT BUILDER - RESPONSIVE DESIGN SYSTEM
   Mobile-first. All template pages are dynamic across screen sizes.
   Breakpoints: xs 0 | sm 480px | md 768px | lg 1024px | xl 1280px | xxl 1440px
   Pages: app shell, dashboard, settings, calendar, tasks, workspaces,
   manage (users/invites/reports/audit), workspace detail, chat, auth,
   error/404/500, modals. Use .page-content for consistent max-width/padding.
   ============================================ */

/* ============================================
   CSS CUSTOM PROPERTIES FOR RESPONSIVE
   ============================================ */
:root {
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
    --bp-xxl: 1440px;
    --sidebar-width: 100%;
    --chat-padding: 12px;
    --header-height: 60px;
    --input-height: 56px;
    --tap-target: 44px;
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --page-padding: clamp(0.75rem, 4vw, 1.5rem);
}

@media (min-width: 768px) {
    :root {
        --sidebar-width: 280px;
        --chat-padding: 16px;
    }
}

@media (min-width: 1024px) {
    :root {
        --sidebar-width: 320px;
        --chat-padding: 24px;
    }
}

/* ============================================
   GLOBAL PAGE CONTENT (all app pages)
   ============================================ */
.app-with-sidebar-main,
.app-main-content-wrap,
.page-content {
    border: none;
    border-bottom: none;
}
.app-with-sidebar-main {
    padding-bottom: clamp(1.5rem, 8vw, 3.5rem);
}
.page-content {
    max-width: 100%;
    min-width: 0;
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
    padding-bottom: clamp(1.5rem, 6vw, 2.5rem);
    margin-left: auto;
    margin-right: auto;
}

/* Softer card shadow in page content (more blur at bottom for softness) */
.page-content .clay-card {
    box-shadow:
        6px 6px 24px 0px rgba(163, 177, 198, 0.35),
        -6px -6px 24px 0px rgba(255, 255, 255, 0.6),
        inset 2px 2px 4px 0px rgba(255, 255, 255, 0.4),
        inset -1px -1px 3px 0px rgba(163, 177, 198, 0.12);
}
[data-theme="dark"] .page-content .clay-card,
.dark .page-content .clay-card {
    box-shadow:
        6px 6px 24px 0px rgba(0, 0, 0, 0.18),
        -4px -4px 14px 0px rgba(255, 255, 255, 0.04),
        inset 2px 2px 4px 0px rgba(255, 255, 255, 0.05),
        inset -1px -1px 3px 0px rgba(0, 0, 0, 0.15);
}

.stack-mobile { display: flex; flex-wrap: wrap; }
@media (max-width: 767px) {
    .stack-mobile { flex-direction: column; }
}
.full-width-mobile { width: 100%; }
@media (min-width: 768px) {
    .full-width-mobile { width: auto; }
}

/* ============================================
   BASE RESPONSIVE UTILITIES
   ============================================ */

/* Hide on mobile only */
.hide-mobile {
    display: none !important;
}

@media (min-width: 768px) {
    .hide-mobile {
        display: block !important;
    }

    .hide-tablet-up {
        display: none !important;
    }
}

/* Show on mobile only */
.show-mobile {
    display: block !important;
}

@media (min-width: 768px) {
    .show-mobile {
        display: none !important;
    }
}

.hide-up-to-sm { display: none !important; }
@media (min-width: 480px) { .hide-up-to-sm { display: block !important; } }
.show-from-md { display: none !important; }
@media (min-width: 768px) { .show-from-md { display: block !important; } }
.show-from-lg { display: none !important; }
@media (min-width: 1024px) { .show-from-lg { display: block !important; } }

/* ============================================
   MOBILE HAMBURGER MENU BUTTON
   ============================================ */
.mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-target);
    height: var(--tap-target);
    border: none;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: var(--shadow-clay-card);
    cursor: pointer;
    font-size: 20px;
    z-index: 1001;
    position: fixed;
    top: var(--spacing-md);
    left: var(--spacing-md);
    transition: transform 0.2s, opacity 0.2s;
}

.mobile-menu-btn:hover {
    transform: scale(1.05);
}

.mobile-menu-btn:active {
    transform: scale(0.95);
}

@media (min-width: 768px) {
    .mobile-menu-btn {
        display: none !important;
    }
}

/* Mobile sidebar overlay background */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

@media (min-width: 768px) {
    .sidebar-overlay {
        display: none !important;
    }
}

/* ============================================
   AUTH PAGES (LOGIN, SIGNUP, OTP, RESET)
   ============================================ */

/* Auth: responsive card and body */
.auth-page-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--page-padding);
    box-sizing: border-box;
}

.auth-card {
    max-width: min(420px, 100%);
    width: 100%;
    padding: clamp(1.25rem, 4vw, 2rem);
}

/* Mobile: Full width with padding */
.auth-container {
    max-width: 100%;
    margin: var(--spacing-lg) var(--spacing-md);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
}

.auth-container h1 {
    font-size: 22px;
}

.auth-subtitle {
    font-size: 13px;
    margin-bottom: var(--spacing-md);
}

.auth-logo {
    width: 56px;
    height: 56px;
    margin-bottom: var(--spacing-md);
}

.auth-logo svg {
    width: 28px;
    height: 28px;
}

.auth-form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.auth-remember-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.auth-remember-label input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-primary);
}

.auth-forgot-link {
    font-size: 0.875rem;
    color: var(--color-primary);
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem;
    border-radius: var(--radius-input, 4px);
    transition: color 0.2s ease, background 0.2s ease, text-decoration 0.2s ease;
}

.auth-forgot-link:hover {
    text-decoration: underline;
    color: var(--color-primary);
}

.auth-forgot-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Touch-friendly inputs */
.input-wrap {
    min-height: var(--tap-target);
}

.input-wrap input {
    min-height: 44px;
    font-size: 16px;
    /* Prevents zoom on iOS */
}

.btn {
    min-height: var(--tap-target);
    font-size: 16px;
    padding: 14px 20px;
}

/* Tablet and up: Centered card */
@media (min-width: 768px) {
    .auth-container {
        max-width: 420px;
        margin: 60px auto;
        padding: 40px;
    }

    .auth-container h1 {
        font-size: 24px;
    }

    .auth-logo {
        width: 64px;
        height: 64px;
    }

    .auth-logo svg {
        width: 32px;
        height: 32px;
    }
}

/* ============================================
   CHAT LAYOUT - MOBILE
   ============================================ */

.chat-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    /* Dynamic viewport height for mobile browsers */
    overflow: hidden;
}

/* Mobile: Sidebar is fixed overlay, hidden by default */
.chat-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 85%;
    max-width: 320px;
    height: 100%;
    height: 100dvh;
    z-index: 1000;
    background: var(--color-sidebar-bg);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: var(--spacing-md);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
}

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

/* Mobile: Main takes full screen */
.chat-main {
    flex: 1;
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Chat room mobile optimizations */
.chat-room {
    display: flex;
    flex-direction: column;
    height: 100%;
    height: 100dvh;
    max-width: 100%;
    border-radius: 0;
}

/* Chat header - mobile */
.chat-header {
    padding: var(--spacing-sm) var(--spacing-md);
    flex-shrink: 0;
    gap: var(--spacing-sm);
    min-height: var(--header-height);
}

.chat-header-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.chat-header-avatar svg {
    width: 20px;
    height: 20px;
}

.chat-header-name {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-header-status {
    font-size: 0.75rem;
}

/* Chat header actions - mobile */
.chat-header-actions {
    gap: 6px;
    flex-shrink: 0;
}

.chat-header-actions .call-btn {
    width: 38px;
    height: 38px;
    font-size: 1rem;
}

/* Back button mobile */
.back-btn {
    width: 38px;
    height: 38px;
}

/* Messages area - mobile */
.chat-messages-wrap {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.chat-messages {
    padding: var(--spacing-sm);
    overflow-y: auto;
}

/* Message bubbles - mobile */
.message-bubble {
    max-width: 85%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 15px;
}

.msg-time {
    font-size: 11px;
}

/* Chat input - mobile, sticky at bottom */
.chat-input-form {
    padding: var(--spacing-sm);
    gap: var(--spacing-xs);
    flex-shrink: 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    /* Safe area for iPhone notch */
    padding-bottom: max(var(--spacing-sm), env(safe-area-inset-bottom));
}

.chat-message-input {
    flex: 1;
    min-height: var(--tap-target);
    font-size: 16px;
    /* Prevents iOS zoom */
    padding: 12px 16px;
}

.attach-btn {
    width: var(--tap-target);
    height: var(--tap-target);
    flex-shrink: 0;
}

.chat-send-btn {
    min-width: 70px;
    min-height: var(--tap-target);
    padding: 0 16px;
    flex-shrink: 0;
}

/* ============================================
   CHAT LAYOUT - TABLET (768px+)
   ============================================ */

@media (min-width: 768px) {
    .chat-layout {
        flex-direction: row;
        height: 100vh;
        gap: 0;
    }

    .chat-sidebar {
        position: static;
        transform: none;
        width: 260px;
        min-width: 260px;
        max-width: 260px;
        height: 100%;
        box-shadow: var(--shadow-clay-card);
        border-radius: 0 var(--radius-base, 1.5rem) var(--radius-base, 1.5rem) 0;
        overflow: hidden;
        background: var(--gradient-surface, var(--color-surface));
        padding: 0;
    }

    .chat-main {
        flex: 1;
        padding: var(--chat-padding);
    }

    .chat-room {
        height: auto;
        flex: 1;
        border-radius: var(--radius-base);
    }

    .chat-header {
        padding: 16px 20px;
        gap: 14px;
    }

    .chat-header-avatar {
        width: 48px;
        height: 48px;
    }

    .chat-header-avatar svg {
        width: 26px;
        height: 26px;
    }

    .chat-header-name {
        font-size: 1.1rem;
    }

    .chat-header-actions .call-btn {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }

    .back-btn {
        width: 40px;
        height: 40px;
    }

    .chat-messages {
        padding: var(--spacing-md);
    }

    .message-bubble {
        max-width: 70%;
    }

    .chat-input-form {
        padding: var(--spacing-md);
        gap: var(--spacing-sm);
    }
}

/* ============================================
   CHAT LAYOUT - DESKTOP (1024px+)
   ============================================ */

@media (min-width: 1024px) {
    .chat-sidebar {
        width: 260px;
        max-width: 260px;
    }

    .message-bubble {
        max-width: 60%;
    }

    .chat-header-actions .call-btn {
        width: 44px;
        height: 44px;
    }
}

/* ============================================
   CONVERSATION LIST - RESPONSIVE
   ============================================ */

.conversation-list {
    margin-top: var(--spacing-md);
}

.conversation-link {
    padding: var(--spacing-sm) var(--spacing-md);
    min-height: var(--tap-target);
}

.conv-name {
    font-size: 15px;
}

.conv-preview {
    font-size: 12px;
}

@media (min-width: 768px) {
    .conversation-link {
        padding: 14px 16px;
    }

    .conv-name {
        font-size: 16px;
    }

    .conv-preview {
        font-size: 13px;
    }
}

/* ============================================
   SIDEBAR HEADER - RESPONSIVE
   ============================================ */

.sidebar-header {
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.sidebar-header-top {
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.sidebar-header-top h2 {
    font-size: 18px;
}

.sidebar-search .clay-input {
    min-height: var(--tap-target);
    font-size: 16px;
    /* Prevents iOS zoom */
}

/* ============================================
   APP HEADER - RESPONSIVE
   ============================================ */

.app-header {
    padding: var(--spacing-sm) var(--spacing-md);
    min-height: var(--header-height);
}

.app-header .app-header-spacer { min-width: 0; }
.app-header .user-pill-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (min-width: 480px) {
    .app-header .user-pill-name { max-width: 180px; }
}
@media (min-width: 768px) {
    .app-header .user-pill-name { max-width: none; }
}

.app-logo {
    gap: var(--spacing-sm);
    font-size: 16px;
}

.app-logo-icon {
    width: 40px;
    height: 40px;
}

.app-logo-icon svg {
    width: 20px;
    height: 20px;
}

@media (min-width: 768px) {
    .app-header {
        padding: 12px 24px;
    }

    .app-logo {
        gap: 12px;
        font-size: 18px;
    }

    .app-logo-icon {
        width: 44px;
        height: 44px;
    }

    .app-logo-icon svg {
        width: 24px;
        height: 24px;
    }
}

/* ============================================
   DASHBOARD - RESPONSIVE
   ============================================ */
.dashboard-manage {
    width: 100%;
    max-width: min(960px, 100%);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .dashboard-manage {
        max-width: min(1200px, 100%);
    }
}

@media (min-width: 1280px) {
    .dashboard-manage {
        max-width: min(1400px, 100%);
    }
}

@media (min-width: 1440px) {
    .dashboard-manage {
        max-width: min(1600px, 100%);
    }
}

#dashboardOverviewStats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr));
    gap: 0.75rem;
}
@media (min-width: 480px) {
    #dashboardOverviewStats {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 1rem;
    }
}

.dashboard-quick-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dashboard-chart-card canvas { max-width: 100%; height: auto !important; }

/* ============================================
   SETTINGS - Option page design (match Starred, Reports, Workspaces)
   ============================================ */
.settings-page.page-content,
.settings-index.page-content {
    max-width: 100%;
    min-width: 0;
}

.settings-page__header,
.settings-index__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.settings-page__header .page-title,
.settings-index__header .page-title {
    margin: 0 0 0.25rem 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-primary);
}
.settings-page__header .page-subtitle,
.settings-index__header .page-subtitle {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
}

.settings-layout {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.settings-nav.clay-card {
    width: 100%;
    max-width: 100%;
    padding: 0.75rem;
    flex-shrink: 0;
    height: fit-content;
}
@media (min-width: 768px) {
    .settings-nav.clay-card {
        width: 240px;
    }
}
.settings-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.settings-nav-link {
    display: block;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: var(--color-text-primary);
    border-radius: var(--radius-base);
    transition: background 0.2s ease, color 0.2s ease;
}
.settings-nav-link:hover {
    background: var(--color-muted);
    color: var(--color-text-primary);
}
.settings-nav-link.active,
.settings-nav-link.clay-tab--active {
    background: hsla(250, 85%, 65%, 0.12);
    color: var(--color-primary);
    font-weight: 500;
}

.settings-content.clay-card {
    flex: 1;
    min-width: 0;
    padding: 1.5rem;
}

/* Settings horizontal tabs (like Tasks | Members) - content shows below */
.settings-tabs-wrap {
    margin-bottom: 1.5rem;
    overflow: visible;
}
.settings-tabs.clay-tabs {
    flex-wrap: wrap;
    gap: 0.5rem;
}
.settings-tabs.clay-tabs .clay-tab {
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}
.settings-content-below {
    margin-top: 0;
}

.settings-welcome-title {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
}
.settings-welcome-intro {
    margin: 0 0 1.25rem 0;
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}
.settings-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.settings-quick-links .clay-btn {
    text-decoration: none;
}

.settings-section-title {
    margin: 0 0 0.25rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
}
.settings-section-intro {
    margin: 0 0 1rem 0;
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
}
.settings-subsection-title {
    margin: 0 0 0.5rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Notifications settings page */
.notifications-settings .notif-msg {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-base);
    font-size: 0.875rem;
}
.notifications-settings .notif-msg[hidden] {
    display: none;
}
.notif-msg--error {
    background: rgba(220, 53, 69, 0.15);
    color: var(--color-danger, #dc3545);
    border: 1px solid rgba(220, 53, 69, 0.3);
}
.notif-msg--success {
    background: rgba(40, 167, 69, 0.12);
    color: var(--color-success, #28a745);
    border: 1px solid rgba(40, 167, 69, 0.25);
}
.notifications-settings .notifications-section {
    margin-bottom: 1.5rem;
}
.notifications-settings .notifications-section:last-of-type {
    margin-bottom: 1rem;
}
.notifications-section__title {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}
.notifications-section__desc {
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}
.notifications-channel-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
}
.notifications-channel-row .toggle-row {
    margin: 0;
    padding: 0.5rem 0;
    min-width: 0;
}
.notifications-settings .toggle-row {
    padding: 0.5rem 0;
}
.notifications-settings .toggle-row .toggle-label {
    flex: 1;
    min-width: 0;
    margin-right: 0.5rem;
}
.notifications-settings .toggle-row input[type="checkbox"] {
    appearance: none;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 -1px 2px rgba(255, 255, 255, 0.06);
    cursor: pointer;
}
.notifications-settings .toggle-row input[type="checkbox"]:checked {
    background: linear-gradient(145deg, rgba(124, 103, 248, 0.9), rgba(124, 103, 248, 0.5));
    border-color: rgba(124, 103, 248, 0.6);
    box-shadow: 0 6px 16px rgba(124, 103, 248, 0.35), inset 0 2px 3px rgba(255, 255, 255, 0.35);
}
.notifications-settings .toggle-row input[type="checkbox"]:checked::after {
    content: '✓';
    display: block;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}
.notifications-settings .toggle-row input[type="checkbox"]:focus-visible {
    outline: 2px solid rgba(124, 103, 248, 0.6);
    outline-offset: 2px;
}
.notifications-settings .notifications-hint {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}
.notifications-settings .form-actions {
    padding-top: 0.5rem;
    margin-top: 0;
}

/* Security settings page */
.security-settings .security-section {
    margin-bottom: 1.5rem;
}
.security-settings .security-section:last-child {
    margin-bottom: 0;
}
.security-settings .security-section-intro {
    margin-bottom: 1rem;
}
.security-settings .security-reset-form {
    margin-top: 0.5rem;
}
.security-settings .security-reset-form .clay-btn {
    margin-top: 0;
}

/* ============================================
   CALENDAR - RESPONSIVE
   ============================================ */
.calendar-page .calendar-page__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.calendar-page .calendar-page__header > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}
.calendar-page .calendar-layout {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.calendar-page .calendar-main {
    flex: 1;
    min-width: 0;
    padding: 1rem;
    overflow: hidden;
}
.calendar-page #calendar { min-height: 400px; }
@media (min-width: 768px) {
    .calendar-page #calendar { min-height: 500px; }
}
.calendar-page .calendar-sidebar {
    width: 100%;
    max-width: 100%;
    padding: 1rem;
    box-sizing: border-box;
}
@media (min-width: 1024px) {
    .calendar-page .calendar-sidebar {
        width: 280px;
        flex-shrink: 0;
    }
}
.calendar-page .calendar-sidebar__title {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}
.calendar-page .calendar-sidebar__title:not(:first-child) { margin-top: 1rem; }
.calendar-page .calendar-sidebar__mini-cal {
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}
.calendar-page .calendar-sidebar__stats {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* Upcoming tasks list */
.calendar-page .upcoming-tasks-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.calendar-page .upcoming-task-item {
    border-radius: var(--radius-base);
    background: var(--color-bg-primary);
    box-shadow: var(--shadow-clay-pressed, 0 1px 3px rgba(0,0,0,0.08));
    border-left: 3px solid var(--upcoming-accent, var(--color-primary));
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.calendar-page .upcoming-task-item:hover {
    box-shadow: var(--shadow-clay-card);
}
.calendar-page .upcoming-task-link {
    display: block;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: inherit;
}
.calendar-page .upcoming-task-link:hover .upcoming-task-title {
    color: var(--color-primary);
}
.calendar-page .upcoming-task-title {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.calendar-page .upcoming-task-meta {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}
.calendar-page .upcoming-tasks-empty,
.calendar-page .upcoming-tasks-error {
    padding: 0.75rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    text-align: center;
    border-radius: var(--radius-base);
    background: var(--color-bg-primary);
}
.calendar-page .upcoming-tasks-error { color: var(--color-danger); }

/* ============================================
   STARRED MESSAGES PAGE (match other option pages)
   ============================================ */
.starred-page .starred-list-card {
    padding: 1.25rem;
    margin-bottom: 0;
}
.starred-page .starred-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.starred-page .starred-item-wrap {
    border-radius: var(--radius-base);
    background: var(--color-bg-primary);
    box-shadow: var(--shadow-clay-pressed, 0 1px 3px rgba(0,0,0,0.08));
    border-left: 3px solid var(--color-primary);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.starred-page .starred-item-wrap:hover {
    box-shadow: var(--shadow-clay-card);
}
.starred-page .starred-item {
    display: block;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: inherit;
}
.starred-page .starred-item:hover .starred-item__sender,
.starred-page .starred-item:hover .starred-item__preview {
    color: var(--color-primary);
}
.starred-page .starred-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
}
.starred-page .starred-item__sender {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    transition: color 0.2s ease;
}
.starred-page .starred-item__conv {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}
.starred-page .starred-item__preview {
    font-size: 0.875rem;
    color: var(--color-text-primary);
    margin: 0 0 0.35rem 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}
.starred-page .starred-item__time {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}
.starred-page .starred-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--color-text-secondary);
}
.starred-page .starred-empty p { margin: 0 0 0.5rem 0; font-size: 0.9375rem; }
.starred-page .starred-empty-hint {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    opacity: 0.9;
}

/* ============================================
   REPORTS PAGE (match other option pages)
   ============================================ */
.reports-page .reports-card {
    padding: 1.25rem;
    margin-bottom: 0;
}
.reports-page .reports-intro {
    margin: 0 0 1.25rem 0;
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}
.reports-page .reports-export-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.reports-page .reports-export-btn {
    text-decoration: none;
}
.reports-page .reports-empty {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
}

.calendar-page .clay-select { min-width: 0; width: 100%; }
@media (min-width: 480px) {
    .calendar-page .clay-select[id="calendarWorkspace"] { min-width: 160px; width: auto; }
    .calendar-page .clay-select[id="calendarAssignee"] { min-width: 140px; width: auto; }
    .calendar-page .clay-select[id="calendarPriority"] { min-width: 120px; width: auto; }
}

/* Calendar page: clay-styled dropdowns (rounded panel, soft shadow) */
.calendar-page .clay-dropdown-select {
    position: relative;
    display: inline-block;
    min-width: 0;
    width: 100%;
}
@media (min-width: 480px) {
    .calendar-page .clay-dropdown-select#calendarWorkspaceWrap { min-width: 200px; width: auto; }
    .calendar-page .clay-dropdown-select#calendarAssigneeWrap { min-width: 180px; width: auto; }
    .calendar-page .clay-dropdown-select#calendarPriorityWrap { min-width: 120px; width: auto; }
}
.calendar-page .clay-dropdown-select .clay-dropdown-trigger {
    appearance: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-height: 48px;
    padding: 10px 40px 10px 16px;
    border: none;
    border-radius: var(--radius-input);
    background: var(--color-input-bg);
    box-shadow: var(--shadow-clay-input);
    font-size: 0.9375rem;
    color: var(--color-text-primary);
    text-align: left;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}
.calendar-page .clay-dropdown-select .clay-dropdown-trigger:focus {
    outline: none;
    box-shadow: var(--shadow-clay-input), var(--shadow-focus);
}
.calendar-page .clay-dropdown-select .clay-dropdown-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 6px;
    background: var(--color-surface);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-clay-card);
    padding: 6px;
    z-index: 1000;
    max-height: 260px;
    overflow-y: auto;
}
.calendar-page .clay-dropdown-select .clay-dropdown-panel.calendar-dropdown-panel--searchable {
    flex-direction: column;
    display: none;
    max-height: 320px;
    min-height: 120px;
    overflow: hidden;
    padding: 0;
}
.calendar-page .clay-dropdown-select.open .clay-dropdown-panel {
    display: block;
}
.calendar-page .clay-dropdown-select.open .clay-dropdown-panel.calendar-dropdown-panel--searchable {
    display: flex !important;
}
.calendar-page .calendar-dropdown-search-wrap {
    padding: 6px 6px 4px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-muted);
}
.calendar-page .calendar-dropdown-search-wrap .clay-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
}
.calendar-page .calendar-dropdown-search {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.875rem;
    border: none;
    border-radius: var(--radius-input);
    background: var(--color-input-bg);
    box-shadow: var(--shadow-clay-input);
    color: var(--color-text-primary);
    box-sizing: border-box;
}
.calendar-page .calendar-dropdown-search::placeholder {
    color: var(--color-text-secondary);
}
.calendar-page .calendar-dropdown-search:focus {
    outline: none;
    box-shadow: var(--shadow-clay-input), var(--shadow-focus);
}
.calendar-page .calendar-dropdown-options {
    overflow-y: auto;
    padding: 4px 6px 6px;
    min-height: 80px;
    max-height: 260px;
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
}
.calendar-page .calendar-dropdown-options .clay-dropdown-option {
    display: block;
}
.calendar-page .clay-dropdown-select .clay-dropdown-option {
    padding: 10px 14px;
    font-size: 0.9375rem;
    color: var(--color-text-primary);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.calendar-page .clay-dropdown-select .clay-dropdown-option:hover {
    background: var(--color-muted);
}
.calendar-page .clay-dropdown-select .clay-dropdown-option.selected {
    background: hsla(250, 85%, 65%, 0.15);
    color: var(--color-primary);
    font-weight: 500;
}

.calendar-page .clay-modal {
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
}

/* Quick create modal: fixed overlay from sidebar right edge, above sidebar (z-index), so modal is on top and sidebar stays visible */
.calendar-page #quickCreateModal.clay-modal-overlay {
    position: fixed;
    left: var(--app-sidebar-width, 260px);
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 600;
    padding: 1rem;
}
@media (max-width: 767px) {
    .calendar-page #quickCreateModal.clay-modal-overlay {
        left: 0;
    }
}
@media (min-width: 768px) and (max-width: 899px) {
    .calendar-page #quickCreateModal.clay-modal-overlay {
        padding: 0.75rem;
    }
}
.app-with-sidebar-wrap.sidebar-collapsed .calendar-page #quickCreateModal.clay-modal-overlay {
    left: var(--app-sidebar-collapsed, 72px);
}

/* When Quick create is open, raise the whole main column above sidebar (500) so overlay/modal draw on top */
#appWithSidebarMain:has(#quickCreateModalToggle:checked) {
    z-index: 600;
}
/* Raise content wrap above the sticky header (z-index 250) when modal is open */
.app-main-content-wrap:has(#quickCreateModalToggle:checked) {
    z-index: 300;
}

/* Quick create modal: clay-styled searchable dropdowns */
#quickCreateModal .quick-create-dropdown {
    position: relative;
    display: block;
    width: 100%;
}
#quickCreateModal .quick-create-dropdown .clay-dropdown-trigger {
    appearance: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-height: 48px;
    padding: 10px 40px 10px 16px;
    border: none;
    border-radius: var(--radius-input);
    background: var(--color-input-bg);
    box-shadow: var(--shadow-clay-input);
    font-size: 0.9375rem;
    color: var(--color-text-primary);
    text-align: left;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}
#quickCreateModal .quick-create-dropdown .clay-dropdown-trigger:focus {
    outline: none;
    box-shadow: var(--shadow-clay-input), var(--shadow-focus);
}
#quickCreateModal .quick-create-dropdown .quick-create-dropdown-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 6px;
    background: var(--color-surface);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-clay-card);
    z-index: 1100;
    max-height: 260px;
    overflow: hidden;
    padding: 0;
}
#quickCreateModal .quick-create-dropdown--searchable .quick-create-dropdown-panel {
    flex-direction: column;
    display: none;
    max-height: 280px;
}
#quickCreateModal .quick-create-dropdown.open .quick-create-dropdown-panel {
    display: flex;
}
#quickCreateModal .quick-create-dropdown:not(.quick-create-dropdown--searchable).open .quick-create-dropdown-panel {
    display: block;
    padding: 6px;
    overflow-y: auto;
}
#quickCreateModal .quick-create-dropdown-search-wrap {
    padding: 6px 6px 4px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-muted);
}
#quickCreateModal .quick-create-dropdown-search {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.875rem;
    border: none;
    border-radius: var(--radius-input);
    background: var(--color-input-bg);
    box-shadow: var(--shadow-clay-input);
    color: var(--color-text-primary);
    box-sizing: border-box;
}
#quickCreateModal .quick-create-dropdown-search:focus {
    outline: none;
    box-shadow: var(--shadow-clay-input), var(--shadow-focus);
}
#quickCreateModal .quick-create-dropdown-options {
    overflow-y: auto;
    padding: 4px 6px 6px;
    min-height: 60px;
    max-height: 200px;
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
}
#quickCreateModal .quick-create-dropdown:not(.quick-create-dropdown--searchable) .quick-create-dropdown-options {
    max-height: 220px;
}
#quickCreateModal .quick-create-dropdown .clay-dropdown-option {
    padding: 10px 14px;
    font-size: 0.9375rem;
    color: var(--color-text-primary);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    display: block;
}
#quickCreateModal .quick-create-dropdown .clay-dropdown-option:hover {
    background: var(--color-muted);
}
#quickCreateModal .quick-create-dropdown .clay-dropdown-option.selected {
    background: hsla(250, 85%, 65%, 0.15);
    color: var(--color-primary);
    font-weight: 500;
}

/* Quick create form: actions row and "More options" link */
#quickCreateModal .quick-create-form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.25rem;
}
#quickCreateModal .quick-create-more-options {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
    padding: 0.5rem 0.25rem;
    border-radius: var(--radius-base);
    transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
#quickCreateModal .quick-create-more-options:hover {
    color: hsl(250, 85%, 55%);
    text-decoration: underline;
    text-underline-offset: 3px;
}
#quickCreateModal .quick-create-more-options:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* ============================================
   TASKS - RESPONSIVE
   ============================================ */
.tasks-manage {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.tasks-manage__header { flex-wrap: wrap; gap: 0.75rem; }
.tasks-form__row {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
}
@media (min-width: 480px) {
    .tasks-form__row { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
    .tasks-form__row { grid-template-columns: repeat(4, 1fr); }
}
.tasks-recurring-panel__row { flex-wrap: wrap; }
.tasks-recurring-panel__ends { flex-wrap: wrap; gap: 0.5rem; }
.tasks-modal-overlay {
    padding: 0.75rem;
    align-items: flex-start;
    padding-top: 1.5rem;
}
.tasks-modal {
    max-width: min(520px, calc(100vw - 1.5rem));
    max-height: calc(100vh - 1.5rem);
}
.tasks-modal--wide {
    max-width: min(560px, calc(100vw - 1.5rem));
}
@media (max-width: 480px) {
    .tasks-modal-overlay { padding: 0.5rem; padding-top: 1rem; }
    .tasks-modal,
    .tasks-modal--wide {
        max-width: calc(100vw - 1rem);
        max-height: calc(100vh - 1rem);
        padding: 1rem;
    }
    .tasks-modal__header { flex-wrap: wrap; gap: 0.5rem; }
    .tasks-modal__body { min-width: 0; }
    .tasks-detail-box { word-break: break-word; }
}
.kanban-columns { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kanban-column { min-width: 260px; }

/* ============================================
   WORKSPACES - RESPONSIVE
   ============================================ */
.workspaces-manage__header { flex-wrap: wrap; gap: 1rem; }
.workspaces-manage__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}
.workspaces-manage__filters > div:first-child { flex: 1; min-width: 0; }
.workspaces-manage__filters .clay-input { max-width: 100%; }
@media (min-width: 480px) {
    .workspaces-manage__filters .clay-input#workspaceSearch { max-width: 280px; }
}
.workspaces-manage .clay-dropdown-select { min-width: 0; width: 100%; }
@media (min-width: 480px) {
    .workspaces-manage .clay-dropdown-select#workspaceFilterWrap { width: auto; min-width: 160px; }
    .workspaces-manage .clay-dropdown-select#workspaceSortWrap { width: auto; min-width: 180px; }
}
.workspaces-grid,
.workspace-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 1rem;
    border: none;
}
.workspace-grid::before,
.workspace-grid::after,
.workspaces-grid::before,
.workspaces-grid::after { display: none; }
.workspace-grid-item {
    border: none;
    border-bottom: none;
}

/* Workspace cards: softer shadow so bottom edge doesn’t read as a horizontal line */
.workspaces-manage .workspace-card.clay-card {
    border: none;
    border-bottom: none;
    box-shadow:
        6px 6px 20px 0px rgba(163, 177, 198, 0.4),
        -6px -6px 20px 0px rgba(255, 255, 255, 0.65),
        inset 2px 2px 4px 0px rgba(255, 255, 255, 0.4),
        inset -1px -1px 3px 0px rgba(163, 177, 198, 0.15);
}
.workspaces-manage .workspace-grid .workspace-card.clay-card:hover {
    box-shadow:
        8px 8px 24px 0px rgba(163, 177, 198, 0.45),
        -8px -8px 24px 0px rgba(255, 255, 255, 0.7),
        inset 2px 2px 4px 0px rgba(255, 255, 255, 0.45),
        inset -1px -1px 3px 0px rgba(163, 177, 198, 0.18);
}
[data-theme="dark"] .workspaces-manage .workspace-card.clay-card,
.dark .workspaces-manage .workspace-card.clay-card {
    box-shadow:
        6px 6px 20px 0px rgba(0, 0, 0, 0.22),
        -4px -4px 12px 0px rgba(255, 255, 255, 0.05),
        inset 2px 2px 4px 0px rgba(255, 255, 255, 0.05),
        inset -1px -1px 3px 0px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .workspaces-manage .workspace-grid .workspace-card.clay-card:hover,
.dark .workspaces-manage .workspace-grid .workspace-card.clay-card:hover {
    box-shadow:
        8px 8px 24px 0px rgba(0, 0, 0, 0.3),
        -4px -4px 14px 0px rgba(255, 255, 255, 0.06),
        inset 2px 2px 4px 0px rgba(255, 255, 255, 0.06),
        inset -1px -1px 3px 0px rgba(0, 0, 0, 0.25);
}

/* Avoid Create workspace card top edge reading as a line below the grid */
#create-workspace {
    margin-top: 2.5rem;
}
@media (min-width: 480px) {
    .workspace-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
}

/* ============================================
   MANAGE PAGES (users, invitations, etc.) - RESPONSIVE
   ============================================ */
.manage-users .clay-card:first-of-type > div,
.manage-users .clay-card form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}
.manage-users .clay-input,
.manage-users .clay-select { min-width: 0; }
@media (min-width: 480px) {
    .manage-users #userSearch { width: 220px; }
    .manage-users #userRoleFilter { width: 140px; }
    .manage-users #userStatusFilter { width: 120px; }
}
.manage-users .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.manage-users table { width: 100%; border-collapse: collapse; min-width: 600px; }

/* Manage invitations, reports, audit, system settings, workspaces: full width + responsive */
.manage-invitations,
.manage-reports,
.manage-audit-logs,
.manage-system-settings,
.manage-workspaces {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
/* Horizontal scroll when table is wider than the card (narrow viewports / many columns) */
.manage-workspaces .manage-workspaces-card {
    min-width: 0;
    max-width: 100%;
}
/* Scrollport must stay width-bound (not grow with table) so overflow-x works; ancestors use overflow-x:hidden */
.manage-workspaces .manage-workspaces-table-wrap.table-responsive {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
    scrollbar-gutter: stable;
    margin: 0 -0.125rem;
    padding: 0 0.125rem 6px;
    cursor: grab;
}
.manage-workspaces .manage-workspaces-table-wrap.table-responsive.is-dragging {
    cursor: grabbing;
    user-select: none;
}
.manage-workspaces .manage-workspaces-table-wrap a,
.manage-workspaces .manage-workspaces-table-wrap button {
    cursor: pointer;
}
/* max-content + min-width: table never shrinks below columns — forces inner horizontal scroll */
.manage-workspaces .manage-workspaces-table {
    width: max-content;
    min-width: 880px;
    max-width: none;
    border-collapse: collapse;
    table-layout: auto;
}
/* Recycle Bin / deleted tab: fewer columns — fill card width, avoid bogus horizontal scroll */
.manage-workspaces .manage-workspaces-table-wrap[data-manage-tab="deleted"] {
    overflow-x: visible;
    cursor: default;
}
.manage-workspaces .manage-workspaces-table-wrap[data-manage-tab="deleted"] .manage-workspaces-table {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    table-layout: fixed;
}
.manage-workspaces .manage-workspaces-table-wrap[data-manage-tab="deleted"] .manage-workspaces-table th,
.manage-workspaces .manage-workspaces-table-wrap[data-manage-tab="deleted"] .manage-workspaces-table td {
    word-break: break-word;
    overflow-wrap: anywhere;
}
.manage-workspaces .manage-ws-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
    align-items: center;
}
.manage-workspaces .manage-workspaces-table-wrap[data-manage-tab="deleted"] .manage-ws-actions {
    width: 100%;
}
.manage-invitations-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 480px) {
    .manage-invitations-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 768px) {
    .manage-invitations-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Manage invitations header: wrap on small screens */
.manage-invitations > div:first-of-type {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Hide stray helper paragraph under manage invitations (e.g. "Workspaces Dashboard") */
.manage-invitations > p {
    display: none;
}

.page-content .clay-modal { max-width: min(480px, calc(100vw - 2rem)); width: 100%; }

/* ============================================
   WORKSPACE DETAIL - RESPONSIVE
   ============================================ */
.workspace-detail-header {
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
}
.workspace-detail-header > div:first-child {
    flex: 1;
    min-width: 0;
}
.workspace-detail-header > div:last-child {
    flex: 0 0 auto;
    margin-left: auto;
}

.workspace-detail .clay-tabs,
.clay-tabs {
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ============================================
   BREADCRUMBS - RESPONSIVE
   ============================================ */
.app-breadcrumbs {
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.app-breadcrumbs ol {
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* ============================================
   MODALS (global)
   ============================================ */
.clay-modal-overlay {
    padding: 1rem;
    box-sizing: border-box;
    position: fixed;
    inset: 0;
    z-index: 2000;
}
.clay-modal-overlay .clay-modal {
    max-width: min(480px, calc(100vw - 2rem));
    width: 100%;
    margin: auto;
    position: relative;
    z-index: 1;
}
/* When Add resource modal is open, raise main area above sidebar so overlay stacks correctly at all viewports */
#appWithSidebarMain:has(#addResourceModalToggle:checked) {
    z-index: 600;
}
/* Raise content wrap above sticky header (z-index 250) so the modal overlay appears on top */
#appWithSidebarMain:has(#addResourceModalToggle:checked) .app-main-content-wrap {
    z-index: 300;
}

/* Send Invitation modal: raise above sticky header so modal is not hidden behind header */
#appWithSidebarMain:has(#sendInvitationModalToggle:checked) {
    z-index: 600;
}
#appWithSidebarMain:has(#sendInvitationModalToggle:checked) .app-main-content-wrap {
    z-index: 300;
}

/* ============================================
   ERROR PAGES - RESPONSIVE
   ============================================ */
.error-page-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 2rem);
    box-sizing: border-box;
    background: var(--color-bg-primary);
}

.error-card {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    max-width: min(420px, 100%);
    width: 100%;
    box-sizing: border-box;
}

.error-card--centered {
    text-align: center;
}

.error-card__title {
    margin: 0 0 0.5rem 0;
    font-size: clamp(2.5rem, 8vw, 4rem);
    font-weight: 700;
    color: var(--color-text-primary);
}

.error-card__message {
    margin: 0 0 1.5rem 0;
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: var(--color-text-secondary);
}

.error-card__sub {
    margin: 0 0 1.5rem 0;
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
}

/* ============================================
   PROFILE SETTINGS - RESPONSIVE
   ============================================ */

.profile-container,
.settings-container {
    padding: var(--spacing-md);
    max-width: 100%;
}

.profile-card,
.settings-card {
    padding: var(--spacing-lg);
}

.profile-avatar-large {
    width: 80px;
    height: 80px;
}

/* Settings > Profile tab: compact layout, reduce empty space */
.settings-content-below .profile-settings-container .profile-card {
    padding: 1.25rem 1.5rem;
    gap: 1rem;
    max-width: 100%;
    height: fit-content;
    align-self: flex-start;
}
.settings-content-below .profile-settings-container .profile-header {
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}
.settings-content-below .profile-settings-container .profile-avatar-large {
    width: 56px;
    height: 56px;
    min-width: 56px;
    font-size: 1.25rem;
}
.settings-content-below .profile-settings-container .profile-panels {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.settings-content-below .profile-settings-container .profile-panel {
    padding: 0.875rem 1rem;
    border-radius: var(--radius-base);
    gap: 0.5rem;
}
.settings-content-below .profile-settings-container .profile-panel-head h3 {
    margin: 0 0 2px;
    font-size: 0.9375rem;
}
.settings-content-below .profile-settings-container .profile-panel-head p {
    font-size: 0.8125rem;
}
.settings-content-below .profile-settings-container .profile-avatar-row {
    gap: 0.75rem;
}
.settings-content-below .profile-settings-container .profile-avatar-preview {
    width: 56px;
    height: 56px;
}
.settings-content-below .profile-settings-container .profile-form {
    gap: 0.75rem;
}
.settings-content-below .profile-settings-container .form-row-two {
    gap: 0.75rem;
}
.settings-content-below .profile-settings-container .form-group {
    margin-bottom: 0;
}
.settings-content-below .profile-settings-container .profile-panel .form-group + .form-group,
.settings-content-below .profile-settings-container .profile-panel .form-group + .form-row-two {
    margin-top: 0.5rem;
}
.settings-content-below .profile-settings-container .profile-panel .toggle-row {
    padding: 0.35rem 0;
}
.settings-content-below .profile-settings-container .form-actions {
    padding-top: 1rem;
    margin-top: 0.5rem;
}
.settings-content-below .profile-settings-container .account-info-section {
    margin-top: 1.25rem;
    padding-top: 1rem;
}
.settings-content-below .profile-settings-container .account-info-section h3 {
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
}
.settings-content-below .profile-settings-container .account-info-list {
    gap: 0.35rem;
}
.settings-content-below .profile-settings-container .info-row {
    font-size: 0.8125rem;
}
.settings-content-below .profile-settings-container textarea.clay-input {
    min-height: 4rem;
    padding: 0.5rem 0.75rem;
}
.settings-content-below .profile-settings-container .form-hint {
    margin-top: 0.25rem;
}

@media (min-width: 768px) {

    .profile-container,
    .settings-container {
        padding: var(--spacing-xl);
        max-width: 600px;
        margin: 0 auto;
    }

    .profile-avatar-large {
        width: 100px;
        height: 100px;
    }
}

/* ============================================
   CREATE GROUP - RESPONSIVE
   ============================================ */

.create-group-container {
    padding: var(--spacing-md);
    max-width: 100%;
}

@media (min-width: 768px) {
    .create-group-container {
        max-width: 500px;
        margin: var(--spacing-xl) auto;
        padding: var(--spacing-lg);
    }
}

/* ============================================
   CALL PAGE - RESPONSIVE
   ============================================ */

.call-container {
    padding: var(--spacing-md);
}

.call-controls {
    gap: var(--spacing-md);
    flex-wrap: wrap;
    justify-content: center;
}

.call-btn-control {
    width: 56px;
    height: 56px;
    font-size: 24px;
}

@media (min-width: 768px) {
    .call-btn-control {
        width: 64px;
        height: 64px;
        font-size: 28px;
    }
}

/* ============================================
   MODALS - RESPONSIVE
   ============================================ */

.modal-content,
.clay-modal-content {
    width: calc(100% - 32px);
    max-width: 100%;
    margin: var(--spacing-md);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
}

@media (min-width: 768px) {

    .modal-content,
    .clay-modal-content {
        width: auto;
        min-width: 400px;
        max-width: 500px;
        margin: auto;
    }
}

/* ============================================
   DROPDOWNS - RESPONSIVE
   ============================================ */

.more-dropdown,
.clay-dropdown {
    min-width: 200px;
    max-width: calc(100vw - 32px);
}

@media (min-width: 768px) {

    .more-dropdown,
    .clay-dropdown {
        min-width: 220px;
    }
}

/* ============================================
   EMPTY STATES - RESPONSIVE
   ============================================ */

.empty-state,
.main-empty {
    padding: var(--spacing-lg);
}

.main-empty-title {
    font-size: 18px;
}

.main-empty-text {
    font-size: 14px;
}

.clay-empty-icon {
    width: 64px;
    height: 64px;
}

@media (min-width: 768px) {
    .main-empty-title {
        font-size: 20px;
    }

    .clay-empty-icon {
        width: 80px;
        height: 80px;
    }
}

/* ============================================
   THEME TOGGLE - RESPONSIVE
   ============================================ */

.theme-toggle {
    top: var(--spacing-sm);
    right: var(--spacing-sm);
}

.theme-toggle button {
    width: 38px;
    height: 38px;
    font-size: 18px;
}

@media (min-width: 768px) {
    .theme-toggle {
        top: 16px;
        right: 16px;
    }

    .theme-toggle button {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}

/* ============================================
   TOUCH IMPROVEMENTS
   ============================================ */

/* Remove tap highlight on mobile */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Prevent text selection on buttons/interactive elements */
button,
.btn,
.call-btn,
.clay-btn,
.conversation-link {
    -webkit-user-select: none;
    user-select: none;
}

/* Ensure text inputs are zoomable but still look good */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea {
    font-size: 16px;
    /* Prevents auto-zoom on iOS */
}

/* ============================================
   SAFE AREA INSETS (iPhone notch support)
   ============================================ */

@supports (padding: max(0px)) {
    .app-header {
        padding-left: max(var(--spacing-md), env(safe-area-inset-left));
        padding-right: max(var(--spacing-md), env(safe-area-inset-right));
    }

    .chat-input-form {
        padding-left: max(var(--spacing-sm), env(safe-area-inset-left));
        padding-right: max(var(--spacing-sm), env(safe-area-inset-right));
        padding-bottom: max(var(--spacing-sm), env(safe-area-inset-bottom));
    }

    .chat-sidebar {
        padding-left: max(var(--spacing-md), env(safe-area-inset-left));
    }
}

/* ============================================
   LANDSCAPE MOBILE ADJUSTMENTS
   ============================================ */

@media (max-height: 500px) and (orientation: landscape) {
    .auth-container {
        margin: var(--spacing-sm) auto;
        padding: var(--spacing-md);
    }

    .auth-logo {
        width: 48px;
        height: 48px;
    }

    .chat-header {
        padding: var(--spacing-xs) var(--spacing-md);
        min-height: 50px;
    }
}