/* SHAX Team Calendar – refined professional theme */
:root {
    /* Brand colors */
    --color-primary: #0d6b2c;
    --color-primary-hover: #0a5522;
    --color-primary-focus: rgba(13, 107, 44, 0.2);
    --color-secondary: #d97706;
    --color-secondary-hover: #b45309;
    --color-off-white: #fafafa;
    --color-gray: #94a3b8;

    /* UI colors – refined, accessible contrast */
    --color-surface: #ffffff;
    --color-surface-elevated: #ffffff;
    --color-background: #f1f5f9;
    --color-border: #e2e8f0;
    --color-border-focus: #0d6b2c;
    --color-text: #0f172a;
    --color-text-muted: #64748b;
    --color-text-secondary: #64748b;
    --color-success: #0d6b2c;
    --color-danger: #dc2626;
    --color-danger-bg: #fef2f2;
    --color-warning-bg: #fffbeb;
    --color-warning-text: #92400e;
    --color-busy: #94a3b8;
    --color-busy-bg: #f8fafc;
    --color-holiday: #0d9488;
    --color-holiday-border: #0f766e;
    --color-private: #d97706;
    --color-private-border: #b45309;

    /* Event form section tints (subtle) */
    --event-form-bg-a: rgba(13, 107, 44, 0.05);
    --event-form-bg-b: #f8fafc;
    --event-form-bg-c: #f1f5f9;
    --event-form-bg-d: rgba(217, 119, 6, 0.05);

    /* Header – team = primary green */
    --header-bg: #0d6b2c;
    --header-text: #ffffff;
    --header-hover: rgba(255, 255, 255, 0.12);

    /* Modals */
    --modal-backdrop: rgba(15, 23, 42, 0.4);

    /* Shadows – softer, more depth */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.04);

    /* Radius */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 9999px;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.5rem;
    --spacing-2xl: 2rem;

    /* Typography */
    --font: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;

    /* Responsive page padding (override in media queries) */
    --page-padding-x: var(--spacing-lg);
    --page-padding-y: var(--spacing-lg);
    --header-padding-x: var(--spacing-lg);
    --header-padding-y: var(--spacing-md);
}

* { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: none;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    font-family: var(--font);
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--color-text);
    background: var(--color-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.02em; }

/* Focus ring for accessibility */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }

/* ---- Login page ---- */
.login-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background);
    background-image: radial-gradient(ellipse at top, rgba(13, 107, 44, 0.08) 0%, transparent 55%);
    padding: var(--spacing-lg);
    padding-left: max(var(--spacing-lg), env(safe-area-inset-left));
    padding-right: max(var(--spacing-lg), env(safe-area-inset-right));
    padding-bottom: max(var(--spacing-lg), env(safe-area-inset-bottom));
}

.login-box {
    background: var(--color-surface-elevated);
    padding: var(--spacing-2xl);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 420px;
    border: 1px solid var(--color-border);
}

.login-box h1 {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-text);
}

.login-box .login-subtitle {
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-lg);
    font-size: var(--text-base);
}
.login-box .login-intro {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin: 0 0 var(--spacing-xl);
    line-height: 1.5;
}

.login-box .error {
    color: var(--color-danger);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-danger-bg);
    border-radius: var(--radius);
    border-left: 4px solid var(--color-danger);
    font-size: var(--text-sm);
}

.login-box .message {
    color: var(--color-primary);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    background: rgba(13, 107, 44, 0.08);
    border-radius: var(--radius);
    border-left: 4px solid var(--color-primary);
    font-size: var(--text-sm);
}

.login-box .login-links {
    margin-top: var(--spacing-lg);
    font-size: var(--text-sm);
}

.login-box .login-links a {
    color: var(--color-primary);
    text-decoration: none;
}

.login-box .login-links a:hover {
    text-decoration: underline;
}

.login-box label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
    font-size: var(--text-sm);
}

.login-box input {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: var(--text-base);
    font-family: var(--font);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.login-box input:focus {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px var(--color-primary-focus);
}

.login-box button {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-xl);
    margin-top: var(--spacing-sm);
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: var(--text-base);
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.login-box button:hover { background: var(--color-primary-hover); }

/* ---- Calendar page: layout and header ---- */
.calendar-page { background: var(--color-background); min-height: 100vh; min-height: 100dvh; }

/* Timezone bar: UK + Asia times for team coordination */
.cal-timezone-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm) var(--spacing-lg);
    padding: var(--spacing-sm) var(--header-padding-x);
    padding-left: max(var(--header-padding-x), env(safe-area-inset-left));
    padding-right: max(var(--header-padding-x), env(safe-area-inset-right));
    background: rgba(13, 107, 44, 0.06);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.cal-tz-item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}
.cal-tz-item::before {
    content: attr(data-label) ': ';
    font-weight: 600;
    color: var(--color-text);
    min-width: 4.5em;
}
.cal-tz-item .cal-tz-time {
    font-variant-numeric: tabular-nums;
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    padding: var(--header-padding-y) var(--header-padding-x);
    background: var(--header-bg);
    color: var(--header-text);
    border-bottom: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    padding-left: max(var(--header-padding-x), env(safe-area-inset-left));
    padding-right: max(var(--header-padding-x), env(safe-area-inset-right));
    min-height: 64px;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-shrink: 0;
}

.header-logo {
    font-size: 1.5rem;
    line-height: 1;
    opacity: 0.95;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

.header-title,
.calendar-header .header-title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--header-text);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.header-link-team {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--header-text);
    opacity: 0.9;
    text-decoration: none;
}
.header-link-team:hover { opacity: 1; text-decoration: underline; }

/* One-click switch between team and private calendar (same place in header-brand on both pages) */
.header-brand .header-calendar-btn {
    margin-left: var(--spacing-xs);
}
.header-calendar-btn {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--text-sm);
    font-weight: 500;
    color: #fff;
    border-radius: var(--radius-pill);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-fast);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.header-calendar-btn:hover {
    transform: translateY(-0.5px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}
/* Team calendar page: switch button is orange (private colour) */
.calendar-page:not(.private-calendar-page) .header-calendar-btn {
    background: var(--color-private);
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.calendar-page:not(.private-calendar-page) .header-calendar-btn:hover {
    background: var(--color-private-border);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* View tabs – segmented control style */
.header-view-tabs {
    display: flex;
    align-items: stretch;
    gap: 2px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.header-view-tabs .header-tab {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--text-sm);
    font-weight: 500;
    font-family: var(--font);
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    border-radius: calc(var(--radius) - 2px);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.header-view-tabs .header-tab:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--header-text);
}

.header-view-tabs .header-tab.active {
    background: var(--color-surface);
    color: var(--color-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.header-view-tabs .header-tab.active:hover {
    background: var(--color-surface);
    color: var(--color-primary-hover);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}
.header-actions::before {
    content: '';
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.2);
    margin-right: var(--spacing-xs);
    border-radius: 1px;
}

/* Private calendar page: distinct look at a glance */
.private-calendar-page .calendar-header {
    background: var(--color-private);
    --header-bg: var(--color-private);
    --header-hover: rgba(255, 255, 255, 0.15);
}
.private-calendar-page .calendar-content {
    border-left: 4px solid var(--color-private);
    background: linear-gradient(90deg, rgba(217, 119, 6, 0.06) 0%, transparent 120px);
}
.private-calendar-page .header-view-tabs .header-tab.active {
    color: var(--color-private);
}
.private-calendar-page .header-view-tabs .header-tab.active:hover {
    color: var(--color-private-border);
}
/* Private calendar page: switch button is green (team colour) */
.private-calendar-page .header-calendar-btn {
    background: var(--color-primary);
    border: 1px solid var(--color-primary-hover);
    color: #fff;
}
.private-calendar-page .header-calendar-btn:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: #fff;
}

.header-guide-btn,
.btn-invite-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--header-text);
    background: rgba(255, 255, 255, 0.12);
    text-decoration: none;
    padding: var(--spacing-sm) var(--spacing-lg);
    min-height: 36px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.header-guide-btn:hover,
.btn-invite-header:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--header-text);
    border-color: rgba(255, 255, 255, 0.3);
}
.header-guide-btn:focus-visible,
.btn-invite-header:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

.btn-invite-header {
    font-weight: 500;
}

.header-user-wrap {
    position: relative;
    margin-left: var(--spacing-sm);
}
.header-user-wrap::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1px;
}

.header-user-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.18);
    color: var(--header-text);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
    border: 1px solid rgba(255, 255, 255, 0.22);
}
.header-user-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.header-user-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.32);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.header-user-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

.header-user-avatar {
    text-transform: uppercase;
    line-height: 1;
}

.header-user-menu {
    position: absolute;
    top: calc(100% + var(--spacing-sm));
    right: 0;
    min-width: 220px;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    padding: var(--spacing-sm);
    z-index: 100;
}

.header-user-menu[hidden] {
    display: none !important;
}

.user-menu-item {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.user-menu-item:hover {
    background: var(--color-busy-bg);
    color: var(--color-primary);
}
.user-menu-item:first-child {
    border-radius: var(--radius) var(--radius) 0 0;
}
.user-menu-item:last-child {
    border-radius: 0 0 var(--radius) var(--radius);
}

.user-menu-item-form {
    display: block;
    margin: 0;
    padding: 0;
}
.user-menu-item-btn {
    display: block;
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text);
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    border-radius: var(--radius);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.user-menu-item-form:hover .user-menu-item-btn {
    background: var(--color-busy-bg);
    color: var(--color-primary);
}

.calendar-main {
    padding: var(--page-padding-y) var(--page-padding-x);
    padding-right: max(var(--page-padding-x), env(safe-area-inset-right));
    padding-bottom: max(var(--page-padding-y), env(safe-area-inset-bottom));
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
}

/* Outlook-like layout: sidebar (mini calendar) + main content */
.calendar-layout {
    display: flex;
    gap: var(--spacing-xl);
    align-items: flex-start;
}

.calendar-sidebar {
    flex-shrink: 0;
    width: 280px;
    min-width: 260px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-md);
}

.calendar-sidebar-title {
    margin: 0 0 var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.team-legend-section {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-border);
}

.team-legend {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.team-legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-sm);
    color: var(--color-text);
}

.team-legend-swatch {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.team-legend-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-legend-empty {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.calendar-content {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#calendar {
    max-width: 100%;
    width: 100%;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

#calendar[data-calendar-mode="all"] {
    border-top: 3px solid var(--color-border);
}
#calendar[data-calendar-mode="team"] {
    border-top: 3px solid var(--color-primary);
}
#calendar[data-calendar-mode="private"] {
    border-top: 3px solid var(--color-private);
}

/* Calendar mode: content area tint */
#calendar[data-calendar-mode="all"] .cal-content {
    background: rgba(100, 116, 139, 0.04);
}
#calendar[data-calendar-mode="team"] .cal-content {
    background: rgba(13, 107, 44, 0.03);
}
#calendar[data-calendar-mode="private"] .cal-content {
    background: rgba(217, 119, 6, 0.04);
}

/* Calendar mode: month view day cells */
#calendar[data-calendar-mode="all"] .cal-day-cell {
    background: rgba(100, 116, 139, 0.06);
}
#calendar[data-calendar-mode="all"] .cal-day-other-month {
    background: rgba(100, 116, 139, 0.03);
}
#calendar[data-calendar-mode="all"] .cal-day-today {
    background: rgba(100, 116, 139, 0.1);
}
#calendar[data-calendar-mode="team"] .cal-day-cell {
    background: rgba(13, 107, 44, 0.05);
}
#calendar[data-calendar-mode="team"] .cal-day-other-month {
    background: rgba(13, 107, 44, 0.03);
}
#calendar[data-calendar-mode="team"] .cal-day-today {
    background: rgba(13, 107, 44, 0.1);
}
#calendar[data-calendar-mode="private"] .cal-day-cell {
    background: rgba(217, 119, 6, 0.05);
}
#calendar[data-calendar-mode="private"] .cal-day-other-month {
    background: rgba(217, 119, 6, 0.03);
}
#calendar[data-calendar-mode="private"] .cal-day-today {
    background: rgba(217, 119, 6, 0.1);
}

/* Calendar mode: week/day view time slots */
#calendar[data-calendar-mode="all"] .cal-time-slot {
    background: rgba(100, 116, 139, 0.03);
}
#calendar[data-calendar-mode="all"] .cal-time-slot:hover {
    background: rgba(100, 116, 139, 0.07);
}
#calendar[data-calendar-mode="team"] .cal-time-slot {
    background: rgba(13, 107, 44, 0.03);
}
#calendar[data-calendar-mode="team"] .cal-time-slot:hover {
    background: rgba(13, 107, 44, 0.07);
}
#calendar[data-calendar-mode="private"] .cal-time-slot {
    background: rgba(217, 119, 6, 0.03);
}
#calendar[data-calendar-mode="private"] .cal-time-slot:hover {
    background: rgba(217, 119, 6, 0.07);
}

/* Calendar mode: day headers (weekday row) */
#calendar[data-calendar-mode="all"] .cal-day-header {
    background: rgba(100, 116, 139, 0.07);
}
#calendar[data-calendar-mode="team"] .cal-day-header {
    background: rgba(13, 107, 44, 0.06);
}
#calendar[data-calendar-mode="private"] .cal-day-header {
    background: rgba(217, 119, 6, 0.06);
}

/* ---- Custom calendar (vanilla JS) ---- */
.cal-main {
    padding: 0;
}

.cal-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.cal-toolbar-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-lg);
}

.cal-toolbar-row-primary {
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.cal-toolbar-row-secondary {
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
}

.cal-toolbar-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.cal-toolbar-group-filters {
    flex-wrap: wrap;
}

.cal-toolbar-group-end {
    margin-left: auto;
}

.cal-toolbar-divider {
    width: 1px;
    height: 1.5rem;
    background: var(--color-border);
    flex-shrink: 0;
    margin: 0 var(--spacing-xs);
}

.cal-content {
    padding: var(--spacing-xl);
    min-height: 200px;
}
/* When content is only empty state, give it room to breathe without excessive space */
.cal-content:has(.cal-empty-state) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    padding: var(--spacing-xl);
}

/* Sync status (Office 365–style: Up to date / Syncing / Offline) */
.cal-sync-status {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius);
    white-space: nowrap;
    flex-shrink: 0;
}
.cal-sync-status .cal-sync-icon { font-size: 1rem; line-height: 1; }
.cal-sync-status .cal-sync-ok { color: var(--color-success); }
.cal-sync-status .cal-sync-offline { color: var(--color-text-muted); opacity: 0.9; }
.cal-sync-status.cal-sync-retryable { cursor: pointer; }
.cal-sync-status.cal-sync-retryable:hover { text-decoration: underline; }
.cal-sync-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: cal-sync-spin 0.7s linear infinite;
}

/* More dropdown (Print, Export, Settings) */
.cal-more-wrap { position: relative; display: inline-block; }
.cal-more-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-xs);
    min-width: 160px;
    z-index: 100;
}
.cal-more-menu[hidden] { display: none !important; }
.cal-more-item {
    display: block;
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    background: none;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: var(--text-sm);
    font-family: var(--font);
    color: var(--color-text);
}
.cal-more-item:hover { background: var(--color-busy-bg); }
.cal-more-divider {
    display: block;
    height: 1px;
    margin: var(--spacing-xs) 0;
    background: var(--color-border);
}
.cal-btn-more { white-space: nowrap; }

