/*
 * Chrome panelu w stylu usunietego SPA (motyw Angulr z front/app/css/app.css).
 *
 * Odtworzone na Bootstrapie 5, bez ani jednej linii z BS3 - widoki ekranow
 * zostaja w BS5 i nie sa tym plikiem dotykane. Stad tylko naglowek, sidebar
 * i tlo strony; komponenty (karty, tabele, formularze) sa domyslne z BS5.
 *
 * Wartosci nie sa dobrane na oko - wszystkie pochodza z .bg-dark, .app-header,
 * .app-aside i .navi starego motywu (patrz docs/migracja-blade.md).
 */

:root {
    --panel-header-h: 50px;
    --panel-aside-w: 200px;
    --panel-aside-folded-w: 60px;

    --panel-aside-bg: #3a3f51;
    --panel-aside-bg-dk: #2e3344;
    --panel-aside-bg-hover: #32374a;
    --panel-aside-color: #a6a8b1;
    --panel-aside-link: #b4b6bd;
    --panel-aside-muted: #8b8e99;

    --panel-page-bg: #f0f3f4;
    --panel-page-color: #58666e;

    /* Paleta przyciskow z motywu Angulr - produkcja renderowala sie wylacznie
       app.css, a nie wlasnym main.scss (stad fiolet, nie granat z _constants.scss). */
    --panel-primary: #7266ba;
    --panel-primary-dark: #6254b2;
    --panel-primary-darker: #5a4daa;
    --panel-info: #23b7e5;
    --panel-line: #dee5e7;
    --panel-bg-light: #edf1f2;
}

/* ------------------------------------------------------------- przyciski */

/* Bootstrap 5 ma primary #0d6efd; w starym panelu byl fiolet #7266ba. */
.btn-primary {
    --bs-btn-bg: var(--panel-primary);
    --bs-btn-border-color: var(--panel-primary);
    --bs-btn-hover-bg: var(--panel-primary-dark);
    --bs-btn-hover-border-color: var(--panel-primary-darker);
    --bs-btn-active-bg: var(--panel-primary-darker);
    --bs-btn-active-border-color: var(--panel-primary-darker);
    --bs-btn-disabled-bg: var(--panel-primary);
    --bs-btn-disabled-border-color: var(--panel-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--panel-primary);
    --bs-btn-border-color: var(--panel-primary);
    --bs-btn-hover-bg: var(--panel-primary);
    --bs-btn-hover-border-color: var(--panel-primary);
    --bs-btn-active-bg: var(--panel-primary-dark);
    --bs-btn-active-border-color: var(--panel-primary-dark);
}

.btn-info {
    --bs-btn-bg: var(--panel-info);
    --bs-btn-border-color: var(--panel-info);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #1aa9d6;
    --bs-btn-hover-border-color: #1aa9d6;
    --bs-btn-hover-color: #fff;
}

/* ---------------------------------------------------------------- szkielet */

body.panel-app {
    padding-top: var(--panel-header-h);
    background-color: var(--panel-page-bg);
    color: var(--panel-page-color);
}

.app-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    display: flex;
    height: var(--panel-header-h);
}

/* Ciemny kwadrat brandu nad sidebarem - w SPA .navbar-header.bg-dark */
.app-brand {
    display: flex;
    flex: 0 0 var(--panel-aside-w);
    align-items: center;
    justify-content: center;
    gap: .35rem;
    width: var(--panel-aside-w);
    padding: 0 10px;
    overflow: hidden;
    /* W SPA bylo 20px, ale tamten motyw mial Source Sans Pro - w systemowym
       foncie BS5 "Data Management" nie mieszcza sie w 200 pikselach. */
    font-size: 18px;
    font-weight: 700;
    color: #eaebed;
    text-overflow: ellipsis;
    text-decoration: none;
    white-space: nowrap;
    background-color: var(--panel-aside-bg);
    transition: flex-basis .2s ease, width .2s ease;
}

.app-brand:hover {
    color: #fff;
}

