/* ============================================
   CRM — Design System
   Dark theme with glassmorphism & modern feel
   ============================================ */

/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* === Dimension palette (dusk-lit dark, frosted glass, monochrome + violet) === */
    --color-canvas: #0a0a0a;
    --color-graphite: #161616;
    --color-bone: #ededed;
    --color-ash: #c2c2c2;
    --color-slate: #686868;
    --color-hairline: rgba(255, 255, 255, 0.10);
    --color-violet: #6b62f2;

    /* Base surfaces */
    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --bg-card: rgba(22, 22, 22, 0.72);
    --bg-card-hover: rgba(32, 32, 32, 0.85);
    --bg-input: #161616;
    --bg-sidebar: #0c0c0c;
    --bg-header: rgba(10, 10, 10, 0.72);
    --bg-drawer: #141414;

    --border-color: rgba(255, 255, 255, 0.10);
    --border-hover: rgba(255, 255, 255, 0.20);
    --border-active: #6b62f2;

    --text-primary: #ededed;
    --text-secondary: #c2c2c2;
    --text-muted: #686868;
    --text-accent: #a7a1f6;

    --accent: #6b62f2;
    --accent-hover: #837bf5;
    --accent-bg: rgba(107, 98, 242, 0.12);
    --accent-glow: rgba(107, 98, 242, 0.30);

    --success: #22c55e;
    --success-bg: rgba(34, 197, 94, 0.12);
    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.12);
    --danger: #ef4444;
    --danger-bg: rgba(239, 68, 68, 0.12);
    --info: #6b62f2;
    --info-bg: rgba(107, 98, 242, 0.12);

    /* Gradients */
    --gradient-accent: linear-gradient(135deg, #6b62f2, #8b5cf6);
    --gradient-card: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    --gradient-hero: linear-gradient(100deg, #f0a868 0%, #d16b6b 32%, #6b62f2 70%, #2f6bd1 100%);
    --gradient-dusk-violet: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0) 40%, rgba(107,98,242,0.565) 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,0));

    /* Sizing */
    --sidebar-width: 260px;
    --header-height: 64px;
    --content-max: 1200px;
    --content-narrow: 900px;
    --card-min: 280px;
    --radius: 24px;
    --radius-sm: 12px;
    --radius-xs: 10px;
    --radius-pill: 9999px;

    /* Spacing scale */
    --space-4: 4px;   --space-8: 8px;   --space-12: 12px; --space-16: 16px;
    --space-20: 20px; --space-24: 24px; --space-28: 28px; --space-32: 32px;
    --space-40: 40px; --space-48: 48px; --space-56: 56px; --space-64: 64px;

    /* Shadows (Dimension favours hairlines + translucency over heavy shadows) */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
    --shadow-md: 0 8px 30px rgba(0,0,0,0.35);
    --shadow-lg: 0 20px 50px rgba(0,0,0,0.45);
    --shadow-glow: 0 0 30px rgba(107, 98, 242, 0.12);

    /* Fonts */
    --font-body: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Geist', 'DM Sans', 'Inter', sans-serif;

    /* Transitions */
    --transition: all .25s cubic-bezier(.4,0,.2,1);
    --transition-slow: all .4s cubic-bezier(.4,0,.2,1);
}

/* === CLASSIC LIGHT THEME === */
:root.theme-light, body.theme-light {
    --bg-primary: #f6f6f7;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #fbfbfc;
    --bg-input: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-header: rgba(255,255,255,.85);
    --bg-drawer: #ffffff;

    --border-color: #e5e5e5;
    --border-hover: #d4d4d4;
    --border-active: #6b62f2;

    --text-primary: #161616;
    --text-secondary: #4b4b4b;
    --text-muted: #8a8a8a;
    --text-accent: #5a51e0;

    --accent: #6b62f2;
    --accent-hover: #5a51e0;
    --accent-bg: rgba(107, 98, 242, 0.08);
    --accent-glow: rgba(107, 98, 242, 0.14);

    --gradient-accent: linear-gradient(135deg, #6b62f2, #8b5cf6);
    --gradient-card: none;
    --gradient-glass: none;

    /* Shadows Redefined for Light Theme */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.05);
    --shadow-lg: 0 12px 24px rgba(0,0,0,0.06);
    --shadow-glow: none;
    
    background-color: var(--bg-primary);
}
body.theme-light .card, 
body.theme-light .drawer, 
body.theme-light .modal,
body.theme-light .profile-card,
body.theme-light .sidebar,
body.theme-light .main-header,
body.theme-light .sidebar-header,
body.theme-light .sidebar-user {
    backdrop-filter: none !important;
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: var(--shadow-md) !important;
    color: var(--text-primary) !important;
}
body.theme-light .sidebar {
    border-right: 1px solid var(--border-color);
}

/* CSS Overrides for Sidebar elements */
.sidebar-header { 
    padding: 20px; 
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: padding var(--transition-slow), flex-direction var(--transition-slow);
}
.sidebar-logo { display: flex; align-items: center; gap: 12px; }
.sidebar-logo-icon {
    width: 38px; height: 38px; border-radius: 12px;
    background: var(--gradient-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 800; color: #fff;
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
}
.sidebar-logo-name { font-size: 16px; font-weight: 800; color: var(--text-primary); letter-spacing: 1.5px; }
.sidebar-logo-sub { font-size: 11px; color: var(--text-muted); letter-spacing: 1px; font-weight: 600; display: block; }

.theme-toggle-btn {
    margin-left: auto;
    background: rgba(255,255,255,0.05); border: 1px solid var(--border-color); 
    color: var(--text-secondary); cursor: pointer; padding: 7px; 
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease, margin 0.3s ease;
    z-index: 100;
}
.theme-toggle-btn svg, .btn svg { pointer-events: none; }
body.theme-light .theme-toggle-btn { background: #f1f5f9; border-color: #e2e8f0; color: #64748b; }
.theme-toggle-btn:hover { color: var(--accent); background: var(--accent-bg); border-color: var(--accent); transform: scale(1.08); }

/* Collapsed-правила сайдбара консолидированы в блоке «SIDEBAR COLLAPSED» ниже (~1090). */

/* === THEME WAVE TRANSITIONS (PERMANENT) === */
.no-transition,
.no-transition * {
    transition: none !important;
}

/* Sidebar elements transition immediately */
.sidebar,
.sidebar-header,
.sidebar-user,
.sidebar-link,
.theme-toggle-btn {
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, width var(--transition-slow) !important;
}

/* Body & Main content elements transition with 0.12s delay */
body,
.main-content,
.main-header,
.card,
.stat-card,
.bottom-nav,
.bottom-nav-item {
    transition: background-color 0.3s ease-in-out 0.12s, border-color 0.3s ease-in-out 0.12s, color 0.3s ease-in-out 0.12s, box-shadow 0.3s ease-in-out 0.12s !important;
}

html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
    overflow: hidden;
    height: 100vh;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }

a { color: var(--accent); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--accent-hover); }

.hidden { display: none !important; }

/* === LOGIN SCREEN === */
.login-screen {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-primary);
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(99,102,241,.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(139,92,246,.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(59,130,246,.05) 0%, transparent 50%);
}

.login-container { position: relative; width: 100%; max-width: 420px; padding: 20px; }

.login-glow {
    position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
    width: 300px; height: 300px; border-radius: 50%;
    background: radial-gradient(circle, rgba(99,102,241,.15), transparent 70%);
    filter: blur(60px); pointer-events: none; animation: glowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: .6; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}

.login-card {
    position: relative;
    background: var(--gradient-glass);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 20px; padding: 40px;
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.login-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
.login-logo-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--gradient-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700; color: #fff;
    box-shadow: 0 4px 15px rgba(99,102,241,.3);
}
.login-logo-name { font-size: 16px; font-weight: 700; color: var(--text-primary); letter-spacing: 1px; display: block; }
.login-logo-sub { font-size: 10px; color: var(--text-muted); letter-spacing: 2px; text-transform: uppercase; display: block; }

.login-title { font-size: 24px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.login-subtitle { font-size: 14px; color: var(--text-secondary); margin-bottom: 28px; }

.login-form { display: flex; flex-direction: column; gap: 16px; }

.login-error {
    padding: 10px 14px; border-radius: var(--radius-sm);
    background: var(--danger-bg); border: 1px solid rgba(239,68,68,.2);
    color: var(--danger); font-size: 13px;
}

/* === FORMS === */
.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.form-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.form-input, .form-select, .form-textarea {
    width: 100%; padding: 12px 16px; font-size: 14px; font-family: inherit;
    background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    color: var(--text-primary); outline: none; transition: var(--transition);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg);
}
.form-input::placeholder { color: var(--text-muted); }
.form-select { cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a5a78' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
}
.form-textarea { resize: vertical; min-height: 80px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.form-row .form-group { margin-bottom: 0; }

/* === BEAUTIFICATION COMPONENTS === */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 20px 0; }
.stat-card {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius);
    padding: 16px; text-align: center; transition: var(--transition);
}
.stat-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-glow); }
.stat-card-value { font-size: 20px; font-weight: 700; color: var(--text-primary); display: block; overflow-wrap: normal; word-break: keep-all; min-width: 0; }
.stat-card-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; display: block; }

.req-list { display: flex; flex-direction: column; gap: 8px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 16px; }
.req-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-color); }
.req-item:last-child { border-bottom: none; }
.req-icon { width: 20px; height: 20px; color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.req-content { flex: 1; min-width: 0; }
.req-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 2px; }
.req-value { font-size: 14px; font-weight: 500; color: var(--text-primary); word-break: break-all; }

.collapsible-header { 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 10px 0; cursor: pointer; border-bottom: 1px solid var(--border-color);
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
}
.collapsible-content { overflow: hidden; max-height: 0; transition: max-height 0.3s ease-out; }
.collapsible-content.open { max-height: 500px; padding: 12px 0; }

/* === BUTTONS === */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 20px; font-size: 13px; font-weight: 600; font-family: inherit;
    border: 1px solid transparent; border-radius: var(--radius-pill); cursor: pointer;
    transition: var(--transition); white-space: nowrap; line-height: 1;
}
.btn:active { transform: scale(.97); }

/* Единственное определение .btn-primary (дубль на ~1345 слит сюда в Ф7, !important сняты). */
.btn-primary {
    background: var(--accent); color: #fff; border: none;
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 12px var(--accent-glow);
    letter-spacing: 0.2px; font-size: 13px; font-weight: 600;
    padding: 10px 22px;
}
.btn-primary:hover {
    background: var(--accent-hover);
    box-shadow: 0 6px 16px var(--accent-glow);
    transform: translateY(-1px);
    filter: brightness(1.1);
}

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

.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { color: var(--text-primary); background: var(--bg-primary); }

.btn-danger { background: var(--danger-bg); color: var(--danger); border-color: rgba(239,68,68,.2); }
.btn-danger:hover { background: rgba(239,68,68,.15); }

.btn-success { background: var(--success-bg); color: var(--success); border-color: rgba(34,197,94,.2); }

.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-block { width: 100%; }
.btn-icon { padding: 8px; border-radius: var(--radius-xs); }

/* === APP LAYOUT === */
.app-shell { display: flex; height: 100vh; width: 100vw; }

/* === SIDEBAR === */
.sidebar {
    width: var(--sidebar-width); height: 100vh;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex; flex-direction: column;
    flex-shrink: 0; z-index: 500;
    transition: var(--transition-slow);
    position: relative;
}
.sidebar-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
    z-index: 450;
    animation: fadeIn .2s ease;
}

.sidebar-header { padding: 20px; border-bottom: 1px solid var(--border-color); }
.sidebar-logo { display: flex; align-items: center; width: 100%; position: relative; }
.sidebar-logo-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--gradient-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700; color: #fff;
    flex-shrink: 0;
}
.sidebar-logo-text { flex: 1; margin-left: 10px; min-width: 0; }
.sidebar-logo-name { font-size: 14px; font-weight: 700; color: var(--text-primary); letter-spacing: 1.5px; }
.sidebar-logo-sub { font-size: 10px; color: var(--text-muted); letter-spacing: 1px; display: block; }



.sidebar-nav { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }

.sidebar-link {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    border-radius: var(--radius-sm); font-size: 13px; font-weight: 500;
    color: var(--text-secondary); transition: var(--transition); position: relative;
    text-decoration: none;
}
.sidebar-link:hover { color: var(--text-primary); background: var(--bg-primary); }
.sidebar-link.active {
    color: var(--text-primary); background: var(--accent-bg);
    box-shadow: inset 3px 0 0 var(--accent);
}
.sidebar-link.active svg { stroke: var(--accent); }

.sidebar-badge {
    margin-left: auto; font-size: 10px; font-weight: 700;
    padding: 2px 7px; border-radius: 10px; line-height: 1.4;
    background: var(--accent); color: #fff; min-width: 18px; text-align: center;
}
.sidebar-badge.warn { background: var(--warning); color: #000; }
.sidebar-badge:empty { display: none; }

.sidebar-divider { height: 1px; background: var(--border-color); margin: 8px 14px; }

.sidebar-footer { padding: 12px; border-top: 1px solid var(--border-color); }

.sidebar-user {
    display: flex; align-items: center; gap: 10px; padding: 10px;
    border-radius: var(--radius-sm); background: var(--bg-primary);
}

.sidebar-user-avatar {
    width: 34px; height: 34px; border-radius: 8px;
    background: var(--gradient-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; color: #fff; flex-shrink: 0;
}
.sidebar-user-name { font-size: 13px; font-weight: 500; color: inherit; display: block; }
.sidebar-user-role { font-size: 10px; color: inherit; opacity: 0.7; text-transform: uppercase; letter-spacing: .5px; display: block; }
.sidebar-user-info { flex: 1; min-width: 0; }

.sidebar-logout {
    padding: 6px; border: none; background: transparent; color: var(--text-muted);
    cursor: pointer; border-radius: var(--radius-xs); transition: var(--transition);
}
.sidebar-logout:hover { color: var(--danger); background: var(--danger-bg); }

/* === MAIN CONTENT === */
.main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

.main-header {
    height: var(--header-height); padding: 0 28px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--border-color); flex-shrink: 0;
    background: var(--bg-header); backdrop-filter: blur(10px);
    position: relative; z-index: 2000 !important;
}
.header-left { display: flex; align-items: center; gap: 16px; }
.header-title { font-size: 18px; font-weight: 600; color: var(--text-primary); }
.header-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.header-right { display: flex; align-items: center; gap: 10px; }
.sidebar-toggle { display: none; background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; }

.page-content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 28px; }

/* === CARDS === */
/* Единственное определение .card (дубль на ~1276 слит сюда в Ф7).
   Без !important: inline-акценты шаблонов (цветные бордеры, градиенты) снова работают.
   Мобильный padding задаёт медиа-правило ниже (@media .card { padding:16px }). */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 24px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card-glass {
    background: var(--gradient-glass);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.card-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.card-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* === STAT WIDGETS === */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-bottom: 24px; }

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

.stat-card::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at top right, var(--accent-bg), transparent 70%);
    opacity: 0; transition: opacity 0.3s;
}
.stat-card:hover::before { opacity: 0.5; }

.stat-icon {
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; flex-shrink: 0;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    transition: transform 0.3s;
}
.stat-card:hover .stat-icon { transform: scale(1.1) rotate(5deg); }