.event-form-find-time-desc { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0 0 var(--spacing-sm); line-height: 1.4; }
.event-form-find-time-btns { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); }
.event-form-availability-grid { margin-top: var(--spacing-sm); max-height: 260px; overflow: auto; }
.availability-table { font-size: var(--text-xs); border-collapse: collapse; width: 100%; }
.availability-table th, .availability-table td { border: 1px solid var(--color-border); padding: 4px; text-align: center; }
.availability-table .availability-time { text-align: right; padding-right: 8px; }
.availability-cell { cursor: pointer; }
.availability-free { background: #d1fae5; color: #047857; }
.availability-busy { background: #fee2e2; color: #b91c1c; cursor: default; }
.availability-cell.availability-free:hover { filter: brightness(0.95); }

.cal-time-slot-outside { background: var(--color-busy-bg); opacity: 0.6; }

@keyframes cal-sync-spin { to { transform: rotate(360deg); } }
.cal-sync-idle .cal-sync-text { color: var(--color-success); }
.cal-sync-syncing .cal-sync-text { color: var(--color-primary); }
.cal-sync-offline .cal-sync-text,
.cal-sync-error .cal-sync-text { color: var(--color-text-muted); }
.cal-sync-error .cal-sync-text { color: var(--color-danger); }

.cal-toolbar-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text);
    padding: 0 var(--spacing-md);
}

.cal-btn-add,
.cal-btn.cal-btn-add {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-primary);
    color: #fff;
    border: none;
    font-weight: 500;
}

.cal-btn-add:hover,
.cal-btn.cal-btn-add:hover {
    background: var(--color-primary-hover);
    color: #fff;
}

.cal-search-wrap {
    display: flex;
    align-items: center;
}

.cal-search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.cal-search-input {
    width: 180px;
    max-width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-family: var(--font);
    transition: border-color var(--transition-fast);
}

.cal-search-input:focus {
    border-color: var(--color-primary);
    outline: none;
}

.cal-btn-settings,
.cal-btn.cal-btn-settings {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 1.1rem;
    line-height: 1;
}

.cal-toolbar .cal-btn-settings {
    padding: var(--spacing-sm);
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cal-btn-settings-icon {
    font-size: 1.125rem;
    line-height: 1;
}

.cal-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--text-sm);
    font-weight: 500;
    font-family: var(--font);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.cal-btn:hover {
    background: var(--color-busy-bg);
}

.cal-today {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.cal-today:hover {
    background: var(--color-primary-hover);
    color: #fff;
    border-color: var(--color-primary-hover);
}

.cal-view-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--text-sm);
    font-weight: 500;
    font-family: var(--font);
    border: none;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.cal-view-btn:not(:last-child) {
    border-right: 1px solid var(--color-border);
}

.cal-view-btn:hover {
    background: var(--color-busy-bg);
}

.cal-view-btn.active:hover {
    background: var(--color-primary-hover);
    color: #fff;
}

.cal-view-btn.active {
    background: var(--color-primary);
    color: #fff;
}

/* Calendar filter: Both / Team / Private */
.cal-filter-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.cal-calendar-filter {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    flex-shrink: 0;
}

.cal-calendar-filter .cal-view-btn:not(:last-child) {
    border-right: 1px solid var(--color-border);
}

.cal-calendar-filter .cal-view-btn[data-calendar-filter="all"].active {
    background: #475569;
    color: #fff;
}
.cal-calendar-filter .cal-view-btn[data-calendar-filter="all"].active:hover {
    background: #334155;
    color: #fff;
}
.cal-calendar-filter .cal-view-btn[data-calendar-filter="team"].active {
    background: var(--color-primary);
    color: #fff;
}
.cal-calendar-filter .cal-view-btn[data-calendar-filter="team"].active:hover {
    background: var(--color-primary-hover);
    color: #fff;
}
.cal-calendar-filter .cal-view-btn[data-calendar-filter="private"].active {
    background: var(--color-private);
    color: #fff;
}
.cal-calendar-filter .cal-view-btn[data-calendar-filter="private"].active:hover {
    background: var(--color-private-border);
    color: #fff;
}


.cal-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    width: 100%;
    font-size: var(--text-sm);
}

.cal-month-headers {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-column: 1 / -1;
}

.cal-day-header {
    padding: var(--spacing-md) var(--spacing-sm);
    font-weight: 600;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    background: var(--color-busy-bg);
    border: 1px solid var(--color-border);
    text-align: left;
}

.cal-week-segments {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-column: 1 / -1;
    min-height: 24px;
    gap: 2px;
}

.cal-week-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-column: 1 / -1;
}

.cal-day-cell {
    vertical-align: top;
    padding: var(--spacing-xs);
    border: 1px solid var(--color-border);
    min-height: 80px;
}

.cal-day-other-month {
    background: var(--color-busy-bg);
    opacity: 0.8;
}

.cal-day-today {
    background: rgba(13, 107, 44, 0.08);
}

.cal-day-number {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-xs);
}

.cal-day-today .cal-day-number {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.cal-event {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: var(--text-xs);
    font-weight: 500;
    border-left: 3px solid currentColor;
    color: #fff;
    margin-bottom: 2px;
    cursor: pointer;
    transition: box-shadow var(--transition-fast);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.cal-event:hover {
    box-shadow: var(--shadow-md);
}

.cal-event-allday .cal-event-time {
    font-style: italic;
}

.cal-event-multiday {
    padding: 2px 8px;
    border-radius: 6px;
    border-left: 3px solid;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.cal-event-time {
    margin-right: 4px;
    opacity: 0.9;
}

.cal-event-busy {
    background-color: var(--color-busy) !important;
    border-color: var(--color-busy) !important;
    color: #fff !important;
}

/* Holidays: teal color, diagonal stripe texture, dashed border */
.cal-event-holiday {
    border-left-style: dashed;
    background-image: repeating-linear-gradient(
        -55deg,
        transparent,
        transparent 5px,
        rgba(255, 255, 255, 0.12) 5px,
        rgba(255, 255, 255, 0.12) 7px
    ) !important;
}

.cal-event-multiday.cal-event-holiday,
.cal-time-event.cal-event-holiday {
    background-image: repeating-linear-gradient(
        -55deg,
        transparent,
        transparent 5px,
        rgba(255, 255, 255, 0.12) 5px,
        rgba(255, 255, 255, 0.12) 7px
    ) !important;
}

/* Private calendar event: distinct violet color and strong left border */
.cal-event-recurring::before {
    content: "\21BB ";
    font-size: 0.9em;
    opacity: 0.9;
}
.cal-event-private {
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: var(--color-private-border) !important;
    background-color: var(--color-private) !important;
    border-color: var(--color-private) !important;
}
.cal-time-event.cal-event-private { border-left: 4px solid var(--color-private-border); }
.cal-list-event.cal-event-private { border-left-color: var(--color-private) !important; }
.cal-more-popover .cal-popover-event.cal-event-private { border-left-color: var(--color-private) !important; }

/* Invited events: subtle "you're invited" cue */
.cal-event-invited {
    border-left-width: 3px;
    border-left-style: dashed;
}
.cal-list-event.cal-event-invited,
.cal-more-popover .cal-popover-event.cal-event-invited {
    border-left-width: 4px;
    border-left-style: dashed;
}

.cal-event-multiday.cal-event-holiday {
    border-left-style: dashed;
}

.cal-list-event.cal-event-holiday {
    border-left-style: dashed;
    background-image: repeating-linear-gradient(
        -55deg,
        transparent,
        transparent 5px,
        rgba(255, 255, 255, 0.12) 5px,
        rgba(255, 255, 255, 0.12) 7px
    ) !important;
}

.cal-more-link {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 0;
    margin-top: 2px;
}

.cal-more-link:hover {
    text-decoration: underline;
}

.cal-more-popover {
    position: absolute;
    z-index: 110;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-sm);
    min-width: 160px;
}

.cal-more-popover .cal-popover-event {
    display: block;
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    font-size: var(--text-sm);
    border: none;
    border-left: 4px solid var(--color-primary);
    background: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.cal-more-popover .cal-popover-event.cal-event-holiday {
    border-left-style: dashed;
    background-image: repeating-linear-gradient(
        -55deg,
        transparent,
        transparent 5px,
        rgba(255, 255, 255, 0.15) 5px,
        rgba(255, 255, 255, 0.15) 7px
    ) !important;
}

.cal-more-popover .cal-popover-event:hover {
    background: var(--color-busy-bg);
}

.cal-list-heading {
    font-weight: 600;
    font-size: var(--text-lg);
    margin-bottom: var(--spacing-lg);
}

.cal-list-day {
    margin-bottom: var(--spacing-xl);
}

.cal-list-day-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-sm);
}

.cal-list-day-label {
    flex: 1;
}

.cal-list-day-icon {
    font-size: 1rem;
    opacity: 0.7;
}

.cal-list-event {
    display: block;
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: left;
    font-size: var(--text-sm);
    border: none;
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-xs);
    box-shadow: var(--shadow-sm);
    background: var(--color-surface);
    background: var(--color-surface);
    margin-bottom: var(--spacing-sm);
    border-radius: var(--radius);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-fast);
}

.cal-list-event:hover {
    background: var(--color-busy-bg);
}

.cal-list-event-time {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: 2px;
}

.cal-list-empty {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.cal-search-empty {
    padding: var(--spacing-2xl);
    text-align: center;
}

.cal-search-empty .cal-list-empty { margin-bottom: var(--spacing-lg); }

.cal-clear-search {
    padding: var(--spacing-sm) var(--spacing-lg);
}

/* Week / Day time grid */
.cal-time-wrap {
    display: flex;
    flex-direction: column;
    min-height: 400px;
    overflow: auto;
}

.cal-time-header {
    display: flex;
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.cal-time-axis-header {
    width: 52px;
    min-width: 52px;
    border-right: 1px solid var(--color-border);
}

.cal-time-day-header {
    flex: 1;
    min-width: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-sm);
    font-weight: 600;
    text-align: center;
}

.cal-time-day-header.cal-day-today {
    background: rgba(16, 110, 48, 0.08);
    color: var(--color-primary);
}

.cal-time-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

.cal-time-axis {
    width: 52px;
    min-width: 52px;
    flex-shrink: 0;
    border-right: 1px solid var(--color-border);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.cal-time-slot-label {
    display: flex;
    align-items: flex-start;
    padding-right: var(--spacing-xs);
    justify-content: flex-end;
}

.cal-time-columns {
    display: flex;
    flex: 1;
    min-width: 0;
}

.cal-time-wrap.cal-day-wrap .cal-time-columns {
    flex: 1;
}

.cal-time-day-col {
    flex: 1;
    min-width: 0;
    position: relative;
    border-right: 1px solid var(--color-border);
}

.cal-time-day-col:last-child {
    border-right: none;
}

.cal-time-slot {
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
}

.cal-time-slot:hover {
    background: rgba(16, 110, 48, 0.04);
}

.cal-time-event {
    position: absolute;
    left: 2px;
    right: 2px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    border-left: 3px solid;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    padding: 2px 6px;
    font-size: var(--text-xs);
    box-sizing: border-box;
}

.cal-time-event.cal-event-busy {
    background: var(--color-busy-bg) !important;
    border-color: var(--color-busy) !important;
    color: var(--color-text-muted);
}

.cal-time-event-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-time-event-resize {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    cursor: ns-resize;
}

.cal-time-event-resize:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* Calendar toolbar / buttons and interactive events: focus for keyboard users */
.cal-btn:focus-visible,
.cal-view-btn:focus-visible,
.cal-more-link:focus-visible,
.cal-event:focus-visible,
.cal-time-event:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.cal-week-placeholder,
.cal-day-placeholder {
    padding: var(--spacing-2xl);
    text-align: center;
    color: var(--color-text-muted);
}

.cal-error {
    padding: var(--spacing-xl);
    color: var(--color-danger);
    text-align: center;
}

.cal-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-2xl);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}
.cal-loading-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: cal-sync-spin 0.7s linear infinite;
}

.cal-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-2xl) var(--spacing-xl);
    text-align: center;
    max-width: 420px;
    margin: 0 auto;
}
.cal-empty-state-message {
    margin: 0;
    color: var(--color-text);
    font-size: var(--text-lg);
    font-weight: 500;
    line-height: 1.4;
}
.cal-empty-state-hint {
    margin: 0;
    color: #4b5563;
    font-size: var(--text-sm);
    line-height: 1.5;
    max-width: 36ch;
}
.cal-empty-state .cal-empty-add {
    margin: 0;
    margin-top: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    font-weight: 500;
}

.cal-empty-state-inline {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-lg);
    margin-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}
.cal-empty-state-inline .cal-empty-state-message,
.cal-empty-state-inline .cal-list-empty {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-text);
}
.cal-empty-state-inline .cal-empty-state-hint {
    margin: 0;
    color: #4b5563;
    font-size: var(--text-sm);
    line-height: 1.5;
    max-width: 36ch;
}
.cal-empty-state-inline .cal-empty-add {
    margin: 0;
    margin-top: var(--spacing-xs);
    padding: var(--spacing-md) var(--spacing-xl);
    font-weight: 500;
}
[data-theme="dark"] .cal-empty-state-hint,
[data-theme="dark"] .cal-empty-state-inline .cal-empty-state-hint {
    color: var(--color-text-secondary);
}

.cal-onboarding-nudge {
    text-align: center;
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
    background: var(--color-busy-bg);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
}
.cal-onboarding-nudge .cal-onboarding-text {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}
.cal-onboarding-nudge .cal-onboarding-dismiss { margin: 0; }

.cal-live-announce {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Mini calendar (custom) */
#mini-calendar {
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-sm);
}

.cal-mini-title {
    font-size: var(--text-sm);
    font-weight: 600;
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.cal-mini-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-xs);
}

.cal-mini-grid th {
    padding: 2px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.cal-mini-cell {
    padding: 2px;
    text-align: center;
}

.cal-mini-day {
    display: inline-block;
    min-width: 1.5rem;
    padding: 4px;
    border: none;
    background: none;
    font-size: var(--text-xs);
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.cal-mini-day:hover {
    background: var(--color-busy-bg);
}

.cal-mini-other .cal-mini-day {
    color: var(--color-text-muted);
}

.cal-mini-today .cal-mini-day {
    background: var(--color-primary);
    color: #fff;
}

/* Selected date (where you're looking) – darker highlight */
.cal-mini-selected .cal-mini-day {
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
}

/* View range (week/month visible in main calendar) – lighter highlight */
.cal-mini-in-range .cal-mini-day {
    background: rgba(16, 110, 48, 0.2);
}

.cal-mini-in-range.cal-mini-other .cal-mini-day {
    background: rgba(16, 110, 48, 0.15);
}

/* Selected overrides in-range; today when not selected stays as-is */
.cal-mini-selected.cal-mini-today .cal-mini-day {
    background: var(--color-primary);
    color: #fff;
}

/* ---- Modals (unified theme) ---- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: flex-end;
    justify-content: center;
}

.modal[aria-hidden="false"] { display: flex; }

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--modal-backdrop);
    backdrop-filter: blur(4px);
}

@media (prefers-reduced-motion: no-preference) {
    .modal-backdrop {
        transition: opacity var(--transition-base);
    }
    .modal[aria-hidden="false"] .modal-backdrop { opacity: 1; }
}

.modal-content {
    position: relative;
    background: var(--color-surface-elevated);
    width: 100%;
    max-width: min(520px, calc(100vw - 2 * var(--spacing-lg)));
    max-height: 90vh;
    max-height: calc(100dvh * 0.9 - env(safe-area-inset-bottom, 0));
    overflow: auto;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 0;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--color-border);
    border-bottom: none;
}

.modal-content::before {
    content: '';
    display: block;
    height: 4px;
    background: var(--header-bg);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.modal-content .modal-close {
    top: var(--spacing-md);
    right: var(--spacing-md);
}

.modal-content > div {
    padding: var(--spacing-xl);
    padding-left: max(var(--spacing-xl), env(safe-area-inset-left));
    padding-right: max(var(--spacing-xl), env(safe-area-inset-right));
    padding-bottom: max(var(--spacing-xl), env(safe-area-inset-bottom));
}

@media (prefers-reduced-motion: no-preference) {
    .modal-content {
        transition: transform var(--transition-base);
    }
}

.modal-close {
    position: absolute;
    z-index: 1;
    background: var(--color-busy-bg);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.modal-close:hover {
    background: var(--color-border);
    color: var(--color-text);
}

/* Guide modal – how to use (child-friendly) */
.guide-modal .modal-content {
    max-width: 28rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.guide-modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}
.guide-modal-title {
    margin: 0 0 var(--spacing-lg);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-text);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}
.guide-steps {
    margin: 0 0 var(--spacing-xl);
    padding-left: 1.25rem;
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text);
}
.guide-steps li {
    margin-bottom: var(--spacing-md);
}
.guide-steps li:last-child {
    margin-bottom: 0;
}
.guide-actions {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}
.guide-actions .guide-got-it {
    min-height: 44px;
    padding: var(--spacing-sm) var(--spacing-xl);
    font-size: var(--text-base);
    font-weight: 600;
}