/* Prawa czesc naglowka byla biala (.bg-white-only .box-shadow), nie ciemna. */
.app-header-bar {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    padding: 0 .5rem;
    background-color: #fff;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .05), 0 1px 0 rgba(0, 0, 0, .05);
}

.app-header-bar .btn-link,
.app-header-bar .app-header-user {
    color: var(--panel-page-color);
    text-decoration: none;
}

.app-header-bar .btn-link:hover,
.app-header-bar a.app-header-user:hover {
    color: #23b7e5;
}

.app-aside {
    position: fixed;
    top: var(--panel-header-h);
    bottom: 0;
    left: 0;
    z-index: 1020;
    width: var(--panel-aside-w);
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--panel-aside-color);
    background-color: var(--panel-aside-bg);
    transition: width .2s ease, transform .2s ease;
}

.app-content {
    margin-left: var(--panel-aside-w);
    padding: 1.5rem;
    transition: margin-left .2s ease;
}

/* ------------------------------------------------------------------- menu */

/* Stary motyw mial body na 14px - w BS5 (16px) etykiety grup lamia sie na dwie
   linie i caret ucieka nad tekst. */
.app-aside .navi {
    font-size: 14px;
}

.app-aside .navi ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-aside .navi li {
    position: relative;
}

.app-aside .navi a {
    position: relative;
    display: block;
    padding: 10px 20px;
    color: var(--panel-aside-link);
    text-decoration: none;
    transition: background-color .2s ease-in-out;
}

.app-aside .navi a:hover,
.app-aside .navi a:focus {
    color: #fff;
    background-color: var(--panel-aside-bg-hover);
}

/* Naglowek grupy: ikona w stalej kolumnie, caret dociagniety do prawej.
   Etykieta obcina sie wielokropkiem - w 200 pikselach dluga nazwa grupy
   wchodzila pod caret. */
.app-aside .navi .group-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    /* Caret jest pozycjonowany, wiec nie zabiera miejsca etykiecie - inaczej
       dluzsze nazwy grup ("Data management") obcinaly sie wielokropkiem. */
    padding-right: 20px;
    font-weight: 700;
    white-space: nowrap;
}

.app-aside .navi .group-toggle .nav-icon {
    flex: 0 0 20px;
    width: 20px;
    text-align: center;
}

.app-aside .navi .group-toggle > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-aside .navi .group-toggle[aria-expanded="true"] {
    color: #fff;
}

.app-aside .navi .group-caret {
    position: absolute;
    top: 12px;
    right: 6px;
    color: var(--panel-aside-muted);
    transition: transform .2s ease;
}

.app-aside .navi .group-toggle[aria-expanded="false"] .group-caret {
    transform: rotate(-90deg);
}

/* Podmenu bylo ciemniejsze o jeden stopien (.nav-sub.dk). */
.app-aside .navi .nav-sub {
    background-color: var(--panel-aside-bg-dk);
}

.app-aside .navi .nav-sub a {
    padding-left: 55px;
}

.app-aside .navi .nav-sub a.active {
    font-weight: 600;
    color: #fff;
    background-color: var(--panel-aside-bg-hover);
}

.app-aside-select {
    padding: 15px 20px 12px;
    border-bottom: 1px solid #2f3342;
}

.app-aside-select .form-label,
.app-aside-select .app-aside-select-static > span {
    color: var(--panel-aside-muted);
    font-size: 12px;
}

.app-aside-select .form-select {
    color: #fff;
    background-color: var(--panel-aside-bg-dk);
    border-color: #2a2e3d;
}

.app-aside-select .form-select:focus {
    border-color: #23b7e5;
    box-shadow: none;
}

.app-aside-select .app-aside-select-name {
    color: #eaebed;
    font-weight: 600;
}

/* ------------------------------------------------- tryb zwiniety (desktop) */

/* Zwijanie dotyczy tylko desktopu - na mobilce sidebar wysuwa sie caly,
   wiec stan z localStorage nie moze mu chowac etykiet. */
.visible-folded {
    display: none;
}