.stat-icon.purple { color: #a855f7; box-shadow: 0 0 15px rgba(168,85,247,0.15); }
.stat-icon.green { color: #22c55e; box-shadow: 0 0 15px rgba(34,197,94,0.15); }
.stat-icon.orange { color: #f59e0b; box-shadow: 0 0 15px rgba(245,158,11,0.15); }
.stat-icon.blue { color: #3b82f6; box-shadow: 0 0 15px rgba(59,130,246,0.15); }

/* Текстовая часть карточки. min-width:0 обязателен: без него flex-элемент не может стать уже
   своего содержимого, и длинная сумма (в сумах это «276 000 сум», в тенге и вонах ещё длиннее)
   вылезает за карточку. Размер числа плавающий — на узкой карточке оно уменьшается, а не обрезается. */
.stat-info { min-width: 0; flex: 1; }
.stat-value {
    font-size: clamp(17px, 0.9vw + 9px, 28px); font-weight: 800; color: var(--text-primary);
    letter-spacing: -0.5px; line-height: 1.15;
    /* Ломаем только по пробелам: «276 000 сум» переносится целыми группами, а не «с/ум» */
    overflow-wrap: normal; word-break: keep-all; hyphens: none; text-wrap: balance;
}
.stat-label { font-size: 13px; color: var(--text-muted); font-weight: 500; margin-top: 2px; overflow-wrap: normal; }
.stat-change { font-size: 11px; font-weight: 700; margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; background: rgba(255,255,255,0.03); max-width: 100%; white-space: normal; text-align: left; }
.stat-change.up { color: var(--success); background: var(--success-bg); }
.stat-change.down { color: var(--danger); background: var(--danger-bg); }

/* === TABLES === */
.table-container { 
    overflow-x: auto; 
    border-radius: var(--radius); 
    border: 1px solid var(--border-color); 
    background: var(--bg-card);
    -webkit-overflow-scrolling: touch; 
}

.data-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.data-table th {
    text-align: left; padding: 12px 16px; font-size: 11px; font-weight: 700;
    color: var(--text-secondary); text-transform: uppercase; letter-spacing: .5px;
    background: var(--bg-primary); border-bottom: 1px solid var(--border-color);
}
.data-table th.sortable { cursor: pointer; transition: var(--transition); }
.data-table th.sortable:hover { color: var(--accent); background: var(--bg-secondary); }
.data-table td {
    padding: 12px 16px; font-size: 13px; color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}
.data-table tr:hover td { background: var(--bg-card-hover); }
.data-table tr:last-child td { border-bottom: none; }

/* === BADGES / STATUS === */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 600;
    border: 1px solid transparent;
}
.badge-new, .badge-pending { background: var(--info-bg); color: var(--info); border-color: rgba(59,130,246,.2); }
.badge-processing, .badge-in_progress, .badge-negotiation { background: var(--warning-bg); color: var(--warning); border-color: rgba(245,158,11,.2); }
.badge-qualified, .badge-proposal { background: var(--accent-bg); color: var(--accent); border-color: rgba(99,102,241,.2); }
.badge-converted, .badge-closed_won, .badge-completed, .badge-paid { background: var(--success-bg); color: var(--success); border-color: rgba(34,197,94,.2); }
.badge-rejected, .badge-closed_lost, .badge-cancelled, .badge-overdue { background: var(--danger-bg); color: var(--danger); border-color: rgba(239,68,68,.2); }
.badge-contract, .badge-payment, .badge-on_check { background: rgba(168,85,247,.1); color: #a855f7; border-color: rgba(168,85,247,.2); }
.badge-prepayment, .badge-postpayment { background: rgba(236,72,153,.1); color: #ec4899; border-color: rgba(236,72,153,.2); }
.badge-postpayment_full { background: rgba(168,85,247,.1); color: #a855f7; border-color: rgba(168,85,247,.2); }
.badge-postpayment_partial { background: rgba(6,182,212,.1); color: #06b6d4; border-color: rgba(6,182,212,.2); }
.badge-draft, .badge-sent, .badge-waiting { background: rgba(255,255,255,.05); color: var(--text-secondary); border-color: var(--border-color); }

.badge-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* Priority badges */
.priority-urgent { color: var(--danger); }
.priority-high { color: var(--warning); }
.priority-normal { color: var(--text-secondary); }
.priority-low { color: var(--text-muted); }

/* Source badges */
.source-badge { font-size: 10px; padding: 3px 8px; border-radius: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
/* источники с сайтов направлений: source-website-<slug> — один стиль на все */
.source-badge[class*="source-website-"] { background: rgba(99,102,241,.12); color: #6366f1; }
.source-email { background: rgba(59,130,246,.12); color: #3b82f6; }
.source-max { background: rgba(34,197,94,.12); color: #22c55e; }
.source-phone { background: rgba(99,102,241,.12); color: #6366f1; }
.source-manual { background: rgba(255,255,255,.05); color: var(--text-muted); }

/* === KANBAN === */
.kanban-board {
    display: flex; gap: 16px; overflow-x: auto;
    padding-bottom: 16px; min-height: calc(100vh - 200px);
}
.kanban-column {
    min-width: 240px; max-width: 240px; flex-shrink: 0;
    display: flex; flex-direction: column;
    background: rgba(255,255,255,.02); border: 1px solid var(--border-color);
    border-radius: var(--radius); overflow: hidden;
}
.kanban-column-header {
    padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    background: rgba(255,255,255,.02);
}
.kanban-column-title { font-size: 13px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.kanban-column-count {
    font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px;
    background: rgba(255,255,255,.06); color: var(--text-muted);
}
.kanban-column-body {
    flex: 1; padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
    min-height: 100px;
}
.kanban-column-body.drag-over { background: var(--accent-bg); border: 2px dashed var(--accent); border-radius: 0 0 var(--radius) var(--radius); }

.kanban-card {
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: var(--radius-sm); padding: 10px; cursor: grab;
    transition: var(--transition);
}
.kanban-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.kanban-card.dragging { opacity: .5; cursor: grabbing; }
.kanban-card-title { font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 8px; }
.kanban-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kanban-card-amount { font-size: 14px; font-weight: 700; color: var(--accent); }
.kanban-card-client { font-size: 11px; color: var(--text-muted); }
.kanban-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-color); }

/* === MODAL === */
.modal-overlay {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(10, 10, 15, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; animation: fadeIn .3s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal {
    background: rgba(15, 23, 42, 0.92) !important;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 24px !important;
    width: 100%; max-width: 540px;
    max-height: 85vh; display: flex; flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 40px rgba(56, 189, 248, 0.08) !important;
    animation: slideUp .4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
.modal-header {
    padding: 24px 28px; display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: calc(24px + env(safe-area-inset-top));
}
.modal-title { font-size: 17px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.3px; }
.modal-close {
    width: 32px; height: 32px; border: none; background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary); font-size: 20px; cursor: pointer;
    border-radius: 8px; transition: var(--transition);
    display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: var(--danger-bg); color: var(--danger); }
.modal-body { padding: 28px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 18px; }
.modal-footer {
    padding: 20px 28px; border-top: 1px solid rgba(255, 255, 255, 0.06); display: flex; justify-content: flex-end; gap: 12px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    flex-wrap: wrap;
}

/* === TOAST === */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 300; display: flex; flex-direction: column; gap: 8px; }
.toast {
    padding: 14px 20px; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 500; min-width: 280px;
    display: flex; align-items: center; gap: 10px;
    animation: slideInRight .3s ease, fadeOut .3s ease 2.7s forwards;
    border: 1px solid transparent;
}
.toast-success { background: var(--success-bg); color: var(--success); border-color: rgba(34,197,94,.2); }
.toast-error { background: var(--danger-bg); color: var(--danger); border-color: rgba(239,68,68,.2); }
.toast-info { background: var(--info-bg); color: var(--info); border-color: rgba(59,130,246,.2); }

/* === ANIMATIONS === */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } }

/* === CHARTS GRID === */
.charts-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 24px; }
.chart-box { 
    background: var(--bg-card); 
    border: 1px solid var(--border-color); 
    border-radius: 16px; padding: 24px; 
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}
.chart-box:hover { border-color: var(--border-hover); }
.chart-box canvas { max-height: 380px; width: 100% !important; }

/* === ACTIVITY FEED === */
.activity-feed { display: flex; flex-direction: column; gap: 0; }
.activity-item {
    display: flex; align-items: flex-start; gap: 12px; padding: 12px 0;
    border-bottom: 1px solid rgba(42,42,58,.3);
}
.activity-item:last-child { border-bottom: none; }
.activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 5px; flex-shrink: 0; }
.activity-text { font-size: 13px; color: var(--text-secondary); }
.activity-text strong { color: var(--text-primary); font-weight: 500; }
.activity-time { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* === FILTER BAR === */
.filter-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 14px 18px; background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: var(--radius); margin-bottom: 16px;
}
.filter-bar .form-input, .filter-bar .form-select { padding: 8px 12px; font-size: 12px; }
.filter-search {
    flex: 1; min-width: 200px; position: relative;
}
.filter-search input { padding-left: 36px; }
.filter-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }

/* === EMPTY STATE === */
.empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 60px 20px; text-align: center;
}
.empty-state-icon { font-size: 48px; margin-bottom: 16px; opacity: .3; }
.empty-state-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.empty-state-text { font-size: 13px; color: var(--text-muted); max-width: 300px; }

/* === TABS === */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-color); margin-bottom: 20px; }
.tab {
    padding: 10px 20px; font-size: 13px; font-weight: 500;
    color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent;
    transition: var(--transition); background: none; border-top: none; border-left: none; border-right: none;
    font-family: inherit;
}
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Переключатель категорий в сайдбаре — только на мобиле (на десктопе он в шапке) */
.sidebar-spaces { display: none; }

/* === RESPONSIVE === */
@media (max-width: 768px) {
    :root { --header-height: 56px; }
    .sidebar { position: fixed; left: -280px; width: 280px; z-index: 2100; }
    .sidebar.open { left: 0; box-shadow: 10px 0 40px rgba(0,0,0,0.5); }
    .sidebar-spaces { display: flex; gap: 6px; overflow-x: auto; padding: 10px 14px; border-bottom: 1px solid var(--border-color); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .sidebar-spaces::-webkit-scrollbar { display: none; }
    .sidebar-space-chip { flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-secondary); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; font-family: inherit; transition: all .12s; }
    .sidebar-space-chip.is-active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
    .sidebar-overlay { z-index: 2050; }
    .sidebar-toggle { display: block; margin-right: 8px; position: relative; z-index: 2010; padding: 8px; }
    .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }
    .stat-card { padding: 16px !important; gap: 12px !important; }
    .stat-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; gap: 12px !important; }
    .charts-grid { grid-template-columns: 1fr; }
    #pageContent > div[style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
    #pageContent > div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
    .kanban-column { min-width: 280px; }
    .form-row { grid-template-columns: 1fr; }
    .profile-layout { grid-template-columns: 1fr; }
    .two-col-grid { grid-template-columns: 1fr; }
    
    .sidebar-link { padding: 14px 16px; font-size: 14px; } /* Larger touch area */
    .page-content { padding: 16px; overflow-x: hidden; }
    .main-header { padding: 0 16px; height: 56px; }
    
    .card { padding: 16px; overflow: visible; }
    
    .modal { width: 95%; max-height: 90vh; margin: 10px; border-radius: 20px !important; }
    .modal-body { padding: 20px; gap: 16px; }
    .modal-footer { 
        padding: 16px 20px; 
        flex-direction: column-reverse; 
        align-items: stretch; 
        gap: 10px; 
    }
    .modal-footer .btn { 
        width: 100% !important; 
        margin: 0 !important; 
        justify-content: center; 
    }

    .drawer { max-width: 100%; border-radius: 0 !important; }
}

@media (max-width: 600px) {
    .stats-grid { grid-template-columns: 1fr !important; }
    .header-title { font-size: 16px; }
    .btn { padding: 8px 14px; font-size: 12px; }
    .login-card { padding: 32px 20px; }
    .filter-bar { padding: 12px; flex-direction: column; align-items: stretch; }
    .filter-search { width: 100%; }
    .filter-bar .form-select { width: 100% !important; }
}

/* === DETAIL CARDS === */
/* Единственное определение .detail-grid (дубль на ~1303 слит сюда в Ф7).
   Мобильная колонка — медиа-правило @media(max-width:768px) с !important ниже. */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; text-align: left; }
.detail-section { display: flex; flex-direction: column; gap: 0; }
.detail-section-title {
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 1px; padding-bottom: 8px;
    margin-bottom: 8px; border-bottom: 1px solid rgba(42,42,58,.5);
}


.detail-label { font-size: 14px; color: var(--text-muted); flex-shrink: 0; min-width: 140px; }
.detail-value { font-size: 14px; color: var(--text-primary); text-align: left; flex-grow: 1; margin-left: 12px; }
.detail-message {
    padding: 12px; background: rgba(255,255,255,.02); border-radius: var(--radius-sm);
    border: 1px solid rgba(42,42,58,.3); font-size: 13px; color: var(--text-secondary);
    line-height: 1.6; white-space: pre-wrap;
}
.detail-header-row { display: flex; align-items: center; gap: 16px; }

/* === PROFILE === */
.profile-layout { display: grid; grid-template-columns: 360px 1fr; gap: 24px; }
.profile-card {
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: var(--radius); padding: 0; align-self: start;
    overflow: hidden; box-shadow: var(--shadow-lg);
}
.profile-avatar-container {
    position: relative; width: 100%; aspect-ratio: 1; 
    background: var(--bg-secondary); cursor: pointer;
    overflow: hidden; display: flex; align-items: center; justify-content: center;
}
/* Force the image/div to fill the entire container regardless of fixed sizes in app.js */
.profile-avatar-container img, 
.profile-avatar-container div { 
    width: 100% !important; 
    height: 100% !important; 
    border-radius: 0 !important; 
    font-size: 80px !important; /* Larger letter if no photo */
}
.profile-avatar-container img { object-fit: cover; }
.avatar-edit-overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,0.4);
    display: flex; align-items: center; justify-content: center;
    color: #fff; opacity: 0; transition: var(--transition);
}
.profile-avatar-container:hover .avatar-edit-overlay { opacity: 1; }

.profile-header-info { padding: 24px 28px 12px; }
.profile-name { 
    font-size: 22px; font-weight: 700; color: var(--text-primary); 
    display: flex; align-items: center; gap: 10px; margin: 0;
}
.profile-card .detail-section { padding: 0 28px 28px; }

.profile-info { display: flex; flex-direction: column; gap: 20px; }

/* === PERMISSIONS MATRIX === */
.permissions-matrix { overflow-x: auto; }
.permissions-matrix .data-table td { font-size: 12px; text-align: center; }
.permissions-matrix .data-table td:first-child { text-align: left; font-weight: 600; }
.perm-full { color: var(--success) !important; font-weight: 600; }
.perm-own { color: var(--warning) !important; font-weight: 600; }
.perm-manage { color: var(--info) !important; font-weight: 600; }
.perm-view { color: var(--text-muted) !important; }
.perm-none { color: var(--text-muted) !important; opacity: .5; }

/* === TASK CHECKBOX === */
.task-checkbox {
    width: 22px; height: 22px; border-radius: 6px;
    border: 2px solid var(--border-hover);
    background: transparent; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition); color: transparent;
}
.task-checkbox:hover {
    border-color: var(--success); background: var(--success-bg); color: var(--success);
}
.task-checkbox span::after { content: '✓'; font-size: 12px; font-weight: 700; }

/* === DEAL STAGES BAR === */









/* === CLICKABLE ROW === */
.clickable-row { cursor: pointer; }
.clickable-row:hover td { background: rgba(99,102,241,.03) !important; }
.clickable { cursor: pointer; }
.clickable:hover { background: rgba(99,102,241,.03); }

/* === ROW STATES === */
.row-overdue td { background: rgba(239,68,68,.03) !important; }
.row-completed td { opacity: 1; }
.row-blocked td { opacity: .5; }

/* === TWO COLUMN GRID === */
.two-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }

/* === LINK SUBTLE === */
.link-subtle { font-size: 12px; color: var(--text-muted); transition: var(--transition); }
.link-subtle:hover { color: var(--accent); }
.link { color: var(--accent); text-decoration: none; }
.link:hover { text-decoration: underline; }

/* === LOADING === */
.loading-spin {
    width: 32px; height: 32px; border: 3px solid var(--border-color);
    border-top-color: var(--accent); border-radius: 50%;
    animation: spin .7s linear infinite; margin: 60px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-cell { text-align: center !important; padding: 40px !important; color: var(--text-muted) !important; }

/* === ROLE DESCRIPTION BOX === */
.role-desc-box {
    margin-top: 4px; padding: 14px 16px;
    background: rgba(99,102,241,.05); border: 1px solid rgba(99,102,241,.15);
    border-radius: var(--radius-sm);
}
.role-desc-box h5 { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.role-desc-box div { font-size: 12px; color: var(--text-secondary); line-height: 1.6; }

/* === FORM HINT === */
.form-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* === COMPACT TABLE === */
.data-table.compact th { padding: 8px 12px; }
.data-table.compact td { padding: 8px 12px; font-size: 12px; }

/* === TEXT UTILITIES === */
.text-xs { font-size: 12px; }
.text-muted { color: var(--text-muted); }
.text-bold { font-weight: 600; }
.text-center { text-align: center; }
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--success) !important; }

/* === SIDEBAR USER CLICKABLE === */
.sidebar-user { cursor: pointer; transition: var(--transition); }
.sidebar-user:hover { background: rgba(255,255,255,.05); }

/* === EMPTY STATE MINI === */
.empty-state.mini { padding: 30px 20px; }
.empty-state.mini .empty-state-icon { font-size: 32px; margin-bottom: 10px; }

/* === KANBAN EMPTY === */
.kanban-empty { padding: 20px; text-align: center; color: var(--text-muted); font-size: 12px; }

/* === TEXT UTILITIES === */
.text-danger { color: var(--danger, #ef4444) !important; }
.text-warning { color: var(--warning, #f59e0b) !important; }
.text-bold { font-weight: 700 !important; }

/* === TASK ROW STATES === */
.row-overdue { background: rgba(239, 68, 68, 0.06) !important; }
.row-overdue td { border-color: rgba(239, 68, 68, 0.15) !important; }
.row-expiring { background: rgba(245, 158, 11, 0.06) !important; }
.row-expiring td { border-color: rgba(245, 158, 11, 0.15) !important; }
.row-completed { opacity: 0.8; }
.row-completed:hover { opacity: 1; }
/* === DRAWER (Side Panel) === */
.drawer-overlay {
    position: fixed; inset: 0; z-index: 3100;
    background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
    display: flex; justify-content: flex-end;
    animation: fadeIn .3s ease;
}
.drawer {
    background: rgba(15, 23, 42, 0.9) !important; border-left: 1px solid rgba(255,255,255,0.08) !important;
    width: 100%; max-width: 580px; height: 100vh;
    display: flex; flex-direction: column;
    box-shadow: -15px 0 50px rgba(0,0,0,.5), -5px 0 30px rgba(56, 189, 248, 0.05) !important;
    backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
    animation: slideInRight .4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 3105;
    border-radius: 24px 0 0 24px !important;
    overflow: hidden;
}
.drawer-header {
    padding: 20px 24px; display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,.01);
    padding-top: calc(20px + env(safe-area-inset-top));
}
.drawer-header-left { display: flex; align-items: center; gap: 16px; }
.drawer-title { font-size: 18px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.3px; }
.drawer-close {
    /* Была прозрачная кнопка без границы — терялась в пустой шапке панели
       (замечание владельца, 24.08.2026). Даём видимую форму и крупный знак. */
    width: 36px; height: 36px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary); cursor: pointer; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1; flex: 0 0 auto;
    transition: var(--transition);
}
.drawer-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.drawer-close:hover { background: var(--danger-bg); color: var(--danger); transform: rotate(90deg); }
.drawer-body { padding: 28px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 20px; }
.drawer-footer {
    padding: 20px 24px; border-top: 1px solid rgba(255,255,255,0.06);
    display: flex; justify-content: flex-end; gap: 12px; background: rgba(255,255,255,.01);
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

/* === ACTIVITY TIMELINE (MODERN) === */
.timeline { position: relative; padding-left: 32px; border-left: 2px solid var(--border-color); margin-left: 10px; display: flex; flex-direction: column; gap: 24px; }
.timeline-item { position: relative; }
.timeline-dot {
    position: absolute; left: -41px; top: 4px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--bg-card); border: 3px solid var(--accent);
    z-index: 1;
}
.timeline-content {
    background: rgba(255,255,255,.02); border: 1px solid var(--border-color);
    border-radius: var(--radius-sm); padding: 12px 16px;
}
.timeline-header { display: flex; justify-content: space-between; margin-bottom: 4px; }
.timeline-user { font-weight: 600; font-size: 13px; color: var(--text-primary); }
.timeline-time { font-size: 11px; color: var(--text-muted); }
.timeline-body { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

/* === REFINED KANBAN CARD === */
.kanban-card {
    background: var(--gradient-glass); border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    padding: 16px;
}
.kanban-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-glow); }
.kanban-card-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; }