/* Modal titles (event detail, invite, settings) */
.modal-content h2,
.modal-event-title {
    margin: 0 0 var(--spacing-lg);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.modal-event-time {
    margin: var(--spacing-sm) 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.modal-event-creator {
    margin: var(--spacing-sm) 0 var(--spacing-lg);
    font-size: var(--text-sm);
    color: var(--color-text);
}

.modal-event-desc {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-lg);
    background: var(--color-busy-bg);
    border-radius: var(--radius);
    white-space: pre-wrap;
    font-size: var(--text-sm);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.event-type-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
}

.event-type-holiday {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.modal-actions {
    margin-top: var(--spacing-xl);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.modal-actions button {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius);
    cursor: pointer;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: var(--text-sm);
    font-weight: 500;
    font-family: var(--font);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.modal-actions .btn-delete {
    border-color: var(--color-danger);
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.modal-actions .btn-delete:hover {
    background: var(--color-danger-bg);
    border-color: var(--color-danger);
    filter: brightness(0.97);
}

.modal-actions .btn-edit {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.modal-actions .btn-edit:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.modal-event-delete-confirm { margin-top: var(--spacing-lg); padding-top: var(--spacing-md); border-top: 1px solid var(--color-border); }
.modal-event-delete-confirm .modal-event-delete-p { margin: 0 0 var(--spacing-sm); font-size: var(--text-base); }
.modal-event-delete-confirm .btn-delete-confirm { border-color: var(--color-danger); background: var(--color-danger-bg); color: var(--color-danger); }
.modal-event-delete-confirm .btn-delete-confirm:hover { background: var(--color-danger); color: #fff; }

.cal-toast {
    position: relative;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    box-shadow: var(--shadow-md);
}
.cal-toast.cal-toast-visible { display: flex; }
.cal-toast-text { flex: 1; }
.cal-toast-dismiss {
    flex-shrink: 0;
    padding: 0 var(--spacing-xs);
    font-size: 1.25rem;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.8;
}
.cal-toast-dismiss:hover { opacity: 1; }
.cal-toast-error { background: var(--color-danger-bg); border: 1px solid var(--color-danger); color: var(--color-danger); }
.cal-toast-success { background: #d1fae5; border: 1px solid #059669; color: #047857; }
.cal-toast-info { background: var(--color-bg-subtle); border: 1px solid var(--color-border); color: var(--color-text); }
.cal-toast-warning { background: #fef3c7; border: 1px solid #f59e0b; color: #b45309; }

/* Chat notification toast – fixed at top when new messages arrive */
.chat-notification-toast {
    position: fixed;
    top: max(var(--spacing-md), env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    margin: var(--spacing-md);
    max-width: 400px;
    background: var(--color-surface);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    box-shadow: var(--shadow-lg);
    transition: transform 0.3s ease;
}
.chat-notification-toast.chat-notification-toast-visible {
    transform: translateX(-50%) translateY(0);
}
.chat-notification-toast-text {
    flex: 1;
}
.chat-notification-toast-link {
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}
.chat-notification-toast-link:hover {
    text-decoration: underline;
}
.chat-notification-toast-dismiss {
    flex-shrink: 0;
    padding: 0 var(--spacing-xs);
    font-size: 1.25rem;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    opacity: 0.8;
}
.chat-notification-toast-dismiss:hover {
    opacity: 1;
    color: var(--color-text);
}

.modal-event-invitees { margin-top: var(--spacing-lg); }
.modal-event-invitees-title { font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--spacing-sm); color: var(--color-text-secondary); }
.modal-event-invitees-list { list-style: none; padding: 0; margin: 0; }
.modal-event-invitees-list li { padding: var(--spacing-xs) 0; font-size: var(--text-sm); }
.invitee-response-accepted { color: #059669; font-weight: 500; }
.invitee-response-declined { color: var(--color-danger); font-weight: 500; }
.invitee-response-tentative { color: #d97706; font-weight: 500; }
.invitee-response-pending { color: var(--color-text-secondary); }

.modal-event-response-actions { margin-top: var(--spacing-lg); padding-top: var(--spacing-lg); border-top: 1px solid var(--color-border); }
.modal-event-response-prompt { font-size: var(--text-sm); margin-bottom: var(--spacing-sm); color: var(--color-text-secondary); }
.modal-event-response-btns { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }
.btn-response { padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius); cursor: pointer; font-size: var(--text-sm); font-weight: 500; }
.btn-response-accepted { border: 1px solid #059669; color: #047857; background: #d1fae5; }
.btn-response-accepted:hover { background: #a7f3d0; border-color: #047857; }
.btn-response-accepted.btn-response-active { background: #059669; border-color: #059669; color: #fff; }
.btn-response-accepted.btn-response-active:hover { background: #047857; border-color: #047857; color: #fff; }
.btn-response-declined { border: 1px solid var(--color-danger); color: var(--color-danger); background: var(--color-danger-bg); }
.btn-response-declined:hover { background: #fecaca; border-color: #b91c1c; color: #b91c1c; }
.btn-response-declined.btn-response-active { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }
.btn-response-declined.btn-response-active:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }

.modal-event-busy { color: var(--color-busy); }

.modal-event-busy-note {
    color: var(--color-busy);
    font-size: var(--text-sm);
    margin-top: var(--spacing-sm);
}

/* ---- FAB ---- */
.fab {
    position: fixed;
    bottom: var(--spacing-2xl);
    right: var(--spacing-2xl);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    box-shadow: var(--shadow-lg);
    z-index: 50;
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.fab:hover {
    background: var(--color-primary-hover);
    color: #fff;
    box-shadow: var(--shadow-xl);
}
.fab svg {
    flex-shrink: 0;
    stroke: currentColor;
}
.fab-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat-unread-badge-fab {
    top: -2px;
    right: -4px;
}

@media (prefers-reduced-motion: no-preference) {
    .fab:hover { transform: scale(1.05); }
}

/* ---- Event form (modern modal) ---- */
.event-form-section {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
}

.event-form-section:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.event-form-section-title {
    margin: 0 0 var(--spacing-md);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.event-form .event-form-calendar-type {
    margin-bottom: var(--spacing-md);
}
.event-form .event-form-calendar-type .event-form-label {
    display: block;
    font-weight: 500;
    font-size: var(--text-sm);
    margin-bottom: var(--spacing-xs);
    color: var(--color-text);
}
.event-form .event-form-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}
.event-form .event-form-radio {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--text-sm);
    cursor: pointer;
}
.event-form .event-form-radio input { width: auto; margin: 0; accent-color: var(--color-primary); }

.event-form .event-form-private {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    font-weight: 500;
    font-size: var(--text-sm);
    color: var(--color-text);
}

.event-form .event-form-private input { width: auto; margin: 0; accent-color: var(--color-primary); }

.event-form label {
    display: block;
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
    font-size: var(--text-sm);
    color: var(--color-text);
}

.event-form-section > label:first-of-type,
.event-form-section .event-form-field:first-child label { margin-top: 0; }

.event-form input[type="text"],
.event-form input[type="datetime-local"],
.event-form textarea,
.event-form select {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: var(--text-base);
    font-family: var(--font);
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.event-form input::placeholder,
.event-form textarea::placeholder {
    color: var(--color-text-muted);
}

.event-form input:focus,
.event-form textarea:focus,
.event-form select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-focus);
    outline: none;
}

.event-form textarea { resize: vertical; min-height: 4.5rem; }

.event-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: end;
}

.event-form-row-compact {
    gap: var(--spacing-md);
}

.event-form-repeat-row {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

.event-form input[type="datetime-local"] {
    min-width: 0;
    box-sizing: border-box;
}

.event-form-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.event-form-field label {
    flex-shrink: 0;
}
.event-form-field input,
.event-form-field select {
    flex-shrink: 0;
    min-width: 0;
    box-sizing: border-box;
}

/* Consistent height for paired inputs (aligns flatpickr, select, date) */
.event-form-row .event-form-field input,
.event-form-row .event-form-field select,
.event-form-row .event-form-field .flatpickr-input {
    min-height: 2.5rem;
}

.event-form .flatpickr-input[readonly] {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: var(--text-base);
    font-family: var(--font);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
}

.event-form .flatpickr-input[readonly]:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-focus);
    outline: none;
}

@media (max-width: 479px) {
    .event-form-row { grid-template-columns: 1fr; }
}

.event-form-field label { margin-top: 0; }

.event-form .form-actions {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: center;
}
.event-form .form-actions.event-form-actions {
    justify-content: space-between;
}

.event-form .form-actions .btn-primary {
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: 600;
    font-family: var(--font);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.event-form .form-actions .btn-primary:hover {
    background: var(--color-primary-hover);
}

.event-form .form-actions .btn-cancel {
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: 500;
    font-family: var(--font);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.event-form .form-actions .btn-cancel:hover {
    background: var(--color-busy-bg);
    border-color: var(--color-border);
}

/* ---- Outlook-style event form ---- */
.event-form-new-context {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}
.event-form-outlook .event-form-top-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}
.event-form-outlook .event-form-title-row {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius);
    background: var(--event-form-bg-a);
}
.event-form-outlook .event-form-title-row .event-form-title-wrap {
    flex: none;
    width: 100%;
}
.event-form-outlook .event-form-save-close {
    flex-shrink: 0;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--text-sm);
    font-weight: 600;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-family: var(--font);
    transition: background-color var(--transition-fast);
}
.event-form-outlook .event-form-save-close:hover {
    background: var(--color-primary-hover);
}
.event-form-outlook .event-form-title-wrap {
    flex: 1;
    min-width: 0;
}
.event-form-outlook .event-form-title-input {
    width: 100%;
    padding: var(--spacing-sm) 0;
    border: none;
    border-bottom: 2px solid var(--color-border);
    border-radius: 0;
    font-size: var(--text-lg);
    font-weight: 500;
    background: transparent;
    color: var(--color-text);
    transition: border-color var(--transition-fast);
}
.event-form-outlook .event-form-title-input::placeholder {
    color: var(--color-text-muted);
}
.event-form-outlook .event-form-title-input:focus {
    border-bottom-color: var(--color-primary);
    box-shadow: none;
    outline: none;
}

.event-form-outlook .event-form-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}
.event-form-outlook .event-form-datetime {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    border-radius: var(--radius);
    background: var(--event-form-bg-b);
}
.event-form-outlook .event-form-start-row label,
.event-form-outlook .event-form-end-row label {
    margin-top: 0;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.event-form-outlook .event-form-datetime-input-wrap {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    position: relative;
}
.event-form-outlook .event-form-cal-icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    background-color: var(--color-text-muted);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}
.event-form-outlook .event-form-datetime-input-wrap input,
.event-form-outlook .event-form-datetime-input-wrap .flatpickr-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-sm);
}
.event-form-outlook .event-form-datetime-input-wrap.event-form-allday input {
    border: 1px solid var(--color-border);
}
.event-form-outlook .event-form-options-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xs);
}
.event-form-outlook .event-form-all-day-label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
}
.event-form-outlook .event-form-all-day-label input {
    width: auto;
    accent-color: var(--color-primary);
}
.event-form-outlook .event-form-make-recurring {
    background: none;
    border: none;
    padding: 0;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-primary);
    cursor: pointer;
    font-family: var(--font);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
    transition: color var(--transition-fast);
}
.event-form-outlook .event-form-make-recurring:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}
.event-form-outlook .event-form-recurrence-icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'%3E%3C/path%3E%3Cpath d='M3 3v5h5'%3E%3C/path%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'%3E%3C/path%3E%3Cpath d='M3 3v5h5'%3E%3C/path%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}
.event-form-outlook .event-form-repeat-wrap {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
}
.event-form-outlook .event-form-location-row label {
    margin-top: 0;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.event-form-outlook .event-form-location-input {
    width: 100%;
    padding: var(--spacing-sm) 0;
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    font-size: var(--text-base);
    background: transparent;
    color: var(--color-text);
    transition: border-color var(--transition-fast);
}
.event-form-outlook .event-form-location-input:focus {
    border-bottom-color: var(--color-primary);
    outline: none;
    box-shadow: none;
}
.event-form-outlook .event-form-in-folder {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: 0;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius);
    background: var(--event-form-bg-c);
}
.event-form-outlook .event-form-folder-icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    background-color: var(--color-text-muted);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}
.event-form-outlook .event-form-more-toggle-wrap {
    margin-top: var(--spacing-lg);
}
.event-form-outlook .event-form-more-toggle {
    background: none;
    border: none;
    padding: 0;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-primary);
    cursor: pointer;
    font-family: var(--font);
}
.event-form-outlook .event-form-more-toggle:hover {
    text-decoration: underline;
}
.event-form-outlook .event-form-more {
    margin-top: var(--spacing-md);
    padding: var(--spacing-lg);
    border-radius: var(--radius);
    background: var(--event-form-bg-b);
    border: 1px solid var(--color-border);
}
.event-form-outlook .event-form-more .event-form-section {
    margin-bottom: var(--spacing-lg);
}
.event-form-outlook .event-form-more .event-form-section:last-of-type {
    margin-bottom: 0;
}

.event-form-outlook .event-form-add-to-main {
    margin-top: 0;
    padding: var(--spacing-lg);
    border-radius: var(--radius);
    background: var(--event-form-bg-d);
}
.event-form-outlook .event-form-add-to-main .event-form-calendar-type {
    margin-bottom: var(--spacing-sm);
}
.event-form-outlook .event-form-add-to-main .event-form-private {
    margin-top: var(--spacing-sm);
}

.event-form-outlook .event-form-type-category-main {
    margin-top: 0;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius);
    background: var(--event-form-bg-b);
}
.event-form-outlook .event-form-type-category-main .event-form-field label {
    margin-top: 0;
}

.event-form-outlook .event-form-invite-main {
    margin-top: 0;
    padding: var(--spacing-lg);
    border-radius: var(--radius);
    background: var(--event-form-bg-c);
}
.event-form-outlook .event-form-invite-main .event-form-section-title {
    margin: 0 0 var(--spacing-sm);
}
.event-form-outlook .event-form-invite-main label {
    margin-top: 0;
}
.event-form-outlook .event-form-invite-main select[multiple] {
    min-height: 72px;
    max-height: 100px;
    width: 100%;
}

.event-form select[multiple] {
    min-height: 100px;
    padding: var(--spacing-sm);
}

.event-form select[multiple] option {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
}

.event-form .reminder-options {
    margin: 0;
    border: none;
    padding: 0;
    background: transparent;
}

.event-form .reminder-options legend {
    padding: 0;
    margin: 0 0 var(--spacing-sm);
    font-weight: 500;
    font-size: var(--text-sm);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.event-form .reminder-option {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: 0 var(--spacing-lg) var(--spacing-sm) 0;
}

.event-form .reminder-option input {
    margin: 0;
    accent-color: var(--color-primary);
}

/* Flatpickr (date/time picker) – match app theme */
.flatpickr-calendar {
    font-family: var(--font) !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: var(--shadow-xl) !important;
    background: var(--color-surface-elevated) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background: var(--color-busy-bg) !important;
    border-color: var(--color-busy-bg) !important;
}

.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
    background: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}

