/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

/* EXCLUSIVE BLUE & PLATINUM THEME */
:root {
    --blue: rgb(86, 143, 201);          /* pôvodná „blue“, teraz tvoja modrá */
    --platinum: #e5e4e2;
    --dark: #111;
    --glass: rgba(255, 255, 255, 0.08);
    --card-radius: 32px;
}

textarea {
    resize: none;
}

.corner-logo {
    position: fixed;
    top: 22px;
    left: 25px;
    z-index: 1000;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
}

.corner-logo-img {
    height: 44px;      /* uprav podľa potreby */
    width: auto;
    display: block;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,0.35));
    transition: transform .18s ease, opacity .18s ease;
    opacity: 0.95;
    cursor: pointer;
}

.corner-logo:hover .corner-logo-img {
    transform: scale(1.03);
    opacity: 1;
}


/* background image for whole dashboard */
body.dashboard-bgr {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

body.dashboard-bgr::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url("images/bgr.jpeg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ffffff;
    opacity: 0.1;
    z-index: -1;
}

body.dashboard-bgr-construction::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url("images/boise_bager.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ffffff;
    opacity: 0.7;
    z-index: -1;
}

body.dashboard-bgr-pv-germany::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url("images/fotovoltic.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ffffff;
    opacity: 0.7;
    z-index: -1;
}

body.dashboard-bgr-building-materials::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url("images/stavebniny.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ffffff;
    opacity: 0.7;
    z-index: -1;
}

body.dashboard-bgr-pension::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url("images/sivy_kamen.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ffffff;
    opacity: 0.7;
    z-index: -1;
}

body.dashboard-bgr-football-club::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url("images/futbal.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ffffff;
    opacity: 0.7;
    z-index: -1;
}

.p-header {
    color: var(--dark) !important;
}

/* PERFECT CENTER GRID – skutočne na stred */
.dashboard-main {
    height: 100vh;                  /* presne výška okna */
    display: flex;
    align-items: center;            /* vertikálny stred */
    justify-content: center;        /* horizontálny stred */
    padding: 0 40px;                /* len bočný padding */
}

/* GRID 3 COLUMNS */
.company-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(420px, 1fr));
    gap: 40px;
    max-width: 1500px;
    margin: 0 auto;
}

/* INDIVIDUAL CARD EXCLUSIVE STYLE */
.company-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    height: 210px;                  /* vyššia karta */
    width: 420px;
    padding: 24px;

    text-decoration: none;
    border-radius: var(--card-radius);
    overflow: hidden;

    background-size: cover;
    background-position: center;

    /* modrý glow namiesto zlata */
    box-shadow:
        0 0 18px rgba(86, 143, 201, 0.35),
        0 26px 50px rgba(0, 0, 0, 0.55);

    transition: transform .25s ease, box-shadow .25s ease, opacity .25s;
    opacity: 0.95;
}

/* darker overlay for readability */
.company-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.48), rgba(0,0,0,0.7));
    transition: opacity .25s;
}

/* card hover - BLUE LUXURY EFFECT */
.company-card:hover {
    transform: scale(1.045);
    opacity: 1;
    box-shadow:
        0 0 26px rgba(86, 143, 201, 0.7),
        0 32px 70px rgba(0,0,0,0.75);
}

.company-card:hover::before {
    opacity: 0.25;
}

