@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');

/* --- Branding E-idea ---------------------------------------------------- */
.logo-brand {
    font-family: 'Audiowide', cursive;
    font-size: 1.6rem;
    line-height: 1;
    color: #0C9E92;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.logo-brand.text-white { color: #ffffff; }

.brand-bolt {
    width: 0.85em;
    height: 0.85em;
    margin: 0 -0.06em;
    color: #f5b301;
}

/* --- Sidebar: širší + zladený content ----------------------------------- */
@media (min-width: 992px) {
    .sidebar { max-width: 300px; }
    .content { margin-left: 300px; }
}
/* 768–991px: sidebar je skrytý (collapse), preto content nesmie byť odsadený
   (Volt inak necháva medzeru margin-left:95px). */
@media (min-width: 768px) and (max-width: 991.98px) {
    .content { margin-left: 0; }
}

.sidebar-brand {
    border-bottom: 0.0625rem solid #2e3650;
    margin-bottom: 0.5rem;
}

/* Oddeľovník medzi skupinami položiek v Nástrojoch/Admine. */
.sidebar-divider {
    border: 0;
    border-top: 0.0625rem solid #2e3650;
    margin: 0.5rem 0.75rem;
    opacity: 1;
}

/* Zoznam OM scrolluje samostatne; brand + hľadanie + nadpis ostávajú fixné.
   Len na desktope (≥992px), kde je sidebar fixný na plnú výšku.
   Scrolluje blokový wrapper (.om-scroll) – vnútri je prirodzene vysoký <ul>. */
@media (min-width: 992px) {
    .sidebar--scroll .sidebar-inner {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .sidebar--scroll .sidebar-brand,
    .sidebar--scroll .om-search,
    .sidebar--scroll .sidebar-heading {
        flex-shrink: 0;
    }
    .sidebar--scroll .om-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
}

/* --- Sidebar: zoznam OM ------------------------------------------------- */
.sidebar .sidebar-heading {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.sidebar .nav-item .nav-link {
    padding: 0.4rem 0.75rem;
    white-space: normal;   /* dlhé názvy OM / položky menu sa zalomia namiesto orezania */
    line-height: 1.3;
}
/* Aktívne OM – akcent v brandovej zelenej */
.sidebar .nav-item.om-item.active > .nav-link {
    color: #ffffff;
    background-color: #0C9E92;
    border-radius: 0.5rem;
}
/* Odsadenie na spodku zoznamu – aby posledné OM nebolo nalepené na okraj
   a "prebehlo" aj ponad natívny URL náhľad prehliadača (pri hoveri odkazu). */
.sidebar #omList {
    padding-bottom: 2.5rem;
}

/* --- Sidebar: skupiny OM (rozbaliteľné sekcie) --------------------------- */
.om-group + .om-group {
    margin-top: 0.5rem;
}
.om-group-toggle {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.06);
    border-left: 3px solid #0C9E92;
    border-radius: 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.4rem 0.65rem 0.4rem 0.55rem !important;
}
.om-group-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.om-group-chevron {
    transition: transform 0.15s ease;
}
.om-group-toggle.collapsed .om-group-chevron {
    transform: rotate(-90deg);
}

/* --- Sidebar: vyhľadávanie (lupa vnútri inputu) ------------------------- */
.om-search { position: relative; }
.om-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: rgba(255, 255, 255, 0.55);
    pointer-events: none;
}
.om-search .form-control {
    padding-left: 2.25rem;
    background-color: #374151;
    border: 0;
    color: #ffffff;
}
.om-search .form-control::placeholder { color: rgba(255, 255, 255, 0.55); }
.om-search .form-control:focus {
    background-color: #374151;
    color: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(12, 158, 146, 0.35);
}

/* --- Top bar: avatar iniciála ------------------------------------------ */
.navbar-dashboard .avatar {
    width: 2.25rem;
    height: 2.25rem;
    font-weight: 700;
    font-size: 0.9rem;
}

/* --- Auth (login) ------------------------------------------------------- */
.auth-page {
    background: linear-gradient(135deg, #0C9E92 0%, #0a7d74 100%);
}
.auth-card {
    max-width: 440px;
}

/* --- Brandové tlačidlo -------------------------------------------------- */
.btn-brand {
    background-color: #0C9E92;
    border-color: #0C9E92;
    color: #ffffff;
}
.btn-brand:hover,
.btn-brand:focus {
    background-color: #0a8478;
    border-color: #0a8478;
    color: #ffffff;
}

/* --- KPI boxy pri grafe -------------------------------------------------- */
.kpi-card {
    border-left: 0.25rem solid var(--kpi-accent, #b3bcc9) !important;
}
.kpi-card--info      { --kpi-accent: var(--bs-info); }
.kpi-card--danger    { --kpi-accent: var(--bs-danger); }
.kpi-card--warning   { --kpi-accent: var(--bs-warning); }
.kpi-card--secondary { --kpi-accent: #b3bcc9; }

.kpi-label {
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    line-height: 1.2;
}
.kpi-value {
    font-size: 1.25rem;
    line-height: 1.2;
}
.kpi-unit {
    font-size: 0.75rem;
}

/* --- Ikonové akčné tlačidlá v admin zoznamoch --------------------------- */
/* Neutrálne v pokoji, brandová zelená až pri interakcii – akcie tak nesúťažia
   s badge v riadku ani s primárnym tlačidlom nad tabuľkou. */
.btn-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.5rem;
    line-height: 1;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.btn-icon-action + .btn-icon-action {
    margin-left: 0.25rem;
}
.btn-icon-action:hover,
.btn-icon-action:focus-visible {
    background-color: #0C9E92;
    color: #ffffff;
}
/* Deštruktívna akcia ostáva červená aj na hover. */
.btn-icon-action.text-danger:hover,
.btn-icon-action.text-danger:focus-visible {
    background-color: var(--bs-danger);
    color: #ffffff;
}

/* --- Admin zoznamy: hľadanie, radenie ----------------------------------- */
.list-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: #b3bcc9;
    pointer-events: none;
}
.list-search .form-control {
    padding-left: 2.25rem;
}

.list-sort {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    white-space: nowrap;
}
.list-sort:hover { color: #0C9E92; }
.list-sort--active { color: #0C9E92; }
/* Náznak sortovateľnosti – viditeľný až pri prejdení myšou nad hlavičkou. */
.list-sort-hint { opacity: 0; transition: opacity 0.15s ease-in-out; }
.list-sort:hover .list-sort-hint { opacity: 0.5; }
.icon-xxs { width: 0.75rem; height: 0.75rem; }

/* --- Prepínač sekcií (Odber/Výroba) ------------------------------------- */
/* Volt inak vyplní outline tlačidlo na hover naplno → vyzerá ako aktívny.
   Neaktívny tab preto na hover dostane len jemný farebný podklad. */
.section-tab.btn-outline-info:hover,
.section-tab.btn-outline-info:focus-visible {
    background-color: rgba(var(--bs-info-rgb), 0.12);
    border-color: rgb(var(--bs-info-rgb));
    color: rgb(var(--bs-info-rgb));
}
.section-tab.btn-outline-danger:hover,
.section-tab.btn-outline-danger:focus-visible {
    background-color: rgba(var(--bs-danger-rgb), 0.12);
    border-color: rgb(var(--bs-danger-rgb));
    color: rgb(var(--bs-danger-rgb));
}