.flatpickr-day.today {
    border-color: var(--color-primary);
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .numInputWrapper {
    background: var(--color-surface-elevated) !important;
    color: var(--color-text) !important;
}

.flatpickr-weekdays {
    background: transparent;
}

span.flatpickr-weekday {
    color: var(--color-text-muted);
}

.flatpickr-time input:hover,
.flatpickr-time input:focus {
    background: var(--color-busy-bg) !important;
}

.flatpickr-time .numInputWrapper span.arrowUp:after,
.flatpickr-time .numInputWrapper span.arrowDown:after {
    border-bottom-color: var(--color-text-muted) !important;
    border-top-color: var(--color-text-muted) !important;
}

.flatpickr-time .numInputWrapper:hover span.arrowUp:after,
.flatpickr-time .numInputWrapper:hover span.arrowDown:after {
    border-bottom-color: var(--color-primary) !important;
    border-top-color: var(--color-primary) !important;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowBottom:before {
    border-bottom-color: var(--color-border) !important;
    border-top-color: var(--color-border) !important;
}


#invite-form .btn-primary {
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: 600;
    font-family: var(--font);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

#invite-form .btn-primary:hover {
    background: var(--color-primary-hover);
}

/* Import from invite modal */
#import-modal h2 {
    margin: 0 0 var(--spacing-md);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-text);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}
.import-desc {
    margin: 0 0 var(--spacing-xl);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}
.import-group {
    margin-bottom: var(--spacing-xl);
}
.import-label {
    display: block;
    font-weight: 600;
    font-size: var(--text-sm);
    margin-bottom: var(--spacing-sm);
    color: var(--color-text);
}
#import-file {
    width: 100%;
    padding: var(--spacing-sm);
    font-size: var(--text-sm);
    font-family: var(--font);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
}
.import-paste {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-family: var(--font);
    background: var(--color-surface);
    color: var(--color-text);
    resize: vertical;
    min-height: 8rem;
    box-sizing: border-box;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.import-paste::placeholder {
    color: var(--color-text-muted);
}
.import-paste:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-focus);
    outline: none;
}
#import-form .form-actions {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: center;
}
.import-message {
    margin-top: var(--spacing-lg);
    font-size: var(--text-sm);
    color: var(--color-success);
}
.import-message:empty { display: none; }

/* Feedback modal */
#feedback-modal .modal-content {
    max-width: 440px;
}
#feedback-modal h2 {
    margin: 0 0 var(--spacing-md);
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--color-text);
}
.feedback-desc {
    margin: 0 0 var(--spacing-xl);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}
.feedback-group {
    margin-bottom: var(--spacing-xl);
}
.feedback-group label {
    display: block;
    font-weight: 600;
    font-size: var(--text-sm);
    margin-bottom: var(--spacing-sm);
    color: var(--color-text);
}
.feedback-text {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: var(--text-base);
    font-family: var(--font);
    resize: vertical;
    min-height: 6rem;
    background: var(--color-surface);
    color: var(--color-text);
    box-sizing: border-box;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.feedback-text::placeholder {
    color: var(--color-text-muted);
}
.feedback-text:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-focus);
    outline: none;
}
#feedback-form .form-actions {
    margin-top: var(--spacing-xl);
}
.feedback-msg {
    margin-top: var(--spacing-md);
    font-size: var(--text-sm);
    color: var(--color-error, #dc2626);
}
.feedback-msg:empty { display: none; }

/* Profile modal – improved styles */
#profile-modal .modal-content {
    max-width: 440px;
    box-shadow: var(--shadow-xl);
}
#profile-modal h2 {
    margin: 0 0 var(--spacing-xl);
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--color-text);
    padding-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--color-border);
    letter-spacing: -0.02em;
}
.profile-info-group {
    margin-bottom: var(--spacing-xl);
}
.profile-info-group label {
    display: block;
    font-weight: 600;
    font-size: var(--text-sm);
    margin-bottom: var(--spacing-sm);
    color: var(--color-text);
}
.profile-info-text {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: var(--text-base);
    font-family: var(--font);
    resize: vertical;
    min-height: 6rem;
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.profile-info-text::placeholder {
    color: var(--color-text-muted);
}
.profile-info-text:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--color-primary-focus);
}
#profile-form .form-actions {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: center;
    border-top: 1px solid var(--color-border);
}
#profile-form .btn-primary {
    padding: var(--spacing-md) var(--spacing-xl);
    min-height: 44px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: 600;
    font-family: var(--font);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}
#profile-form .btn-primary:hover {
    background: var(--color-primary-hover);
}
#profile-form .btn-primary:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-primary-focus);
}
#profile-form .btn-cancel {
    padding: var(--spacing-md) var(--spacing-xl);
    min-height: 44px;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: 500;
    font-family: var(--font);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
#profile-form .btn-cancel:hover {
    background: var(--color-busy-bg);
    border-color: var(--color-text-muted);
}
.profile-message {
    margin-top: var(--spacing-lg);
    font-size: var(--text-sm);
    color: var(--color-success);
    font-weight: 500;
}
.profile-message:empty { display: none; }
.profile-availability-section {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-xl);
    border-top: 2px solid var(--color-border);
}
.profile-section-title {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
#profile-modal .availability-desc {
    margin: 0 0 var(--spacing-lg);
    line-height: 1.5;
    color: var(--color-text-muted);
}
#profile-modal .availability-group {
    margin-bottom: var(--spacing-lg);
}
#profile-modal .availability-group:last-of-type {
    margin-bottom: 0;
}
#profile-modal .availability-hours input[type="time"] {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius);
}

/* Availability modal – match invite/settings theme */
#availability-modal h2 {
    margin: 0 0 var(--spacing-md);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-text);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}
.availability-desc {
    margin: 0 0 var(--spacing-xl);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}
.availability-group {
    margin-bottom: var(--spacing-xl);
}
.availability-label {
    display: block;
    font-weight: 600;
    font-size: var(--text-sm);
    margin-bottom: var(--spacing-sm);
    color: var(--color-text);
}
.availability-days {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}
.availability-day {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-sm);
    color: var(--color-text);
    cursor: pointer;
}
.availability-day input[type="checkbox"] {
    accent-color: var(--color-primary);
    width: 1.125rem;
    height: 1.125rem;
    cursor: pointer;
}
.availability-hours {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}
.availability-hours input[type="time"] {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-sm);
    font-family: var(--font);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.availability-hours input[type="time"]:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-focus);
    outline: none;
}
.availability-hours-sep {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.availability-message {
    margin-top: var(--spacing-md);
    font-size: var(--text-sm);
    color: var(--color-success);
}
.availability-message:empty { display: none; }
#availability-form .form-actions {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: center;
}
#availability-form .btn-primary {
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: 600;
    font-family: var(--font);
    transition: background-color var(--transition-fast);
}
#availability-form .btn-primary:hover {
    background: var(--color-primary-hover);
}
#availability-form .btn-cancel {
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: var(--text-base);
    font-family: var(--font);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
#availability-form .btn-cancel:hover {
    background: var(--color-busy-bg);
    border-color: var(--color-border);
}

/* Settings modal */
.settings-group {
    margin-top: var(--spacing-xl);
}

.settings-group:first-of-type { margin-top: 0; }

.settings-label {
    display: block;
    font-weight: 600;
    font-size: var(--text-sm);
    margin-bottom: var(--spacing-sm);
    color: var(--color-text);
}

.settings-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

.settings-option {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-base);
    cursor: pointer;
}

.settings-option input { margin: 0; }

/* Team section in Settings */
.settings-group-team .settings-team-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    min-height: 2rem;
}
.settings-team-member {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--color-busy-bg);
    border-radius: var(--radius);
    font-size: var(--text-sm);
}
.settings-team-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--member-color, var(--color-text-muted));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: 600;
    flex-shrink: 0;
}
.settings-team-name { font-weight: 500; color: var(--color-text); }
.settings-team-empty { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--spacing-md); }
.settings-team-actions { margin-top: var(--spacing-md); }
.settings-team-subtitle {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin: var(--spacing-lg) 0 var(--spacing-sm);
}
.settings-group-team .settings-team-subtitle:first-of-type { margin-top: 0; }
.settings-team-form { margin-bottom: var(--spacing-sm); }
.settings-team-form-row {
    margin-bottom: var(--spacing-sm);
}
.settings-team-form-row label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text);
}
.settings-team-form-row input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
}
.settings-team-form .cal-btn { margin-top: var(--spacing-xs); }
.settings-team-message {
    font-size: var(--text-sm);
    margin: var(--spacing-xs) 0 var(--spacing-md);
}
.settings-team-message-success { color: var(--color-success); }
.settings-team-message-error { color: var(--color-danger); }

#invite-form .btn-primary {
    width: 100%;
    min-height: 44px;
}

/* Pending invitations modal – dark on light for readability */
#pending-invites-modal .modal-close {
    color: var(--color-text);
    background: var(--color-background);
}
#pending-invites-modal .modal-close:hover {
    background: var(--color-border);
    color: var(--color-text);
}
.pending-invites-intro {
    font-size: var(--text-sm);
    color: #374151;
    line-height: 1.5;
    margin: 0 0 var(--spacing-md);
}
.pending-invites-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-height: 60vh;
    overflow-y: auto;
}
.pending-invites-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid var(--color-border);
    border-left-width: 4px;
    border-left-color: var(--color-primary);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}
.pending-invites-item-info {
    flex: 1;
    min-width: 0;
}
.pending-invites-item-title {
    display: block;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 2px;
}
.pending-invites-item-date {
    font-size: var(--text-sm);
    color: #4b5563;
    line-height: 1.4;
}
.pending-invites-item-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}
.pending-invites-item-actions .btn-pending-accept {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-sm);
    font-weight: 500;
    border: 1px solid #059669;
    background: #d1fae5;
    color: #047857;
}
.pending-invites-item-actions .btn-pending-accept:hover {
    background: #a7f3d0;
    border-color: #047857;
    color: #047857;
}
.pending-invites-item-actions .btn-pending-decline {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-sm);
    font-weight: 500;
    border: 1px solid var(--color-danger);
    background: var(--color-danger-bg);
    color: var(--color-danger);
}
.pending-invites-item-actions .btn-pending-decline:hover {
    background: #fecaca;
    border-color: #b91c1c;
    color: #b91c1c;
}
.pending-invites-empty {
    font-size: var(--text-sm);
    color: #4b5563;
    margin: 0;
}
.btn-pending-invites .pending-invites-badge {
    font-weight: 600;
}
@media (max-width: 480px) {
    .pending-invites-item {
        flex-direction: column;
        align-items: stretch;
    }
    .pending-invites-item-actions {
        flex-direction: column;
        width: 100%;
    }
    .pending-invites-item-actions .btn-pending-accept,
    .pending-invites-item-actions .btn-pending-decline {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }
}
.pending-invites-item-test {
    border-left-color: var(--color-primary);
    background: rgba(16, 110, 48, 0.06);
}
.pending-invites-item-test .pending-invites-item-title { color: var(--color-primary); }

/* Touch targets */
.modal-actions button,
.event-form .form-actions button,
.event-form .form-actions .btn-cancel,
#invite-form button {
    min-height: 44px;
    min-width: 44px;
    padding: var(--spacing-md) var(--spacing-xl);
}

.modal-close { min-width: 44px; min-height: 44px; }

.fab { min-width: 56px; min-height: 56px; }

/* ---- Desktop: centered modal ---- */
@media (min-width: 768px) {
    .modal { align-items: center; }
    .modal-content {
        border-radius: var(--radius-lg);
        margin: var(--spacing-lg);
        max-height: calc(100vh - 2rem);
    }
    @media (prefers-reduced-motion: no-preference) {
        .modal[aria-hidden="false"] .modal-content {
            animation: modalIn 0.2s ease;
        }
    }
    /* Event form modal: wider Outlook-style layout on desktop, two-column where appropriate */
    #event-form-modal .modal-content {
        max-width: 720px;
        max-height: 96vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    #event-form-modal .event-form-outlook .event-form-datetime {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-lg);
        align-items: end;
    }
    #event-form-modal .event-form-outlook .event-form-datetime .event-form-options-row,
    #event-form-modal .event-form-outlook .event-form-datetime .event-form-recurrence-trigger,
    #event-form-modal .event-form-outlook .event-form-datetime .event-form-repeat-wrap {
        grid-column: 1 / -1;
    }
    #event-form-modal .event-form-outlook .event-form-invite-main {
        min-height: 0;
    }
    #event-form-modal .event-form-outlook .event-form-invite-main select[multiple] {
        min-height: 80px;
        max-height: 120px;
    }
    #event-form-modal .modal-content > div {
        padding: var(--spacing-lg);
    }
    #event-form-modal #event-form-modal-body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 3rem;
    }
    #event-form-modal .event-form-outlook .form-actions {
        margin-top: var(--spacing-md);
        padding-top: var(--spacing-md);
    }
    #event-form-modal .event-form-section {
        margin-bottom: var(--spacing-md);
        padding-bottom: var(--spacing-md);
    }
    #event-form-modal .event-form-section:last-of-type {
        margin-bottom: 0;
        padding-bottom: 0;
    }
    #event-form-modal .event-form-section-title {
        margin-bottom: var(--spacing-sm);
    }
    #event-form-modal .event-form label {
        margin-top: var(--spacing-sm);
    }
    #event-form-modal .event-form-section > label:first-of-type,
    #event-form-modal .event-form-section .event-form-field:first-child label {
        margin-top: 0;
    }
    #event-form-modal .event-form input[type="text"],
    #event-form-modal .event-form input[type="datetime-local"],
    #event-form-modal .event-form input[type="date"],
    #event-form-modal .event-form select:not([multiple]) {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    #event-form-modal .event-form textarea {
        min-height: 2.25rem;
        max-height: 3.5rem;
        padding: var(--spacing-sm) var(--spacing-md);
    }
    #event-form-modal .event-form select[multiple] {
        min-height: 56px;
        max-height: 72px;
        padding: var(--spacing-xs) var(--spacing-md);
    }
    #event-form-modal .event-form-row {
        gap: var(--spacing-md);
    }
    #event-form-modal .event-form-repeat-row {
        margin-top: var(--spacing-sm);
        padding-top: var(--spacing-sm);
    }
    #event-form-modal .event-form .event-form-private {
        margin-top: var(--spacing-sm);
    }
    #event-form-modal .event-form-find-time-desc {
        margin-bottom: var(--spacing-sm);
    }
    #event-form-modal .event-form-find-time-btns {
        margin-bottom: var(--spacing-sm);
    }
    #event-form-modal .event-form-availability-grid {
        max-height: 180px;
    }
    #event-form-modal .event-form .reminder-option {
        word-break: break-word;
    }
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* ---- Responsive: extra small (320px–479px) ---- */
@media (max-width: 479px) {
    :root {
        --page-padding-x: var(--spacing-md);
        --page-padding-y: var(--spacing-md);
        --header-padding-x: var(--spacing-md);
        --header-padding-y: var(--spacing-md);
    }
    .login-page {
        padding: var(--spacing-md);
        padding-left: max(var(--spacing-md), env(safe-area-inset-left));
        padding-right: max(var(--spacing-md), env(safe-area-inset-right));
    }
    .login-box {
        padding: var(--spacing-lg);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .login-box input,
    .login-box button {
        min-height: 44px;
        box-sizing: border-box;
    }
    .calendar-header h1 { font-size: var(--text-lg); }
    .modal-content > div { padding: var(--spacing-lg); }
    .event-form .form-actions { flex-direction: column; width: 100%; }
    .event-form .form-actions .btn-primary,
    .event-form .form-actions .btn-cancel { width: 100%; }
    .event-form-outlook .event-form-top-row { flex-direction: column; align-items: stretch; }
    .event-form-outlook .event-form-save-close { width: 100%; }
    .modal-actions { flex-direction: column; }
    .modal-actions button { width: 100%; }
    .import-paste { min-height: 6rem; padding: var(--spacing-md); }
    #import-form .form-actions { flex-direction: column; }
    #import-form .form-actions button { width: 100%; min-height: 44px; }
    .cal-toolbar-title { font-size: var(--text-base); }
    .cal-btn, .cal-view-btn { padding: var(--spacing-xs) var(--spacing-md); font-size: var(--text-xs); }
    .fab { bottom: max(var(--spacing-lg), env(safe-area-inset-bottom)); right: max(var(--spacing-lg), env(safe-area-inset-right)); }
}

/* ---- Responsive: extra-extra small (320px–359px) ---- */
@media (max-width: 359px) {
    :root {
        --page-padding-x: var(--spacing-sm);
        --page-padding-y: var(--spacing-sm);
        --header-padding-x: var(--spacing-sm);
        --header-padding-y: var(--spacing-sm);
    }
    .header-title { font-size: var(--text-base); }
    .header-view-tabs .header-tab { font-size: 10px; padding: var(--spacing-xs) 4px; }
    .mobile-quick-nav-link { padding: var(--spacing-xs) var(--spacing-sm); font-size: var(--text-xs); }
    .cal-day-header { padding: var(--spacing-xs) 2px; font-size: 9px; }
    .cal-day-cell { min-height: 72px; padding: 4px; }
    .cal-toolbar-title { font-size: 0.875rem; }
    .cal-toolbar-row-primary .cal-btn,
    .cal-toolbar .cal-prev, .cal-toolbar .cal-next, .cal-toolbar .cal-today { min-width: 40px; min-height: 44px; }
    .cal-toolbar-row-secondary .cal-search-wrap { flex: 1 1 100%; min-width: 100%; }
    .mail-manage-add { flex-direction: column; align-items: stretch; }
    .mail-manage-add .mail-manage-input,
    .mail-manage-add .mail-manage-add-btn { width: 100%; }
    .login-page { padding: var(--spacing-sm); }
    .login-box { padding: var(--spacing-md); }
}

/* ---- Responsive: small (480px–767px) ---- */
@media (min-width: 480px) and (max-width: 767px) {
    :root {
        --page-padding-x: var(--spacing-lg);
        --page-padding-y: var(--spacing-lg);
        --header-padding-x: var(--spacing-lg);
        --header-padding-y: var(--spacing-md);
    }
    .fab { bottom: max(var(--spacing-xl), env(safe-area-inset-bottom)); right: max(var(--spacing-xl), env(safe-area-inset-right)); }
}

/* Mobile quick nav (Private | Mail) – shown only on mobile */
.mobile-quick-nav {
    display: none;
}
/* Mobile view dropdown – hidden on desktop */
.header-view-dropdown-mobile {
    display: none;
}

.mobile-quick-nav-link {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--text-sm);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.mobile-quick-nav-link:hover {
    background: rgba(255, 255, 255, 0.25);
    color: var(--header-text);
}

/* Bottom nav (mobile) */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-sm) 0;
    padding-bottom: max(var(--spacing-sm), env(safe-area-inset-bottom));
    flex: none;
    justify-content: space-around;
    align-items: stretch;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}

