/* =============================================
   CSS Variables
   ============================================= */
   :root {
    --color-primary: #0a1783;
    --color-primary-dark: #07105e;
    --color-primary-light: #1a2aaa;
    --color-accent: #0a1783;
    --color-bg: #f2f3f5;
    --color-surface: #ffffff;
    --color-surface-2: #f7f8f9;
    --color-border: #e3e5e8;
    --color-text: #1a1c22;
    --color-text-muted: #6b7280;
    --color-green: #31b37d; /*#16a34a*/
    --color-red: #cd2d4b; /*#cd4067, #dc2626*/

    --resizer-width: 1px;
    --mobile-nav-height: 60px;
    --topbar-height: 70px;

    --shadow-sm: 0 1px 3px rgba(10,23,131,.08);
    --shadow-md: 0 4px 16px rgba(10,23,131,.12);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    --transition: 200ms ease;

    --font: 'Inter', sans-serif;
}

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

html, body {
    height: 100%;
    overflow: hidden;

    font-family: var(--font);
    font-size: 14px;
    color: var(--color-text);
    background: var(--color-bg);
}

/* =============================================
     Buttons
     ============================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), opacity var(--transition), transform var(--transition);
    white-space: nowrap;
    user-select: none;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; pointer-events: none; }

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

.btn--secondary { background: var(--color-surface); color: var(--color-primary); border: 1.5px solid var(--color-border); }
.btn--secondary:hover { background: var(--color-surface-2); }

.btn--ghost { background: transparent; color: var(--color-primary); }
.btn--ghost:hover { background: rgba(0,0,0,.06); }

.btn--danger { background: #d93025; color: #fff; }
.btn--danger:hover { background: #b52a1f; }

.btn--icon { padding: 8px; border-radius: 50%; width: 36px; height: 36px; }
.btn--sm { padding: 5px 11px; font-size: 12px; }
.btn--lg { padding: 11px 24px; font-size: 16px; }

/* =============================================
     Layout — Three Columns
     ============================================= */
.app-layout {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: var(--color-bg);
    gap: 0;
}

/* =============================================
     Column
     ============================================= */
.col {
    display: flex;
    flex-direction: column;
    min-width: 200px;
    overflow: hidden;
    background: var(--color-surface);
}

#col-1 { flex: 0 0 260px; }
#col-2 { flex: 1 1 0; }
#col-3 { flex: 0 0 280px; }

.col:first-child { border-right: 1px solid var(--color-border); }
.col:last-child  { border-left: 1px solid var(--color-border); }

.col__top,
.col__bottom {
    flex: 0 0 auto;
    padding: 12px;
    background: var(--color-surface);
}

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

.col__middle {
    flex: 1 1 0;
    overflow: auto;
    padding: 12px;
    background: var(--color-surface);
}

/* =============================================
     Column Resizer
     ============================================= */
.col-resizer {
    flex: 0 0 var(--resizer-width);
    width: var(--resizer-width);
    /* background: var(--color-border); */
    background: transparent;
    cursor: col-resize;
    position: relative;
    z-index: 10;
}

.col-resizer::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 1px;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 40px;
    border-radius: 99px;
    background: var(--color-border);
    transition: background var(--transition), height var(--transition), width var(--transition);
}
.col-resizer.col-resizer-l::after {
    left: 0;
}

.col-resizer:hover {
    background: color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.col-resizer:hover::after,
.col-resizer.dragging::after {
    background: var(--color-primary);
    height: 50px;
}



/* =============================================
     Mobile Layout
     ============================================= */
/* Синяя полоса под системный статус-бар телефона */
.status-bar-stripe {
    display: none;
    height: env(safe-area-inset-top);
    background: #0a1783;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .status-bar-stripe { display: block; }
    .app-layout {
      height: 100dvh; /* dvh учитывает браузерный UI на мобиле */
      position: relative;
      overflow: hidden;
    }

    .col-resizer { display: none; }

    .col {
      position: absolute;
      inset: 0;
      width: 100% !important;
      height: 100dvh;
      min-width: 0;
      opacity: 0;
      pointer-events: none;
      transform: translateX(30px);
      transition: opacity 180ms ease, transform 180ms ease;
    }

    .col.mobile-active {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(0);
    }

    .desktop-only { display: none !important; }

    /* Safe area для iOS — нижняя панель телефона */
    .col__bottom {
      padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }


}

/* mobile-only скрыт на десктопе */
@media (min-width: 769px) {
    .mobile-only  { display: none !important; }
}

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