/* TEXT INSIDE CARD */
.card-content {
    position: relative;
    text-align: center;
    color: var(--platinum);
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

.card-content h2 {
    font-family: "Playfair Display", serif;
    font-size: 24px;                /* väčší názov */
    font-weight: 700;
    color: var(--blue);             /* teraz modrá */
    margin-bottom: 8px;
    letter-spacing: 0.03em;
}

.card-content p {
    font-size: 15px;                /* väčší podtitul */
    opacity: 0.9;
}

/* RESPONSIVE FIXES */
@media (max-width: 1100px) {
    .company-grid {
        grid-template-columns: repeat(2, minmax(280px, 1fr));
    }
}

@media (max-width: 700px) {
    .dashboard-main {
        padding: 20px;
    }

    .company-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== CORNER BUTTONS (DASHBOARD ONLY) ===== */

.corner-buttons {
    position: fixed;
    top: 25px;
    right: 25px;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 999;
}

.corner-button {
    display: inline-block;
}

button.corner-button {
    display: flex;
    align-items: center;
    gap: 8px;

    border: 1px solid var(--blue);      /* modrý rámik */
    border-radius: 999px;

    padding: 9px 18px;

    background: rgba(0,0,0,0.7);
    color: var(--platinum);
    cursor: pointer;

    font-size: 14px;                    /* o trochu väčší text */
    font-weight: 600;
    text-transform: uppercase;          /* UPPERCASE text */
    letter-spacing: 0.06em;

    box-shadow: 0 8px 22px rgba(0,0,0,0.4);

    transition: all .2s ease;
}

button.corner-button:hover {
    background: rgba(86, 143, 201, 0.3);   /* modrý hover */
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}

.corner-button-icon {
    width: 18px;
    height: 18px;
    filter: brightness(1.2);
}
/* ===== CORNER BUTTONS ===== */

.corner-buttons {
    position: fixed;
    top: 25px;
    right: 25px;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 999;

    /* dôležité: šírka sa prispôsobí najdlhšiemu li */
    display: inline-grid;
    grid-auto-flow: row;

    /* vertikálny spacing medzi li */
    row-gap: 10px;
}

/* každý li má šírku podľa najdlhšieho prvku v UL */
.corner-buttons li {
    width: 100%;
    padding: 0 0;  /* „vertikálny padding medzi li“ (jemný) */
    cursor: pointer;
}

/* aby a nezúžovalo obsah */
.corner-buttons li a {
    display: block;
    width: 100%;
}

/* button nech vyplní šírku li */
.corner-buttons li button.corner-button {
    width: 100%;
    justify-content: left; /* ak chceš zarovnanie na stred */
    /* ak chceš zarovnanie doľava ako v menu:
       justify-content: flex-start;
    */
}


a {
    text-decoration: none;
}

/* ===== SUB-DASHBOARD (Stavebná činnosť) ===== */

.subdash-main {
    width: 90vw;
    margin: 0 auto;
    padding: 90px 0 60px;
}

.subdash-header {
    text-align: center;
    margin-bottom: 34px;
}

.subdash-header h1 {
    font-family: "Playfair Display", serif;
    font-size: 38px;
    margin: 0;
    color: var(--blue); /* tvoja modrá */
    letter-spacing: 0.02em;
    text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

.subdash-header p {
    margin-top: 8px;
    font-size: 18px;
    color: var(--platinum);
    opacity: 0.92;
    text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

/* grid 4 stĺpce */
.subdash-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(240px, 1fr));
    gap: 26px;
}

/* cards bez background image */
.subdash-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    padding: 26px 22px;
    min-height: 200px;

    border-radius: 26px;
    text-decoration: none;

    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(86, 143, 201, 0.35);
    backdrop-filter: blur(8px);

    box-shadow: 0 20px 50px rgba(0,0,0,0.45);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.subdash-card:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(86, 143, 201, 0.75);
    box-shadow:
        0 0 22px rgba(86, 143, 201, 0.35),
        0 26px 70px rgba(0,0,0,0.55);
}

/* ikonka */
.subdash-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
    opacity: 0.95;
}

.subdash-card h2 {
    font-family: "Playfair Display", serif;
    font-size: 22px;
    margin: 0 0 8px;
    color: var(--blue); /* tvoja modrá */
    text-align: center;
}

.subdash-card p {
    margin: 0;
    font-size: 15px;
    color: var(--platinum);
    opacity: 0.9;
    text-align: center;
    line-height: 1.45;
}

/* responsivita */
@media (max-width: 1400px) {
    .subdash-grid {
        grid-template-columns: repeat(3, minmax(240px, 1fr));
    }
}

@media (max-width: 1100px) {
    .subdash-grid {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
    }
}