.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.6875rem;
    font-weight: 500;
    font-family: var(--font);
    border: none;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition-fast);
}

.bottom-nav-item:hover {
    color: var(--color-primary);
}

.bottom-nav-item:active {
    color: var(--color-primary);
}

a.bottom-nav-item {
    text-decoration: none;
}

.bottom-nav-active {
    color: var(--color-primary);
}

.calendar-page #bottom-nav-calendar {
    color: var(--color-primary);
}

.bottom-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.bottom-nav-icon svg {
    flex-shrink: 0;
}

.bottom-nav-label {
    line-height: 1.1;
}

/* Mobile drawer (theme-aligned) */
.mobile-drawer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
}

.mobile-drawer[aria-hidden="false"] {
    display: block;
    pointer-events: auto;
}

.mobile-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: var(--modal-backdrop);
    backdrop-filter: blur(2px);
}

.mobile-drawer-panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 88vw);
    background: var(--color-surface);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color-border);
}

.mobile-drawer-panel::before {
    content: '';
    display: block;
    height: 4px;
    background: var(--header-bg);
}

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

.mobile-drawer-title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text);
}

.mobile-drawer-close {
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.mobile-drawer-close:hover {
    background: var(--color-busy-bg);
    color: var(--color-text);
}

.mobile-drawer-close svg {
    flex-shrink: 0;
}

.mobile-drawer-body {
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: auto;
}

.mobile-drawer-section {
    margin-bottom: var(--spacing-lg);
}

.mobile-drawer-section:last-of-type {
    margin-bottom: var(--spacing-md);
}

.header-view-tabs-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.mobile-drawer-section-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 var(--spacing-sm);
}

.header-view-tabs-mobile {
    margin-bottom: 0;
}

.header-view-tabs-mobile .header-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--text-sm);
    font-weight: 500;
    border: none;
    border-radius: var(--radius);
    background: var(--color-busy-bg);
    color: var(--color-text);
    transition: background-color var(--transition-fast), color var(--transition-fast);
    margin-bottom: var(--spacing-xs);
}
.header-view-tabs-mobile .header-tab:last-child {
    margin-bottom: 0;
}

.header-view-tabs-mobile .header-tab.active {
    background: var(--color-primary);
    color: #fff;
}

.header-view-tabs-mobile .header-tab.active:hover {
    background: var(--color-primary-hover);
    color: #fff;
}

.mobile-drawer-divider {
    height: 1px;
    background: var(--color-border);
    margin: var(--spacing-lg) 0;
}

.mobile-drawer-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: var(--font);
    transition: background-color var(--transition-fast), color var(--transition-fast);
    width: 100%;
    min-height: 48px;
}

.mobile-drawer-link:hover {
    background: var(--color-busy-bg);
    color: var(--color-primary);
}

.mobile-drawer-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.mobile-drawer-link:hover .mobile-drawer-icon {
    color: var(--color-primary);
}

.mobile-drawer-link-logout .mobile-drawer-icon {
    color: var(--color-text-muted);
}

.mobile-drawer-link-logout:hover .mobile-drawer-icon {
    color: var(--color-danger);
}

.mobile-drawer-link-logout {
    color: var(--color-text-muted);
}
.mobile-drawer-link-logout:hover {
    color: var(--color-danger);
}

.mobile-drawer-link-form {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    width: 100%;
}
.mobile-drawer-link-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--text-base);
    font-weight: 500;
    color: inherit;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    border-radius: var(--radius);
    min-height: 48px;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.mobile-drawer-link-form .mobile-drawer-link-logout {
    color: var(--color-text-muted);
}
.mobile-drawer-link-form:hover .mobile-drawer-link-btn {
    background: var(--color-busy-bg);
    color: var(--color-danger);
}
.mobile-drawer-link-form:hover .mobile-drawer-link-btn .mobile-drawer-icon {
    color: var(--color-danger);
}

.header-hamburger {
    display: none;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 1.25rem;
    border: none;
    background: none;
    color: var(--header-text);
    cursor: pointer;
}

.header-add-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    color: var(--header-text);
    text-decoration: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.header-add-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    color: var(--header-text);
}
.header-chat-btn {
    display: flex !important;
    flex: 0 0 auto;
}
.header-chat-btn svg {
    width: 20px;
    height: 20px;
}