/* === MOBILE OPTIMIZATIONS === */
@media (max-width: 600px) {
    .drawer { max-width: 100%; border-radius: 0 !important; }
    .drawer-body { padding: 20px; }
    .drawer-footer { padding: 16px 20px; }
    .main-header { padding: 0 16px; }
    .page-content { padding: 16px; overflow-x: hidden; }
}

/* Frosted sidebars and headers (token-driven for theme compatibility) */
.sidebar { background: var(--bg-sidebar); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.main-header { background: var(--bg-header); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.sidebar-link:hover { padding-left: 18px; }

/* === ANIMATIONS === */
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes slideDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* === TASK COMMENTS === */
.comments-container { display: flex; flex-direction: column; gap: 16px; margin-top: 10px; }
.comment-item { 
    display: flex; gap: 12px; padding: 12px; border-radius: 12px; 
    background: rgba(255,255,255,0.02); border: 1px solid var(--border-color);
}
.comment-item.self { background: rgba(99,102,241,0.05); border-color: rgba(99,102,241,0.2); }
.comment-avatar { flex-shrink: 0; }
.comment-content { flex: 1; min-width: 0; }
.comment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.comment-user { font-weight: 600; font-size: 13px; color: var(--text-primary); }
.comment-date { font-size: 11px; color: var(--text-muted); }
.comment-text { font-size: 13px; color: var(--text-secondary); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.comment-input-area { 
    margin-top: 20px; padding: 16px; border-top: 1px solid var(--border-color); 
    background: rgba(255,255,255,0.01);
}


/* === SIDEBAR COLLAPSED (единый блок — разрозненные правила слиты сюда) === */
.sidebar.collapsed { width: 70px; }
.sidebar.collapsed .sidebar-logo-text,
.sidebar.collapsed .sidebar-link span,
.sidebar.collapsed .sidebar-user-info,
.sidebar.collapsed .sidebar-logout { display: none; }

/* Шапка: логотип над тумблером темы, всё по центру */
.sidebar.collapsed .sidebar-header {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 16px 0;
}
.sidebar.collapsed .sidebar-logo { flex-direction: column; align-items: center; justify-content: center; width: 100%; margin: 0; }
.sidebar.collapsed .sidebar-logo-icon { width: 32px; height: 32px; font-size: 14px; }
.sidebar.collapsed .theme-toggle-btn { margin: 0; padding: 4px; }

.sidebar.collapsed .sidebar-nav { padding: 12px 8px; }
.sidebar.collapsed .sidebar-link { justify-content: center; padding: 12px 0; }
.sidebar.collapsed .sidebar-badge { position: absolute; top: 2px; right: 2px; padding: 1px 3px; font-size: 8px; min-width: 12px; }

/* Футер: кнопка сворачивания над аватаром, колонкой, без наложений */
.sidebar.collapsed .sidebar-footer {
    padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.sidebar.collapsed .sidebar-user { justify-content: center; padding: 4px 0; background: transparent; }
.sidebar.collapsed .sidebar-user-avatar { margin: 0; }
.sidebar.collapsed #sidebarCollapseBtn svg { transform: rotate(180deg); }

/* Сквозные пространства Почта и Мессенджер — во весь экран: убираем боковое меню,
   у них своя внутренняя навигация (папки/контакты), а сайдбар только загромождает.
   Только на десктопе/планшете — на мобиле сайдбар и так off-canvas (см. @max-width:768). */
@media (min-width: 769px) {
    #appShell.space-fullscreen .sidebar { display: none; }
}

/* === ENHANCED SEARCH FIX === */
.filter-search input { 
    background: rgba(255,255,255,0.03); 
    border: 1px solid var(--border-color);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding-left: 40px !important;
}
.filter-search input:focus { 
    background: rgba(255,255,255,0.06); 
    box-shadow: 0 0 0 3px var(--accent-glow);
    transform: translateY(-1px);
}
.user-link {
    cursor: pointer;
    color: var(--accent);
    font-weight: 600;
    transition: var(--transition);
}
.user-link:hover {
    text-decoration: underline;
    opacity: 1;
}
.sidebar-user { cursor: pointer; transition: var(--transition); }
.sidebar-user:hover { background: var(--bg-secondary) !important; }

/* Item Table in Modals */
.items-entry-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
.items-entry-table th { text-align: left; padding: 8px; color: var(--text-muted); font-weight: 500; border-bottom: 1px solid var(--border-color); }
.items-entry-table td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.03); }
.items-entry-table .form-input { padding: 6px 10px; font-size: 13px; background: rgba(0,0,0,0.2); }
.item-remove-btn { color: var(--danger); opacity: 0.5; cursor: pointer; transition: 0.2s; padding: 4px; border-radius: 4px; }
.item-remove-btn:hover { opacity: 1; background: rgba(239, 68, 68, 0.1); }
.items-total-row { background: rgba(255,255,255,0.02); }
.items-total-label { text-align: right; font-weight: 600; padding-right: 16px !important; }
.items-total-value { font-weight: 700; color: var(--accent); }
.filter-search input:focus + svg,
.filter-search:focus-within svg { opacity: 1; transform: translateY(-50%) scale(1.1); }
@media (min-width: 992px) { .profile-dashboard-layout { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start; } } .profile-sidebar { position: sticky; top: 0; } .profile-main-card { text-align: center; padding: 32px 24px; } .profile-avatar-container { position: relative; width: 100px; height: 100px; margin: 0 auto 20px; cursor: pointer; border-radius: 24px; overflow: hidden; border: 4px solid var(--accent-bg); transition: var(--transition); } .profile-avatar-container:hover { transform: scale(1.05); border-color: var(--accent); } .avatar-edit-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0; transition: var(--transition); } .profile-avatar-container:hover .avatar-edit-overlay { opacity: 1; } .profile-role-badge { margin-top: 8px; } .profile-basic-info { display: flex; flex-direction: column; gap: 12px; } .info-item { display: flex; justify-content: space-between; font-size: 13px; } .info-item span { color: var(--text-muted); } .info-item strong { color: var(--text-primary); } .modern-tabs { background: var(--bg-card); padding: 8px; border-radius: 12px; border: 1px solid var(--border-color); display: inline-flex; gap: 8px; margin-bottom: 0; } .modern-tabs .tab { padding: 8px 16px; border-radius: 8px; border: none; font-size: 13px; font-weight: 600; color: var(--text-muted); transition: var(--transition); display: flex; align-items: center; gap: 8px; } .modern-tabs .tab:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); } .modern-tabs .tab.active { background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(99,102,241,0.3); } .perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 8px; } .perm-item { border: 1px solid var(--border-color); padding: 12px; border-radius: 10px; display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.01); } .perm-icon { width: 32px; height: 32px; background: var(--accent-bg); color: var(--accent); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .perm-label { font-size: 13px; font-weight: 600; color: var(--text-primary); } .perm-status { font-size: 11px; color: var(--text-muted); } .activity-timeline { display: flex; flex-direction: column; gap: 0; } .activity-item strong { color: var(--text-primary); } .activity-item .badge { background: var(--accent-bg); color: var(--accent); font-size: 10px; padding: 2px 6px; }

/* === TASK CHECKLIST === */
.checklist-section { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border-color); }
.checklist-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.03); transition: var(--transition); }
.checklist-item:hover { background: rgba(255,255,255,0.02); }
.checklist-item:last-child { border-bottom: none; }
.checklist-item.done .checklist-text { opacity: 1; }
.checklist-checkbox { width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--border-hover); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); flex-shrink: 0; }
.checklist-item.done .checklist-checkbox { background: var(--success); border-color: var(--success); }
.checklist-checkbox::after { content: "✓"; color: #fff; font-size: 12px; font-weight: 700; display: none; }
.checklist-item.done .checklist-checkbox::after { display: block; }
.checklist-text { flex: 1; font-size: 14px; color: var(--text-primary); transition: var(--transition); cursor: pointer; }
.checklist-item.done .checklist-text { font-weight: 500; }
.subtask-solution-box { margin-left: 30px; margin-top: 4px; padding: 10px; background: rgba(var(--accent-rgb), 0.03); border-left: 2px solid var(--accent); border-radius: 0 6px 6px 0; font-size: 12px; color: var(--text-secondary); transition: var(--transition); }
.subtask-solution-box:hover { background: rgba(var(--accent-rgb), 0.05); }
.checklist-add-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.checklist-input { background: var(--bg-app); border: 1px dashed var(--border-color); padding: 8px 12px; border-radius: 8px; font-size: 13px; color: var(--text-primary); outline: none; flex: 1; transition: var(--transition); }
.checklist-input:focus { border-color: var(--accent); background: var(--bg-card); border-style: solid; }

/* === DEAL / TASK STAGES BAR === */
















/* === MOBILE BOTTOM NAVIGATION === */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 64px;
    background: var(--bg-sidebar);
    border-top: 1px solid var(--border-color);
    z-index: 2000;
    padding-bottom: env(safe-area-inset-bottom);
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 10px;
    font-weight: 600;
    flex: 1;
    padding: 8px 0;
    transition: var(--transition);
}

.bottom-nav-item svg {
    width: 20px;
    height: 20px;
    transition: var(--transition);
}

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

.bottom-nav-item.active svg {
    stroke: var(--accent);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .bottom-nav { display: flex; }
    .page-content { padding-bottom: 80px; overflow-x: hidden; }
    .sidebar-toggle { display: none; }
    
    .main-header {
        height: 64px;
        padding-top: env(safe-area-inset-top);
        background: var(--bg-sidebar);
        border-bottom: 1px solid var(--border-color);
    }
    
    .header-title { font-size: 16px; }
    .header-subtitle { display: none; }
}

@media (max-width: 768px) {
    .sidebar-footer #sidebarCollapseBtn { display: none; }
}

@media (max-width: 768px) {
    .drawer-body { padding: 16px; gap: 16px; }
    .detail-grid { grid-template-columns: 1fr !important; gap: 12px; }
    
    .detail-label { min-width: auto; font-size: 11px; }
    .detail-value { margin-left: 0; width: 100%; }
    .drawer-title { font-size: 16px; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .detail-header-row { padding: 12px !important; margin-bottom: 16px !important; }
    .detail-header-row h2 { font-size: 18px !important; }
    
    
}



/* --- PREMIUM REDESIGN --- */


.page-header {
    background: var(--bg-card);
    padding: 24px 32px;
    margin: -24px -32px 32px -32px;
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.page-header h2 {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--text-primary);
}

.detail-section-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 12px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-field {
    background: var(--bg-secondary);
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    text-align: left;
    transition: var(--transition);
}

.detail-field:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 12px var(--accent-bg);
}

.detail-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
    color: var(--text-muted);
}

.detail-value {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
}


.btn-success {
    background: var(--success) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3) !important;
    border-radius: var(--radius-pill) !important;
    letter-spacing: 0.2px;
    font-size: 13px !important;
    font-weight: 600 !important;
}
.btn-success:hover {
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4) !important;
    transform: translateY(-1px);
}

.btn-secondary, .btn-ghost {
    border-radius: var(--radius-pill) !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
.btn-secondary:hover, .btn-ghost:hover {
    background: var(--border-color) !important;
}

.btn-outline-primary {
    border-radius: 10px !important;
    border: 1px solid var(--accent) !important;
    background: transparent !important;
    color: var(--accent) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
.btn-outline-primary:hover {
    background: var(--accent-bg) !important;
    color: var(--text-primary) !important;
}

.form-input, .form-select, .form-textarea {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    color: var(--text-primary) !important;
    transition: all 0.3s ease !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-bg) !important;
    background: var(--bg-secondary) !important;
}

.data-table th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 16px;
    background: var(--bg-secondary);
}

.data-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}

.data-table tbody tr {
    transition: background 0.2s ease, transform 0.2s ease;
}
.data-table tbody tr:hover {
    background: var(--bg-secondary) !important;
}

.deal-stages-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    padding: 32px 24px 24px;
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    margin-bottom: 32px;
}
.deal-stage-step {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.deal-stage-step::before {
    content: '';
    position: absolute;
    top: 14px; /* Center of 28px dot */
    left: calc(-50% + 14px);
    width: calc(100% - 28px);
    height: 4px;
    background: var(--border-color);
    z-index: -1;
    border-radius: 2px;
    transition: background 0.3s ease;
}
.deal-stage-step:first-child::before {
    display: none;
}
.deal-stage-step.active::before,
.deal-stage-step.done::before {
    background: var(--stage-color, var(--accent));
}

.deal-stage-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 3px solid var(--border-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    /* This gap ensures the line never overlaps the dot */
    box-shadow: 0 0 0 4px var(--bg-card); 
}

/* Done Step */
.deal-stage-step.done .deal-stage-dot {
    background: var(--stage-color, var(--accent));
    border-color: var(--stage-color, var(--accent));
    color: #fff;
}
.deal-stage-step.done .deal-stage-dot::after {
    content: '✓';
    font-size: 14px;
    font-weight: 800;
}

/* Active Step */
.deal-stage-step.active .deal-stage-dot {
    border-color: var(--stage-color, var(--accent));
    background: var(--bg-card);
    /* Soft glowing ring around the active step */
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--stage-color, var(--accent)) 20%, transparent);
}
.deal-stage-step.active .deal-stage-dot::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--stage-color, var(--accent));
}

.deal-stage-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    transition: color 0.3s ease;
    /* Не даём длинным подписям («В производстве», «Постоплата») наезжать на соседей */
    max-width: 100%;
    padding: 0 4px;
    line-height: 1.3;
    word-break: break-word;
    hyphens: auto;
}
.deal-stage-step:hover .deal-stage-label { color: var(--stage-color, var(--text-primary)); }
.deal-stage-step[onclick] .deal-stage-dot { cursor: pointer; }
.deal-stage-step.active .deal-stage-label,
.deal-stage-step.done .deal-stage-label {
    color: var(--stage-color, var(--text-primary));
}
/* --- TASK LIST PREMIUM --- */
.task-list-table {
    width: 100%;
    border-collapse: collapse;
}
.task-list-table th {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
}
.task-list-table td {
    padding: 11px 0;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}
.task-list-row {
    transition: all 0.2s;
    background: var(--bg-card);
}
.task-list-row:hover {
    background: var(--bg-secondary) !important;
}
.task-list-row.row-overdue {
    border-left: 3px solid var(--danger);
}
.task-circle-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: transparent;
    background: var(--bg-secondary);
}
.task-circle-check:hover {
    border-color: var(--success);
    color: var(--success);
}
.task-circle-check.completed,
.task-list-row.row-completed .task-circle-check {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}
.task-circle-check svg {
    width: 12px;
    height: 12px;
}

.filter-bar .form-select { padding: 8px 12px; font-size: 13px; border-radius: 8px; height: auto; }

