/* ============================================================================
   Modern UI refresh — purely visual overlay loaded AFTER bootstrap + style.css.
   Touches only colour, shadow, radius, transitions and gradients. It never
   changes box-model sizing (width/height/padding/margin/border-width/font-size),
   so the fixed 100vh generator layout math stays intact.
   ОТКАТ: убрать <link ... modern.css> из base.html — внешний вид вернётся как был.
   ========================================================================== */

:root {
    --brand:        #004E64;   /* primary teal  */
    --brand-700:    #013a4b;   /* darker teal (gradients) */
    --brand-300:    #0a6c87;   /* lighter teal  */
    --accent:       #FF7000;   /* orange accent */
    --accent-600:   #e85f00;

    /* soft, layered, modern shadows (no hard offset) */
    --shadow-xs: 0 1px 2px rgba(16, 33, 41, .06);
    --shadow-sm: 0 1px 2px rgba(16, 33, 41, .06), 0 2px 6px rgba(16, 33, 41, .07);
    --shadow:    0 2px 4px rgba(16, 33, 41, .06), 0 8px 24px rgba(16, 33, 41, .10);
    --shadow-lg: 0 8px 18px rgba(16, 33, 41, .10), 0 24px 48px rgba(16, 33, 41, .16);

    --radius:    10px;
    --radius-sm: 8px;
}