/* ---- Responsive: mobile (sidebar hidden, single column) ---- */
@media (max-width: 767px) {
    /* Header: no hamburger on calendar – use bottom nav "Menu" only; mail page shows hamburger for drawer */
    .header-hamburger { display: none !important; }
    .mail-page .header-hamburger { display: none !important; }
    .calendar-header {
        flex-wrap: wrap;
        align-items: center;
        padding: var(--header-padding-y) var(--header-padding-x);
        padding-left: max(var(--header-padding-x), env(safe-area-inset-left));
        padding-right: max(var(--header-padding-x), env(safe-area-inset-right));
        gap: var(--spacing-sm);
    }
    /* Row 1: brand | calendar switch (+ add hidden, mail in bottom nav) */
    .header-brand { min-width: 0; flex: 1; order: 1; }
    .header-actions { order: 2; flex-shrink: 0; }
    .calendar-page .header-actions { display: none !important; }
    .mail-page .header-actions { display: none !important; }
    .chat-page .header-actions { display: none !important; }
    .header-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; font-size: var(--text-lg); }
    .header-actions::before { display: none; }
    .header-user-wrap::before { display: none; }
    .cal-timezone-bar { padding: var(--spacing-xs) var(--header-padding-x); font-size: var(--text-xs); gap: var(--spacing-xs) var(--spacing-md); }
    .cal-tz-item::before { min-width: 3.5em; }
    /* View tabs: hidden on mobile – use dropdown instead */
    .header-view-tabs { display: none !important; }
    /* Mobile view dropdown */
    .header-view-dropdown-mobile { display: block !important; order: 10; flex: 0 1 auto; width: auto; min-width: 120px; margin-top: var(--spacing-xs); }
    .header-view-dropdown-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-sm);
        width: 100%;
        min-height: 44px;
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--text-sm);
        font-weight: 500;
        font-family: var(--font);
        color: var(--header-text);
        background: rgba(255,255,255,0.15);
        border: 1px solid rgba(255,255,255,0.25);
        border-radius: var(--radius);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .header-view-dropdown-btn:hover { background: rgba(255,255,255,0.22); }
    .header-view-dropdown-chevron { font-size: 0.7em; opacity: 0.9; }
    .header-view-dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 4px;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-lg);
        z-index: 50;
        overflow: hidden;
    }
    .header-view-dropdown-menu[hidden] { display: none !important; }
    .header-view-dropdown-menu .header-view-dropdown-item {
        display: block;
        width: 100%;
        padding: var(--spacing-md);
        text-align: left;
        font-size: var(--text-sm);
        font-weight: 500;
        font-family: var(--font);
        color: var(--color-text);
        background: none;
        border: none;
        cursor: pointer;
        transition: background var(--transition-fast);
    }
    .header-view-dropdown-menu .header-view-dropdown-item:hover { background: var(--color-busy-bg); }
    .header-view-dropdown-menu .header-view-dropdown-item.active { background: var(--color-primary); color: #fff; }
    .header-view-dropdown-wrap { position: relative; }
    /* Mobile quick nav: calendar switch (Private on team, Team on private) – prominent */
    .mobile-quick-nav { display: flex !important; flex: 1 1 auto; order: 2; margin-top: 0; margin-left: auto; gap: 0; min-height: 44px; align-items: center; }
    .mobile-quick-nav-link {
        min-height: 44px;
        padding: var(--spacing-sm) var(--spacing-lg);
        font-size: var(--text-sm);
        font-weight: 600;
        background: rgba(255,255,255,0.2);
        border: 1px solid rgba(255,255,255,0.3);
    }
    .mobile-quick-nav-link:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
    .mobile-quick-nav-link:last-child { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
    .mobile-quick-nav-link:only-child { border-radius: var(--radius-pill); }
    .mail-page .mobile-quick-nav { flex: 0 1 auto; }
    .chat-page .mobile-quick-nav { flex: 0 1 auto; }
    .mobile-quick-nav-link { align-items: center; -webkit-tap-highlight-color: transparent; }
    .header-view-tabs .header-tab {
        flex: 1;
        min-height: 44px;
        padding: var(--spacing-sm) var(--spacing-xs);
        font-size: var(--text-xs);
    }
    .header-calendar-btn { display: none !important; }
    .header-guide-btn { display: none !important; }
    .header-chat-btn { display: none !important; }
    .btn-invite-header { display: none !important; }
    .header-user-wrap { display: none !important; }
    .bottom-nav { display: flex; }
    .fab.fab-chat { display: flex !important; bottom: max(88px, calc(72px + env(safe-area-inset-bottom, 0))); right: max(var(--spacing-lg), env(safe-area-inset-right)); }
    .modal { align-items: flex-end; }
    .modal-content {
        max-height: 85vh;
        max-height: calc(100dvh * 0.85 - env(safe-area-inset-bottom, 0));
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        margin: 0;
        padding-bottom: max(var(--spacing-xl), env(safe-area-inset-bottom));
    }
    .calendar-main {
        padding: var(--page-padding-y) var(--page-padding-x);
        padding-bottom: max(72px, calc(64px + env(safe-area-inset-bottom, 0)));
        padding-left: max(var(--page-padding-x), env(safe-area-inset-left));
        padding-right: max(var(--page-padding-x), env(safe-area-inset-right));
    }
    .calendar-sidebar { display: none; }
    .calendar-layout { flex-direction: column; gap: 0; }
    .cal-content {
        padding: var(--spacing-md);
        padding-left: max(var(--spacing-md), env(safe-area-inset-left));
        padding-right: max(var(--spacing-md), env(safe-area-inset-right));
        background: var(--color-background);
    }
    .cal-toolbar {
        margin-top: 0;
        margin-bottom: var(--spacing-md);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }
    .cal-toolbar-row { padding: var(--spacing-sm) var(--spacing-md); }
    .cal-toolbar-row-primary { padding: var(--spacing-md); }
    .cal-toolbar-row-secondary { padding: var(--spacing-sm) var(--spacing-md); padding-top: var(--spacing-xs); padding-bottom: var(--spacing-sm); }
    .cal-toolbar-row-primary .cal-btn,
    .cal-toolbar .cal-prev, .cal-toolbar .cal-next, .cal-toolbar .cal-today { min-width: 44px; min-height: 44px; }
    .cal-toolbar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    .cal-toolbar .cal-btn-add, .cal-toolbar .cal-btn-more, .cal-toolbar .cal-btn-settings { min-height: 44px; }
    .cal-search-input { min-width: 0; min-height: 44px; padding: var(--spacing-sm) var(--spacing-md); }
    .cal-toolbar-divider { display: none; }
    .cal-toolbar-row-secondary { flex-wrap: wrap; gap: var(--spacing-sm); }
    .cal-toolbar-row-secondary .cal-toolbar-group { flex-wrap: wrap; }
    /* Hide redundant calendar label on mobile */
    .cal-filter-label { display: none !important; }
    #calendar { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
    /* Month view: readability and touch targets */
    .cal-day-header { padding: var(--spacing-xs) 2px; font-size: 10px; }
    .cal-day-cell { min-height: 92px; padding: 4px; overflow: hidden; }
    .cal-day-number { font-size: var(--text-sm); }
    .cal-event {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        padding: 5px 6px;
        overflow: hidden;
        min-height: 32px;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
        border-radius: 6px;
    }
    .cal-event .cal-event-time { flex-shrink: 0; }
    .cal-event .cal-event-title {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .cal-event-multiday { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cal-time-event { font-size: 10px; padding: 4px 6px; min-height: 32px; }
    .cal-day-cell { border-color: rgba(0,0,0,0.06); }
    .cal-day-today { background: rgba(16, 110, 48, 0.06); }
    /* Time grid: week/day view */
    .cal-time-axis-header,
    .cal-time-axis { width: 40px; min-width: 40px; font-size: 9px; }
    .cal-time-day-header { padding: var(--spacing-xs) var(--spacing-xs); font-size: 10px; }
    .cal-time-columns { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .cal-time-day-col { min-width: 64px; }
    .cal-time-slot { min-height: 36px; }
    /* List (Agenda) view */
    .cal-list-event { min-height: 48px; padding: var(--spacing-md) var(--spacing-lg); font-size: var(--text-sm); }
    .cal-list-heading { font-size: var(--text-base); margin-bottom: var(--spacing-md); }
    .cal-list-day-title { font-size: var(--text-sm); margin-bottom: var(--spacing-sm); }
    /* Bottom nav: touch targets and safe area */
    .bottom-nav { min-height: 64px; padding-top: var(--spacing-sm); align-items: stretch; }
    .bottom-nav-item { min-height: 44px; padding: var(--spacing-xs) var(--spacing-sm); display: flex; align-items: center; justify-content: center; gap: 2px; font-size: 0.6875rem; }
    .bottom-nav-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
    /* Mobile drawer: touch targets and safe area */
    .mobile-drawer-link { min-height: 48px; }
    .mobile-drawer-panel { padding-left: env(safe-area-inset-left); }
    .header-view-tabs-mobile .header-tab { min-height: 44px; }
    /* Guide modal: scroll and safe area for Got it */
    .guide-modal .modal-content { padding-bottom: max(var(--spacing-xl), env(safe-area-inset-bottom)); }
    .guide-actions .guide-got-it { min-height: 48px; }
    /* Focus visible for toolbar and key controls */
    .cal-toolbar .cal-btn:focus-visible,
    .header-hamburger:focus-visible,
    .header-chat-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
    /* Mail page: mobile header – compact single row */
    .mail-page .calendar-header { flex-wrap: nowrap; }
    .mail-page .header-brand { flex: 1; min-width: 0; }
    .mail-page .header-title { font-size: var(--text-lg); }
    /* Chat page: mobile header */
    .chat-page .calendar-header { flex-wrap: nowrap; }
    .chat-page .header-brand { flex: 1; min-width: 0; }
    .chat-page .header-title { font-size: var(--text-lg); }
    /* Mail page: mobile layout */
    .mail-main { padding-bottom: max(72px, calc(64px + env(safe-area-inset-bottom, 0))); }
    /* Chat page: mobile layout */
    .chat-main { padding-bottom: max(72px, calc(64px + env(safe-area-inset-bottom, 0))); }
    /* Jobs page: mobile layout */
    .jobs-page .calendar-header { flex-wrap: nowrap; }
    .jobs-page .header-brand { flex: 1; min-width: 0; }
    .jobs-page .header-title { font-size: var(--text-lg); }
    .jobs-add-row { flex-direction: column; align-items: stretch; }
    .jobs-add-input { min-width: 0; }
    .jobs-priority-select, .jobs-assign-select { min-width: 0; }
    .jobs-priority-key { font-size: var(--text-xs); gap: var(--spacing-xs) var(--spacing-md); }
    .mail-wrap { padding: var(--spacing-lg) var(--spacing-md); }
    .mail-mailboxes .mail-mailbox-btn { min-width: 0; width: 100%; }
    .mail-card { padding: var(--spacing-lg); }
    .mail-manage-panel,
    .mail-card-help { padding: var(--spacing-md); }
    .mail-manage-move,
    .mail-manage-remove,
    .mail-manage-add-btn { min-width: 44px; min-height: 44px; }
}

/* ---- Responsive: iPhone-like (360px–430px) – compact for 393x852 ---- */
@media (max-width: 430px) {
    :root {
        --page-padding-x: var(--spacing-md);
        --page-padding-y: var(--spacing-md);
        --header-padding-x: var(--spacing-md);
        --header-padding-y: var(--spacing-sm);
    }
    /* Calendar: reduce day cell height to fit viewport */
    .cal-day-cell { min-height: 70px; padding: 4px; }
    .cal-day-header { padding: 2px 2px; font-size: 9px; }
    .cal-time-slot { min-height: 30px; }
    .cal-time-axis-header,
    .cal-time-axis { width: 36px; min-width: 36px; font-size: 8px; }
    .cal-time-day-header { padding: 2px 4px; font-size: 9px; }
    .cal-time-day-col { min-width: 56px; }
    .cal-event { font-size: 10px; padding: 4px 5px; min-height: 28px; }
    .cal-time-event { font-size: 9px; padding: 3px 5px; min-height: 28px; }
    /* Timezone bar: compact */
    .cal-timezone-bar { padding: var(--spacing-xs) var(--spacing-md); font-size: var(--text-xs); gap: var(--spacing-xs) var(--spacing-sm); }
    .cal-tz-item::before { min-width: 3em; }
    /* Toolbar: compact */
    .cal-toolbar-row-primary { padding: var(--spacing-sm) var(--spacing-md); }
    .cal-toolbar-row-secondary { padding: var(--spacing-xs) var(--spacing-md); }
    /* Jobs: 2-col priority+assign side by side, compact */
    .jobs-add-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-sm); align-items: stretch; }
    .jobs-add-row .jobs-add-input { grid-column: 1 / -1; }
    .jobs-add-row .jobs-priority-select,
    .jobs-add-row .jobs-assign-select { min-width: 0; }
    .jobs-add-row .jobs-add-btn { grid-column: 1 / -1; }
    .jobs-add-form { padding: var(--spacing-sm); }
    .jobs-priority-key { font-size: 10px; gap: var(--spacing-xs) var(--spacing-sm); }
    .jobs-filter-tab { padding: var(--spacing-xs) var(--spacing-sm); font-size: var(--text-xs); }
    /* Mail/Chat */
    .mail-wrap { padding: var(--spacing-md); padding-left: max(var(--spacing-md), env(safe-area-inset-left)); padding-right: max(var(--spacing-md), env(safe-area-inset-right)); }
    .mail-card { padding: var(--spacing-md); }
    .chat-recipients-chips { max-height: 60px; }
    /* Chat: extra compact on very small screens */
    .chat-channels-section { padding: 4px var(--spacing-xs); }
    .chat-channels-inner { gap: var(--spacing-xs); }
    .chat-team-label { font-size: 10px; }
    .chat-start-private-btn { padding: 2px var(--spacing-xs); font-size: 9px; }
    .chat-auto-delete-notice { font-size: 9px; padding: 2px var(--spacing-xs); }
    .chat-conversations-row { margin-top: 2px; padding-top: 2px; }
    .chat-conversations-list { max-height: 36px; }
    .chat-composer-to { padding: 0; }
    .chat-back-to-general-btn { font-size: 9px; padding: 2px var(--spacing-xs); min-height: 24px; }
    /* Guide modal: compact on very small screens */
    .guide-modal .modal-content { padding: var(--spacing-md); }
    .guide-modal-title { font-size: var(--text-base); }
    .guide-steps { font-size: var(--text-xs); line-height: 1.5; }
    /* Bottom nav: safe area for notched devices */
    .bottom-nav { padding-left: max(var(--spacing-sm), env(safe-area-inset-left)); padding-right: max(var(--spacing-sm), env(safe-area-inset-right)); }
    /* Mobile drawer: ensure scroll and viewport height */
    .mobile-drawer-panel { max-height: 100dvh; }
    .mobile-drawer-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* ---- Responsive: tablet (768px–1023px) ---- */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --page-padding-x: var(--spacing-xl);
        --page-padding-y: var(--spacing-lg);
        --header-padding-x: var(--spacing-xl);
        --header-padding-y: var(--spacing-lg);
    }
    .calendar-layout { gap: var(--spacing-lg); }
    .calendar-sidebar { width: 260px; min-width: 240px; padding: var(--spacing-lg); }
    .fab { bottom: var(--spacing-2xl); right: var(--spacing-2xl); }
}

/* ---- Responsive: desktop (1024px+) ---- */
@media (min-width: 1024px) {
    :root {
        --page-padding-x: var(--spacing-2xl);
        --page-padding-y: var(--spacing-xl);
        --header-padding-x: var(--spacing-2xl);
        --header-padding-y: var(--spacing-lg);
    }
    .fab { bottom: var(--spacing-2xl); right: var(--spacing-2xl); }
}

/* ---- Responsive: large (1280px+) ---- */
@media (min-width: 1280px) {
    .calendar-main { max-width: 1600px; }
}

/* ---- Dark theme ---- */
[data-theme="dark"] {
    --color-surface: #1e293b;
    --color-surface-elevated: #334155;
    --color-background: #0f172a;
    --color-border: #334155;
    --color-text: #f1f5f9;
    --color-text-muted: #94a3b8;
    --color-text-secondary: #94a3b8;
    --color-busy-bg: #1e293b;
    --color-danger-bg: rgba(220, 38, 38, 0.2);
    --color-warning-bg: rgba(245, 158, 11, 0.2);
    --color-warning-text: #fbbf24;
    --header-bg: #0d5c28;
    --header-hover: rgba(255, 255, 255, 0.1);
    --modal-backdrop: rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
    /* Event form section tints (dark) – primary green, private orange */
    --event-form-bg-a: rgba(16, 110, 48, 0.2);
    --event-form-bg-b: rgba(30, 41, 59, 0.6);
    --event-form-bg-c: rgba(51, 65, 85, 0.4);
    --event-form-bg-d: rgba(233, 133, 11, 0.15);
}

[data-theme="dark"] .cal-day-other-month {
    opacity: 0.7;
}
[data-theme="dark"] .pending-invites-intro,
[data-theme="dark"] .pending-invites-item-date,
[data-theme="dark"] .pending-invites-empty {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .cal-day-header {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

[data-theme="dark"] #calendar[data-calendar-mode="all"] .cal-day-cell {
    background: rgba(100, 116, 139, 0.12);
}
[data-theme="dark"] #calendar[data-calendar-mode="all"] .cal-day-other-month {
    background: rgba(100, 116, 139, 0.06);
}
[data-theme="dark"] #calendar[data-calendar-mode="all"] .cal-day-today {
    background: rgba(100, 116, 139, 0.18);
}
[data-theme="dark"] #calendar[data-calendar-mode="all"] .cal-content {
    background: rgba(100, 116, 139, 0.08);
}
[data-theme="dark"] #calendar[data-calendar-mode="all"] .cal-time-slot {
    background: rgba(100, 116, 139, 0.06);
}
[data-theme="dark"] #calendar[data-calendar-mode="all"] .cal-day-header {
    background: rgba(100, 116, 139, 0.12);
}
[data-theme="dark"] #calendar[data-calendar-mode="team"] .cal-day-cell {
    background: rgba(16, 110, 48, 0.12);
}
[data-theme="dark"] #calendar[data-calendar-mode="team"] .cal-day-other-month {
    background: rgba(16, 110, 48, 0.06);
}
[data-theme="dark"] #calendar[data-calendar-mode="team"] .cal-day-today {
    background: rgba(16, 110, 48, 0.18);
}
[data-theme="dark"] #calendar[data-calendar-mode="team"] .cal-content {
    background: rgba(16, 110, 48, 0.08);
}
[data-theme="dark"] #calendar[data-calendar-mode="team"] .cal-time-slot {
    background: rgba(16, 110, 48, 0.06);
}
[data-theme="dark"] #calendar[data-calendar-mode="team"] .cal-day-header {
    background: rgba(16, 110, 48, 0.12);
}
[data-theme="dark"] #calendar[data-calendar-mode="private"] .cal-day-cell {
    background: rgba(233, 133, 11, 0.12);
}
[data-theme="dark"] #calendar[data-calendar-mode="private"] .cal-day-other-month {
    background: rgba(233, 133, 11, 0.06);
}
[data-theme="dark"] #calendar[data-calendar-mode="private"] .cal-day-today {
    background: rgba(233, 133, 11, 0.18);
}
[data-theme="dark"] #calendar[data-calendar-mode="private"] .cal-content {
    background: rgba(233, 133, 11, 0.08);
}
[data-theme="dark"] #calendar[data-calendar-mode="private"] .cal-time-slot {
    background: rgba(233, 133, 11, 0.06);
}
[data-theme="dark"] #calendar[data-calendar-mode="private"] .cal-day-header {
    background: rgba(233, 133, 11, 0.12);
}

[data-theme="dark"] .modal-content {
    border-color: var(--color-border);
}

[data-theme="dark"] .modal-event-desc {
    background: var(--color-background);
    border-color: var(--color-border);
}

[data-theme="dark"] .modal-close:hover {
    background: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .event-form input,
[data-theme="dark"] .event-form textarea,
[data-theme="dark"] .event-form select,
[data-theme="dark"] .event-form .flatpickr-input[readonly],
[data-theme="dark"] #invite-form input[type="email"],
[data-theme="dark"] .availability-hours input[type="time"] {
    background: var(--color-background);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .mobile-drawer-panel {
    background: var(--color-surface-elevated);
    border-color: var(--color-border);
}

[data-theme="dark"] .mobile-drawer-header {
    border-color: var(--color-border);
}

[data-theme="dark"] .header-view-tabs-mobile .header-tab {
    background: var(--color-background);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .mobile-drawer-link {
    color: var(--color-text);
}

[data-theme="dark"] .mobile-drawer-link:hover {
    background: var(--color-surface);
    color: var(--color-primary);
}

[data-theme="dark"] .flatpickr-calendar {
    background: var(--color-surface-elevated) !important;
    border-color: var(--color-border) !important;
}

[data-theme="dark"] .flatpickr-months .flatpickr-month,
[data-theme="dark"] .flatpickr-current-month .numInputWrapper {
    background: var(--color-surface-elevated) !important;
    color: var(--color-text) !important;
}

[data-theme="dark"] .flatpickr-day {
    color: var(--color-text);
}

[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay {
    color: var(--color-text-muted);
}

[data-theme="dark"] .flatpickr-time input {
    background: var(--color-background) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border);
}

/* Print: hide interactive UI, show calendar and title */
@media print {
    .cal-prev, .cal-next, .cal-today,
    .cal-calendar-filter, .cal-filter-label,
    .cal-btn-add, .cal-search-wrap, .cal-btn-more, .cal-more-menu,
    .cal-sync-status,
    .bottom-nav, .fab,
    .header-nav, .header-view-tabs, #user-menu-btn, .header-user-menu,
    .mobile-drawer, #mini-calendar,
    .modal, .modal-backdrop {
        display: none !important;
    }
    .cal-toolbar-row-secondary { display: none !important; }
    .cal-toolbar-row-primary .cal-btn { display: none !important; }
    .cal-toolbar-title { font-size: 1.25rem; }
    .cal-content {
        background: #fff !important;
        padding: 0 !important;
    }
    body, #app, #calendar {
        background: #fff !important;
        color: #111 !important;
    }
    .cal-month-grid, .cal-month-day, .cal-day-header, .cal-time-slot {
        break-inside: avoid;
    }
    .cal-event, .cal-time-event, .cal-list-event {
        border: 1px solid #333 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* --- Mail page (team email / webmail launcher) – same nav style as calendar --- */
.mail-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--color-background);
}
.mail-page .calendar-header {
    background: var(--header-bg);
}

.mail-drawer-hide-calendar-view {
    display: none;
}
.mail-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.mail-wrap {
    flex: 1;
    padding: var(--spacing-xl) var(--spacing-lg);
    max-width: 36rem;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}
.mail-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
}
.mail-card-primary .mail-card-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}
.mail-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    color: var(--color-primary);
}
.mail-card-icon svg {
    width: 100%;
    height: 100%;
}
.mail-card-heading {
    flex: 1;
    min-width: 0;
}
.mail-card-title {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text);
}
.mail-card-desc {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-muted);
}
.mail-mailboxes {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
.mail-mailbox-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-primary);
    color: var(--header-text);
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--text-base);
    transition: background var(--transition-fast), transform var(--transition-fast);
    box-shadow: var(--shadow-sm);
}
.mail-mailbox-btn:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
}
.mail-mailbox-btn:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.mail-mailbox-btn-single {
    width: 100%;
    justify-content: center;
}
.mail-mailbox-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    opacity: 0.9;
}
.mail-mailbox-icon svg {
    width: 100%;
    height: 100%;
}
.mail-mailbox-label {
    flex: 1;
    text-align: left;
}
.mail-mailbox-arrow {
    flex-shrink: 0;
    font-size: 1.125em;
    opacity: 0.9;
}
.mail-opened-msg {
    margin: var(--spacing-md) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.mail-opened-msg a {
    color: var(--color-primary);
    text-decoration: none;
}
.mail-opened-msg a:hover {
    text-decoration: underline;
}

.mail-card-manage {
    padding: var(--spacing-md) var(--spacing-xl);
}
.mail-manage-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: none;
    border: none;
    font-size: var(--text-base);
    color: var(--color-primary);
    cursor: pointer;
    padding: 0;
    font-weight: 500;
    width: 100%;
    text-align: left;
}
.mail-manage-toggle:hover {
    color: var(--color-primary-hover);
}
.mail-manage-toggle-icon {
    font-size: 1.25em;
    line-height: 1;
}
.mail-manage-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.mail-manage-panel {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
    text-align: left;
}
.mail-manage-hint {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-md);
    line-height: 1.4;
}
.mail-manage-list {
    list-style: none;
    margin: 0 0 var(--spacing-md);
    padding: 0;
}
.mail-manage-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border);
}
.mail-manage-item:last-child {
    border-bottom: none;
}
.mail-manage-label {
    flex: 1;
    font-size: var(--text-base);
    min-width: 0;
}
.mail-manage-item-actions {
    display: flex;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}