/* Toggle Switch */
.toggle-switch { position:relative; width:44px; height:24px; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; cursor:pointer; inset:0; background:var(--border-color); border-radius:24px; transition:0.3s; }
.toggle-slider::before { content:''; position:absolute; width:18px; height:18px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:0.3s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.toggle-switch input:checked + .toggle-slider { background:var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { transform:translateX(20px); }

/* Sidebar Dropdown Menu Styles */
.sidebar-dropdown {
    display: flex;
    flex-direction: column;
}
.sidebar-dropdown-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
}
.sidebar-dropdown-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 20px;
    margin-top: 2px;
    margin-bottom: 4px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-dropdown-menu.expanded {
    max-height: 300px;
    opacity: 1;
}
.sidebar-dropdown-link {
    font-size: 13px !important;
    padding: 10px 14px !important;
    opacity: 0.85;
}
.sidebar-dropdown-link:hover {
    opacity: 1;
}
.sidebar.collapsed .sidebar-dropdown-menu {
    display: none !important;
}
.sidebar.collapsed .dropdown-chevron {
    display: none !important;
}

/* Fix text caret/selection cursor on empty areas */
*, *::before, *::after {
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}
/* Clickable elements get pointer cursor */
a, button, .btn, .sidebar-link, .sidebar-dropdown-toggle, .clickable, .clickable-row,
.kanban-card, .task-checkbox, .task-circle-check, .checklist-checkbox, .checklist-text,
.tab, .toggle-switch, .toggle-slider, .switch-toggle, .slider-round,
label[style*="cursor:pointer"], [onclick], select, .bottom-nav-item,
.sidebar-user, .sidebar-logout, .item-remove-btn, .modal-close, .drawer-close,
.form-select, .badge { cursor: pointer !important; }
/* Input elements get text cursor */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([readonly]),
textarea, [contenteditable="true"] {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    cursor: text !important;
}
/* Readonly inputs keep default cursor */
input[readonly] { cursor: default !important; }
/* Only allow selection where text copy makes sense */
.detail-message, .activity-text, .timeline-comment, .data-table td, .user-link, .link, p, em, .comment-text, .timeline-body {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
}

/* Switch Toggle (used in Integrations page) */
.switch-toggle { position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0; }
.switch-toggle input { opacity:0; width:0; height:0; position:absolute; }
.slider-round { position:absolute; cursor:pointer; inset:0; background:var(--border-color); border-radius:24px; transition:0.3s; }
.slider-round::before { content:''; position:absolute; width:18px; height:18px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:0.3s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.switch-toggle input:checked + .slider-round { background:var(--accent); }
.switch-toggle input:checked + .slider-round::before { transform:translateX(20px); }

/* Responsive Tables Refinement for Mobile Viewport */
@media (max-width: 768px) {
    .data-table, .task-list-table {
        min-width: 780px !important;
    }
}

/* Premium Mobile Redesign for Deal & Task Stages Bar */
@media (max-width: 768px) {
    .deal-stages-bar {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        padding: 20px 16px 16px !important;
        margin-bottom: 20px !important;
        -webkit-overflow-scrolling: touch;
    }
    .deal-stages-bar::-webkit-scrollbar {
        height: 4px;
    }
    .deal-stages-bar::-webkit-scrollbar-track {
        background: transparent;
    }
    .deal-stages-bar::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 2px;
    }
    .deal-stage-step {
        flex: 0 0 110px !important;
        min-width: 110px !important;
    }
    .deal-stage-label {
        font-size: 10px !important;
        max-width: 100px !important;
        white-space: normal !important;
    }
}

/* Deal hero header: на мобиле кнопки уходят под заголовок, чтобы название
   получало всю ширину строки и не ломалось по буквам (напр. «Русьстрой»). */
@media (max-width: 640px) {
    .deal-hero-head .deal-hero-actions {
        width: 100% !important;
        order: 3 !important;
        justify-content: flex-start !important;
    }
    .deal-hero-head .deal-hero-title-wrap {
        flex: 1 1 auto !important;
    }
    .deal-hero-head .deal-hero-title-wrap h2 {
        font-size: 18px !important;
    }
}

/* Responsive Page Header for Mobile Viewport */
@media (max-width: 768px) {
    .page-header {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 16px !important;
        margin: -16px -16px 20px -16px !important;
    }
    .page-header h2 {
        font-size: 20px !important;
        flex: 1 1 auto !important;
        min-width: 150px !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        margin: 0 !important;
        white-space: normal !important;
    }
    .page-header > div[style*="margin-left:auto"],
    .page-header > div[style*="display:flex"] {
        margin-left: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: flex-start !important;
    }

    /* Checklist mobile responsiveness */
    .checklist-item {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 10px 0 !important;
    }
    .checklist-text {
        min-width: calc(100% - 30px) !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    .checklist-item > div[style*="margin-left:auto"] {
        margin-left: 26px !important;
        margin-top: 4px !important;
        width: 100% !important;
        display: flex !important;
        justify-content: flex-start !important;
    }

    /* Form mobile responsiveness */
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-bottom: 16px !important;
    }
    .form-group {
        margin-bottom: 16px !important;
    }
    .form-row .form-group {
        margin-bottom: 16px !important;
    }
    .form-row .form-group:last-child {
        margin-bottom: 0 !important;
    }

    /* Prevent iOS Safari auto-zoom on input focus */
    .form-input, .form-select, .form-textarea {
        font-size: 16px !important;
    }

    /* Force responsive two-column grid to stack on mobile */
    .two-col-grid {
        grid-template-columns: 1fr !important;
    }

    /* Force modal footer to stack buttons vertically on mobile to prevent left-side overflow */
    .modal-footer {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .modal-footer .btn {
        width: 100% !important;
        margin: 0 !important;
        justify-content: center !important;
    }
}

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

/* =============================================
   iOS-STYLE TOGGLE SWITCHES (GLOBAL)
   Replaces all checkboxes with premium iOS toggles
   ============================================= */
input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    width: 44px !important;
    min-width: 44px !important;
    height: 26px !important;
    background: rgba(120, 120, 128, 0.32);
    border-radius: 26px !important;
    border: none !important;
    outline: none !important;
    cursor: pointer;
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    padding: 0 !important;
    margin: 0;
    vertical-align: middle;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

input[type="checkbox"]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

input[type="checkbox"]:checked {
    background: #34c759 !important;
}

input[type="checkbox"]:checked::before {
    transform: translateX(18px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

input[type="checkbox"]:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
/* Внутри переключателей чекбокс скрыт всегда: глобальное правило для :disabled делало его видимым
   и «второй тумблер» просвечивал под ползунком у заблокированных строк Конструктора */
.switch-toggle input[type="checkbox"]:disabled, .toggle-switch input[type="checkbox"]:disabled { opacity: 0; }
.switch-toggle input:disabled + .slider-round, .toggle-switch input:disabled + .toggle-slider { opacity: .6; cursor: not-allowed; }

input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.3);
}

/* Danger-color toggle (for delete permissions) */
.danger-hover input[type="checkbox"]:checked,
input[type="checkbox"].toggle-danger:checked {
    background: var(--danger) !important;
}

/* Light theme adjustments */
body.theme-light input[type="checkbox"] {
    background: rgba(120, 120, 128, 0.2);
}
body.theme-light input[type="checkbox"]::before {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* Nested checkbox labels now work with toggles */
.nested-checkbox-label {
    gap: 14px !important;
}

/* =============================================
   iOS-STYLE FORM SELECT (DROPDOWN)
   Premium rounded select menus
   ============================================= */
.form-select {
    border-radius: 14px !important;
    padding: 12px 40px 12px 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 14px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.form-select:hover {
    border-color: var(--border-hover) !important;
}

/* =============================================
   ENHANCED MODAL/DRAWER DESIGN
   iOS-style grabber pill and rounded corners
   ============================================= */
.modal {
    border-radius: 28px !important;
}
.modal::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.15);
    z-index: 10;
}
body.theme-light .modal::before {
    background: rgba(0, 0, 0, 0.12);
}
.modal-header {
    padding-top: 28px !important;
}

.drawer {
    border-radius: 28px 0 0 28px !important;
}
.drawer::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.12);
    z-index: 10;
}
body.theme-light .drawer::before {
    background: rgba(0, 0, 0, 0.1);
}

/* =============================================
   INDIVIDUAL PERMISSIONS EDITOR
   ============================================= */
.user-perm-editor {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    margin-top: 20px;
}
.user-perm-editor h4 {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.user-perm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 768px) {
    .user-perm-grid {
        grid-template-columns: 1fr;
    }
}
.effective-rights-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    margin-top: 20px;
}
.effective-rights-box h4 {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.effective-rights-box .perm-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 10px;
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1.8;
}
.effective-rights-box .perm-tag .perm-label {
    color: var(--text-muted);
}
.effective-rights-box .perm-tag .perm-value {
    font-weight: 700;
    color: var(--text-primary);
}
.effective-rights-box .perm-tag .perm-value.overridden {
    color: var(--success);
}

/* Custom Select Dropdown Styling */
.custom-select-container {
    position: relative;
    display: inline-block;
    width: 100%;
}
.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-size: 14px;
    background: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    color: var(--text-primary) !important;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    box-sizing: border-box;
}
.custom-select-container.active .custom-select-trigger {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-bg) !important;
    background: var(--bg-secondary) !important;
}
.custom-select-trigger::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    margin-left: 12px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.custom-select-container.active .custom-select-trigger::after {
    transform: rotate(-135deg);
}
.custom-select-options {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 10000;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
    max-height: 260px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}
.custom-select-container.active .custom-select-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.custom-select-option {
    padding: 10px 16px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}
.custom-select-option:hover {
    background: var(--border-color);
}
.custom-select-option.selected {
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 500;
}
.custom-select-option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* =============================================
   MOBILE RESPONSIVENESS & ALIGNMENT OVERRIDES
   Ensures nested grids, forms, and tables behave
   proportionately on all screen sizes.
   ============================================= */
@media (max-width: 768px) {
    /* 1. Stack all 2-column and 3-column inline grids inside cards and drawers */
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr 1fr"],
    [style*="grid-template-columns: repeat(2, 1fr)"],
    [style*="grid-template-columns:repeat(2, 1fr)"],
    [style*="grid-template-columns: repeat(3, 1fr)"],
    [style*="grid-template-columns:repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
    }

    /* 2. Refit 4-column inline grids (e.g. analytics cards) to 2-columns */
    [style*="grid-template-columns: repeat(4, 1fr)"],
    [style*="grid-template-columns:repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* 3. Stack auto-fill/minmax grids with min-width > 300px to prevent viewport stretching */
    [style*="minmax(320px, 1fr)"],
    [style*="minmax(360px, 1fr)"] {
        grid-template-columns: 1fr !important;
    }

    /* 4. Enable horizontal scrolling for multi-item grid/tables inside drawers & modals */
    #iItemsList, #maintenanceItemsContainer {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        padding-bottom: 8px;
    }
    
    #iItemsList > div, 
    #maintenanceItemsContainer table {
        min-width: 650px !important;
    }

    /* 5. Responsive spacing alignments */
    .stat-card {
        padding: 16px !important;
        gap: 12px !important;
    }
    
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .form-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .modal-overlay {
        padding: 10px !important;
    }
    
    .nested-checkbox-label {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }
}

@media (max-width: 480px) {
    /* Stack stats-grid to single column on small smartphones */
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
    
    .timeline {
        padding-left: 20px !important;
        margin-left: 5px !important;
    }
    
    .timeline-dot {
        left: -29px !important;
        width: 12px !important;
        height: 12px !important;
        border-width: 2px !important;
    }
}

@media (max-width: 768px) {
    /* Horizontal scroll for industry tabs, company tabs, and sub-page tabs */
    .tabs {
        overflow-x: auto !important;
        white-space: nowrap !important;
        display: flex !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    .tabs::-webkit-scrollbar {
        display: none !important;
    }
    .tab {
        flex-shrink: 0 !important;
    }

    .fin-company-tabs {
        overflow-x: auto !important;
        white-space: nowrap !important;
        display: flex !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    .fin-company-tabs::-webkit-scrollbar {
        display: none !important;
    }
    .deal-site-tab, .fin-company-tab {
        flex: none !important;
        flex-shrink: 0 !important;
        width: auto !important;
        min-width: 140px !important;
        padding: 12px 16px !important;
    }

    .industry-tabs {
        overflow-x: auto !important;
        white-space: nowrap !important;
        display: flex !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 4px !important;
    }
    .industry-tabs::-webkit-scrollbar {
        display: none !important;
    }
    .ind-tab {
        flex-shrink: 0 !important;
    }
}

.filter-group {
    display: flex;
    gap: 8px;
    align-items: center;
}
@media (max-width: 768px) {
    .filter-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 8px !important;
    }
    .filter-group .form-select,
    .filter-group .btn,
    .filter-group .filter-search {
        width: 100% !important;
        max-width: none !important;
    }
    .btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-success, .btn-danger, .btn-outline-primary {
        padding: 8px 14px !important;
        font-size: 12px !important;
        height: auto !important;
    }
}

/* ============================================================
   DIMENSION — Ecosystem vitrina, space switcher, layout tokens
   ============================================================ */

/* Width container: centre content on wide screens (Dimension max-width 1200) */
.page-inner { max-width: var(--content-max); margin-inline: auto; width: 100%; }
.page-inner--narrow { max-width: var(--content-narrow); }

/* Generic responsive card grid + section card (replaces inline minmax + runtime <style>) */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
    gap: var(--space-16);
}
.section-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: var(--space-28, 28px);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ---- Ecosystem vitrina (pre-auth product chooser) ---- */
/* ===== Ecosystem landing (пост-логин выбор пространства) — адаптивна к светлой и тёмной теме ===== */
.eco-landing {
    position: fixed; inset: 0; z-index: 1100;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-primary); background-size: cover; background-position: center;
    /* только вертикальная прокрутка: фоновое свечение шире экрана и на мобилке давало горизонтальный «разъезд» */
    overflow-x: hidden; overflow-y: auto; padding: 40px 24px;
}
.eco-hero-glow {
    position: absolute; top: -12%; left: 50%; transform: translateX(-50%);
    width: 1100px; max-width: 130%; height: 640px; pointer-events: none;
    background: radial-gradient(circle at 50% 38%, var(--accent-glow), transparent 68%);
    filter: blur(22px);
}
/* Верхняя панель витрины: пользователь + выход (экран уже пост-логин) */
.eco-topbar { position: absolute; top: 20px; right: 22px; z-index: 3; display: flex; align-items: center; gap: 14px; }
.eco-user-chip { font-size: 13.5px; color: var(--text-secondary); font-weight: 500; }
.eco-logout {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--bg-card); color: var(--text-secondary);
    border: 1px solid var(--border-color); border-radius: var(--radius-pill);
    padding: 8px 14px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500;
    transition: var(--transition);
}
.eco-logout svg { width: 16px; height: 16px; }
.eco-logout:hover { color: var(--text-primary); border-color: var(--border-hover); background: var(--bg-card-hover); }
/* Читаемость поверх заданной фоновой картинки: полупрозрачная «вуаль» цвета холста */
.eco-landing.has-bg::before { content: ''; position: absolute; inset: 0; background: var(--bg-primary); opacity: .82; pointer-events: none; z-index: 0; }
.eco-inner { position: relative; z-index: 1; width: 100%; max-width: 1040px; text-align: center; }
.eco-brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 38px; }
.eco-brand-mark {
    width: 46px; height: 46px; border-radius: 13px;
    background: var(--gradient-accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 21px; box-shadow: 0 10px 26px -10px var(--accent);
}
.eco-brand-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.eco-brand-name { font-weight: 700; letter-spacing: 2px; color: var(--text-primary); }
.eco-brand-sub { font-size: 11px; letter-spacing: 1px; color: var(--text-muted); text-transform: uppercase; }
.eco-title {
    font-family: var(--font-display);
    font-size: clamp(30px, 5vw, 50px); font-weight: 600; letter-spacing: -0.03em;
    color: var(--text-primary); margin-bottom: 14px; line-height: 1.05;
}
.eco-subtitle { font-size: 16.5px; color: var(--text-secondary); margin: 0 auto 46px; max-width: 640px; }
.eco-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px; text-align: left;
}
.eco-card {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 13px;
    padding: 28px; cursor: pointer; font-family: inherit; text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color); border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform .22s cubic-bezier(.4,0,.2,1), border-color .22s, box-shadow .22s;
}
.eco-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-lg), 0 18px 40px -18px var(--accent-glow); }
.eco-card:active { transform: translateY(-1px); }
.eco-card-icon {
    width: 48px; height: 48px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-bg); color: var(--accent);
    border: 1px solid var(--accent-glow);
}
.eco-card-icon svg { width: 24px; height: 24px; }
.eco-card-title { font-size: 20px; font-weight: 600; color: var(--text-primary); font-family: var(--font-display); letter-spacing: -0.01em; }
.eco-card-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }
.eco-card-status {
    align-self: center; margin-top: 4px;
    font-size: 11.5px; letter-spacing: .3px; padding: 4px 12px 4px 10px; border-radius: var(--radius-pill);
    border: 1px solid rgba(34,197,94,.40); color: #16a34a; background: rgba(34,197,94,0.10);
    display: inline-flex; align-items: center; gap: 6px;
}
.eco-card-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.eco-card.is-soon { cursor: default; opacity: .75; }
.eco-card.is-soon:hover { transform: none; border-color: var(--border-color); box-shadow: var(--shadow-sm); }
.eco-landing-foot { margin-top: 38px; font-size: 13px; color: var(--text-muted); }


/* ---- Space switcher (floating frosted panel, jump to adjacent sections) ---- */
/* Переключатель разделов — pill в шапке (как продукт-меню Битрикса), панель выпадает вниз */
.space-switcher { position: relative; margin-right: 6px; flex-shrink: 0; }
.space-switcher-toggle {
    height: 36px; padding: 0 12px; gap: 8px; border-radius: var(--radius-pill); cursor: pointer;
    background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-secondary);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: inherit; font-size: 13px; font-weight: 500; white-space: nowrap;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: var(--transition);
}
.space-switcher-toggle:hover { color: var(--text-primary); border-color: var(--border-hover); }
.space-switcher-toggle svg { width: 17px; height: 17px; flex-shrink: 0; }
.space-switcher-toggle .ss-chevron { width: 13px; height: 13px; opacity: .6; }
.space-switcher-panel {
    position: absolute; left: 0; top: calc(100% + 10px);
    width: 250px; padding: 10px; border-radius: 20px; z-index: 2200;
    background: var(--bg-drawer); border: 1px solid var(--border-color);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: rgba(0,0,0,0.35) 0 12px 40px;
    display: flex; flex-direction: column; gap: 4px;
    animation: fadeIn .18s ease;
}
.ss-head { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); padding: 8px 10px 4px; }
.ss-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 11px 12px; border-radius: 12px; cursor: pointer; font-family: inherit; font-size: 14px;
    background: transparent; border: 1px solid transparent; color: var(--text-secondary); text-align: left;
    transition: var(--transition);
}
.ss-item:hover { background: var(--bg-card); color: var(--text-primary); }
.ss-item.is-active { background: var(--accent-bg); color: var(--text-primary); border-color: var(--border-color); }
.ss-item .ss-ico { width: 20px; height: 20px; flex-shrink: 0; display: flex; }
.ss-item .ss-ico svg { width: 20px; height: 20px; }
.ss-item .ss-soon { margin-left: auto; font-size: 10px; letter-spacing: .3px; color: var(--text-muted); border: 1px solid var(--border-color); padding: 2px 8px; border-radius: var(--radius-pill); }
@media (max-width: 768px) { .space-switcher { display: none; } }

/* Collapsible detail cards: класс .collapsed делает состояние авторитетным
   (перекрывает инлайновые transform/display на первичном рендере). */
.collapsible-card.collapsed .collapsible-body { display: none !important; }
.collapsible-card.collapsed .toggle-chevron { transform: rotate(0deg) !important; }
.collapsible-card:not(.collapsed) .toggle-chevron { transform: rotate(180deg); }
.collapsible-card .detail-section-title { margin-bottom: 0; }
.collapse-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; user-select: none; }
.collapse-head .toggle-chevron { color: var(--text-muted); display: inline-flex; align-items: center; flex-shrink: 0; }




/* ============ MAIL CLIENT (Outlook-like 3-pane) ============ */
.mail-client {
    display: grid;
    grid-template-columns: 240px 340px 1fr;
    gap: 0;
    height: calc(100vh - 130px);
    min-height: 480px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg-card);
}
.mail-rail { padding: 16px; border-right: 1px solid var(--border-color); display: flex; flex-direction: column; overflow-y: auto; background: var(--bg-secondary); }
.mail-folders { display: flex; flex-direction: column; gap: 2px; }
.mail-folder {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 12px; border-radius: 10px; cursor: pointer; text-align: left;
    background: transparent; border: none; color: var(--text-secondary); font-size: 13px; font-weight: 500; font-family: inherit;
    transition: var(--transition);
}
.mail-folder:hover { background: var(--bg-card); color: var(--text-primary); }
.mail-folder.active { background: var(--accent-bg); color: var(--text-primary); }
.mail-folder.active svg { stroke: var(--accent); }
.mail-folder-count { margin-left: auto; font-size: 11px; color: var(--text-muted); }