@media (max-width: 700px) {
    .subdash-main {
        width: 92vw;
        padding-top: 80px;
    }

    .subdash-grid {
        grid-template-columns: 1fr;
    }
}


/* LOGIN */

/* ===== AUTH / LOGIN PAGE ===== */

.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 4vw;
    box-sizing: border-box;
}

/* prepíše globálne form { height:100vh; } len pre login */
.auth-form {
    height: auto !important;
    width: 100%;
    display: flex;
    justify-content: center;
}

.auth-card {
    max-width: 480px;
    width: 100%;
    box-sizing: border-box;

    background: rgba(255, 255, 255, 0.94);
    border-radius: 18px;
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.18),
        0 10px 10px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(8px);

    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

/* Nadpisy */

.auth-title {
    margin: 0 0 0.4rem 0;
    font-size: 1.6rem;
    font-weight: 600;
    text-align: center;
    color: #222;
}

.auth-subtitle {
    margin: 0;
    font-size: 0.95rem;
    text-align: center;
    color: #666;
}

/* Polia */

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.auth-label {
    font-size: 0.9rem;
    color: #444;
    font-weight: 600;
}

.boise-input.auth-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.8rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background-color: #fff;
    font-size: 0.95rem;
    outline: none;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease,
        transform 0.05s ease;
}

.boise-input.auth-input::placeholder {
    color: #aaa;
}

.boise-input.auth-input:focus {
    border-color: #1c86ff;
    box-shadow: 0 0 0 3px rgba(28, 134, 255, 0.18);
    background-color: #fafcff;
    transform: translateY(-1px);
}

/* Tlačidlo v login aj vo filtroch – rovnaký vzhľad */

.auth-card .auth-button,
.filter-submit-wrapper .auth-button {
    min-width: 180px;
    border-radius: 999px;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;

    background: linear-gradient(135deg, rgb(86, 143, 201), #00b6ff);
    color: #fff;

    box-shadow:
        0 10px 20px rgba(0, 182, 255, 0.35),
        0 6px 6px rgba(0, 0, 0, 0.05);

    transition:
        transform 0.08s ease-out,
        box-shadow 0.08s ease-out,
        filter 0.1s ease;
}

.auth-card .auth-button:hover,
.filter-submit-wrapper .auth-button:hover {
    transform: translateY(-2px);
    box-shadow:
        0 14px 28px rgba(0, 182, 255, 0.4),
        0 10px 10px rgba(0, 0, 0, 0.08);
    filter: brightness(1.03);
}

.auth-card .auth-button:active,
.filter-submit-wrapper .auth-button:active {
    transform: translateY(0);
    box-shadow:
        0 8px 16px rgba(0, 182, 255, 0.3),
        0 6px 6px rgba(0, 0, 0, 0.08);
}

/* Flash správy */

.auth-messages {
    list-style: none;
    margin: 1rem 0 0 0;
    padding: 0;
    text-align: center;
}

.auth-message {
    font-size: 0.9rem;
    font-weight: 500;
}

/* ===== Responsivita ===== */

@media (max-width: 768px) {
    .auth-wrapper {
        padding: 6vh 5vw;
    }

    .auth-card {
        padding: 6vw !important; /* jemne väčší padding na mobile */
        box-shadow:
            0 10px 20px rgba(0, 0, 0, 0.18),
            0 6px 6px rgba(0, 0, 0, 0.12);
    }

    .auth-title {
        font-size: 1.5rem;
    }

    .auth-subtitle {
        font-size: 0.9rem;
    }

    .boise-input.auth-input {
        padding: 0.9rem 1.1rem;
        font-size: 1rem;
    }

    .auth-card .auth-button {
        width: 100%;
    }
}

@media (min-width: 1200px) {
    .auth-card {
        max-width: 420px;
    }
}


/* ===== GENERIC TABLE LAYOUT (PRE CELÝ SYSTÉM) ===== */

.table-container {
    max-width: 1480px;
    width: 100%;
    margin: 4vh auto;
    padding: 3vh 3vw;
    box-sizing: border-box;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 24px;
    box-shadow:
        0 18px 35px rgba(0, 0, 0, 0.22),
        0 8px 15px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(8px);
    max-height: 92vh;
}

.page-title {
    margin: 0 0 0.3rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2933;
}

.page-subtitle {
    margin: 0 0 1.5rem 0;
    font-size: 0.9rem;
    color: #6b7280;
}

/* wrapper pre scroll */

.table-wrapper {
    width: 100%;
    max-height: 85vh;
    overflow: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-radius: 16px;
    box-shadow:
        inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

/* hlavná univerzálna tabuľka */

.table-main {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 0.92rem;
}

.table-main thead th {
    position: sticky;
    top: 0;
    z-index: 2;

    background: linear-gradient(90deg, rgba(86, 143, 201, 0.96), rgba(95, 155, 220, 0.96));
    color: #f9fafb;
    font-weight: 600;
    text-align: left;
    padding: 0.75rem 1rem;
    white-space: nowrap;
    border-bottom: 1px solid rgba(15, 23, 42, 0.7);
}

.table-main tbody tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.98);
}