@media (min-width: 768px) {
    html.app-aside-folded .hidden-folded {
        display: none !important;
    }

    html.app-aside-folded .visible-folded {
        display: inline-block;
    }

    html.app-aside-folded .app-brand,
    html.app-aside-folded .app-aside {
        flex-basis: var(--panel-aside-folded-w);
        width: var(--panel-aside-folded-w);
    }

    html.app-aside-folded .app-content {
        margin-left: var(--panel-aside-folded-w);
    }

    /* Podmenu wylatuje poza sidebar, wiec nie moze byc obcinane. */
    html.app-aside-folded .app-aside {
        overflow: visible;
    }

    html.app-aside-folded .app-aside .navi > ul > li > a {
        height: var(--panel-header-h);
        padding: 0;
        justify-content: center;
    }

    html.app-aside-folded .app-aside .navi > ul > li > a > .nav-icon {
        flex: 0 0 auto;
        width: auto;
        font-size: 16px;
    }

    html.app-aside-folded .app-aside .navi .group-caret {
        display: none;
    }

    /* Zwiniete: podmenu pokazuje sie na hover, niezaleznie od stanu collapse. */
    html.app-aside-folded .app-aside .navi .nav-sub {
        position: absolute;
        top: 0;
        left: 100%;
        z-index: 1050;
        display: none !important;
        width: var(--panel-aside-w);
        box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
    }

    html.app-aside-folded .app-aside .navi > ul > li:hover > .nav-sub {
        display: block !important;
    }

    html.app-aside-folded .app-aside .navi .nav-sub a {
        padding-left: 20px !important;
    }
}

/* ------------------------------------------------------ sidebar na mobilce */

@media (max-width: 767.98px) {
    .app-brand {
        flex: 0 0 auto;
        width: auto;
        padding: 0 1rem;
    }

    .app-aside {
        transform: translateX(-100%);
    }

    body.app-aside-open .app-aside {
        transform: none;
    }

    .app-content,
    html.app-aside-folded .app-content {
        margin-left: 0;
        padding: 1rem;
    }
}

/* ----------------------------------------------------- ekrany niezalogowane */

/* Stary ekran logowania byl JASNY, mimo ze `_login.scss` definiowal granat
   (#1e2045) - ten arkusz nigdy nie wchodzil do builda produkcyjnego, panel
   renderowal sie samym motywem Angulr. Odtwarzamy wiec to, co bylo na produkcji:
   tlo #f0f3f4, wasna kolumna 360px (Angulr `.w-xxl`), pola bez etykiet
   zlozone w jeden blok i stopka z rokiem. */
body.panel-guest {
    min-height: 100vh;
    padding-bottom: 60px;               /* miejsce na stopke */
    color: var(--panel-page-color);
    background-color: var(--panel-page-bg);
}

.panel-guest-box {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}

.panel-guest-brand {
    display: block;
    margin: 15px 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--panel-page-color);
    text-align: center;
    text-decoration: none;
}

/* Pola logowania byly w `.list-group` z `.form-control.no-border` - wygladalo to
   jak jeden zaokraglony blok z linia miedzy wierszami. */
.panel-guest-fields {
    margin-bottom: 1rem;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #e7ecee;
    border-radius: 3px;
}

.panel-guest-fields > div + div {
    border-top: 1px solid #e7ecee;
}

.panel-guest-fields .form-control {
    border: 0;
    border-radius: 0;
    padding: 12px 15px;
}

.panel-guest-fields .form-control:focus {
    box-shadow: none;
}

/* W motywie Angulr `a{color:inherit;text-decoration:none}` - stad szary,
   niepodkreslony link "Nie pamietam hasla". Podkreslenie zostawiamy na hover,
   zeby link dawal jakikolwiek sygnal, ze jest klikalny. */
body.panel-guest a:not(.btn) {
    color: var(--panel-page-color);
    text-decoration: none;
}

body.panel-guest a:not(.btn):hover {
    color: var(--panel-primary);
    text-decoration: underline;
}

.panel-guest-footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 15px;
    color: var(--panel-page-color);
    background-color: var(--panel-bg-light);
    border-top: 1px solid var(--panel-line);
}