.mail-list { border-right: 1px solid var(--border-color); overflow-y: auto; }
.mail-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 10px; font-size: 15px; font-weight: 700; color: var(--text-primary); font-family: var(--font-display); position: sticky; top: 0; background: var(--bg-card); z-index: 1; }
.mail-sync-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; font-size: 12px; font-weight: 600; font-family: var(--font-body); color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 999px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.mail-sync-btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.mail-sync-btn:disabled { opacity: .7; cursor: default; }
.mail-sync-btn.spinning svg { animation: mailSpin .8s linear infinite; }
.mail-trash-empty { color: var(--danger, #dc2626); }
.mail-trash-empty:hover:not(:disabled) { color: #fff; background: var(--danger, #dc2626); border-color: var(--danger, #dc2626); }
@keyframes mailSpin { to { transform: rotate(360deg); } }
.mail-howto { background: linear-gradient(180deg, var(--accent-bg), transparent); border: 1px solid var(--accent-glow); }
.mail-howto-steps { margin: 0; padding: 0; list-style: none; counter-reset: mh; display: flex; flex-direction: column; gap: 10px; }
.mail-howto-steps li { position: relative; padding-left: 34px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); counter-increment: mh; }
.mail-howto-steps li b { color: var(--text-primary); }
.mail-howto-steps li::before { content: counter(mh); position: absolute; left: 0; top: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--accent); background: var(--bg-card); border: 1px solid var(--accent-glow); border-radius: 50%; }
.mail-howto-steps code, .section-card p code { font-family: var(--font-mono, monospace); font-size: 12px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 5px; padding: 1px 6px; color: var(--text-primary); white-space: nowrap; }
.mail-group-label { padding: 8px 18px 4px; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); }
.mail-item { padding: 11px 18px; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background .12s; }
.mail-item:hover { background: var(--bg-secondary); }
.mail-item.active { background: var(--accent-bg); box-shadow: inset 3px 0 0 var(--accent); }
.mail-item.unread .mail-item-who, .mail-item.unread .mail-item-subject { font-weight: 700; color: var(--text-primary); }
.mail-item-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.mail-item-who { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-item-date { font-size: 11px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.mail-item-subject { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mail-reading { overflow-y: auto; display: flex; flex-direction: column; }
.mail-reading-empty { margin: auto; text-align: center; color: var(--text-muted); font-size: 14px; }
.mail-read-head { padding: 22px 26px 16px; border-bottom: 1px solid var(--border-color); }
.mail-read-body { padding: 22px 26px; font-size: 14px; line-height: 1.6; color: var(--text-primary); overflow-wrap: break-word; }
.mail-back { display: none; align-items: center; gap: 6px; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; font-size: 13px; font-family: inherit; padding: 4px 0; margin-bottom: 8px; }
.mail-back:hover { color: var(--text-primary); }
.mail-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--gradient-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.mail-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 24px; }

@media (max-width: 900px) {
    .mail-client { grid-template-columns: 1fr; height: auto; }
    .mail-rail { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border-color); }
    .mail-folders { flex-direction: row; flex-wrap: wrap; }
    .mail-list, .mail-reading { border-right: none; }
    /* Одна панель за раз: по умолчанию — список; при открытии письма — только письмо + «назад» */
    .mail-reading { display: none; }
    .mail-client.show-message .mail-rail,
    .mail-client.show-message .mail-list { display: none; }
    .mail-client.show-message .mail-reading { display: flex; }
    .mail-back { display: inline-flex; }
}

/* Inline-compose (как в Outlook): форма письма живёт в панели чтения #mailReading, не в drawer */
.mail-compose { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
.mail-compose-head { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; background: var(--bg-card); }
.mail-compose-title { font-size: 16px; font-weight: 700; color: var(--text-primary); font-family: var(--font-display); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-compose-actions { display: flex; gap: 8px; flex-shrink: 0; }
.mail-compose-body { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.mail-compose-body .form-group { margin-bottom: 0; }
.mail-compose-body .mail-editor { min-height: 220px; }
@media (max-width: 640px) {
    .mail-compose-head { padding: 9px 10px; gap: 8px; }
    .mail-compose-title { font-size: 15px; }
    .mail-compose-actions .btn { padding: 7px 10px; }
    .mail-compose-body { padding: 12px; gap: 12px; }
}

/* ============ MESSENGER (внутренний чат, 2-pane) ============ */
.chat-client {
    display: grid; grid-template-columns: 300px 1fr;
    height: calc(100vh - 130px); min-height: 460px;
    border: 1px solid var(--border-color); border-radius: 16px; overflow: hidden; background: var(--bg-card);
}
.chat-contacts { border-right: 1px solid var(--border-color); overflow-y: auto; background: var(--bg-secondary); padding: 8px; }
.chat-contact {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 10px 12px; border-radius: 12px; border: none; background: transparent; cursor: pointer; font-family: inherit;
    transition: background .12s; margin-bottom: 2px;
}
.chat-contact:hover { background: var(--bg-card); }
.chat-contact.active { background: var(--accent-bg); }
.chat-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--gradient-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.chat-contact-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chat-contact-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-contact-role { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-unread { background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 5px; flex-shrink: 0; }

/* min-height:0 обязателен: .chat-thread — grid-item, без него ряд сетки не сжимается меньше
   min-content и composer выталкивается за низ контейнера (заметно при открытой клавиатуре). */
.chat-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-thread-empty { margin: auto; text-align: center; color: var(--text-muted); font-size: 14px; }
.chat-thread-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
.chat-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 2px; }

/* ===== Фаза A: группировка сообщений, хвостики пузырей, крупные эмодзи (Telegram) ===== */
.chat-msg.grp-first, .chat-msg.grp-single { margin-top: 9px; }
/* хвостовая сторона: mine=справа, чужие=слева. Внутренние стыки группы срезаны до 5px,
   внешние углы (верх первого, низ последнего) и одиночное — 14px. */
.chat-msg.mine.grp-first .chat-bubble,
.chat-msg.mine.grp-mid .chat-bubble { border-bottom-right-radius: 5px; }
.chat-msg.mine.grp-mid .chat-bubble,
.chat-msg.mine.grp-last .chat-bubble { border-top-right-radius: 5px; }
.chat-msg:not(.mine).grp-first .chat-bubble,
.chat-msg:not(.mine).grp-mid .chat-bubble { border-bottom-left-radius: 5px; }
.chat-msg:not(.mine).grp-mid .chat-bubble,
.chat-msg:not(.mine).grp-last .chat-bubble { border-top-left-radius: 5px; }
/* сообщение только из эмодзи — крупно, без пузыря */
.chat-msg.emoji-only .chat-bubble { background: transparent; border-color: transparent; box-shadow: none; padding: 0 2px; }
.chat-msg.emoji-only .chat-text { font-size: 46px; line-height: 1.15; }
.chat-msg.emoji-only .chat-meta { margin-top: 0; }
.chat-msg.emoji-only .chat-time, .chat-msg.mine.emoji-only .chat-meta { color: var(--text-muted); }
.chat-msg.mine.emoji-only .chat-bubble .chat-ticks { color: var(--text-muted); }
/* плавающая дата при прокрутке */
.chat-float-date { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 15; background: var(--bg-drawer); border: 1px solid var(--border-color); color: var(--text-secondary); font-size: 11.5px; font-weight: 600; padding: 4px 12px; border-radius: 9999px; box-shadow: rgba(0,0,0,.2) 0 3px 10px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.chat-float-date.show { opacity: 1; }
/* свайп-ответ (мобильный): визуальная стрелка при оттягивании */
.chat-msg { transition: transform .15s ease-out; }
.chat-msg.swiping { transition: none; }
.chat-swipe-reply { position: absolute; top: 50%; transform: translateY(-50%); color: var(--accent); opacity: 0; pointer-events: none; }
.chat-msg.mine .chat-swipe-reply { right: 100%; margin-right: 6px; }
.chat-msg:not(.mine) .chat-swipe-reply { left: 100%; margin-left: 6px; }
/* полноэкранный просмотрщик картинок */
.chat-lightbox { position: fixed; inset: 0; z-index: 7000; background: rgba(0,0,0,.9); display: flex; align-items: center; justify-content: center; animation: chatLbIn .15s ease-out; }
@keyframes chatLbIn { from { opacity: 0; } to { opacity: 1; } }
.chat-lb-img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 6px; box-shadow: rgba(0,0,0,.5) 0 10px 40px; }
.chat-lb-close, .chat-lb-nav { position: absolute; border: none; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.chat-lb-close:hover, .chat-lb-nav:hover { background: rgba(255,255,255,.24); }
.chat-lb-close { top: 16px; right: 16px; width: 44px; height: 44px; }
.chat-lb-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.chat-lb-prev { left: 16px; }
.chat-lb-next { right: 16px; }
@media (max-width: 640px) { .chat-lb-nav { width: 40px; height: 40px; } .chat-lb-prev { left: 6px; } .chat-lb-next { right: 6px; } }
.chat-day { text-align: center; font-size: 11px; color: var(--text-muted); margin: 12px 0 8px; text-transform: uppercase; letter-spacing: .5px; }
.chat-msg { display: flex; }
.chat-msg.mine { justify-content: flex-end; }
.chat-bubble {
    max-width: 68%; padding: 8px 12px 18px; border-radius: 14px; position: relative;
    background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary);
    font-size: 14px; line-height: 1.4; word-break: break-word; white-space: pre-wrap;
}
.chat-msg.mine .chat-bubble { background: var(--accent); border-color: var(--accent); color: #fff; }
.chat-time { position: absolute; right: 10px; bottom: 5px; font-size: 10px; opacity: .6; }
.chat-empty-note { margin: auto; color: var(--text-muted); font-size: 13px; text-align: center; }
/* position:relative — якорь для эмодзи-пикера (иначе absolute уплывал к fixed-предку/странице) */
.chat-compose { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border-color); align-items: flex-end; flex-shrink: 0; position: relative; }
.chat-compose textarea { max-height: 120px; }
.chat-compose .btn { padding: 10px 14px; flex-shrink: 0; }

/* (устаревший «стопкой» мобильный блок удалён — теперь одно-панельный swap-режим ниже, где
   .chat-contacts тянется flex:1, а не обрезается max-height:240px) */

/* ============ MESSENGER — Telegram-like дополнения ============ */
.chat-client { grid-template-columns: 320px 1fr; }
.chat-sidebar { border-right: 1px solid var(--border-color); background: var(--bg-secondary); display: flex; flex-direction: column; overflow: hidden; }
.chat-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-color); color: var(--text-muted); flex-shrink: 0; }
.chat-search input { flex: 1; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-pill); padding: 7px 12px; color: var(--text-primary); font-size: 13px; font-family: inherit; outline: none; }
.chat-contacts { flex: 1; overflow-y: auto; padding: 6px; }
.chat-contact-info { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.chat-contact-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.chat-contact-time { font-size: 11px; color: var(--text-muted); flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; }
/* Иконки «заглушено» и «закреплено» рядом со временем в списке бесед */
.chat-mute-ico { display: inline-flex; align-items: center; color: var(--text-muted); opacity: .8; }
.chat-mute-ico .chat-ic { width: 13px; height: 13px; }
.chat-contact-time .chat-pin-ico { color: var(--text-muted); opacity: .85; }
.chat-contact-time .chat-pin-ico .chat-ic { width: 12px; height: 12px; }
/* Закреплённая беседа — лёгкая подложка, чтобы отделить «пришпиленный» блок сверху */
.chat-contact.pinned { background: var(--bg-secondary); }
.chat-contact.pinned:hover { background: var(--bg-card); }
.chat-contact.pinned.active { background: var(--accent-bg); }
/* Приглушённый (muted) чат: бейдж непрочитанного серый, а не акцентный (как в Telegram) */
.chat-unread.muted { background: var(--text-muted); opacity: .75; }
/* Меню на беседу (без ряда реакций) — компактнее */
.chat-ctx.conv { min-width: 200px; }
.chat-contact-bottom { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.chat-contact-preview { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; display: flex; align-items: center; gap: 3px; }
.chat-draft-label { color: var(--danger); font-weight: 600; flex-shrink: 0; }
/* Поиск по сообщениям: заголовок раздела + подсветка совпадения */
.chat-search-section { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted); padding: 12px 12px 6px; }
.chat-msg-result .chat-contact-preview { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
mark.chat-hl { background: var(--accent-bg); color: var(--accent); border-radius: 3px; padding: 0 1px; }
/* Поиск внутри беседы (шапка) */
.chat-thread-search { border-bottom: 1px solid var(--border-color); background: var(--bg-secondary); padding: 8px 12px; }
.chat-thread-search .chat-search { border-bottom: none; padding: 0; }
.chat-thread-search-results { max-height: 46vh; overflow-y: auto; margin-top: 6px; }
.chat-thread-search-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 8px 10px; background: transparent; border: none; border-radius: 8px; cursor: pointer; font-family: inherit; }
.chat-thread-search-item:hover { background: var(--bg-card); }
.chat-tsi-meta { font-size: 11px; color: var(--text-muted); }
.chat-tsi-body { font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Папки чатов */
.chat-folders { display: flex; gap: 6px; overflow-x: auto; padding: 8px 10px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; scrollbar-width: none; }
.chat-folders::-webkit-scrollbar { display: none; }
.chat-folder-chip { flex-shrink: 0; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-secondary); font-size: 12.5px; font-family: inherit; cursor: pointer; white-space: nowrap; line-height: 1; }
.chat-folder-chip:hover { color: var(--text-primary); }
.chat-folder-chip.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.chat-folder-chip.chat-folder-manage { display: inline-flex; align-items: center; padding: 5px 9px; color: var(--text-muted); }
.chat-folder-create { display: flex; gap: 8px; }
.chat-folder-create .form-input { flex: 1; }
.chat-folder-edit { border: 1px solid var(--border-color); border-radius: 12px; padding: 12px; margin-top: 10px; }
.chat-folder-edit-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.chat-folder-conv-list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.chat-folder-conv { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-primary); cursor: pointer; padding: 5px 4px; border-radius: 8px; }
.chat-folder-conv:hover { background: var(--bg-secondary); }
.chat-folder-conv input { flex-shrink: 0; width: 16px; height: 16px; }
.btn-sm { padding: 5px 10px; font-size: 12px; }

.chat-ticks { display: inline-flex; align-items: center; color: var(--text-muted); }
.chat-ticks.read { color: #4aa9ff; }
.chat-msg.mine .chat-bubble .chat-ticks { color: rgba(255,255,255,.75); }
.chat-msg.mine .chat-bubble .chat-ticks.read { color: #bfe3ff; }

.chat-bubble { padding: 7px 11px 6px; display: inline-flex; flex-direction: column; max-width: 68%; }
.chat-text { display: block; }
.chat-meta { display: inline-flex; align-items: center; gap: 4px; align-self: flex-end; margin-top: 2px; }
.chat-time { position: static; font-size: 10px; opacity: .6; }
.chat-edited { font-size: 10px; opacity: .55; font-style: italic; }
.chat-bubble.deleted { opacity: .7; }
.chat-quote { border-left: 3px solid currentColor; padding: 2px 8px; margin-bottom: 4px; font-size: 12px; opacity: .8; border-radius: 4px; background: rgba(127,127,127,.12); cursor: pointer; transition: background .15s; }
.chat-quote:hover { opacity: 1; background: rgba(127,127,127,.22); }
.chat-quote-author { display: block; font-size: 11px; font-weight: 600; opacity: .9; margin-bottom: 1px; }
/* Короткая подсветка сообщения при переходе по цитате (как в Telegram) */
@keyframes chatJumpFlash { 0%, 70% { box-shadow: 0 0 0 2px var(--accent), 0 0 12px 2px rgba(59,130,246,.55); } 100% { box-shadow: none; } }
.chat-bubble.chat-jump-flash { animation: chatJumpFlash 1.4s ease-out; }

.chat-msg { position: relative; align-items: center; gap: 6px; }
.chat-msg-actions { display: none; gap: 2px; }
.chat-msg:hover .chat-msg-actions { display: inline-flex; }
.chat-msg.mine .chat-msg-actions { order: -1; }
.chat-msg-actions button { background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-secondary); border-radius: 6px; width: 26px; height: 26px; cursor: pointer; font-size: 13px; line-height: 1; }
.chat-msg-actions button:hover { color: var(--text-primary); border-color: var(--accent); }

.chat-reply-bar { display: flex; align-items: center; gap: 10px; padding: 8px 18px; border-top: 1px solid var(--border-color); background: var(--bg-secondary); }
.chat-reply-info { flex: 1; min-width: 0; display: flex; flex-direction: column; border-left: 3px solid var(--accent); padding-left: 10px; }
.chat-reply-info b { font-size: 12px; color: var(--accent); }
.chat-reply-info span { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-reply-cancel { background: transparent; border: none; color: var(--text-muted); cursor: pointer; width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; }
.chat-reply-cancel:hover { background: var(--bg-card); color: var(--text-primary); }

/* ============ MESSENGER — вложения, attach/back, мобильный вид ============ */
.chat-attach { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; color: var(--text-muted); flex-shrink: 0; transition: var(--transition); }
.chat-attach:hover { color: var(--accent); background: var(--bg-secondary); }
.chat-back { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; border-radius: 8px; margin-right: 2px; flex-shrink: 0; }
.chat-back:hover { color: var(--text-primary); background: var(--bg-secondary); }

.chat-image { display: block; margin-bottom: 4px; border-radius: 10px; overflow: hidden; max-width: 260px; }
.chat-image img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; }
.chat-file { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 4px; border-radius: 10px; background: rgba(127,127,127,.12); text-decoration: none; color: inherit; max-width: 240px; }
.chat-msg.mine .chat-file { background: rgba(255,255,255,.16); }
.chat-file-ico { flex-shrink: 0; opacity: .85; }
.chat-file-name { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Мобильный вид: одна панель (список ИЛИ переписка) + кнопка «назад» */
@media (max-width: 820px) {
    .chat-client { grid-template-columns: 1fr; height: calc(100vh - 130px); height: calc(100dvh - 130px); }
    .chat-sidebar { border-right: none; }
    .chat-thread { display: none; }
    .chat-client.show-thread .chat-sidebar { display: none; }
    .chat-client.show-thread .chat-thread { display: flex; }
    .chat-back { display: inline-flex; }

    /* Открытая беседа = полноэкранный тред (как Telegram): шапка приложения и нижняя
       навигация скрыты, чат занимает ровно ВИДИМУЮ область (--chat-vvh из visualViewport,
       обновляется JS при открытии/закрытии клавиатуры) → composer прижат к клавиатуре,
       шапка беседы всегда видна, страница не скроллится и ничего не уезжает. */
    body.chat-thread-open { overflow: hidden; }
    body.chat-thread-open .main-header { display: none; }
    body.chat-thread-open .bottom-nav { display: none; }
    /* pageFadeIn оставляет на #pageContent transform (translateY) — transform у предка делает его
       containing block для position:fixed, и тред съезжал на эти пиксели. В режиме треда убираем. */
    body.chat-thread-open #pageContent { animation: none !important; transform: none !important; }
    body.chat-thread-open .chat-client.show-thread {
        position: fixed; left: 0; right: 0;
        /* top следует за offsetTop визуального вьюпорта: iOS «панорамирует» экран при клавиатуре,
           без этого шапка уезжала за верх. width/margin гасят edge-to-edge хак списка
           (margin:0 -16px; width:100%+32px) — при fixed он выталкивал кнопки composer за экран. */
        top: var(--chat-vvtop, 0px);
        width: auto; margin: 0;
        height: var(--chat-vvh, 100dvh);
        z-index: 3000;
        border: none; border-radius: 0;
        background: var(--bg-app);
    }
    /* PWA/web-clip (standalone, статусбар поверх контента): шапка беседы отступает под чёлку/часы.
       В обычном Safari env()=0 — правило безвредно. При открытой клавиатуре (контейнер съехал на
       vvtop>0) статусбар уже не над нами — но iOS в этот момент и так не перекрывает контент. */
    body.chat-thread-open .chat-thread-head { padding-top: calc(7px + env(safe-area-inset-top)); }
    /* Резиновый скролл iOS не дёргает полноэкранный тред и не тянет pull-to-refresh */
    body.chat-thread-open .chat-messages { overscroll-behavior: contain; }
    .chat-contacts { overscroll-behavior: contain; }
    /* поле ввода: 16px против автозума iOS при фокусе; растёт с текстом до ~6 строк (chatAutosize) */
    .chat-compose textarea { font-size: 16px; max-height: 132px; }
    /* ширину пузыря диктует обёртка. Специфичность 0,2,0 (> базового 0,1,0 .chat-bubble-wrap ниже по файлу),
       иначе базовое правило 68% перебило бы это по порядку следования — тот самый «мёртвый» кейс из аудита. */
    .chat-messages .chat-bubble-wrap { max-width: 84%; }
}

/* ============ MESSENGER — мобильный вид «как Telegram» (полноэкранно, компактно, плотно) ============ */
@media (max-width: 640px) {
    /* Полноэкранно и во всю ширину (как Telegram): заполняем контейнер (.page-content уже держит
       отступ снизу под нижнюю навигацию), гасим боковые поля страницы отрицательным margin, без рамок/скруглений.
       height:100% надёжнее магического calc(100vh - N): учитывает реальную высоту шапки и «безопасные зоны». */
    .chat-client { height: 100%; min-height: 0; margin: 0 -16px; width: calc(100% + 32px); border: none; border-radius: 0; }
    /* Компактная «липкая» шапка беседы */
    .chat-thread-head { padding: 7px 8px; gap: 6px; position: sticky; top: 0; z-index: 6; background: var(--bg-card); }
    .chat-thread-head .chat-avatar { width: 36px; height: 36px; font-size: 14px; }
    .chat-head-title { font-size: 15px; }
    .chat-thread-head #chatPeerStatus { font-size: 11.5px; }
    .chat-back { width: 34px; height: 34px; margin-right: 0; }
    .chat-head-btn { width: 34px; height: 34px; border: none; }
    /* Плотная лента сообщений с меньшими полями */
    .chat-messages { padding: 8px 8px 6px; }
    /* Поле ввода: компактное, с учётом «безопасной зоны» снизу (iPhone) */
    .chat-compose { padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); gap: 6px; }
    .chat-compose .btn { padding: 9px 12px; }
    .chat-attach { width: 36px; height: 36px; }
    /* Список бесед: чуть плотнее, крупнее аватар (тач-цель) */
    .chat-contacts, .chat-contacts.chat-contacts { padding: 4px; }
    .chat-contact { padding: 9px 10px; }
    .chat-search { padding: 8px 10px; }
}

/* На тач-устройствах наведения мыши нет — показываем кнопки действий сообщения
   (ответить/изменить/удалить/реакция) всегда, иначе на телефоне они недоступны. */
@media (hover: none) {
    .chat-msg-actions { display: inline-flex; opacity: 0.75; }
}

/* ============ MESSENGER — реакции и эмодзи ============ */
.chat-bubble-wrap { display: inline-flex; flex-direction: column; max-width: 68%; }
.chat-msg.mine .chat-bubble-wrap { align-items: flex-end; }
.chat-bubble-wrap .chat-bubble { max-width: 100%; }
.chat-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chat-reaction { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; padding: 4px 9px; min-height: 30px; border-radius: 9999px; cursor: pointer;
    background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-secondary); font-family: inherit; line-height: 1.4; }
.chat-reaction:hover { border-color: var(--accent); }
.chat-reaction.mine { background: var(--accent-bg); border-color: var(--accent-glow); color: var(--text-primary); }

.chat-react-pop { position: fixed; z-index: 5000; display: flex; gap: 2px; padding: 5px 7px; border-radius: 9999px;
    background: var(--bg-drawer); border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,.35) 0 8px 24px; backdrop-filter: blur(10px); }