/* ---- Page canvas ---------------------------------------------------------- */
body.bg-light {
    background: linear-gradient(180deg, #f4f7f9 0%, #eef2f5 100%);
    background-attachment: fixed;
    color: #1f2933;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: rgba(255, 112, 0, .22); }

/* Softer, modern interpretation of bootstrap's heavy shadow utilities.
   (Does NOT add radius — so full-width bars like the navbar stay square.) */
.shadow    { box-shadow: var(--shadow)    !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }

/* ---- Navbar --------------------------------------------------------------- */
nav.navbar.bg-primary {
    background: linear-gradient(120deg, var(--brand-700) 0%, var(--brand) 55%, var(--brand-300) 140%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 6px 20px rgba(1, 30, 40, .22) !important;
}
nav.navbar .navbar-brand { letter-spacing: .02em; }
/* animated underline on nav links */
nav.navbar .nav-link {
    position: relative;
    transition: color .15s ease;
}
/* Подчёркивание рисуем через ::before — он свободен у всех ссылок. ::after у
   dropdown-toggle занят кареткой Bootstrap, поэтому его не трогаем (иначе артефакт).
   Так анимация работает одинаково на всех ссылках, включая «Generator Mode». */
nav.navbar .navbar-nav .nav-link::before {
    content: "";
    position: absolute;
    left: .5rem; right: .5rem; bottom: .25rem;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
}
nav.navbar .navbar-nav .nav-link:hover::before { transform: scaleX(1); }
nav.navbar .navbar-nav .nav-link:hover { color: #fff; }

/* ---- Buttons -------------------------------------------------------------- */
.btn {
    border-radius: var(--radius-sm);
    transition: transform .12s ease, box-shadow .15s ease,
                background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover   { transform: translateY(-1px); }
.btn:active  { transform: translateY(0); }
.btn:focus,
.btn:focus-visible { box-shadow: 0 0 0 .2rem rgba(0, 78, 100, .25); }

.btn-success,
.btn-success:focus { box-shadow: 0 2px 6px rgba(255, 112, 0, .28); }
.btn-success:hover { box-shadow: 0 6px 16px rgba(255, 112, 0, .30); }
.btn-success:focus,
.btn-success:focus-visible { box-shadow: 0 0 0 .2rem rgba(255, 112, 0, .30); }

.btn-primary { box-shadow: 0 2px 6px rgba(0, 78, 100, .22); }
.btn-primary:hover { box-shadow: 0 6px 16px rgba(0, 78, 100, .22); }

.btn-outline-light { border-color: rgba(255,255,255,.65); }

/* ---- Cards / panels with the .border .shadow combo ------------------------ */
.border.shadow,
.border.shadow-sm {
    border-color: rgba(16, 33, 41, .08) !important;
    border-radius: var(--radius);
    overflow: hidden;             /* clip inner canvases to the rounded corners */
}

/* The generator page (.gen-fit) is tightly engineered around a fixed 100vh
   layout with JS-positioned canvas/overlays. Keep its three work-panels in their
   ORIGINAL square geometry — only colour/shadow differ, never radius/overflow —
   so nothing functional can shift or clip. */
.gen-fit .border.shadow,
.gen-fit .border.shadow-sm {
    border-color: rgba(16, 33, 41, .14) !important;
    border-radius: 0;
    overflow: visible;            /* #model-viewer keeps its own inline overflow:hidden */
}

/* Viewer overlay control chips (2D/3D toggle, IPC levels, visibility switches)
   sit on the light 3D-viewer gradient. The global soft .shadow washed them out
   and they looked "missing" — give them a defined shadow + hairline so they
   read clearly again. */
#view-toggle .btn-group,
#footprint-levels .btn-group,
#vis-B {
    box-shadow: 0 2px 8px rgba(16, 33, 41, .35),
                0 0 0 1px rgba(16, 33, 41, .12) !important;
}

/* ---- Header hero ---------------------------------------------------------- */
.header-background {
    position: relative;
}
.header-background::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 140% at 12% -10%, rgba(10, 108, 135, .55) 0%, rgba(0,0,0,0) 55%),
        linear-gradient(180deg, rgba(1, 40, 52, .15) 0%, rgba(1, 40, 52, .45) 100%);
    pointer-events: none;
}
.header-background > * { position: relative; z-index: 1; }
.header-background h1 { letter-spacing: .01em; }

/* ---- Fast-launch generator tiles ----------------------------------------- */
.fast-launch-icon {
    border: 1.5px solid rgba(0, 78, 100, .35);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .16s ease, box-shadow .18s ease, border-color .16s ease;
}
.fast-launch-icon:hover {
    border-color: var(--accent);
    box-shadow: 0 10px 26px rgba(16, 33, 41, .16), 0 0 0 1px rgba(255, 112, 0, .25);
    transform: translateY(-3px);
}
.f-l-icon-pic {
    background: #fff;   /* белый фон за прозрачными PNG генераторов */
    transition: transform .25s ease;
}
.fast-launch-icon:hover .f-l-icon-pic { transform: scale(1.04); }
.f-l-icon-text {
    border-top: 1px solid rgba(16, 33, 41, .07);
    background: #f6f8fa;
    color: #2b3a42;
    transition: background .16s ease, color .16s ease;
}
.fast-launch-icon:hover .f-l-icon-text {
    background: var(--brand);
    color: #fff;
}
/* "Coming Soon" tiles (generator not created yet — rendered by index-label.html
   when generator_name is empty). Same card look as real tiles, white area instead
   of an image, muted label. Not clickable, so no hover lift/accent. */
.fast-launch-icon-empty { cursor: default; }
.fast-launch-icon-empty:hover {
    border-color: rgba(0, 78, 100, .35);   /* same as resting state — no accent */
    box-shadow: var(--shadow-sm);          /* no lift */
    transform: none;
}
.fast-launch-icon-empty:hover .f-l-icon-pic { transform: none; }
.fast-launch-icon-empty:hover .f-l-icon-text { background: #f6f8fa; }
.fast-launch-icon-empty .f-l-icon-text h6 { color: #9aa0a6; font-weight: 600; }

/* ---- Form controls -------------------------------------------------------- */
.form-control, .form-select {
    border-radius: var(--radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-300);
    box-shadow: 0 0 0 .2rem rgba(0, 78, 100, .15);
}
/* input-group children (dense generator forms) keep their snug joins but get
   the brand focus ring instead of bootstrap's default blue */
.input-group .form-control:focus,
.input-group .form-select:focus {
    box-shadow: 0 0 0 .15rem rgba(0, 78, 100, .15);
    z-index: 3;
}
.form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}
.form-check-input:focus {
    border-color: var(--brand-300);
    box-shadow: 0 0 0 .2rem rgba(0, 78, 100, .15);
}

/* ---- Modals --------------------------------------------------------------- */
.modal-content {
    border: none;
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.modal-header {
    border-bottom: 1px solid rgba(16, 33, 41, .07);
    background: #fbfcfd;
}

/* ---- Footer --------------------------------------------------------------- */
.footer.bg-primary {
    background: linear-gradient(160deg, var(--brand) 0%, var(--brand-700) 100%) !important;
    box-shadow: 0 -6px 24px rgba(1, 30, 40, .12) !important;
}
.footer h5 { letter-spacing: .02em; }

/* ---- Links ---------------------------------------------------------------- */
a.text-decoration-none { color: var(--brand-300); }
a.text-decoration-none:hover { color: var(--accent); }

/* ---- Tidy scrollbar (webkit) --------------------------------------------- */
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb {
    background: rgba(0, 78, 100, .28);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(0, 78, 100, .45); background-clip: content-box; }