/* ------------------------ */

/* Regular (300) */
@font-face
{
  font-family: 'Montserrat';
  src: url('fonts/montserrat/montserrat-v31-latin-300.woff2') format('woff2'),
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face
{
  font-family: 'Montserrat';
  src: url('fonts/montserrat/montserrat-v31-latin-regular.woff2') format('woff2'),
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face
{
  font-family: 'Montserrat';
  src: url('fonts/montserrat/montserrat-v31-latin-500.woff2') format('woff2'),
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face
{
  font-family: 'Montserrat';
  src: url('fonts/montserrat/montserrat-v31-latin-600.woff2') format('woff2'),
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face
{
  font-family: 'Montserrat';
  src: url('fonts/montserrat/montserrat-v31-latin-700.woff2') format('woff2'),
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* ------------------------ */

:root
{
    --bg-dark: #1e272e;
    --sidebar-bg: #2f3640;
    --accent: #0097e6;
    --font-main: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* {
    box-sizing: border-box;
    font-family: var(--font-main);
}

body, html
{
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
	background: var(--bg-dark);
    width: 100vw;
    height: 100vh;
	-webkit-font-smoothing: antialiased; /* Делает шрифт более четким на Mac/iOS */
	-moz-osx-font-smoothing: grayscale;
}

/* Убедимся, что кнопки в микшере тоже подхватили шрифт */
button, input, select, textarea, summary
{
    font-family: var(--font-main);
}

.workspace {
    flex: 1;
    position: relative;
    overflow: hidden; /* Критично: рабочая область — это жесткий контейнер */
    background: #353b48;
}

.app-container { display: flex; height: 100vh; width: 100vw; }

/* SIDEBAR */
.sidebar {
    width: 280px;
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    border-right: 1px solid #1a1a1a;
    flex-shrink: 0;
}
.sidebar-header { padding: 20px; font-weight: bold; background: #1a1a1a; color: white; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 10px 0; }

.sidebar-footer
{
	padding: 10px;
	font-size: 0.7rem;
	text-align: center;
	opacity: 0.5;
    color: silver;
}

/* TREE */
summary { padding: 12px 20px; cursor: pointer; border-bottom: 1px solid #3d4652; list-style: none; color: #dcdde1; }
summary:hover { background: #3d4652; }
.song-content { background: #262c35; }
.nav-link { display: block; padding: 10px 30px; color: var(--accent); text-decoration: none; font-size: 0.9rem; border-bottom: 1px solid #2f3640; }
.nav-link:hover { background: #3d4652; color: #f1c40f; }

/* WORKSPACE & WINDOWS */
.workspace
{
	flex: 1;
	position: relative;
	overflow: hidden;
	background: #353b48;
}

/* css/main.css */

/* 1. Базовое окно */
.window {
    position: absolute;
    background: #2f3640;
    border: 1px solid #1a1a1a;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    z-index: 10;
    overflow: hidden; /* Чтобы ничего не вылетало за границы */
}

/* 2. Контейнер контента (занимает всё место под заголовком) */
.window-content {
    flex: 1; 
    display: flex;
    flex-direction: column;
    min-height: 0; /* Критично для корректного flex-расчета */
    position: relative;
    width: 100%;
}

/* 3. Внутренняя обертка (в которой лежит iframe или микшер) */
.win-body-inner {
    flex: 1;
    display: flex; /* Делаем флексом, чтобы iframe внутри тоже тянулся */
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: auto; /* Скролл для микшера появится здесь */
}

/* 4. Сам PDF iframe */
.win-body-inner iframe {
    flex: 1; /* Занимает всё пространство внутри win-body-inner */
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* 5. Исключение для микшера (авто-высота) */
.window.auto-height {
    height: auto !important;
}
.window.auto-height .window-content,
.window.auto-height .win-body-inner {
    flex: none; /* Отключаем растягивание, микшер сам задает высоту */
    height: auto;
}
.window-header { background: #1a1a1a; color: white; padding: 8px 12px; cursor: move; display: flex; justify-content: space-between; user-select: none; }
.window-close { cursor: pointer; font-weight: bold; padding: 0 5px; }
.window-close:hover { color: #ff5e57; }
.window-overlay { position: absolute; top:0; left:0; right:0; bottom:0; display:none; z-index:100; }
.window-resizer { width:15px; height:15px; position:absolute; right:0; bottom:0; cursor:nwse-resize; z-index:101; }

@media (max-width: 768px) {
    .workspace
	{
		display: none;
	}

    .sidebar
	{
        position: sticky;
        top: 0;
        z-index: 1000;
        padding-top: env(safe-area-inset-top); /* Учет "челки" на iPhone */
		width: 100vw !important;
	}
}

.help-trigger {
    background: transparent;
    border: none;
    color: #7f8c8d;
    font-size: 1.4rem;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0 5px;
    line-height: 1;
	font-size: 16px;
}

.help-trigger:hover {
    color: #0097e6;
    transform: scale(1.1);
}

/* Стили для внутреннего содержимого окна помощи */
.help-window-body {
    height: 100%;
    overflow-y: auto;
    background: #1e272e;
	color: white;
}