.chat-react-pop button { background: transparent; border: none; cursor: pointer; font-size: 20px; padding: 3px 5px; min-height: 32px; border-radius: 8px; line-height: 1; transition: transform .1s; }
.chat-react-pop button:hover { transform: scale(1.25); background: var(--bg-secondary); }

.chat-emoji-pop { position: absolute; bottom: calc(100% + 8px); left: 8px; z-index: 4000; width: 288px; max-height: 200px; overflow-y: auto;
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 10px; border-radius: 14px;
    background: var(--bg-drawer); border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,.35) 0 10px 30px; backdrop-filter: blur(10px); }
.chat-emoji-pop button { background: transparent; border: none; cursor: pointer; font-size: 20px; padding: 4px; min-height: 32px; border-radius: 8px; line-height: 1; }
.chat-emoji-pop button:hover { background: var(--bg-secondary); }

/* ============ MESSENGER — группы, новый чат ============ */
.chat-search { position: relative; }
.chat-new-btn { flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chat-new-btn:hover { color: var(--accent); border-color: var(--accent); }
.chat-avatar.group { background: linear-gradient(135deg, #22c55e, #0ea5e9); }
.chat-sender { font-size: 12px; font-weight: 600; color: var(--accent); margin-bottom: 2px; }
.chat-msg.mine .chat-sender { display: none; }
.chat-new { display: flex; flex-direction: column; }
.chat-new-group { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border: none; background: transparent; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--text-primary); border-radius: 12px; }
.chat-new-group:hover { background: var(--bg-secondary); }
.chat-new-group .chat-avatar { font-size: 20px; }
.chat-people { display: flex; flex-direction: column; gap: 2px; }

/* ============ MESSENGER — Telegram-паритет: ПКМ-меню, forward, pin, мультивыбор ============ */
/* Кнопка «⋮» действий у сообщения (десктоп-аффорданс к ПКМ/long-press). Резервирует место, чтобы не было дёрганья. */
.chat-menu-btn { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: none; background: transparent; color: var(--text-muted); cursor: pointer; line-height: 1; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .12s, background .12s; align-self: center; }
.chat-msg:hover .chat-menu-btn { opacity: .85; background: var(--bg-secondary); }
.chat-menu-btn:hover { color: var(--text-primary); opacity: 1; }
.chat-msg.mine .chat-menu-btn { order: -1; }
@media (hover: none) { .chat-menu-btn { display: none; } }

/* Пересланное «↪ Переслано от …» */
.chat-fwd { display: flex; align-items: center; gap: 5px; font-size: 11.5px; opacity: .85; margin-bottom: 3px; border-left: 3px solid currentColor; padding-left: 8px; }
.chat-fwd b { font-weight: 600; color: var(--accent); }
.chat-fwd span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- SVG-иконки интерфейса мессенджера (вместо эмодзи; реакции/пикер — эмодзи-контент) ---- */
.chat-ic { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.chat-ctx-item .chat-ic { width: 19px; height: 19px; opacity: .92; }
.chat-menu-btn .chat-ic { width: 18px; height: 18px; }
.chat-pin-ico { display: inline-flex; align-items: center; color: var(--accent); }
.chat-pin-x .chat-ic, .chat-selbar-x .chat-ic, .chat-reply-cancel .chat-ic { width: 18px; height: 18px; }
.chat-group-badge { display: inline-flex; align-items: center; vertical-align: middle; margin-right: 3px; color: var(--text-muted); }
.chat-ctx-emoji.more .chat-ic { color: var(--text-secondary); }
.chat-sel-box .chat-ic { width: 14px; height: 14px; }
.chat-reply-cancel { display: inline-flex; align-items: center; justify-content: center; }
/* Счётчик прочтений в группе */
.chat-readcount { font-size: 10px; opacity: .75; display: inline-flex; align-items: center; gap: 2px; }
.chat-readcount .chat-ic { width: 12px; height: 12px; }
/* Кликабельные ссылки */
.chat-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.chat-msg:not(.mine) .chat-link { color: var(--accent); }

/* Разделитель «Непрочитанные» */
/* ---- Голосовые сообщения: панель записи (поверх composer) и плеер в пузыре ---- */
.chat-voice-rec { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--bg-card); z-index: 5; }
.chat-voice-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: chatRecPulse 1s ease-in-out infinite; flex-shrink: 0; }
@keyframes chatRecPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
#chatVoiceTimer { font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.chat-voice { display: flex; align-items: center; gap: 10px; min-width: 190px; max-width: 240px; padding: 4px 2px; }
.chat-voice-btn { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; }
.chat-msg.mine .chat-voice-btn { background: rgba(255,255,255,.25); }
.chat-voice-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.chat-voice-track { display: block; height: 4px; border-radius: 999px; background: rgba(127,127,127,.3); overflow: hidden; }
.chat-msg.mine .chat-voice-track { background: rgba(255,255,255,.3); }
.chat-voice-prog { display: block; height: 100%; width: 0%; background: var(--accent); border-radius: 999px; transition: width .2s linear; }
.chat-msg.mine .chat-voice-prog { background: #fff; }
.chat-voice-time { font-size: 11.5px; opacity: .8; font-variant-numeric: tabular-nums; }

/* ---- Форматирование текста сообщений (Telegram-разметка): `код`, ||спойлер|| ---- */
.chat-code { font-family: var(--font-mono, monospace); font-size: 12.5px; background: rgba(127,127,127,.16); border: 1px solid rgba(127,127,127,.2); border-radius: 5px; padding: 0 5px; overflow-wrap: anywhere; }
.chat-msg.mine .chat-code { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.25); }
.chat-spoiler { background: rgba(127,127,127,.55); border-radius: 4px; padding: 0 3px; cursor: pointer; user-select: none; transition: background .15s; }
.chat-spoiler:not(.open), .chat-spoiler:not(.open) * { color: transparent !important; }
.chat-spoiler:not(.open) a { pointer-events: none; }
.chat-spoiler.open { background: rgba(127,127,127,.15); user-select: text; }
.chat-msg.mine .chat-spoiler { background: rgba(255,255,255,.45); }
.chat-msg.mine .chat-spoiler.open { background: rgba(255,255,255,.15); }

.chat-unread-divider { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; color: var(--accent); font-size: 11px; }
.chat-unread-divider::before, .chat-unread-divider::after { content: ''; flex: 1; height: 1px; background: var(--accent-glow, var(--border-color)); opacity: .5; }
.chat-unread-divider span { text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }

/* Множественный выбор */
.chat-sel-box { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-color); display: inline-flex; align-items: center; justify-content: center; color: #fff; align-self: center; }
.chat-sel-box.on { background: var(--accent); border-color: var(--accent); }
.chat-msg.selected .chat-bubble { outline: 2px solid var(--accent); outline-offset: 1px; }
.chat-msg { cursor: default; }
.chat-messages.selmode .chat-msg { cursor: pointer; }

/* Панель действий над выбранными */
.chat-selbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border-color); background: var(--bg-secondary); flex-shrink: 0; flex-wrap: wrap; }
.chat-selbar-x { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; line-height: 1; width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.chat-selbar-x:hover { background: var(--bg-card); }
.chat-selbar-count { font-weight: 600; color: var(--text-primary); font-size: 13.5px; }
.chat-selbar-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); border-radius: var(--radius-pill); padding: 6px 12px; cursor: pointer; font-size: 13px; font-family: inherit; }
.chat-selbar-btn:hover { color: var(--text-primary); border-color: var(--accent); }
.chat-selbar-btn.danger:hover { color: var(--danger); border-color: var(--danger); }

/* Закреплённое сообщение (бар сверху беседы) */
.chat-pinned-bar:empty { display: none; }
.chat-pinned { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--border-color); background: var(--bg-secondary); cursor: pointer; flex-shrink: 0; }
.chat-pinned:hover { background: var(--bg-card); }
.chat-pin-ico { flex-shrink: 0; }
.chat-pin-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-pin-text b { font-size: 11px; color: var(--accent); font-weight: 600; }
.chat-pin-count { background: var(--accent-bg); color: var(--accent); border-radius: 8px; padding: 0 5px; font-size: 10px; }
.chat-pin-x { flex-shrink: 0; background: transparent; border: none; color: var(--text-muted); cursor: pointer; width: 36px; height: 36px; margin: -6px -6px -6px 0; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.chat-pin-x:hover { color: var(--danger); background: var(--bg-card); }

/* Обёртка сообщений + кнопка «вниз» */
.chat-messages-wrap { position: relative; flex: 1; display: flex; min-height: 0; }
.chat-messages-wrap .chat-messages { flex: 1; }
.chat-scroll-down { position: absolute; right: 16px; bottom: 16px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--bg-drawer); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: rgba(0,0,0,.28) 0 6px 18px; z-index: 20; }
.chat-scroll-down:hover { color: var(--accent); border-color: var(--accent); }
.chat-scroll-badge:empty { display: none; }
.chat-scroll-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; background: var(--accent); color: #fff; border-radius: 9px; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 5px; }

/* Контекст-меню сообщения (десктоп — у курсора; мобильный — нижний лист) */
.chat-ctx-backdrop { position: fixed; inset: 0; z-index: 6000; background: rgba(0,0,0,.18); }
.chat-ctx { position: fixed; min-width: 210px; max-width: 280px; max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain; padding: 6px; border-radius: 14px; background: var(--bg-drawer); border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,.4) 0 12px 34px; backdrop-filter: blur(12px); }
.chat-ctx-react { display: flex; gap: 2px; padding: 3px 2px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border-color); flex-wrap: wrap; }
.chat-ctx-emoji { background: transparent; border: none; cursor: pointer; font-size: 21px; padding: 3px 5px; border-radius: 8px; line-height: 1; transition: transform .1s; }
.chat-ctx-emoji:hover { transform: scale(1.25); background: var(--bg-secondary); }
.chat-ctx-emoji.more { font-size: 18px; color: var(--text-muted); }
.chat-ctx-list { display: flex; flex-direction: column; }
.chat-ctx-item { display: flex; align-items: center; gap: 11px; text-align: left; background: transparent; border: none; color: var(--text-primary); cursor: pointer; padding: 9px 12px; border-radius: 9px; font-size: 13.5px; font-family: inherit; }
.chat-ctx-item span { flex: 1; }
.chat-ctx-item:hover { background: var(--bg-secondary); }
.chat-ctx-item.danger { color: var(--danger); }
.chat-ctx-sep { height: 1px; background: var(--border-color); margin: 4px 6px; }
.chat-ctx-title { padding: 10px 12px 6px; font-weight: 600; font-size: 14px; color: var(--text-primary); }
.chat-react-pop.grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-width: 300px; border-radius: 14px; padding: 8px; z-index: 6100; }

/* Нижний лист на мобильных: меню/подтверждение снизу, на всю ширину */
@media (max-width: 640px) {
    .chat-ctx.sheet { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100%; max-width: 100%; max-height: 85vh; overflow-y: auto; overscroll-behavior: contain; border-radius: 16px 16px 0 0; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); animation: chatSheetUp .18s ease-out; }
    .chat-ctx.sheet .chat-ctx-react { justify-content: center; gap: 4px; }
    .chat-ctx.sheet .chat-ctx-item { padding: 13px 14px; font-size: 15px; }
    .chat-ctx.sheet .chat-ctx-emoji { font-size: 26px; padding: 5px 7px; }
    .chat-ctx.sheet .chat-ctx-emoji.more .chat-ic { width: 26px; height: 26px; } /* SVG-смайлик «ещё» вровень с эмодзи-реакциями в листе */
    .chat-ctx.sheet .chat-ctx-item .chat-ic { width: 22px; height: 22px; } /* иконки пунктов крупнее под 15px-подписи листа */
}
@keyframes chatSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* Адаптив под мобильное приложение */
@media (max-width: 820px) {
    .chat-compose { padding: 10px 12px; gap: 6px; }
    .chat-selbar { padding: 10px 12px; }
    .chat-thread-head { padding: 10px 12px; }
    .chat-messages { padding: 14px 12px; }
    .chat-scroll-down { right: 12px; bottom: 12px; }
    .chat-msg.selected .chat-bubble { outline-width: 2px; }
}

/* ============ MAIL — rich-text, вложения, черновики ============ */
.mail-toolbar { display: flex; gap: 4px; padding: 6px; border: 1px solid var(--border-color); border-bottom: none; border-radius: 10px 10px 0 0; background: var(--bg-secondary); flex-wrap: wrap; }
.mail-tool { min-width: 30px; height: 28px; border: 1px solid transparent; background: transparent; color: var(--text-secondary); border-radius: 6px; cursor: pointer; font-size: 13px; font-family: inherit; }
.mail-tool:hover { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-color); }
.mail-editor { border-radius: 0 0 10px 10px !important; outline: none; line-height: 1.5; }
.mail-editor:empty::before { content: 'Текст письма…'; color: var(--text-muted); }
.mail-editor a { color: var(--accent); }
.mail-attach-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px dashed var(--border-color); border-radius: 10px; cursor: pointer; font-size: 13px; color: var(--text-secondary); }
.mail-attach-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.mail-att-list { display: flex; flex-wrap: wrap; gap: 8px; }
.mail-att-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; font-size: 12.5px; color: var(--text-primary); text-decoration: none; }
.mail-att-chip button { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; margin-left: 2px; }
.mail-att-chip button:hover { color: var(--danger); }
.mail-att-img { display: inline-flex; flex-direction: column; gap: 4px; width: 120px; text-decoration: none; color: var(--text-secondary); font-size: 11px; }
.mail-att-img img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-color); }
.mail-html-frame { width: 100%; min-height: 320px; border: none; background: #fff; border-radius: 8px; flex: 1; }
.mail-read-atts { padding: 16px 26px; border-top: 1px solid var(--border-color); }

/* Кнопка участников в шапке чата (видна на десктопе, в отличие от .chat-back) */
.chat-head-btn { flex-shrink: 0; background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); cursor: pointer; width: 36px; height: 36px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; }
.chat-head-btn:hover { color: var(--accent); border-color: var(--accent); }
.chat-head-main.clickable { cursor: pointer; border-radius: 10px; padding: 2px 6px; margin: -2px -6px; transition: background .12s; }
.chat-head-main.clickable:hover { background: var(--bg-secondary); }