.table-main tbody tr:nth-child(even) {
    background-color: rgba(248, 250, 252, 0.98);
}

.table-main tbody tr:hover {
    background-color: rgba(219, 234, 254, 0.9);
    transition: background-color 0.12s ease-out;
}

.table-main td {
    padding: 0.7rem 1rem;
    vertical-align: top;
    color: #111827;
}

/* špeciálne stĺpce */

.col-index {
    width: 60px;
    text-align: center;
    font-weight: 700;
    color: rgb(189, 129, 26);
    white-space: nowrap;
}

.col-actions {
    width: 70px;
    text-align: center;
    vertical-align: middle;
    padding: 0;
}

.col-permissions {
    max-width: 32vw;
}

/* pill (badge) zoznam – napr. oprávnenia, tagy, atď. */

.pill-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
}

.pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.18rem 0.7rem;
    font-size: 0.78rem;
    line-height: 1.2;

    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.25);
    color: #1d4ed8;
}

.pill a {
    text-decoration: none;
    color: inherit;
}

.pill a:hover {
    text-decoration: underline;
}

/* drobnosti, univerzálne použiteľné */

.text-muted {
    font-size: 0.82rem;
    color: #9ca3af;
    font-style: italic;
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border-radius: 999px;
    background: transparent;
    transition:
        background-color 0.12s ease-out,
        transform 0.08s ease-out;
}

.icon-button:hover {
    background-color: rgba(15, 23, 42, 0.07);
    transform: translateY(-1px);
}

.icon-button .svg-icon {
    width: 18px;
    height: 18px;
    fill: #1f2937;
}

/* responsivita */

@media (max-width: 900px) {
    .table-container {
        margin: 3vh 4vw;
        padding: 2.5vh 4vw;
    }

    .table-wrapper {
        max-height: none;
    }

    .table-main {
        min-width: 700px; /* pri menšej šírke sa objaví horizontálny scroll */
    }
}


/* ===== GLOBAL PAGE ACTIONS (vertikálne, pravý horný roh) ===== */
.page-actions {
    position: fixed;
    top: 22px;
    right: 32px;

    display: flex;
    flex-direction: column;
    align-items: stretch;      /* tlačidlá natiahneme na šírku parenta */
    gap: 10px;

    width: fit-content;        /* 🔥 šírka podľa najširšieho buttonu */
    z-index: 1000;
}

.action-button {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 8px;

    width: 100%;               /* 🔥 všetky rovnako široké */
    padding: 8px 16px;

    border-radius: 999px;
    box-sizing: border-box;

    background: rgb(86, 143, 201);
    backdrop-filter: blur(8px);

    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.15);

    transition:
        transform 0.1s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
}

