/* ============================================
   RESET & BASE STYLES
   ============================================ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior: none;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-bg-page);
    position: relative;
    min-height: 100vh;
    overscroll-behavior: none;
    overflow-x: hidden;
}

/* === Desktop (.app) app-shell scroll fix ===
   WKWebView delivers mouse-wheel scrolling only to nested overflow containers, NOT
   to the document/body (confirmed: scrollTo() works programmatically but the wheel
   does nothing on document scroll; nested overflow:auto regions DO get the wheel).
   So on the desktop we turn the shell into a flex column where .main-content is a
   real nested scroll region. Scoped to html.tb-desktop so the web build keeps its
   native document scrolling (scroll restoration, anchors, browser scrollbar). */
html.tb-desktop,
html.tb-desktop body {
    height: 100%;
}

html.tb-desktop body {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

html.tb-desktop body > .navbar {
    flex: 0 0 auto;
}

html.tb-desktop .main-content {
    /* Flex ITEM of the body shell (fills the space under the navbar) + its own
       scroll region. Deliberately NOT display:flex — making it a flex container
       reparents page content (.page-layout etc.) as flex items and breaks their
       block layout/centering. Keep it a normal block that simply scrolls. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

a {
    color: var(--color-blue);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-info-hover);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
    cursor: pointer;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

/* Remove default focus outline, use custom */
:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

/* Selection */
::selection {
    background-color: var(--color-purple);
    color: white;
}

/* === Desktop (.app) — no browser-style text selection ===
   Owner: "у нас приложение, а не браузер" — dragging the mouse (e.g. across a modal
   title) must not paint a text-selection highlight, and Cmd/Ctrl+A must not select
   the whole page. Scoped to html.tb-desktop so the web build keeps normal browser
   text selection. Re-enabled below for genuine text-entry surfaces. */
html.tb-desktop,
html.tb-desktop * {
    -webkit-user-select: none;
    user-select: none;
}

html.tb-desktop input,
html.tb-desktop textarea,
html.tb-desktop [contenteditable],
html.tb-desktop [contenteditable] * {
    -webkit-user-select: text;
    user-select: text;
}