/* ============ MAIL — свои папки, меню действий ============ */
.mail-cfolders-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 4px; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); }
.mail-cfolder-add { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; }
.mail-cfolder-add:hover { color: var(--accent); }
.mail-folder { position: relative; }
.mail-folder-menu { margin-left: 6px; opacity: 0; color: var(--text-muted); cursor: pointer; font-size: 14px; }
.mail-folder:hover .mail-folder-menu { opacity: 1; }
.mail-ctx { position: fixed; z-index: 5000; min-width: 170px; padding: 5px; border-radius: 12px; background: var(--bg-drawer); border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,.35) 0 10px 30px; backdrop-filter: blur(10px); display: flex; flex-direction: column; }
.mail-ctx button { text-align: left; background: transparent; border: none; color: var(--text-primary); cursor: pointer; padding: 8px 12px; border-radius: 8px; font-size: 13px; font-family: inherit; }
.mail-ctx button:hover { background: var(--bg-secondary); }
.mail-ctx button.danger { color: var(--danger); }
.mail-ctx-sep { font-size: 10px; text-transform: uppercase; color: var(--text-muted); padding: 8px 12px 4px; letter-spacing: .5px; }
/* Перетаскивание письма в папку */
.mail-item[draggable="true"] { cursor: grab; }
.mail-item.mail-item-dragging { opacity: .45; }
.mail-folder.mail-folder-drop { background: var(--accent-bg); outline: 2px dashed var(--accent); outline-offset: -2px; color: var(--text-primary); }
.mail-folder.mail-folder-drop svg { stroke: var(--accent); }

/* Письмо в списке: узкая ведущая колонка (точка «не прочитано» / чекбокс при наведении),
   тело письма, звезда справа. Контролы не занимают постоянного места. */
.mail-item { display: flex; align-items: flex-start; gap: 9px; }
.mail-item-body { flex: 1; min-width: 0; }
.mail-item-lead { width: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 3px; position: relative; cursor: pointer; }
.mail-item-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transition: opacity .12s; }
.mail-item:not(.unread) .mail-item-dot { display: none; }           /* точка — только у непрочитанных */
/* Маленький квадратный чекбокс — ПЕРЕБИВАЕМ глобальный iOS-тумблер `input[type="checkbox"]`.
   Спецификация глобального правила (0,1,1, из-за [type]) выше нашего класса, поэтому селектор
   усилен: `.mail-item input.mail-item-check[type="checkbox"]` = (0,3,1). */
.mail-item input.mail-item-check[type="checkbox"] {
    -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
    position: absolute !important; margin: 0 !important; cursor: pointer; opacity: 0;
    width: 16px !important; min-width: 16px !important; height: 16px !important;
    border-radius: 4px !important; border: 1.5px solid var(--border-color) !important;
    background: var(--bg-card) !important; box-shadow: none !important; transition: opacity .12s;
}
.mail-item input.mail-item-check[type="checkbox"]::before {
    content: '' !important; position: absolute !important; top: 1px !important; left: 4px !important;
    width: 5px !important; height: 9px !important;
    border: solid var(--accent) !important; border-width: 0 2px 2px 0 !important; border-radius: 0 !important;
    background: none !important; box-shadow: none !important; transform: rotate(45deg) !important; opacity: 0 !important; transition: none !important;
}
.mail-item input.mail-item-check[type="checkbox"]:checked { background: var(--accent-bg) !important; border-color: var(--accent) !important; }
.mail-item input.mail-item-check[type="checkbox"]:checked::before { opacity: 1 !important; transform: rotate(45deg) !important; }
.mail-item:hover input.mail-item-check, .mail-item.selected input.mail-item-check { opacity: 1; }
.mail-item:hover .mail-item-dot, .mail-item.selected .mail-item-dot { opacity: 0; }  /* прячем точку, когда виден чекбокс */
/* Тач-устройства: наведения нет — показываем чекбокс и звезду постоянно (иначе их не видно) */
@media (hover: none) {
    .mail-item input.mail-item-check { opacity: 1; }
    .mail-item:not(.unread) .mail-item-dot { display: none; }
    .mail-item-star { opacity: .5; }
    .mail-item-star.on { opacity: 1; }
}
.mail-item-star { background: none; border: none; cursor: pointer; font-size: 15px; line-height: 1; color: var(--text-muted); padding: 0 2px; flex-shrink: 0; margin-top: 2px; opacity: 0; transition: opacity .12s; }
.mail-item-star.on { color: #f5a623; opacity: 1; }                  /* важное — всегда видно */
.mail-item:hover .mail-item-star { opacity: 1; }                    /* иначе — при наведении */
.mail-item-att { margin-right: 4px; }
/* Чёткое различие прочитано / не прочитано */
.mail-item.unread .mail-item-who, .mail-item.unread .mail-item-subject { font-weight: 700; color: var(--text-primary); }
.mail-item:not(.unread) .mail-item-who { font-weight: 500; color: var(--text-secondary); }
.mail-item:not(.unread) .mail-item-subject { color: var(--text-muted); }
.mail-item.unread { background: var(--accent-bg); }                 /* непрочитанные слегка выделены фоном */
.mail-item.unread.active { background: var(--accent-bg); }
.mail-item.selected { background: var(--accent-bg); box-shadow: inset 3px 0 0 var(--accent); }
/* Строка поиска */
.mail-search-bar { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-bottom: 1px solid var(--border-color); color: var(--text-muted); }
.mail-search-input { flex: 1; border: none; background: transparent; outline: none; font-size: 13px; color: var(--text-primary); font-family: inherit; }
.mail-search-clear { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 6px; }
.mail-search-clear:hover { background: var(--bg-secondary); }
.mail-search-deep { background: none; border: 1px solid var(--border-color); border-radius: 7px; color: var(--accent); cursor: pointer; font-size: 11px; padding: 2px 8px; font-family: inherit; white-space: nowrap; }
.mail-search-deep:hover { background: var(--accent-bg); }
/* Панель массовых действий */
.mail-selbar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--accent-bg); border-bottom: 1px solid var(--border-color); flex-wrap: wrap; }
.mail-selbar-x { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 14px; }
.mail-selbar-count { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.mail-selbar-all { background: none; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; font-size: 12px; padding: 2px 8px; color: var(--text-secondary); }
.mail-selbar-actions { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.mail-selbar-actions button { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 7px; cursor: pointer; font-size: 12px; padding: 4px 9px; color: var(--text-primary); font-family: inherit; }
.mail-selbar-actions button:hover { background: var(--bg-secondary); }
.mail-selbar-actions button.danger { color: var(--danger); }
/* Undo-снекбар */
.mail-undo-bar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 6000; display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 12px; background: var(--bg-drawer); border: 1px solid var(--border-color); box-shadow: rgba(0,0,0,.35) 0 10px 30px; font-size: 13px; color: var(--text-primary); }
.mail-undo-bar button { background: none; border: none; color: var(--accent); font-weight: 600; cursor: pointer; font-size: 13px; font-family: inherit; }
.mail-cc-toggle { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 12px; font-weight: 500; font-family: inherit; padding: 0; }
.mail-cc-toggle:hover { text-decoration: underline; }

/* Баннер первого подключения почты */
.mail-setup-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 14px; border-radius: 14px; border: 1px solid var(--accent-glow); background: var(--accent-bg); }
.mail-setup-banner b { color: var(--text-primary); }
.mail-setup-banner > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mail-setup-banner span { font-size: 13px; color: var(--text-secondary); }

/* ============ КАДРЫ (HR): общие стили раздела hr_docs и панели hr_panel ============ */
.hr-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.hr-tabs { display: inline-flex; gap: 4px; background: var(--bg-app); border: 1px solid var(--border-color); border-radius: 13px; padding: 5px; flex-wrap: wrap; }
.hr-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; user-select: none; }
.hr-tab svg { width: 16px; height: 16px; opacity: .7; flex-shrink: 0; }
.hr-tab:hover { color: var(--text-primary); background: rgba(127,127,127,.07); }
.hr-tab.active { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-sm); font-weight: 600; }
.hr-tab.active svg { opacity: 1; color: var(--accent); }
.hr-tab-badge { background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.hr-bal { display: flex; gap: 26px; align-items: center; padding: 18px 22px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.hr-bal-ico { width: 46px; height: 46px; border-radius: 13px; background: rgba(34,197,94,.12); color: #22c55e; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hr-bal-ico svg { width: 22px; height: 22px; }
.hr-bal-n { font-size: 26px; font-weight: 700; color: var(--text-primary); letter-spacing: -.4px; line-height: 1; }
.hr-bal-l { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.hr-bal-sep { width: 1px; align-self: stretch; background: var(--border-color); }
.hr-card { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; margin-bottom: 12px; cursor: pointer; transition: border-color .15s; }
.hr-card:hover { border-color: var(--accent); }
.hr-card-ico { width: 42px; height: 42px; border-radius: 12px; background: var(--bg-app); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hr-card-ico svg { width: 19px; height: 19px; }
.hr-card-body { flex: 1; min-width: 0; }
.hr-card-title { font-size: 14.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-card-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.hr-filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.hr-filters button { border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-secondary); padding: 6px 14px; border-radius: 20px; font-size: 12.5px; cursor: pointer; transition: all .15s; }
.hr-filters button:hover { border-color: var(--accent); color: var(--text-primary); }
.hr-filters button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.hr-tl { list-style: none; margin: 0; padding: 0; }
.hr-tl li { position: relative; padding: 0 0 16px 22px; border-left: 2px solid var(--border-color); }
.hr-tl li:last-child { border-left-color: transparent; padding-bottom: 0; }
.hr-tl-dot { position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-card); }
.hr-fld { margin-bottom: 14px; }
.hr-fld label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 5px; font-weight: 500; }
/* Панель кадровика */
.hrp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.hrp-kpi { padding: 14px 18px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 13px; cursor: pointer; transition: border-color .15s; }
.hrp-kpi:hover { border-color: var(--accent); }
.hrp-kpi.active { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.hrp-kpi-n { font-size: 22px; font-weight: 700; letter-spacing: -.3px; line-height: 1.1; }
.hrp-kpi-l { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.hrp-filters { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.hrp-filters .form-select, .hrp-filters .form-input { width: auto; min-width: 180px; }
.hrp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hrp-table th { text-align: left; padding: 9px 12px; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--border-color); white-space: nowrap; }
.hrp-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.hrp-table tbody tr { transition: background .12s; }
.hrp-table tbody tr[onclick] { cursor: pointer; }
.hrp-table tbody tr:hover { background: var(--bg-app); }
.hrp-neg { color: var(--danger); font-weight: 700; }
.hrp-low { color: #f59e0b; font-weight: 600; }
@media (max-width: 700px) { .hr-tab { padding: 8px 11px; } .hr-tab span { display: none; } .hr-tab svg { width: 18px; height: 18px; } }
/* Редактор шаблона: два столбца (текст | предпросмотр), белый «лист» документа */
.hr-tpl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; align-items: start; }
.hr-tpl-paper { background: #fff; border: 1px solid var(--border-color); border-radius: 10px; padding: 6px; max-height: 62vh; overflow: auto; box-shadow: var(--shadow-sm); }
.hr-tpl-paper #hrsTplPreviewBox { width: 167%; }  /* компенсируем zoom .6, чтобы лист занимал колонку */

/* Полноэкранный drawer (редактор шаблонов документов) */
.drawer.is-fullscreen { max-width: 100% !important; width: 100vw; border-radius: 0 !important; border-left: none !important; }
.drawer.is-fullscreen .drawer-body { padding: 24px clamp(20px, 4vw, 56px); }
.drawer.is-fullscreen .hr-tpl-grid { grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr); gap: 32px; max-width: 1400px; margin: 0 auto; }
.drawer.is-fullscreen .hr-tpl-paper { max-height: 74vh; }
@media (max-width: 860px) { .drawer.is-fullscreen .hr-tpl-grid { grid-template-columns: 1fr; } }

/* ============ ПОДСКАЗКИ «?» (js/modules/01b_hints.js) ============ */
/* Кружок рядом с подписью поля. Именно button — фокус с клавиатуры бесплатно. */
.hint-q {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    cursor: help;
    vertical-align: middle;
    flex: 0 0 auto;
    transition: color .15s, border-color .15s;
}
.hint-q:hover, .hint-q:focus-visible {
    color: var(--accent);
    border-color: var(--accent);
    outline: none;
}
.hint-q:focus-visible { box-shadow: 0 0 0 2px var(--accent-bg, rgba(99,102,241,.25)); }

#hintPop {
    display: none;
    position: fixed;
    z-index: 10000;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    color: var(--text-primary);
    font-size: 12.5px;
    line-height: 1.55;
}

/* ============ КАРТОЧКА СДЕЛКИ: ДВЕ КОЛОНКИ (фаза 2, шаг 1) ============ */
/* Была вертикальная лента из девяти карточек во всю ширину. Слева — работа
   (спецификация, деньги, документы), справа — контекст (контакты, задачи,
   история). minmax(0,…) обязателен: без него длинное содержимое (таблицы
   позиций) распирает колонку и ломает сетку. */
.deal-columns {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.deal-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (max-width: 980px) {
    /* Телефон и узкий планшет: одна колонка, контекст после работы */
    .deal-columns { grid-template-columns: minmax(0, 1fr); }
}

/* ============ САЙДБАР v345: ярусы и флайауты ============ */
/* Разделитель яруса («Ресурсы», «Разделы») */
.sb-div { display: flex; align-items: center; gap: 8px; padding: 12px 14px 4px; }
.sb-div span { font-size: 10px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--text-muted); }
.sb-div::after { content: ""; height: 1px; background: var(--border-color); flex: 1; }

/* Групповая кнопка с шевроном вправо */
.sb-group { width: 100%; border: none; background: none; cursor: pointer; font-family: inherit; text-align: left; }
.sb-group .sb-group-chev { margin-left: auto; opacity: .55; flex-shrink: 0; transition: transform .15s; }
.sb-group.fly-open { background: var(--accent-bg); color: var(--accent); }
.sb-group.fly-open .sb-group-chev { transform: translateX(2px); }

/* Нижний блок: Почта / Мессенджер / Мой профиль */
/* Без margin-top:auto: он оставлял пустую дыру между разделами и Почтой
   (замечание владельца) — теперь нижний блок идёт сразу за группами */
.sb-bottom-links { margin-top: 10px; border-top: 1px solid var(--border-color); padding-top: 8px; }

/* Флайаут: position:fixed, координаты ставит скрипт — overflow сайдбара его не режет */
.sb-fly {
    display: none; position: fixed; z-index: 2600;
    min-width: 210px; max-width: 260px; max-height: min(70vh, 560px); overflow-y: auto;
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px;
    box-shadow: 0 14px 40px rgba(0,0,0,.22); padding: 6px;
}
.sb-fly.open { display: block; }
.sb-fly .sidebar-link { padding: 8px 12px; border-radius: 9px; }
.sb-fly-title { font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--text-muted); padding: 6px 12px 4px; }

/* Переключатель пространств в шапке больше не нужен: всё в сайдбаре.
   Разметка остаётся (совместимость со старым JS), но не показывается. */
#spaceSwitcher { display: none !important; }

/* Кнопка возврата с витрины в приложение (рисуется скриптом) */
.vitrina-back {
    position: fixed; top: 18px; right: 18px; z-index: 5000;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--border-color); background: var(--bg-card);
    color: var(--text-secondary); font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.vitrina-back:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 768px) {
    /* На телефоне флайауты не нужны: там навигация чипами пространств, как раньше.
       Групповые кнопки прячем — их содержимое доступно через чипы. */
    .sb-group, .sb-div, #sbFlyLayer { display: none !important; }
    .sb-bottom-links { margin-top: 0; border-top: none; padding-top: 0; }
}

/* ============ ЧАТ-ПУЗЫРЬ И ВЫЕЗЖАЮЩАЯ ПАНЕЛЬ (v346) ============ */
.chat-fab {
    position: fixed; right: 22px; bottom: 22px; z-index: 2900;
    width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 26px rgba(99, 102, 241, .45);
    transition: transform .15s, box-shadow .15s;
}
.chat-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(99, 102, 241, .55); }
.chat-fab.hidden { display: none; }
.chat-fab-badge {
    position: absolute; top: -4px; right: -4px;
    background: var(--danger, #ef4444); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 1;
    border-radius: 10px; padding: 3px 6px; border: 2px solid var(--bg-primary);
}
.chat-fab-badge.hidden { display: none; }

.chat-panel {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 3000;
    width: 440px; max-width: 96vw;
    background: var(--bg-card); border-left: 1px solid var(--border-color);
    box-shadow: -18px 0 44px rgba(0, 0, 0, .22);
    transform: translateX(105%); transition: transform .22s ease;
    display: flex; flex-direction: column;
}
.chat-panel.open { transform: none; }
.chat-panel-head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-bottom: 1px solid var(--border-color);
}
.chat-panel-head b { flex: 1; font-size: 15px; }
.chat-panel-full { font-size: 12px; color: var(--accent); text-decoration: none; white-space: nowrap; }
.chat-panel-full:hover { text-decoration: underline; }
.chat-panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
/* Чат внутри панели: макет мессенджера должен занять всю высоту тела панели */
.chat-panel-body .chat-shell, .chat-panel-body > div { height: 100%; }

@media (max-width: 768px) {
    /* Телефон: пузырь не перекрывает нижнюю навигацию; панель во весь экран */
    .chat-fab { bottom: calc(76px + env(safe-area-inset-bottom)); right: 14px; }
    .chat-panel { width: 100vw; max-width: 100vw; }
}

/* Живые цифры на витрине */
.eco-card .eco-live { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--accent); min-height: 18px; }