.action-button.primary {
    background: linear-gradient(135deg, rgb(86, 143, 201), #1d4ed8);
    border: none;
}

.action-button.primary:hover {
    background: linear-gradient(135deg, rgb(86, 143, 201), #1e40af);
}

.action-icon {
    width: 14px;
    height: 14px;
    filter: brightness(0) invert(1);
}

/* ===== MODERN FILTER SELECT & BUTTON ===== */

.filter-row {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Wrapper pre custom šípku na selecte */
.select-wrapper {
    position: relative;
    display: block;      /* nech sa natiahne na celú šírku rodiča */
    width: 100%;
}

/* Select vo vnútri wrappera */
.select-wrapper select {
    width: 100%;
    box-sizing: border-box;
}

/* Moderný select vzhľad */
.filter-select-modern {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    padding: 0.6rem 2.4rem 0.6rem 0.9rem;
    font-size: 0.95rem;
    border-radius: 12px;

    border: 1px solid rgba(148, 163, 184, 0.7);
    background-color: #ffffff;
    color: #111827;

    transition: all 0.15s ease;
}

/* Vlastná šípka – teraz určite vo vnútri boxu */
.select-wrapper::after {
    content: "▾";
    position: absolute;
    right: 0.95rem;   /* ~ rovnaké ako padding-right selectu */
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    color: #6b7280;
    pointer-events: none;
}

/* hover */
.filter-select-modern:hover {
    border-color: #2563eb;
}

/* focus */
.filter-select-modern:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* modern filter button */
.filter-button-modern {
    padding: 0.65rem 1.6rem;
    font-size: 0.95rem;
    border-radius: 12px;
}

/* mobile */
@media (max-width: 768px) {
    .filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-select-modern {
        width: 100%;
    }

    .filter-button-modern {
        width: 100%;
    }
}

/* ===== FILTER BUTTON – IDENTICKÝ S LOGIN ===== */

.filter-submit-wrapper {
    display: flex;
    align-items: flex-end;
}

.filter-submit-wrapper .auth-button {
    padding: 0.8rem 2.2rem;   /* rovnaká vizuálna výška ako login */
    min-width: 180px;         /* rovnaká šírka ako login */
    border-radius: 999px;
}

/* ===== PERMISSIONS TABLE ===== */

.permissions-table-wrapper {
    margin-top: 0.6rem;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(248, 250, 252, 0.9);
    overflow: hidden;
}

.permissions-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.permissions-table thead th {
    padding: 0.6rem 0.9rem;
    background: rgba(15, 23, 42, 0.03);
    text-align: left;
    font-weight: 600;
    color: #111827;
}

.permissions-table tbody td {
    padding: 0.5rem 0.9rem;
    vertical-align: middle;
}

.permissions-table tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.98);
}

.permissions-table tbody tr:nth-child(even) {
    background: rgba(249, 250, 251, 0.98);
}

.permissions-table tbody tr:hover {
    background: rgba(219, 234, 254, 0.7);
    transition: background-color 0.12s ease-out;
}

.permission-name {
    font-weight: 500;
    color: #111827;
}

.permission-desc {
    margin-top: 2px;
    font-size: 0.8rem;
    color: #6b7280;
}

.perm-toggle-col {
    width: 140px;
    text-align: center;
}

.perm-toggle-cell {
    text-align: center;
}

/* ===== GLOBAL TOGGLE SWITCH (boise-toggle) ===== */

.boise-toggle {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
}

/* skryjeme checkbox */
.boise-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* dráha */
.boise-toggle-track {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #d1d5db;                 /* sivá, keď je off */
    border-radius: 999px;
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

/* gulička */
.boise-toggle-track::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    top: 3px;
    background-color: #ffffff;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: transform 0.18s ease;
}

/* ON stav – modrá farba rgb(86,143,201) */
.boise-toggle input:checked + .boise-toggle-track {
    background-color: rgb(86, 143, 201);
    box-shadow: 0 0 0 3px rgba(86, 143, 201, 0.25);
}

.boise-toggle input:checked + .boise-toggle-track::before {
    transform: translateX(22px);
}

/* hover efekt */
.boise-toggle:hover .boise-toggle-track {
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.4);
}