.mail-manage-move,
.mail-manage-remove {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.2rem 0.4rem;
    font-size: var(--text-sm);
    cursor: pointer;
    line-height: 1;
}
.mail-manage-move:hover,
.mail-manage-remove:hover {
    background: var(--color-background);
}
.mail-manage-remove {
    color: var(--color-danger);
}
.mail-manage-add {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}
.mail-manage-input {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: var(--text-base);
}
.mail-manage-add-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-primary);
    color: var(--header-text);
    border: none;
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
}
.mail-manage-add-btn:hover {
    background: var(--color-primary-hover);
}
.mail-manage-save {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--text-base);
}

/* Help card – collapsible details (e.g. email signature guide) */
.mail-card-help {
    list-style: none;
}
.mail-card-help summary {
    list-style: none;
}
.mail-card-help summary::-webkit-details-marker {
    display: none;
}
.mail-help-summary {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--color-text);
}
.mail-help-summary:hover {
    color: var(--color-primary);
}
.mail-card-help[open] .mail-help-summary {
    color: var(--color-primary);
}
.mail-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--header-text);
    font-size: var(--text-sm);
    font-weight: 700;
}
.mail-help-content {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}
.mail-help-intro {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0 0 var(--spacing-md);
}
.mail-help-steps {
    margin: 0;
    padding-left: 1.25rem;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-text);
}
.mail-help-steps li {
    margin-bottom: var(--spacing-sm);
}
.mail-help-steps li:last-child {
    margin-bottom: 0;
}
[data-theme="dark"] .mail-help-intro {
    color: var(--color-text-secondary);
}

/* --- Chat page --- */
.chat-page {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(180deg, var(--color-background) 0%, rgba(241, 245, 249, 0.6) 100%);
}
.chat-page .calendar-header {
    background: var(--header-bg);
}

/* Unified header nav: all nav links (header-calendar-btn + header-guide-btn) share same pill style on Jobs/Chat/Mail */
.jobs-page .header-calendar-btn,
.jobs-page .header-guide-btn,
.chat-page .header-calendar-btn,
.chat-page .header-guide-btn,
.mail-page .header-calendar-btn,
.mail-page .header-guide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-sm);
    font-weight: 500;
    min-height: 36px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.jobs-page .header-calendar-btn:hover,
.jobs-page .header-guide-btn:hover,
.chat-page .header-calendar-btn:hover,
.chat-page .header-guide-btn:hover,
.mail-page .header-calendar-btn:hover,
.mail-page .header-guide-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}
/* Primary back/switch button slightly more prominent */
.jobs-page .header-brand .header-calendar-btn,
.chat-page .header-brand .header-calendar-btn,
.mail-page .header-brand .header-calendar-btn {
    background: var(--color-primary);
    border-color: var(--color-primary-hover);
}
.jobs-page .header-brand .header-calendar-btn:hover,
.chat-page .header-brand .header-calendar-btn:hover,
.mail-page .header-brand .header-calendar-btn:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: #fff;
}

.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: var(--spacing-md);
}
.chat-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
    gap: var(--spacing-sm);
}
.chat-channels-section {
    flex-shrink: 0;
    margin-bottom: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--color-primary);
}
.chat-channels-inner {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}
.chat-channels-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.chat-team-label {
    text-transform: none;
    font-size: var(--text-sm);
    color: var(--color-text);
}
.chat-auto-delete-notice {
    margin: var(--spacing-xs) 0 0;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    background: rgba(13, 107, 44, 0.08);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}
.chat-auto-delete-icon {
    font-size: 1rem;
    opacity: 0.9;
    flex-shrink: 0;
}
.chat-auto-delete-text {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
}
.chat-channel-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    max-width: 240px;
}
.chat-channel-picker-icon {
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat-channel-picker-icon svg {
    width: 16px;
    height: 16px;
}
.chat-channel-select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 2.75rem;
    font-size: var(--text-base);
    font-weight: 500;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' 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 var(--spacing-md) center;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.chat-channel-select:hover {
    border-color: var(--color-primary);
}
.chat-channel-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-focus);
}
.chat-channel-select option {
    padding: var(--spacing-sm);
    font-weight: 500;
}
.chat-start-private-btn {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--text-xs);
    font-weight: 600;
    font-family: var(--font);
    background: var(--color-primary);
    border: 1px solid var(--color-primary-hover);
    color: #fff;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform 0.1s ease;
}
.chat-start-private-btn:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: #fff;
}
.chat-start-private-btn:active {
    transform: scale(0.98);
}
.chat-start-private-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary-focus);
}

.chat-conversations-row {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
}
.chat-conversations-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--color-muted);
    margin-bottom: var(--spacing-xs);
}
.chat-conversations-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    max-height: 52px;
    overflow-y: auto;
}
.chat-conversation-item {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--text-sm);
    font-family: var(--font);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.chat-conversation-item:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-primary);
}
.chat-conversation-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary-focus);
}
.chat-conversation-unread {
    margin-left: 4px;
    font-weight: 600;
    color: var(--color-primary);
}

.bottom-nav-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mobile-drawer-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.chat-unread-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    background: var(--color-primary);
    color: #fff;
    border-radius: 9px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    z-index: 2;
}
.chat-unread-badge[hidden] {
    display: none !important;
}
.mobile-drawer-link-chat .chat-unread-badge {
    top: -2px;
    right: -4px;
}

.chat-composer-to-direct {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

/* Private chat page – orange theme like private calendar */
.chat-direct-page .calendar-header {
    background: var(--color-private);
    --header-bg: var(--color-private);
    --header-hover: rgba(255, 255, 255, 0.15);
}
.chat-direct-page .chat-main {
    border-left: 4px solid var(--color-private);
    background: linear-gradient(90deg, rgba(217, 119, 6, 0.06) 0%, transparent 120px);
}
.chat-direct-page .chat-composer-to {
    border-left: 4px solid var(--color-private);
    padding-left: var(--spacing-md);
    background: rgba(217, 119, 6, 0.05);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.chat-direct-page .chat-msg-own .chat-msg-bubble {
    background: rgba(217, 119, 6, 0.12);
    border: 1px solid rgba(217, 119, 6, 0.25);
}
.chat-direct-page .chat-msg-row:not(.chat-msg-own) .chat-msg-bubble {
    border-left: 3px solid var(--color-private);
}
.chat-direct-page .chat-send-btn {
    background: var(--color-private);
}
.chat-direct-page .chat-send-btn:hover:not(:disabled) {
    background: var(--color-private-border);
}
.chat-direct-page .chat-send-btn:focus-visible {
    box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.3);
}
.chat-direct-page .chat-back-to-general-btn:hover {
    background: rgba(217, 119, 6, 0.12);
    border-color: var(--color-private);
    color: var(--color-private-border);
}
.chat-direct-page .chat-conversation-item:hover {
    border-color: var(--color-private);
}
.chat-direct-page .chat-conversation-unread {
    color: var(--color-private);
}

/* ---- Jobs page ---- */
.jobs-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--color-background);
}
.jobs-main {
    flex: 1;
    padding: var(--spacing-lg);
    padding-bottom: max(72px, calc(64px + env(safe-area-inset-bottom, 0)));
}
.jobs-wrap {
    max-width: 560px;
    margin: 0 auto;
}
.jobs-add-form {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.jobs-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
}
.jobs-add-input {
    flex: 1;
    min-width: 140px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-base);
    font-family: var(--font);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-background);
    color: var(--color-text);
}
.jobs-add-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-focus);
}
.jobs-priority-select {
    min-width: 120px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-sm);
    font-family: var(--font);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-background);
    color: var(--color-text);
}
.jobs-assign-select {
    min-width: 120px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-sm);
    font-family: var(--font);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-background);
    color: var(--color-text);
}
.jobs-add-btn {
    flex-shrink: 0;
}
.jobs-add-optional {
    margin-top: var(--spacing-sm);
}
.jobs-description-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-sm);
    font-family: var(--font);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-background);
    color: var(--color-text);
    resize: vertical;
    min-height: 60px;
}
.jobs-add-more-btn {
    margin-top: var(--spacing-xs);
    padding: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font);
}
.jobs-add-more-btn:hover {
    color: var(--color-primary);
}
.jobs-priority-key {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm) var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.jobs-key-title {
    font-weight: 600;
    color: var(--color-text);
}
.jobs-key-item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}
.jobs-key-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}
.jobs-filter-tabs {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}
.jobs-filter-tab {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-sm);
    font-weight: 500;
    font-family: var(--font);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.jobs-filter-tab:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.jobs-filter-tab.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.jobs-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    color: var(--color-text-muted);
    padding: var(--spacing-2xl);
}
.jobs-loading[hidden] {
    display: none !important;
}
.jobs-loading-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: jobs-spin 0.7s linear infinite;
}
@keyframes jobs-spin {
    to { transform: rotate(360deg); }
}
.jobs-empty {
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-xl);
}
.jobs-empty-icon {
    display: block;
    margin: 0 auto var(--spacing-md);
    color: var(--color-primary);
    opacity: 0.5;
}
.jobs-empty-title {
    margin: 0 0 var(--spacing-xs);
    font-weight: 600;
    font-size: var(--text-lg);
    color: var(--color-text);
}
.jobs-empty-desc {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
}
.jobs-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
.jobs-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.jobs-card:hover {
    border-color: rgba(13, 107, 44, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.jobs-card-priority-high {
    border-left: 4px solid #dc2626;
}
.jobs-card-priority-low {
    border-left: 4px solid #ea580c;
}
.jobs-card-priority-none {
    border-left: 4px solid #16a34a;
}
.jobs-card-priority-badge {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--radius);
    margin-bottom: var(--spacing-xs);
    display: inline-block;
}
.jobs-card-priority-badge.jobs-priority-high {
    background: rgba(220, 38, 38, 0.15);
    color: #b91c1c;
}
.jobs-card-priority-badge.jobs-priority-low {
    background: rgba(234, 88, 12, 0.15);
    color: #c2410c;
}
.jobs-card-priority-badge.jobs-priority-none {
    background: rgba(22, 163, 74, 0.15);
    color: #15803d;
}
.jobs-card-done {
    opacity: 0.85;
}
.jobs-card-inner {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
}
.jobs-card-checkbox {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-background);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.jobs-card-checkbox:hover {
    border-color: var(--color-primary);
}
.jobs-card-checkbox.checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.jobs-card-checkbox .jobs-checkbox-empty {
    display: block;
    width: 12px;
    height: 12px;
}
.jobs-card-checkbox-placeholder {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}
.jobs-card-body {
    flex: 1;
    min-width: 0;
}
.jobs-card-title {
    font-weight: 600;
    color: var(--color-text);
}
.jobs-card-title-editable {
    cursor: pointer;
    border-radius: var(--radius);
    padding: 2px 4px;
    margin: -2px -4px;
    transition: background var(--transition-fast);
}
.jobs-card-title-editable:hover {
    background: rgba(13, 107, 44, 0.08);
}
.jobs-card-title-input {
    width: 100%;
    font-size: inherit;
    font-weight: inherit;
    font-family: var(--font);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
    padding: 2px 6px;
    background: var(--color-background);
    color: var(--color-text);
}
.jobs-card-title-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary-focus);
}
.jobs-card-title-done {
    text-decoration: line-through;
    color: var(--color-text-muted);
}
.jobs-card-description {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    white-space: pre-wrap;
}
.jobs-card-meta {
    margin-top: var(--spacing-xs);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
}
.jobs-card-assignee {
    padding-left: var(--spacing-sm);
    margin-left: var(--spacing-sm);
    border-left: 3px solid;
}
.jobs-card-assignee-me {
    font-weight: 600;
    color: var(--color-primary);
}
.jobs-card-actions {
    flex-shrink: 0;
}
.jobs-card-delete {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--text-xs);
    font-family: var(--font);
    color: var(--color-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius);
}
.jobs-card-delete:hover {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
}

.chat-to-names {
    font-weight: 500;
    color: var(--color-text);
}
.chat-back-to-general-btn {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-sm);
    font-weight: 500;
    font-family: var(--font);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.chat-back-to-general-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--event-form-bg-a);
}
.chat-back-to-general-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary-focus);
}
.chat-people-picker-content {
    max-width: 360px;
    max-height: 85vh;
}
.chat-people-picker-title {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--text-xl);
    font-weight: 600;
    font-family: var(--font-heading);
    color: var(--color-text);
}
.chat-people-picker-desc {
    margin: 0 0 var(--spacing-md);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.chat-people-picker-list {
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
}
.chat-people-picker-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: var(--text-base);
    transition: border-color 0.15s, background 0.15s;
}
.chat-people-picker-item:hover {
    border-color: var(--color-primary);
    background: var(--color-busy-bg);
}
.chat-people-picker-item.selected {
    border-color: var(--color-primary);
    background: var(--event-form-bg-a);
}
.chat-people-picker-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary-focus);
}
.chat-people-picker-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    flex-shrink: 0;
}
.chat-people-picker-actions {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}
.chat-people-picker-actions .btn-primary {
    flex: 1;
    min-width: 0;
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--text-base);
    font-weight: 600;
    font-family: var(--font);
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.chat-people-picker-actions .btn-primary:hover:not(:disabled) {
    background: var(--color-primary-hover);
}
.chat-people-picker-actions .btn-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary-focus);
}
.chat-people-picker-actions .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.chat-people-picker-actions .btn-cancel {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--text-base);
    font-weight: 500;
    font-family: var(--font);
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.chat-people-picker-actions .btn-cancel:hover {
    background: var(--color-busy-bg);
    border-color: var(--color-text-muted);
}
.chat-people-picker-empty {
    margin: 0;
    padding: var(--spacing-lg);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
}
.chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--spacing-md);
    background: var(--color-surface);
    border-radius: var(--radius);
    margin-bottom: var(--spacing-sm);
    box-shadow: var(--shadow-sm);
}
.chat-loading,
.chat-empty {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}
.chat-empty {
    text-align: center;
    padding: var(--spacing-lg);
}
.chat-empty-icon {
    font-size: 1.75rem;
    margin-bottom: var(--spacing-sm);
    opacity: 0.5;
}
.chat-empty strong {
    display: block;
    font-size: var(--text-base);
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
}

/* Loading skeleton */
.chat-skeleton {
    padding: var(--spacing-sm) 0;
}
.chat-skeleton-bubble {
    height: 48px;
    border-radius: var(--radius-lg);
    background: linear-gradient(90deg, var(--color-border) 25%, var(--color-busy-bg) 50%, var(--color-border) 75%);
    background-size: 200% 100%;
    animation: chatSkeletonPulse 1.2s ease-in-out infinite;
    margin-bottom: var(--spacing-sm);
}
.chat-skeleton-bubble:nth-child(1) { width: 70%; margin-left: 0; }
.chat-skeleton-bubble:nth-child(2) { width: 50%; margin-left: 0; }
.chat-skeleton-bubble:nth-child(3) { width: 65%; margin-left: auto; margin-right: 0; }
.chat-skeleton-bubble:nth-child(4) { width: 55%; margin-left: 0; }
@keyframes chatSkeletonPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Date separator */
.chat-date-sep {
    text-align: center;
    margin: var(--spacing-md) 0;
}
.chat-date-sep span {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-text-muted);
    background: var(--color-busy-bg);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-pill);
}

