/* =============================================================================
 * Turbo Manager Standard - static/css/turbo-common.css
 * Author: ZioTitanok (v. 2026.08.15)
 * ============================================================================= */

/*
 * Canonical cross-project components.
 * Project styles define brand colours; this file owns shared geometry,
 * typography and interaction dimensions.
 */

:root {
    --turbo-content-width: 1320px;
    --turbo-navbar-height: 80px;
    --turbo-control-size: 42px;
    --turbo-radius: var(--brand-radius, 0.875rem);
    --turbo-line: var(--brand-line, #d9dee5);
    --turbo-surface: var(--brand-surface, #fff);
    --turbo-bg: var(--brand-bg, #f1f3f5);
    --turbo-ink: var(--brand-ink, #20242a);
    --turbo-muted: var(--brand-muted, #69717d);
    --turbo-primary: var(--brand-color-primary, #4f5968);
    --turbo-primary-dark: var(--brand-color-primary-dark, #303743);
    --turbo-accent: var(--brand-accent, #d0a22d);
    --turbo-shadow: var(--brand-shadow, 0 12px 30px rgb(27 32 39 / 8%));
    --navbar-height: var(--turbo-navbar-height);
    --control-size: var(--turbo-control-size);
    --app-control-size: var(--turbo-control-size);
}

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

html {
    min-height: 100%;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    overflow-x: clip;
    color: var(--turbo-ink);
    background: var(--turbo-bg);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.55;
}

button,
input,
select,
textarea {
    font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
.app-brand {
    color: var(--turbo-ink);
    letter-spacing: -0.035em;
}

h1,
h2,
h3 {
    line-height: 1.1;
}

/* Navigation */
.app-navbar {
    position: sticky;
    z-index: 50;
    top: 0;
    box-sizing: border-box;
    height: var(--turbo-navbar-height);
    min-height: var(--turbo-navbar-height);
    padding-block: 0;
}

.app-navbar > .container-xxl,
.navbar-inner {
    width: min(100%, var(--turbo-content-width));
    max-width: var(--turbo-content-width);
    height: 100%;
    min-height: 100%;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.navbar-inner {
    display: flex;
    align-items: center;
}

.app-navbar-brand,
.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: inherit;
    line-height: 1;
    text-decoration: none;
}

.app-navbar-logo,
.app-navbar .app-brand img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.app-navbar-brand-text,
.app-navbar .app-brand > span {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    line-height: 1;
}

.app-navbar-brand-text > span,
.app-navbar .app-brand strong {
    font-size: 1.1rem;
    font-weight: 750;
}

.app-navbar-brand-text small,
.app-navbar .app-brand small {
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1;
    opacity: 0.82;
}

.app-navbar .square-btn,
.app-navbar .icon-button {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-color: transparent;
    border-radius: 0.45rem;
    color: #fff;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
}

.app-navbar .square-btn:hover,
.app-navbar .square-btn:focus-visible,
.app-navbar .icon-button:hover,
.app-navbar .icon-button:focus-visible,
.app-navbar .icon-button.active {
    border-color: transparent;
    color: #fff;
    background: rgb(255 255 255 / 16%);
    outline: 0;
}

.app-navbar .square-btn i,
.app-navbar .square-btn svg,
.app-navbar .icon-button i,
.app-navbar .icon-button svg {
    width: 17px;
    height: 17px;
    font-size: 17px;
}

/* Application shell and headings */
.app-main,
.app-shell {
    width: 100%;
    max-width: var(--turbo-content-width);
    margin-inline: auto;
}

.app-shell {
    min-height: calc(100vh - var(--turbo-navbar-height));
    min-height: calc(100dvh - var(--turbo-navbar-height));
    padding: clamp(1.3rem, 3vw, 2.7rem) 1.5rem 3rem;
}

.app-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.page-head,
.app-page-head,
.page-heading {
    margin-bottom: 1.55rem;
}

.page-head,
.app-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.5rem;
}

.page-head h1,
.app-page-title,
.page-heading h1 {
    margin: 0;
    color: var(--turbo-ink);
    font-size: clamp(2.25rem, 5vw, 3.7rem);
    font-weight: 750;
    letter-spacing: -0.055em;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.eyebrow,
.app-eyebrow,
.app-page-eyebrow {
    margin: 0 0 0.35rem;
    color: var(--turbo-primary);
    font-size: 0.73rem;
    font-weight: 850;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.surface-panel {
    border: 1px solid var(--turbo-line);
    border-radius: var(--turbo-radius);
    background: var(--turbo-surface);
    box-shadow: var(--turbo-shadow);
}

/* Buttons */
.btn-square,
.square-btn,
.icon-button,
button.btn-icon,
a.btn-icon,
label.btn-icon,
span.btn-icon {
    display: inline-flex;
    flex: 0 0 var(--turbo-control-size);
    align-items: center;
    justify-content: center;
    width: var(--turbo-control-size);
    min-width: var(--turbo-control-size);
    max-width: var(--turbo-control-size);
    height: var(--turbo-control-size);
    min-height: var(--turbo-control-size);
    max-height: var(--turbo-control-size);
    padding: 0;
    border-radius: 0.55rem;
    cursor: pointer;
    text-decoration: none;
}

.btn-square i,
.btn-square svg,
.square-btn i,
.square-btn svg,
.icon-button i,
.icon-button svg {
    width: 17px;
    height: 17px;
    font-size: 17px;
}

/* Authentication */
.auth-page {
    display: grid;
    align-content: start;
    justify-items: center;
    padding-top: 1.5rem;
}

.app-auth-shell,
.auth-shell {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(calc(100% - 2rem), 980px);
    max-width: 980px;
    min-height: 500px;
    margin: clamp(1rem, 5vw, 4rem) auto;
    overflow: hidden;
    border: 1px solid var(--turbo-line);
    border-radius: 1.375rem;
    background: var(--turbo-surface);
    box-shadow: var(--turbo-shadow);
}

.app-auth-brand,
.auth-brand-panel {
    display: grid;
    align-items: center;
    justify-items: center;
    gap: 1.5rem;
    padding: clamp(2rem, 5vw, 4rem);
    color: #fff;
    text-align: center;
}

.app-auth-brand img,
.auth-brand-panel > img {
    width: 75%;
    max-width: 240px;
    height: 210px;
    margin: 0;
    object-fit: contain;
    filter: drop-shadow(0 18px 22px rgb(0 0 0 / 28%));
}

.app-auth-brand h1,
.auth-brand-panel h1 {
    margin: 0 0 0.75rem;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 1.15;
}

.app-auth-copy,
.auth-brand-copy {
    max-width: 36ch;
    margin-inline: auto;
    text-align: center;
}

.app-auth-card,
.auth-card {
    display: flex;
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.5rem, 5vw, 3rem);
    border: 0;
    border-radius: 0;
    background: var(--turbo-surface);
    box-shadow: none;
}

.app-auth-card-heading,
.auth-card > header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.5rem;
}

.app-auth-card h2,
.auth-card > header h2 {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.app-auth-card-icon,
.auth-icon {
    display: inline-flex;
    flex: 0 0 52px;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 0.75rem;
}

.app-auth-actions,
.auth-card .form-actions {
    margin-top: 1.25rem;
}

.app-auth-card .form-control,
.auth-card .field input:not([type="checkbox"]) {
    min-height: 42px;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

.app-auth-card .btn-icon,
.auth-card .btn-square {
    flex-basis: 40px;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    border-radius: 0.5rem;
}

/* Home */
.app-home-hero,
.starter-panel {
    border: 1px solid var(--turbo-line);
    border-radius: var(--turbo-radius);
    box-shadow: var(--turbo-shadow);
}

.starter-panel {
    background: var(--turbo-surface);
}

@media (max-width: 991.98px) {
    .app-navbar > .container-xxl,
    .navbar-inner,
    .app-shell {
        padding-inline: 1rem;
    }

    .app-auth-shell,
    .auth-shell {
        grid-template-columns: minmax(0, 1fr);
        width: min(calc(100% - 1.5rem), 680px);
        min-height: 0;
    }

    .app-auth-brand,
    .auth-brand-panel {
        min-height: 300px;
        padding: 2rem;
    }

    .app-auth-brand img,
    .auth-brand-panel > img {
        height: 150px;
        max-width: 170px;
    }
}

@media (max-width: 575.98px) {
    :root {
        --turbo-navbar-height: 72px;
        --navbar-height: var(--turbo-navbar-height);
    }

    .app-navbar-logo,
    .app-navbar .app-brand img {
        width: 38px;
        height: 38px;
    }

    .app-navbar-brand-text > span,
    .app-navbar .app-brand strong {
        max-width: 160px;
        overflow: hidden;
        font-size: 0.95rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-navbar-brand-text small,
    .app-navbar .app-brand small {
        display: none;
    }

    .page-head h1,
    .app-page-title,
    .page-heading h1 {
        font-size: clamp(2.15rem, 12vw, 3.2rem);
    }

    .app-auth-shell,
    .auth-shell {
        width: 100%;
        margin-block: 0;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }
}