/* ============ ЧАТ В ПАНЕЛИ: ОДНА КОЛОНКА (v348) ============ */
/* Медиазапросы мобильного чата смотрят на ширину ОКНА, а панель узкая при любом
   окне — двухколоночный макет сжимался в кашу (замечание владельца). Включаем
   тот же режим «список ↔ тред», но по родителю-панели, без полноэкранных хаков. */
.chat-panel .chat-client {
    grid-template-columns: 1fr;
    height: 100%; min-height: 0;
    border: none; border-radius: 0;
}
.chat-panel .chat-sidebar { border-right: none; }
.chat-panel .chat-thread { display: none; }
.chat-panel .chat-client.show-thread .chat-sidebar { display: none; }
.chat-panel .chat-client.show-thread .chat-thread { display: flex; min-width: 0; }
.chat-panel .chat-back { display: inline-flex; }

/* ============ КНОПКА «НАЗАД» (v349) ============ */
/* Была прозрачной и терялась (замечание владельца по карточке заявки).
   Видимая таблетка со стрелкой — одинаковая на всех карточках. */
.btn-back {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px 8px 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: var(--radius-pill, 999px);
    font-size: 13px; font-weight: 600;
    flex-shrink: 0;
    transition: var(--transition);
}
.btn-back:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
.btn-back svg { flex-shrink: 0; }

/* ============ МОБИЛЬНЫЙ ПРОХОД (v350) ============ */
/* Чипы пространств удалены; на телефоне группы видны и раскрываются аккордеоном */
.sb-fly--inline {
    position: static !important;
    display: block;
    /* flex-shrink:0 и overflow:visible обязательны: сайдбар — флекс-колонка,
       а у элемента с overflow:auto min-height = 0, и колонка сжимала аккордеон
       в ноль пикселей (грабли v350) */
    flex-shrink: 0; overflow: visible; height: auto;
    min-width: 0; max-width: none; max-height: none;
    box-shadow: none; border: none; border-left: 2px solid var(--border-color);
    border-radius: 0; background: transparent;
    margin: 2px 0 6px 24px; padding: 0 0 0 6px;
}
.sb-fly--inline .sb-fly-title { display: none; }
@media (max-width: 768px) {
    /* Группы и их флайауты-аккордеоны на телефоне видны (отмена правила v345) */
    .sb-group, .sb-div { display: flex !important; }
    #sbFlyLayer { display: block !important; }
    /* Слой всё ещё держит НЕраскрытые флайауты — они скрыты своим display:none */

    /* Чат-панель: во весь экран и без edge-to-edge хака списка,
       который распирал содержимое шире вьюпорта («чат уехал») */
    .chat-panel { left: 0; width: 100%; max-width: 100%; border-left: none; }
    .chat-panel .chat-client { margin: 0 !important; width: 100% !important; }
}

/* Вариант колонок: инфоблок слева узкий, работа справа (карточка задачи) */
.deal-columns--infoleft { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
@media (max-width: 980px) {
    /* на телефоне работа важнее контекста — main поднимается выше */
    .deal-columns--infoleft { grid-template-columns: minmax(0, 1fr); }
    .deal-columns--infoleft .deal-col-side { order: 2; }
    .deal-columns--infoleft .deal-col-main { order: 1; }
}

/* Индикатор активной сортировки в таблицах */
.sort-ind { font-size: 9px; margin-left: 5px; color: var(--accent); vertical-align: 1px; }
th.sortable { white-space: nowrap; }

/* ============ КАРТОЧКА КОНТРАГЕНТА: ДВЕ КОЛОНКИ (v356) ============ */
/* CSS-columns вместо grid: карточки живут внутри условий шаблона, и
   переупорядочивание DOM дважды рвало разметку. Колонки раскладывают
   их сами, break-inside бережёт карточку от разрыва пополам. */
.client-columns { columns: 2 420px; column-gap: 20px; }
.client-columns > .card {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 20px;
}
@media (max-width: 980px) { .client-columns { columns: 1 auto; } }

/* ============ ПРОФИЛЬ: ШАПКА-ОБЛОЖКА (v357) ============ */
.profile-hero { padding: 0; overflow: hidden; margin-bottom: 20px; }
.profile-hero-cover {
    height: 96px;
    background: linear-gradient(120deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 55%, #7dd3fc) 60%, color-mix(in srgb, var(--accent) 35%, #f0abfc) 100%);
    opacity: .85;
}
.profile-hero-row {
    display: flex; align-items: flex-start; gap: 18px;
    padding: 12px 24px 18px;
}
.profile-hero-avatar {
    width: 96px !important; height: 96px !important; flex-shrink: 0;
    /* аватар наполовину заезжает на обложку, текст остаётся целиком на белом */
    margin: -48px 0 0 !important;
    border-radius: 50%; border: 4px solid var(--bg-card);
    box-shadow: 0 6px 18px rgba(0,0,0,.18); position: relative;
    background: var(--bg-card);
}
.profile-hero-avatar:hover { transform: none; }
.profile-hero-id { min-width: 0; }
/* Старый .profile-main-card центрует весь текст — новые поля-строки должны быть слева */
.profile-main-card { text-align: left; padding: 24px; }
@media (max-width: 640px) {
    .profile-hero-row { flex-direction: column; align-items: flex-start; }
}

/* Счётчики карточки контрагента: число и подпись одной строкой по центру
   (были растянуты по краям — «криво сидят», замечание владельца) */
.client-stats .stat-card {
    display: flex; align-items: baseline; justify-content: center; gap: 8px;
}
.client-stats .stat-card-value, .client-stats .stat-card-label { display: inline; margin: 0; }

/* ===== Дашборд v359: воронка списком, лента команды, настройка ===== */
.fnl-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--border-color); }
.fnl-row:last-child { border-bottom: none; }
.fnl-label { display: flex; align-items: center; gap: 8px; width: 150px; flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fnl-track { flex: 1; height: 14px; background: var(--bg-app); border-radius: 7px; overflow: hidden; }
.fnl-bar { height: 100%; border-radius: 7px; transition: width .4s ease; }
.fnl-num { width: 64px; flex-shrink: 0; text-align: right; font-size: 13px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.fnl-pct { color: var(--text-muted); font-weight: 500; font-size: 11px; margin-left: 5px; }

.tf-ico { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tf-chip { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }

.dash-set-group-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 18px 0 4px; }
.dash-set-group-title:first-child { margin-top: 0; }
.dash-set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-color); cursor: pointer; }
.dash-set-row > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.dash-set-label { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.dash-set-hint { font-size: 11.5px; color: var(--text-muted); }

/* Таблица сделок: строка фильтров по столбцам */
.data-table thead .dt-filters th { padding: 2px 12px 10px; background: transparent; }
.dt-filter { width: 100%; max-width: 180px; padding: 5px 26px 5px 8px; font-size: 12px; font-weight: 500; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; }
.dt-filter--on { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.dt-filter-reset { border: none; background: transparent; color: var(--text-muted); font-size: 12px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.dt-filter-reset:hover { color: var(--danger); background: var(--bg-app); }

/* Чат: фото пользователя в кружке собеседника */
.chat-avatar { overflow: hidden; }
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

/* ===== v362: фиксы по замечаниям владельца ===== */
/* (a) Свёрнутый сайдбар: ярусы и группы не разъезжаются */
.sidebar.collapsed .sb-div { padding: 8px 10px 4px; }
.sidebar.collapsed .sb-div span { display: none; }
.sidebar.collapsed .sb-group .sb-group-chev { display: none; }
.sidebar.collapsed .sb-group { justify-content: center; }

/* (f) Тёмная тема: флайауты и всплывашки — непрозрачный фон, как у контекст-меню чата */
.sb-fly { background: var(--bg-drawer); backdrop-filter: blur(12px); }
#hintPop { background: var(--bg-drawer); backdrop-filter: blur(12px); }

/* (c) Сегменты уровней доступа — глобально (редактор ролей объявляет их у себя на странице,
   вкладка «Индивидуальные права» использует те же классы) */
.rseg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.rseg-btn { border: 1px solid var(--border-color); background: var(--bg-app); color: var(--text-muted); font-size: 11px; padding: 5px 10px; border-radius: 6px; cursor: pointer; transition: all .12s; font-family: inherit; white-space: nowrap; }
.rseg-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--text-primary); }
.rseg-btn.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.rseg-btn:disabled { opacity: .6; cursor: default; }
.rspace-card { padding: 0 !important; margin-bottom: 0; overflow: hidden; }
.rspace-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--border-color); background: var(--bg-app); }
.rspace-title { margin: 0; font-size: 14px; font-family: var(--font-display); color: var(--text-primary); letter-spacing: -0.01em; }
.rspace-desc { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.rspace-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.rrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.rrow > label { margin: 0; flex: 1; }
.rrow .rseg { justify-content: flex-end; }
.ind-perm-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.nested-details { border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-app); overflow: hidden; }
.nested-details summary { padding: 10px 14px; font-weight: 600; font-size: 12px; color: var(--text-muted); cursor: pointer; user-select: none; outline: none; }
.nested-details[open] summary { border-bottom: 1px solid var(--border-color); }
.nested-details-content { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
/* (h) Ряд быстрых реакций в меню сообщения: строго одна строка, без переносов */
.chat-ctx-react { flex-wrap: nowrap; justify-content: space-between; gap: 0; }
.chat-ctx-emoji { font-size: 18px; padding: 4px 3px; }
.chat-ctx-emoji.more .chat-ic { width: 18px; height: 18px; }

/* ===== Конструктор (Администрирование): единый вид настроечных экранов =====
   Строки-карточки с ручкой перетаскивания, круглым образцом цвета, встроенным полем названия,
   чипами кода и автоматики, переключателями. Используется стадиями, локалью, направлениями,
   расчётными счетами — новые экраны Конструктора строятся из этих же классов. */
.cfg-tabs { display:inline-flex; gap:4px; padding:4px; background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:var(--radius-pill); margin-bottom:18px; flex-wrap:wrap; }
.cfg-tab { padding:7px 14px; border-radius:var(--radius-pill); font-size:13px; font-weight:600; color:var(--text-secondary); text-decoration:none; transition:background .15s, color .15s; }
.cfg-tab:hover { color:var(--text-primary); }
.cfg-tab.active { background:var(--accent); color:#fff; box-shadow:var(--shadow-sm); }
.cfg-list { display:flex; flex-direction:column; gap:8px; }
.cfg-row { display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:var(--radius-sm); transition:border-color .15s, box-shadow .15s, opacity .15s; }
.cfg-row:hover { border-color:var(--border-hover, var(--accent)); }
.cfg-row.is-hidden { opacity:.55; }
.cfg-row.is-dragging { opacity:.35; }
.cfg-row.is-over { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg); }
.cfg-handle { display:inline-flex; align-items:center; justify-content:center; width:22px; height:32px; color:var(--text-muted); cursor:grab; border-radius:8px; flex-shrink:0; touch-action:none; user-select:none; }
.cfg-handle:hover { color:var(--text-primary); background:var(--bg-app); }
.cfg-row.is-dragging .cfg-handle { cursor:grabbing; }
.cfg-color { position:relative; width:22px; height:22px; border-radius:50%; background:var(--c, #6b7280); box-shadow:0 0 0 3px var(--bg-secondary), 0 0 0 4px var(--border-color); flex-shrink:0; cursor:pointer; transition:transform .15s; }
.cfg-color:hover { transform:scale(1.12); }
.cfg-color input { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; border:0; padding:0; margin:0; }
.cfg-name { flex:1; min-width:140px; background:transparent; border:1px solid transparent; border-radius:8px; padding:6px 8px; font-size:14px; font-weight:500; color:var(--text-primary); font-family:var(--font-body); outline:none; transition:border-color .15s, background .15s; }
.cfg-name:hover { border-color:var(--border-color); }
.cfg-name:focus { border-color:var(--accent); background:var(--bg-app); }
.cfg-name:disabled { color:var(--text-primary); opacity:1; }
.cfg-code { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11.5px; color:var(--text-muted); background:var(--bg-app); border:1px solid var(--border-color); border-radius:6px; padding:3px 8px; white-space:nowrap; }
.cfg-chip { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:var(--text-secondary); background:var(--bg-app); border:1px solid var(--border-color); border-radius:var(--radius-pill); padding:3px 9px; white-space:nowrap; cursor:help; }
.cfg-chip svg { width:12px; height:12px; flex-shrink:0; }
.cfg-switch { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-secondary); white-space:nowrap; cursor:pointer; }
.cfg-switch .switch-toggle { width:38px; height:22px; }
.cfg-switch .slider-round::before { width:16px; height:16px; }
.cfg-switch .switch-toggle input:checked + .slider-round::before { transform:translateX(16px); }
.cfg-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; border:1px solid transparent; background:transparent; color:var(--text-muted); cursor:pointer; transition:all .15s; flex-shrink:0; }
.cfg-icon-btn:hover { color:var(--danger); background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.25); }
.cfg-icon-btn svg { width:16px; height:16px; }
.cfg-add { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-top:14px; padding:14px; border:1px dashed var(--border-color); border-radius:var(--radius-sm); }
.cfg-add .form-group { margin:0; }
.cfg-actions { display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; align-items:center; }
.cfg-fields { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; flex:1; min-width:0; }
.cfg-fields .form-group { margin:0; }
.cfg-fields .form-label { font-size:10.5px; }
.cfg-muted { font-size:12.5px; color:var(--text-muted); }
.cfg-title { flex:1; min-width:140px; font-size:14px; font-weight:500; color:var(--text-primary); }
@media (max-width: 640px) { .cfg-row { flex-wrap:wrap; } .cfg-name, .cfg-title { min-width:100%; order:2; } }

/* Страна учёта (Администрирование → Локаль): строка идентификатора переносится на узких экранах */
.loc-legal-row { flex-wrap: wrap; }
.loc-legal-row .cfg-name { flex: 1 1 140px; min-width: 120px; }
.loc-legal-row .ll-hint { flex: 1 1 160px; min-width: 140px; }

/* Свои поля (Администрирование → Свои поля): строка переносится, панель настроек занимает всю ширину */
.cfg-row.cf-row { flex-wrap: wrap; }
.cfg-details { flex-basis: 100%; width: 100%; margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--border-color); }
.cfg-icon-btn.is-active { color: var(--accent); background: var(--accent-bg, rgba(99,102,241,.12)); }
.cf-roles { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.cf-roles label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-primary); cursor: pointer; }
/* Блок «Дополнительно» в формах записей */
.cf-block { margin-top: 6px; }
.cf-title { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 18px 0 10px; }
.cf-fields .form-group { min-width: 0; }

/* Термины и языки (Администрирование → Термины и языки) */
.terms-group { margin-bottom: 20px; }
.terms-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(200px, 1.2fr); gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--border-color); }
.terms-def { font-size: 13px; color: var(--text-primary); display: flex; flex-direction: column; gap: 4px; min-width: 0; word-break: break-word; }
.terms-row .form-input { margin: 0; }
@media (max-width: 640px) { .terms-row { grid-template-columns: 1fr; } }
/* Переключатель языка в подвале сайдбара */
.sidebar-lang { padding: 0 12px 8px; }
.sidebar-lang .form-select { margin: 0; padding: 6px 28px 6px 10px; height: auto; font-size: 12.5px; }

/* Шаблоны документов и уведомлений (Администрирование → Шаблоны) */
.tpl-subtabs { margin-top: -4px; }
.tpl-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 6px; vertical-align: middle; }
.tpl-editor { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.tpl-main .form-group { margin-bottom: 10px; }
.tpl-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; white-space: pre; overflow: auto; tab-size: 4; }
.tpl-side { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 12px; max-height: 560px; overflow: auto; }
.tpl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tpl-chip { cursor: pointer; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 500; text-transform: none; letter-spacing: 0; }
.tpl-chip:hover { border-color: var(--accent); color: var(--accent); }
.tpl-preview { background: #fff; color: #000; padding: 24px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); max-height: 70vh; overflow: auto; }
.tpl-push { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 14px 16px; max-width: 420px; }
.tpl-push-title { font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.tpl-push-body { white-space: pre-wrap; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
@media (max-width: 860px) { .tpl-editor { grid-template-columns: 1fr; } .tpl-side { max-height: none; } }

/* Меню и дашборды по ролям (Администрирование) */
.ru-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.ru-row { cursor: pointer; padding: 8px 12px; }
.ru-row .cfg-name { flex: 1; font-size: 13.5px; }

/* Праздничный день в календаре (локаль → даты и календарь) */
.cal-day-holiday { text-decoration: underline dotted; text-underline-offset: 3px; }

/* Ссылка в новый интерфейс (подвал бокового меню; появляется, если установлен Docker-стек) */
.sidebar-newui { padding: 0 12px 6px; }
.sidebar-newui-link { border: 1px dashed var(--border-color); border-radius: 10px; color: var(--text-secondary); }
.sidebar-newui-link:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }

/* Обзор администрирования: повседневное администрирование и Конструктор — разными блоками */
.admin-group + .admin-group { margin-top: 34px; }
.admin-group-head { margin-bottom: 14px; }
.admin-group-title { margin: 0; font-size: 17px; font-family: var(--font-display); color: var(--text-primary); letter-spacing: -0.01em; }
.admin-group-desc { margin: 6px 0 0; font-size: 13px; color: var(--text-muted); line-height: 1.55; max-width: 780px; }

/* Пункты меню, ведущие в новый интерфейс: скрыты, пока 01l_new_ui_link.js не убедится, что он есть
   и что у сотрудника есть нужное право (класс is-on) */
.newui-only { display: none !important; }
.newui-only.is-on { display: flex !important; }

/* Подзаголовки внутри выпадающего меню (Администрирование: Люди и доступ / Система / …) */
.sb-fly-group {
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--text-muted); padding: 10px 12px 4px; margin-top: 2px;
    border-top: 1px solid var(--border-color);
}
.sb-fly-group:first-of-type { border-top: none; }
/* Конструктор в меню — только техадминистратору (класс ставит 01l_new_ui_link.js / 06_rbac) */
.admin-tech-only { display: none !important; }
.admin-tech-only.is-on { display: flex !important; }

/* Классический пункт меню, заменённый экраном нового интерфейса */
.hidden-by-newui { display: none !important; }