.boise-toggle input:checked:hover + .boise-toggle-track {
    box-shadow: 0 0 0 3px rgba(86, 143, 201, 0.35);
}

/* ===== EDIT ICON BUTTON ===== */

.icon-edit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    border-radius: 999px;
    background: rgba(86, 143, 201, 0.08);
    border: 1px solid rgba(86, 143, 201, 0.25);

    transition:
        transform 0.12s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
}

.icon-edit-button img {
    width: 16px;
    height: 16px;
    filter: brightness(0) saturate(100%) invert(32%) sepia(73%) saturate(400%) hue-rotate(176deg);
    transition: transform 0.12s ease, filter 0.15s ease;
}

/* hover */
.icon-edit-button:hover {
    background: rgb(86, 143, 201);
    box-shadow: 0 6px 14px rgba(86, 143, 201, 0.35);
    transform: translateY(-2px);
}

.icon-edit-button:hover img {
    filter: brightness(0) invert(1);
    transform: scale(1.05);
}

/* active */
.icon-edit-button:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(86, 143, 201, 0.3);
}

/* ===== STATUS BADGE PRE DÁTUMY (EK/TK/vignette) ===== */

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
}

.status-none {
    background: transparent;
    color: #9ca3af;
    font-style: italic;
}

.status-ok {
    background: rgba(22, 163, 74, 0.12);   /* zelenkavá */
    color: #166534;
    border: 1px solid rgba(22, 163, 74, 0.25);
}

.status-warning {
    background: rgba(234, 179, 8, 0.18);   /* oranžová */
    color: #92400e;
    border: 1px solid rgba(234, 179, 8, 0.4);
}

.status-expired {
    background: rgba(239, 68, 68, 0.18);   /* červená */
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.45);
}

/* ===== VEHICLE FORMS – 3 COLUMN GRID ===== */

.vehicle-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 1.5rem;
    row-gap: 1rem;
}

/* aby medzi fieldami nebol extra veľký vertikálny gap */
.vehicle-form-grid .auth-field {
    margin-bottom: 0;
}

/* sekcie, aby neboli nalepené */
.vehicle-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
}

/* responsivita – 2 stĺpce / 1 stĺpec */

@media (max-width: 1200px) {
    .vehicle-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .vehicle-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


.container-width {
    max-width: 60vw !important;
}

/* ===== STICKY COLUMNS – EMPLOYEES TABLE (FINAL FIX) ===== */

/* Index stĺpec (Nr.) */
.table-main th.sticky-col-index,
.table-main td.sticky-col-index {
    position: sticky;
    left: 0;
    z-index: 6; /* najvyššie z celého tela */
}

/* Meno stĺpec */
.table-main th.sticky-col-name,
.table-main td.sticky-col-name {
    position: sticky;

    /* musí byť ~ celková šírka Nr. stĺpca (šírka + padding) */
    left: 72px;          /* ak by stále presvitalo, skús 82–84px */

    z-index: 5;          /* nad ostatnými stĺpcami, ale pod Nr. */
}

/* header sticky – nech má gradient ako ostatné headre */
.table-main thead th.sticky-col-index,
.table-main thead th.sticky-col-name {
    background: linear-gradient(90deg, rgba(86, 143, 201, 1), rgba(95, 155, 220, 1));
}

/* telo tabuľky – sticky bunky preberajú zebra background */
.table-main tbody td.sticky-col-index,
.table-main tbody td.sticky-col-name {
    background-color: inherit;
}

/* šírka Nr. – musí sedieť s left: 80px hore */
.col-index {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    text-align: center;
}

/* Meno: nezalamovať a nechať trochu priestoru */
.col-name,
.table-main td.sticky-col-name {
    white-space: nowrap;
    min-width: 160px; /* môžeš si doladiť podľa dĺžok mien */
}

.table-main tbody tr:hover td.col-index,
.table-main tbody tr:hover td.col-name {
    background-color: rgba(219, 234, 254, 1);
}