/* Message bubble – left (others) */
.chat-msg-row {
    display: flex;
    margin-bottom: var(--spacing-xs);
    animation: chatMsgFadeIn 0.2s ease;
}
.chat-msg-row.chat-msg-own {
    justify-content: flex-end;
}
.chat-msg-row.chat-msg-grouped {
    margin-bottom: 2px;
}
.chat-msg-row.chat-msg-grouped .chat-msg-avatar-wrap {
    visibility: hidden;
    width: 36px;
}
@keyframes chatMsgFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.chat-msg-bubble-wrap {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-sm);
    max-width: 75%;
}
.chat-msg-own .chat-msg-bubble-wrap {
    flex-direction: row-reverse;
}
.chat-msg-avatar-wrap {
    flex-shrink: 0;
}
.chat-msg-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: 600;
    flex-shrink: 0;
}
.chat-msg-bubble {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    max-width: 100%;
    box-shadow: var(--shadow-sm);
}
.chat-msg-row:not(.chat-msg-own) .chat-msg-bubble {
    background: var(--color-busy-bg);
    border: 1px solid var(--color-border);
    border-bottom-left-radius: 4px;
}
.chat-msg-own .chat-msg-bubble {
    background: rgba(13, 107, 44, 0.12);
    border: 1px solid rgba(13, 107, 44, 0.2);
    border-bottom-right-radius: 4px;
    color: var(--color-text);
}
.chat-msg-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}
.chat-msg-actions {
    position: relative;
    margin-left: auto;
}
.chat-msg-menu-btn {
    padding: 2px 6px;
    font-size: 1.1rem;
    line-height: 1;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.chat-msg-menu-btn:hover {
    color: var(--color-text);
    background: rgba(0, 0, 0, 0.06);
}
.chat-msg-own .chat-msg-menu-btn:hover {
    background: rgba(0, 0, 0, 0.08);
}
.chat-msg-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 2px;
    padding: var(--spacing-xs);
    min-width: 100px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chat-msg-menu[hidden] {
    display: none !important;
}
.chat-msg-menu button {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--text-sm);
    text-align: left;
    background: none;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.chat-msg-menu button:hover {
    background: var(--color-busy-bg);
}
.chat-msg-menu button[data-action="delete"]:hover {
    color: var(--color-danger);
}
.chat-msg-edited {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-style: italic;
}
.chat-msg-read-by {
    font-size: var(--text-xs);
    color: var(--color-primary);
}
.chat-msg-edit-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
.chat-msg-edit-input {
    width: 100%;
    min-height: 60px;
    padding: var(--spacing-sm);
    font-size: var(--text-base);
    font-family: inherit;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    resize: vertical;
}
.chat-msg-edit-input:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 0;
}
.chat-msg-edit-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
}
.chat-msg-edit-cancel {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--text-sm);
    background: var(--color-busy-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--color-text);
}
.chat-msg-edit-save {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--text-sm);
    font-weight: 600;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
}
.chat-msg-edit-save:hover {
    background: var(--color-primary-hover);
}
.chat-msg-name {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-text);
}
.chat-msg-scope {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    background: rgba(100, 116, 139, 0.15);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
}
.chat-msg-time {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.chat-msg-body {
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-text);
}
.chat-msg-body:empty {
    display: none;
}
.chat-msg-body br {
    display: block;
    content: "";
    margin-top: 0.25em;
}

/* Composer */
.chat-composer {
    flex-shrink: 0;
    background: var(--color-surface);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}
.chat-composer-to {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}
.chat-to-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-muted);
}
.chat-scope-btns {
    display: flex;
    gap: var(--spacing-xs);
}
.chat-scope-btn {
    padding: var(--spacing-xs) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.chat-scope-btn:hover {
    background: var(--color-busy-bg);
    color: var(--color-text);
}
.chat-scope-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.chat-recipients-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
}
.chat-recipient-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.chat-recipient-chip:hover {
    background: var(--color-busy-bg);
}
.chat-recipient-chip.selected {
    background: rgba(13, 107, 44, 0.15);
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.chat-recipient-chip-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
}
.chat-composer-body {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-end;
    position: relative;
}
.chat-body-input {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: var(--text-base);
    font-family: inherit;
    resize: none;
    min-height: 40px;
    max-height: 140px;
}
.chat-body-input:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 0;
}
.chat-send-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-weight: 600;
    font-family: var(--font);
    font-size: var(--text-sm);
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.chat-send-btn:hover:not(:disabled) {
    background: var(--color-primary-hover);
}
.chat-send-btn:active:not(:disabled) {
    transform: scale(0.98);
}
.chat-send-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.chat-send-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary-focus);
}
.chat-send-btn svg {
    width: 18px;
    height: 18px;
}
.chat-attach-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--color-busy-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text-muted);
    cursor: pointer;
}
.chat-attach-btn:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.chat-attach-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary-focus);
}
.chat-attach-btn svg {
    width: 20px;
    height: 20px;
}
.chat-emoji-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--color-busy-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text-muted);
    cursor: pointer;
}
.chat-emoji-btn:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.chat-emoji-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary-focus);
}
.chat-emoji-btn svg {
    width: 20px;
    height: 20px;
}
.chat-emoji-picker {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: var(--spacing-xs);
    padding: var(--spacing-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--spacing-xs);
    z-index: 100;
    max-height: 180px;
    overflow-y: auto;
}
.chat-emoji-picker button {
    font-size: 1.25rem;
    padding: var(--spacing-xs);
    background: none;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s;
}
.chat-emoji-picker button:hover {
    background: var(--color-busy-bg);
}
.chat-attachments-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.chat-attachments-preview-file {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-busy-bg);
    border-radius: var(--radius);
}
.chat-attachments-preview-file button {
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1;
}
.chat-attachments-preview-file button:hover {
    color: var(--color-danger);
}
.chat-attachments-preview-hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.chat-msg-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}
.chat-msg-attachment {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(0, 0, 0, 0.06);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    color: var(--color-text);
    text-decoration: none;
}
.chat-msg-attachment:hover {
    background: rgba(0, 0, 0, 0.1);
}
.chat-msg-attachment-img {
    padding: 0;
    background: none;
}
.chat-msg-attachment-img img {
    max-width: 200px;
    max-height: 200px;
    border-radius: var(--radius);
    display: block;
}
.chat-msg-attachment-icon {
    font-size: 1rem;
}
.chat-msg-link-preview-wrap {
    margin-top: var(--spacing-sm);
}
.chat-msg-link-preview {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.05);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    max-width: 320px;
}
.chat-msg-link-preview-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.chat-msg-link-preview-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
}
.chat-msg-link-preview-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.chat-msg-link-preview-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.chat-error {
    margin: var(--spacing-sm) 0 0;
    font-size: var(--text-sm);
    color: var(--color-danger);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}
.chat-typing-indicator {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-style: italic;
}

.chat-error:empty,
.chat-error[hidden] {
    display: none !important;
}
.chat-error:not(:empty)::before {
    content: '⚠';
    flex-shrink: 0;
    font-size: 1rem;
}

/* Mobile chat – compact layout, prioritize messages + input */
@media (max-width: 767px) {
    .chat-main { padding: var(--spacing-sm); padding-left: max(var(--spacing-sm), env(safe-area-inset-left)); padding-right: max(var(--spacing-sm), env(safe-area-inset-right)); }
    .chat-wrap { padding-bottom: max(72px, calc(64px + env(safe-area-inset-bottom, 0))); gap: var(--spacing-xs); }
    .chat-channels-section {
        padding: var(--spacing-xs) var(--spacing-sm);
        margin: 0 0 var(--spacing-xs);
        border-radius: var(--radius-lg);
        border-left: 4px solid var(--color-primary);
    }
    .chat-channels-inner { flex-direction: row; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; }
    .chat-team-label { font-size: var(--text-xs); }
    .chat-start-private-btn { align-self: flex-start; padding: var(--spacing-xs) var(--spacing-sm); font-size: 10px; }
    .chat-auto-delete-notice {
        padding: 2px var(--spacing-xs);
        font-size: 10px;
        margin-top: 2px;
    }
    .chat-auto-delete-icon { font-size: 0.75rem; }
    .chat-conversations-row { margin-top: var(--spacing-xs); padding-top: var(--spacing-xs); }
    .chat-conversations-list { max-height: 44px; }
    .chat-messages { padding: var(--spacing-sm) 0; flex: 1; min-height: 0; }
    .chat-msg-bubble-wrap { max-width: 88%; }
    .chat-composer {
        position: sticky;
        bottom: 0;
        margin: 0;
        padding: var(--spacing-xs) 0;
        padding-bottom: max(var(--spacing-xs), env(safe-area-inset-bottom, 0));
        border-radius: var(--radius);
        z-index: 30;
        background: var(--color-surface);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
    }
    .chat-composer-to { margin-bottom: 2px; padding: 0; }
    .chat-to-label { font-size: 10px; }
    .chat-back-to-general-btn { padding: 2px var(--spacing-xs); font-size: 10px; min-height: 28px; }
    .chat-composer-body {
        display: flex;
        align-items: flex-end;
        gap: var(--spacing-xs);
        flex-wrap: wrap;
    }
    .chat-body-input {
        flex: 1;
        min-width: 0;
        min-height: 36px;
        max-height: 100px;
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--text-sm);
    }
    .chat-attach-btn, .chat-emoji-btn { width: 32px; height: 32px; }
    .chat-attach-btn svg, .chat-emoji-btn svg { width: 16px; height: 16px; }
    .chat-send-btn {
        padding: var(--spacing-xs) var(--spacing-sm);
        min-height: 32px;
        font-size: var(--text-xs);
    }
    .chat-send-btn svg { width: 14px; height: 14px; }
    .chat-recipients-chips { max-height: 44px; overflow-y: auto; }
}

/* Guide modal – fit on mobile, scrollable steps, sticky Got it */
@media (max-width: 767px) {
    .guide-modal .modal-content {
        max-height: 90vh;
        max-height: calc(100dvh - 2rem);
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        padding: var(--spacing-lg);
        padding-left: max(var(--spacing-lg), env(safe-area-inset-left));
        padding-right: max(var(--spacing-lg), env(safe-area-inset-right));
        padding-bottom: max(var(--spacing-xl), env(safe-area-inset-bottom));
    }
    .guide-modal-body {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }
    .guide-modal-title { font-size: var(--text-lg); margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-sm); flex-shrink: 0; }
    .guide-steps {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        font-size: var(--text-sm);
        line-height: 1.55;
        margin-bottom: var(--spacing-md);
        padding-right: var(--spacing-xs);
    }
    .guide-steps li { margin-bottom: var(--spacing-sm); }
    .guide-actions { margin-top: 0; padding-top: var(--spacing-md); flex-shrink: 0; border-top: 1px solid var(--color-border); }
    .guide-actions .guide-got-it { min-height: 48px; width: 100%; }
}

/* ---- Admin page ---- */
.admin-page {
    font-family: var(--font);
    background: var(--color-background);
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--spacing-xl);
    padding-left: max(var(--spacing-xl), env(safe-area-inset-left));
    padding-right: max(var(--spacing-xl), env(safe-area-inset-right));
    padding-bottom: max(var(--spacing-xl), env(safe-area-inset-bottom));
    color: var(--color-text);
}
.admin-container {
    max-width: 820px;
    margin: 0 auto;
}
.admin-header {
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-xl);
    border-bottom: 2px solid var(--color-border);
}
.admin-title {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.02em;
}
.admin-subtitle {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.admin-back {
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--text-sm);
    display: inline-block;
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
}
.admin-back:hover { text-decoration: underline; }
.admin-main { }
.admin-section { margin-bottom: var(--spacing-2xl); }
.admin-section h2 { font-size: var(--text-lg); font-weight: 600; margin: 0 0 var(--spacing-md); color: var(--color-text); }
.admin-section h3 { font-size: var(--text-base); font-weight: 500; margin: 0 0 var(--spacing-sm); color: var(--color-text-muted); }
.admin-add-forms { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); }
.admin-add-form {
    background: var(--color-surface-elevated);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.admin-add-form .form-row { margin-bottom: var(--spacing-md); }
.admin-add-form .form-row label { display: block; margin-bottom: var(--spacing-xs); font-weight: 500; font-size: var(--text-sm); color: var(--color-text); }
.admin-add-form .form-row input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    font-family: var(--font);
    font-size: var(--text-base);
    color: var(--color-text);
    background: var(--color-surface);
}
.admin-add-form .form-row input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-focus);
}
.admin-add-form .form-hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs);
}
.admin-add-form .btn-primary {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: var(--text-base);
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
}
.admin-add-form .btn-primary:hover { background: var(--color-primary-hover); }
.admin-msg { font-size: var(--text-sm); margin: var(--spacing-sm) 0 0; }
.admin-msg-success { color: var(--color-success); }
.admin-msg-error { color: var(--color-danger); }
.admin-users-list {
    background: var(--color-surface-elevated);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.admin-user-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
}
.admin-user-row:last-child { border-bottom: none; }
.admin-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-weight: 600;
    font-size: var(--text-base);
}
.admin-user-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.admin-user-name {
    display: block;
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--color-text);
}
.admin-user-email {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    word-break: break-all;
}
.admin-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: var(--spacing-xs);
    background: var(--color-primary);
    color: #fff;
    vertical-align: middle;
}
.admin-badge-master { background: var(--color-primary-dark, #0d6b2c); }
.admin-user-actions { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; }
.admin-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-sm);
    font-family: var(--font);
    font-weight: 500;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.admin-btn:hover { background: var(--color-background); border-color: var(--color-text-muted); }
.admin-btn-remove:hover { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.admin-error { color: var(--color-danger); padding: var(--spacing-lg); }
.admin-empty { color: var(--color-text-muted); padding: var(--spacing-lg); font-size: var(--text-sm); }
.admin-feedback-desc { margin: 0 0 var(--spacing-md); font-size: var(--text-sm); color: var(--color-text-muted); }
.admin-feedback-list {
    background: var(--color-surface-elevated);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.admin-feedback-item {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}
.admin-feedback-item:last-child { border-bottom: none; }
.admin-feedback-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}
.admin-feedback-user { font-weight: 600; font-size: var(--text-sm); color: var(--color-text); }
.admin-feedback-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}
.admin-feedback-date { font-size: var(--text-xs); color: var(--color-text-muted); }
.admin-feedback-delete {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--text-xs);
    font-family: var(--font);
    font-weight: 500;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.admin-feedback-delete:hover { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.admin-feedback-message { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.5; word-break: break-word; }
/* Admin – tablet */
@media (max-width: 768px) {
    .admin-page { padding: var(--spacing-lg); padding-left: max(var(--spacing-lg), env(safe-area-inset-left)); padding-right: max(var(--spacing-lg), env(safe-area-inset-right)); }
    .admin-add-forms { grid-template-columns: 1fr; gap: var(--spacing-lg); }
    .admin-container { max-width: 100%; }
}

/* Admin – mobile: touch targets */
@media (max-width: 600px) {
    .admin-back { padding: var(--spacing-md) 0; min-height: 44px; display: inline-flex; align-items: center; }
    .admin-page { padding: var(--spacing-md); padding-left: max(var(--spacing-md), env(safe-area-inset-left)); padding-right: max(var(--spacing-md), env(safe-area-inset-right)); }
    .admin-header { margin-bottom: var(--spacing-xl); }
    .admin-title { font-size: var(--text-xl); }
    .admin-section { margin-bottom: var(--spacing-xl); }
    .admin-add-form { padding: var(--spacing-md); }
    .admin-add-form .form-row input { min-height: 44px; padding: var(--spacing-md); }
    .admin-add-form .btn-primary { min-height: 44px; width: 100%; margin-top: var(--spacing-md); }
    .admin-user-row {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        padding: var(--spacing-md) var(--spacing-lg);
    }
    .admin-user-row .admin-user-info { flex-basis: calc(100% - 48px); }
    .admin-user-actions { width: 100%; justify-content: flex-start; gap: var(--spacing-xs); }
    .admin-btn { min-height: 44px; min-width: 44px; padding: var(--spacing-md); }
}

/* Admin – small mobile */
@media (max-width: 400px) {
    .admin-page { padding: var(--spacing-sm); padding-left: max(var(--spacing-sm), env(safe-area-inset-left)); padding-right: max(var(--spacing-sm), env(safe-area-inset-right)); }
    .admin-user-row { padding: var(--spacing-md); }
    .admin-user-avatar { width: 36px; height: 36px; font-size: var(--text-sm); }
    .admin-user-actions { flex-direction: column; }
    .admin-user-actions .admin-btn { width: 100%; display: flex; align-items: center; justify-content: center; }
}