@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap");
:root {
    --bg: #fefefe;
    --fg: #1e1e1e;
    --card: #f5f5f5;
    --border: #e5e5e5;
    --accent: #06a3fe;
    --muted: #9c9c9c;
    --mark-bg: #fffb70;
    --mark-fg: #000;
    --terminal-bg: #000;
    --terminal-fg: #fff;
    --accent-rgb: 6, 163, 254;
    --primary: var(--accent);
    --bg-container: var(--bg);
    --tm-bg-row: var(--card);
    --tm-text-muted: var(--muted);
    --green: #2ecc71;
}

html[data-theme=dark] {
    --bg: #2b2b2b;
    --fg: #fefefe;
    --card: #262626;
    --border: #4c4c4c;
    --accent: #87d5fe;
    --muted: #b0b0b0;
    --mark-bg: #ffd54f;
    --mark-fg: #000;
    --terminal-bg: #fff;
    --terminal-fg: #000;
    --primary: var(--accent);
    --bg-container: var(--bg);
    --tm-bg-row: var(--card);
    --tm-text-muted: var(--muted);
    --green: #27ae60;
}
html[data-theme=dark] pre,
html[data-theme=dark] code,
html[data-theme=dark] kbd,
html[data-theme=dark] samp {
    color: var(--fg) !important;
    background-color: transparent !important;
    border-color: var(--border) !important;
}
html[data-theme=dark] mark {
    background-color: var(--mark-bg);
    color: var(--mark-fg);
}

html[data-theme=dark] .header .logo-link img {
    filter: invert(1) hue-rotate(180deg) brightness(1.12) contrast(1.05);
}

.searchIcon {
    content: url("/icons/search_icon.svg");
}

html[data-theme=dark] .primeri table,
html[data-theme=dark] .primeri th,
html[data-theme=dark] .primeri td,
html[data-theme=dark] .container table,
html[data-theme=dark] .container th,
html[data-theme=dark] .container td,
html[data-theme=dark] .container80 table,
html[data-theme=dark] .container80 th,
html[data-theme=dark] .container80 td,
html[data-theme=dark] .container90 table,
html[data-theme=dark] .container90 th,
html[data-theme=dark] .container90 td {
    color: var(--fg) !important;
    background-color: var(--card) !important;
    border-color: var(--border) !important;
}
html[data-theme=dark] .primeri mark,
html[data-theme=dark] .primeri .highlight,
html[data-theme=dark] .container mark,
html[data-theme=dark] .container .highlight,
html[data-theme=dark] .container80 mark,
html[data-theme=dark] .container80 .highlight,
html[data-theme=dark] .container90 mark,
html[data-theme=dark] .container90 .highlight {
    background-color: color-mix(in srgb, var(--accent) 20%, transparent) !important;
    color: var(--fg) !important;
}

html[data-theme=dark] .table-modern tbody tr:hover th[scope=row],
html[data-theme=dark] .table-modern tbody tr:hover th:first-child,
html[data-theme=dark] .table-modern tbody tr:hover td:first-child {
    background-color: #ffffff !important;
    color: #000 !important;
    border-color: var(--border) !important;
}

html[data-theme=dark] .table-modern tbody tr td:last-child,
html[data-theme=dark] .table-modern tbody tr td:last-child:hover {
    background-color: #fefefe !important;
    color: #1e1e1e !important;
    border-color: var(--border) !important;
}

html[data-theme=dark] .table-modern tbody tr td:last-child a {
    color: inherit !important;
}

@media all and (max-width: 768px) {
    html[data-theme=dark] .table-modern tbody td:last-child,
    html[data-theme=dark] .table-modern tbody td:last-child:hover {
        background-color: #fefefe !important;
        color: #1e1e1e !important;
        border-color: var(--border) !important;
    }
}
html[data-theme=dark] .table-modern thead th,
html[data-theme=dark] .table-modern thead th:hover {
    background-color: #fefefe !important;
    color: #1e1e1e !important;
    border-color: var(--border) !important;
}

.searchIcon {
    content: url("/icons/search_icon.svg");
}

.homeIcon {
    content: url("/icons/home_icon.svg");
}

.leftIcon {
    content: url("/icons/left-black.svg");
}

.rightIcon {
    content: url("/icons/right-black.svg");
}

.smiley1 {
    content: url("/icons/smiley-black.svg");
}

.smiley2 {
    content: url("/icons/smiley-face.png");
    width: 1%;
}

.smiley3 {
    content: url("/icons/smiley-heart.png");
    width: 1%;
}

.smiley4 {
    content: url("/demo/smiley-hand.png");
    width: 1%;
}

.closeIcon {
    content: url("/icons/close-black.svg");
}

.empty {
    padding: 20px;
}

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

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--bg);
    color: var(--fg);
}

body {
    font-family: "Noto Sans", sans-serif;
    line-height: 1.6;
}

h1, h2, h3 {
    font-family: "Playfair Display", serif;
    font-weight: 700;
}

h1 {
    text-align: center;
    font-size: 4vw;
}

h2 {
    font-size: 3vw;
    margin: 0;
}
h2 a {
    color: black;
    text-decoration: none;
}
h2 a:hover {
    color: black;
}

/* ------------------------------------------------------------------
 * .header-h2 – elegantna, uravnotežena velikost za naslove h2
 * ------------------------------------------------------------------ */
.header-h2 {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--fg);
    border-bottom: 2px solid color-mix(in srgb, var(--fg) 10%, transparent);
    padding-bottom: 0.25rem;
    line-height: 1.35;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.header-h2 {
    font-size: clamp(1.5rem, 5vw, 2rem);
    margin-bottom: 0.6rem;
}

h3 {
    font-size: 1.8vw;
}
h3 a {
    color: black;
    text-decoration: none;
}
h3 a:hover {
    color: black;
}

h3.margin {
    margin-top: -30px;
}

h4 {
    font-size: 0.8vw;
}

a {
    text-decoration: none;
    color: var(--accent);
}
a:hover {
    color: #f00b06;
}

/* Osnovni slogi za odzivne tabele */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

/* Samodejno dodajanje drsnika za široke tabele na majhnih zaslonih */
.table-container, 
.table-responsive,
.primeri table,
.container table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.img50 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    min-width: 300px;
    max-width: 100%;
}

.img75 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 75%;
    min-width: 300px;
    max-width: 100%;
}

code, kbd, samp, var, dfn {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
    color: inherit;
    font-family: "Fira Code", monospace;
    font-size: calc(1rem * 1.07);
}

pre {
    color: inherit;
    padding: 0;
    margin: 0.5rem 0;
    overflow: auto;
    tab-size: 2;
    font-family: "Fira Code", monospace;
    font-size: 1rem;
}

.pre-with-no-margin {
    overflow: auto !important;
    font-family: "Fira Code", monospace;
    margin-bottom: -20px;
}

.pre-format {
    display: flex;
    justify-content: left;
    align-items: center;
    width: fit-content;
    background-color: #f5f5f5;
    padding: 10px 10px 0;
}

mark {
    background-color: var(--mark-bg);
    color: var(--mark-fg);
    padding: 0 0.2rem;
    border-radius: 0.2rem;
}

.html-terminal {
    display: block;
    font-family: "Fira Code", monospace;
    font-size: 1rem;
    line-height: 1.4;
    white-space: pre-wrap;
}

.html-terminal--narrow {
    max-height: 500px;
    overflow: auto;
    margin-inline: auto;
    background-color: var(--terminal-bg) !important;
    color: var(--terminal-fg) !important;
    border: 1px solid #4c4c4c !important;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    padding: 0 12px;
    margin: 0;
    overflow: auto;
    tab-size: 2;
    scrollbar-width: thin;
    scrollbar-color: var(--border) var(--card);
}
.html-terminal--narrow:focus-visible {
    outline: 2px solid #87d5fe;
    outline-offset: 2px;
}
.html-terminal--narrow::selection,
.html-terminal--narrow *::selection {
    background: rgba(135, 213, 254, 0.25);
}
.html-terminal--narrow::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}
.html-terminal--narrow::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 8px;
}
.html-terminal--narrow::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--card) 90%, transparent);
}
.html-terminal--narrow span.attribute {
    color: #E06C75;
}
.html-terminal--narrow span.value {
    color: #61AFEF;
}

.terminal {
    display: inline-block;
    vertical-align: center;
    max-width: 100%;
    height: auto;
    padding: 10px;
    border: 1px solid var(--border);
    background-color: var(--card);
    color: var(--fg);
    font-family: "Fira Code", monospace;
    cursor: context-menu;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.terminalNoMargin {
    display: inline-block;
    max-width: 100%;
    padding-bottom: 0;
    margin-bottom: 0;
    font-weight: normal;
    cursor: context-menu;
    border: 1px solid var(--border);
    background-color: var(--card);
    color: var(--fg);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sql-terminal {
    display: block;
    width: auto;
    font-family: "Fira Code", monospace;
    font-size: 1rem;
    line-height: 1.45;
    white-space: pre-wrap;
    tab-size: 2;
    color: #1e1e1e;
    background-color: #f5f5f5;
    border-top: 2px solid #e5e5e5 !important;
    border-bottom: 2px solid #e5e5e5 !important;
    border-left: 14px solid #e5e5e5 !important;
    border-right: 4px solid #e5e5e5 !important;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 12px 10px;
    margin: 0.5rem 0;
    overflow: auto;
}
.sql-terminal:focus-visible {
    outline: 2px solid #87d5fe;
    outline-offset: 2px;
}

pre code {
    color: inherit;
    padding: 0;
}

pre code mark, pre code .highlight {
    background: transparent !important;
    color: inherit;
}

@media (prefers-color-scheme: dark) {
    code, kbd, samp, var, dfn {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        color: inherit;
    }
    pre:not(.html-terminal):not(.sql-terminal), pre code {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        color: inherit;
    }
    pre, pre code {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        color: inherit;
    }
}
.section-heading {
    font-family: "Playfair Display", serif;
    font-weight: 700;
    line-height: 1.2;
    font-size: clamp(1.4rem, 2.2vw, 2.2rem);
    color: var(--fg) !important;
    margin: 2rem 0 1rem;
    display: block;
    position: relative;
    scroll-margin-top: 80px;
}
.section-heading::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin-top: 0.5rem;
    background: linear-gradient(90deg, #6b0505, #f00b06);
    border-radius: 2px;
}
.section-heading a {
    color: inherit;
    text-decoration: none;
}
.section-heading a:hover {
    color: #f00b06;
}

.section-heading--center {
    text-align: center;
}
.section-heading--center::after {
    margin-left: auto;
    margin-right: auto;
}

.section-heading--compact {
    margin: 1.25rem 0 0.75rem;
}

.section-heading--blue::after {
    background: linear-gradient(90deg, #0056b3, #06a3fe);
}

.section-heading--green::after {
    background: linear-gradient(90deg, #004d00, #00ff00);
}

.section-heading--orange::after {
    background: linear-gradient(90deg, #a86800, #ff9f00);
}

.group-header {
    scroll-margin-top: 280px;
}

.table-container h2 {
    font-size: 1.2rem;
    margin: 2rem 0 1rem;
    padding: 0.5rem;
    background-color: #ff9f00;
    color: #1e1e1e;
    border-radius: 4px;
    border-left: 4px solid #06a3fe;
}
.table-container h3 {
    font-size: 1rem;
    margin: 1rem 0;
}

.sql-results-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background: #ffffff;
}
.sql-results-table th {
    background-color: #f5f5f5;
    padding: 12px;
    text-align: left;
    border: 1px solid #e5e5e5;
    font-weight: 600;
}
.sql-results-table td {
    padding: 10px;
    border: 1px solid #e5e5e5;
}
.sql-results-table tr:nth-child(even) {
    background-color: #f5f5f5;
}
.sql-results-table tr:hover {
    background-color: #e5e5e5;
}

.function-groups {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.function-groups .group-link {
    margin-bottom: 1rem;
    padding: 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
    color: inherit !important;
}
.function-groups .group-link:hover {
    background: inherit !important;
}
.function-groups .group-link a {
    display: block;
    text-decoration: none;
    font-weight: bold;
    margin-bottom: 0.3rem;
    color: inherit !important;
}
.function-groups .group-link .group-tables {
    font-size: 0.9rem;
    padding-left: 1rem;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 10px;
}
.header-content .back-button {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #9c9c9c;
    transition: all 0.2s ease-in-out;
}
.header-content .back-button:hover {
    color: #06a3fe;
}
.header-content .back-button.right-arrow {
    margin-left: auto;
}
.header-content .top-icon, .header-content .arrow-up-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}

.arrow-up-icon::before {
    content: "↑";
    font-size: 1.2rem;
}

.top-icon {
    content: url("/icons/top.svg");
}

.frame {
    display: inline-block;
    margin: 0;
    padding: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
}

.wrap {
    display: inline-block;
    vertical-align: center;
    max-width: 100%;
    height: auto;
    padding: 10px;
    border: 1px solid #9c9c9c;
    background-color: #e5e5e5;
    font-family: "Fira Code", monospace;
    cursor: context-menu;
}

cite {
    font-weight: bold;
    color: #a86800;
    font-style: normal;
}

.blue {
    font-weight: bold;
    color: #06a3fe;
    font-style: normal;
}

.green {
    font-weight: bold;
    color: #00ff00;
    font-style: normal;
}

.red {
    font-weight: bold;
    color: #f00b06;
    font-style: normal;
}

.orange {
    font-weight: bold;
    color: #ff9f00;
    font-style: normal;
}

.noMargin {
    margin: 0;
}

.marginBottom20px {
    margin-bottom: 20px;
}

/* ----------------------------------------
    HEADER - Glava, navbar
   ---------------------------------------- */

.header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 60px;
    text-align: center;
    background-color: var(--card);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header .logo-link {
    order: 1;
    margin-left: 15px;
    transition: filter 0.2s ease;
}
.header .logo-link img {
    width: 120px;
    height: auto;
    cursor: pointer;
}
.header h1 {
    order: 2;
    font-size: 2rem;
    margin: 0 auto;
    text-align: center;
    color: var(--fg);
    max-width: 60%;
    word-wrap: break-word;
}
.header .logout, .header .textLink, .header .inputField {
    color: var(--fg);
    font-size: 18px;
    text-decoration: none;
}
.header .icons-wrapper {
    order: 3;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}
.header .icons-wrapper .services, .header .icons-wrapper .project {
    color: var(--fg);
    font-size: 16px;
    text-decoration: none;
    padding: 5px 15px;
    border-radius: 20px;
    border: 1px solid var(--border);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.header .icons-wrapper .services:hover,
.header .icons-wrapper .project:hover {
    background-color: color-mix(in srgb, var(--accent) 14%, var(--card));
    border-color: var(--accent);
}

/* Hover efekti - enaki kot pri tvojih ostalih gumbih */
.header .icons-wrapper .services:hover,
.header .icons-wrapper .project:hover {
    background-color: color-mix(in srgb, var(--accent) 14%, var(--card));
    border-color: var(--accent);
}
.header .icons-wrapper .inputField, .header .icons-wrapper .textLink {
    width: 40px;
    height: 40px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--card);
    border-radius: 50%;
}
.header .icons-wrapper button.inputField {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background-color: var(--card);
    color: var(--fg);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}
.header .icons-wrapper button.inputField:hover {
    background-color: color-mix(in srgb, var(--accent) 14%, var(--card));
}
.header .icons-wrapper button.inputField:active {
    transform: scale(0.95);
}
.header .icons-wrapper button.inputField:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
    outline-offset: 2px;
}
.header .textLink {
    margin-right: 20px;
}
.header .mini-meni {
    display: none;
}
.header #language-selection {
    font-size: 16px;
    color: var(--fg) !important;
    display: flex;
    align-items: center;
    gap: 5px;
}
.header #language-selection a {
    text-decoration: none;
    color: var(--fg) !important;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
}
.header #language-selection a:hover {
    background-color: #e5e5e5;
    color: #1e1e1e !important;
    border-color: #1e1e1e;
}

.header.sidebar-active picture {
    transform: translateX(16vw);
    transition: transform 0.3s ease-in-out;
}
/* ZA mobile/table view */
.menu-toggle {
    display: none; /* Privzeto skrito */
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--fg);
    cursor: pointer;
    line-height: 0;
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    flex-shrink: 0; /* Da ga flexbox ne pohabi */
    margin: 0 auto;
}

/* Nova meja za prikaz gumba */
@media screen and (max-width: 1520px) {
    .menu-toggle {
        display: block;
    }
}

.menu-toggle i {
    font-size: 28px;
    display: block;
}
/*
@media all and (max-width: 1280px) {
    .header.sidebar-active picture {
        transform: none;
        transition: none;
    }
    .header {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .header .mini-meni {
        display: block;
        width: 60px;
        margin-left: 20px;
        content: url("icons/menu.svg");
    }
    .header .logo-link {
        margin-left: 20px;
        order: 0;
    }
    .header .icons-wrapper {
        margin-left: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }
}
*/
@media all and (max-width: 1520px) {
    .header {
        position: absolute !important; /* Navbar ni več prilepljen, ampak stoji na vrhu strani */
        top: 0;
        left: 0;
        width: 100%;
        height: auto; /* Pusti mu, da zadiha glede na vsebino (ikone, gumbi) */
        min-height: 80px; /* Ali kolikor pač potrebuješ */
    }

    .header .logo-link {
        flex: 0 1 auto; /* Logotip zavzame svojo vrstico in se centrira */
        text-align: center;
        margin-left: 0;
        margin-bottom: 10px;
    }

    .header .icons-wrapper {
        flex: 1 1 auto; /* Ikone in gumbi gredo v svojo vrstico spodaj */
        justify-content: flex-end; /* Vse lepo centriramo */
        gap: 8px; /* Malo stisnemo razmik, da gre lažje vse v vrsto */
    }

    /* Prilagoditev odmika vsebine pod navbar */
    .container {
        margin-top: 180px !important; /* Povečamo odmik, ker je navbar zdaj višji */
    }
}

@media all and (max-width: 680px) {
    .header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: auto;
        padding: 10px 20px;
    }
    .header .logo-link {
        width: 50%;
    }
    .header .logo-link img {
        width: 120px;
        height: auto;
    }
    .header h1 {
        font-size: 1.5rem;
        text-align: center;
        margin-bottom: 10px;
    }
    .header .icons-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }
    .header .icons-wrapper .inputField, .header .icons-wrapper .textLink {
        width: 36px;
        height: 36px;
        font-size: 18px;
        border-radius: 50%;
    }
    .header .icons-wrapper .services, .header .icons-wrapper .project {
        font-size: 14px;
        padding: 4px 10px;
    }
    .mini-meni {
        display: block;
        width: 36px;
        height: 36px;
        cursor: pointer;
        content: url("icons/menu.svg");
        margin-bottom: 10px;
    }
}

@media all and (max-width: 520px) {
    .header {
        height: auto;
        padding: 10px 5px;
    }

    .header .icons-wrapper {
        display: flex;
        flex-wrap: wrap; /* Dovolimo prelom v vrstice */
        justify-content: center;
        gap: 10px; /* Razmik med gumbi v spodnji vrstici */
        width: 100%;
    }

    /* PRVA VRSTICA: Jezik se raztegne čez vse */
    .header #language-selection {
        flex: 0 0 100%; /* Zavzame 100% širine, da ostalo skoči spodaj */
        justify-content: center;
        margin-bottom: 5px; /* Malo prostora do spodnjih gumbov */
    }

    /* DRUGA VRSTICA: Vse ostalo se poravna v svoji vrsti */
    .header .icons-wrapper .services,
    .header .icons-wrapper .project,
    .header .icons-wrapper .inputField,
    .header .icons-wrapper .textLink {
        /* Tukaj ne spreminjamo ničesar, flex-wrap bo sam poskrbel za vrsto */
        margin: 0;
    }

    /* Odmik vsebine, ker sta zdaj dve vrstici gumbov + logo zgoraj */
    .container {
        margin-top: 220px !important;
    }
}

@media all and (max-width: 300px) {
    .header {
        flex-wrap: wrap;
        padding: 5px;
        gap: 5px;
    }
    .header .mini-meni {
        width: 30px;
        height: 30px;
        margin-left: 0;
    }
    .header .logo-link {
        flex: 1 1 100%;
        text-align: center;
    }
    .header .logo-link img {
        max-width: 100%;
        width: auto;
        height: auto;
    }
    .header .icons-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: 5px;
        margin: 0 auto;
    }
    .header .icons-wrapper .inputField, .header .icons-wrapper .textLink {
        width: 20px;
        height: 20px;
        padding: 0;
        margin: 0;
    }
    .header .icons-wrapper #language-selection {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding: 10px;
        width: 100%;
        text-align: center;
    }
    .header .inputField, .header .textLink {
        width: 25px;
        height: 25px;
        padding: 0;
        margin: 0;
    }
}
@media all and (max-width: 230px) {
    .header .icons-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: 5px;
        margin: 0 auto;
    }
    .header .icons-wrapper #language-selection {
        flex-direction: column;
        gap: 5px;
    }
    .header .icons-wrapper #language-selection .separator {
        display: none;
    }
    .header .icons-wrapper #language-selection a + a::before {
        content: "";
    }
}

/* * ------------------------------------------------------------------
 * vadnica.org - GLAVNI STIL ZA INDEX.PHP
 * Verzija: 2026 PRO (Ultra-Wide Optimized)
 * ------------------------------------------------------------------ */

/* --- 1. OSNOVA (Kontejner in Hero) --- */
.container {
    max-width: 95%;
    width: 2000px; /* Tvoja idealna širina */
    margin: 100px auto 40px auto;
    background: rgba(245, 245, 245, 0.7);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    padding: 60px 50px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    overflow: hidden;
}

html[data-theme="dark"] .container {
    background: rgba(38, 38, 38, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-box { text-align: center; padding: 20px 0 40px 0; }
.animate-title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; color: #00d2ff; }
.hero-subtitle { font-size: 1.2rem; margin-bottom: 20px; opacity: 0.9; }

/* --- 2. NAVIGACIJA (Struktura) --- */
.nav-grid {
    display: grid;
    gap: 20px;
    margin: 0 auto 40px auto;
}

.nav-item { position: relative; padding: 10px; }
.nav-link {
    text-decoration: none; color: inherit;
    display: flex; flex-direction: column; align-items: center;
    transition: transform 0.3s ease;
}
.label-large {
    font-size: 1.1rem;
    font-weight: 700;
    color: #00d2ff; /* Tvoja modra barva */
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s;
}
.nav-link:hover {
    transform: translateY(-3px);
    color: #00d2ff;
}

/* --- 3. MEGA DROPDOWN (Osnovni stil oken) --- */
.mega-dropdown { display: none !important; }

.mega-dropdown {
    position: absolute;
    top: 90% !important;
    background: var(--bg-container, #fff);
    color: #333;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 210, 255, 0.3);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
}

.mega-dropdown::before {
    content: "";
    position: absolute;
    top: -15px; /* Ustvari 15px nevidnega prostora nad menijem */
    left: 0;
    width: 100%;
    height: 15px;
    background: transparent; /* Most je neviden */
}

/*.nav-item:hover .mega-dropdown { opacity: 1; visibility: visible; margin-top: -10px; }*/

.dropdown-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    align-content: start;
}

.dropdown-content a {
    display: block; padding: 8px 12px; text-decoration: none;
    color: #333; font-size: 0.9rem; border-radius: 6px; text-align: left;
}
.dropdown-content a:hover { background: rgba(0, 210, 255, 0.1); color: blue; }

/* Puščica (Standardna) */
.mega-dropdown::before {
    content: ''; position: absolute; top: -10px; left: 50%;
    transform: translateX(-50%); border-left: 10px solid transparent;
    border-right: 10px solid transparent; border-bottom: 10px solid rgba(0, 210, 255, 0.3);
}

/* --- 4. ODZIVNOST (Media Queries od največjega navzdol) --- */

/* A: Desktop nad 1280px (Vse v eni vrsti) */

@media (min-width: 1520px) {
    .container {
        padding-top: 0;
    }

    .nav-grid { grid-template-columns: repeat(6, 1fr); }

    .mega-dropdown {
        width: 600px !important;
        height: 800px !important;
        min-height: 400px;
        max-height: 700px;
        padding: 25px;
    }

    .dropdown-content {
        display: grid;
        /* TOLE JE KLJUČ: Samo dva stolpca (50% vsak) */
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        align-content: start;
    }

    .nav-item .mega-dropdown {
        left: 50% !important;
        transform: translateX(-50%) translateY(20px) !important;
    }

    /* SPECIFIČNO ZA PRVO OKNO (HTML), da ne pade ven na levi/desni */
    .nav-item:first-child .mega-dropdown {
        left: 0 !important;
        transform: translateY(20px) !important; /* Odstraniva -50% zamik */
    }

    .nav-item:first-child .mega-dropdown {
        left: 10px !important;
    }
}

@media (max-width: 1520px) {
    .container {
        margin-top: 120px !important;
        padding-top: 0;
    }
    /* Mreža gumbov - 3 stolpci */
    .nav-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        position: relative; /* Postane sidro za okna */
        padding-bottom: 20px;
    }

    /* Pomembno: Odvežemo okno od gumba, da ne dela praznega prostora */
    .nav-item { position: static; }

    .mega-dropdown {
        position: absolute;
        top: 100%; /* Skoči točno pod celotno mrežo gumbov */
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 500px !important; /* Fiksna višina, da ni lukenj */
        margin-top: 10px;
        display: none; /* Skrito do klika */
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        border: 2px solid #00d2ff;
        background: var(--bg-container, #fff);
        z-index: 9999;
    }

    /* Ko je okno aktivno, ga prikažemo */
    .mega-dropdown.active {
        display: block !important;
    }

    /* Onemogočimo hover efekte, da se ne tepejo s klikom */
    .nav-item:hover .mega-dropdown {
        display: none;
    }
}

@media (max-width: 1280px) {
    .container {
        padding-top: 0;
    }
}

/* B: Tablice in manjši monitorji (769px - 1279px) */
@media (max-width: 1279px) and (min-width: 769px) {
    .nav-grid {
        grid-template-columns: repeat(3, 1fr); /* 2 vrsti po 3 gumbe */
    }
    .label-large {
        font-size: 0.85rem;
    }
    .mega-dropdown {
        width: 90vw;
        height: 500px;
        left: 50% !important;
        transform: translateX(-50%) translateY(20px) !important;
    }
    .mega-dropdown::before {
        display: none; /* Skrije puščico, ker ni poravnana */
    }
}

@media (max-width: 768px) {
    .container {
        margin-top: 120px !important;
        padding: 20px 15px;
        border-radius: 15px;
    }
    .nav-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .mega-dropdown {
        display: none !important;
    }
}

@media (max-width: 680px) {
    .container {
        padding-top: 0;
        margin-top: 140px !important;
    }
}

@media (max-width: 520px) {
    .container {
        margin-top: 160px !important;
    }
}

@media (max-width: 357px) {
    .container {
        margin-top: 180px !important;
    }
}

/* --- 5. DODATKI (Slike in separator) --- */
.content-img { max-width: 100%; height: auto; border-radius: 15px; margin: 20px 0; transition: transform 0.4s ease; }
.content-img:hover { transform: scale(1.02); }
.image-box.center-img { text-align: center; margin: 30px 0; }
.separator { border: 0; height: 1px; background: linear-gradient(to right, transparent,
rgba(0, 210, 255, 0.5), transparent); margin: 40px 0; }

/* --------------------------------------------------------------- */

.logout-btn {
    background-color: #f00b06;
    color: #fefefe;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
    transition: box-shadow 0.3s ease;
}
.logout-btn:hover {
    background-color: rgb(140.487804878, 6.4390243902, 3.512195122);
}

.material-icons {
    font-size: 50px;
    color: #1e1e1e;
}

/* ------------------------------------------------------------------
 * BACK TO TOP - Gumb za nazaj na vrh
 * ------------------------------------------------------------------ */

.backToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: #06a3fe;
    color: #ffffff;
    text-align: center;
    line-height: 46px;
    font-size: 30px;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 9999; /* Da bo res nad vsem */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    border: none;
}

.backToTop:hover {
    background: #0056b3;
    transform: translateY(-5px);
    color: #ffffff;
}

/* --------------------------------------------------------------- */

.glavna-slika {
    display: none;
}

/* * ------------------------------------------------------------------
 * ISKALNIK
 * ------------------------------------------------------------------ */

.search-container {
    display: block;
    width: 80%;
    margin: 100px auto 20px;
}
.search-container img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    height: auto;
    margin-bottom: 50px;
}
.search-container form {
    display: block;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    max-width: 50%;
    width: 100%;
}
.search-container input[type=text] {
    flex: 1 1 auto;
    width: 64%;
    padding: 10px 15px;
    font-size: 16px;
    border: 2px solid #00ff00;
    border-right: none;
    border-radius: 5px 0 0 5px;
    outline: none;
}
.search-container button, .search-container select {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #fefefe;
    color: #1e1e1e;
    border: 2px solid #00ff00;
    border-left: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    transition: background-color 0.3s;
}
.search-container select {
    border-radius: 0;
    border-left: none;
    border-right: none;
}
.search-container .izpis-rezultatov {
    width: 60%;
    height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 20px auto;
    padding: 10px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    list-style: none;
    overscroll-behavior: contain;
}
.search-container .izpis-rezultatov li {
    padding: 10px 0 10px 20px;
    border-bottom: 1px solid #e5e5e5;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
}
.search-container .izpis-rezultatov li:hover {
    background-color: #c2ff02;
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}
.search-container .izpis-rezultatov li:last-child {
    border-bottom: none;
}
.search-container .izpis-rezultatov li a {
    color: #1e1e1e;
    text-decoration: none;
    font-weight: bold;
}
.search-container .nazaj-na-iskalnik {
    display: block;
    width: 60%;
    margin: 0 auto;
    padding: 10px 20px;
    text-align: center;
    background-color: #00ff00;
    color: #1e1e1e;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.2s;
}
.search-container .nazaj-na-iskalnik:hover {
    background-color: #004d00;
    color: #fefefe;
    transform: scale(1.05);
}
.search-container #results {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    background: #fefefe;
    border: 1px solid #e5e5e5;
    border-top: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}
.search-container #results .autocomplete-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #e5e5e5;
}
.search-container #results .autocomplete-item:hover {
    background: #00ff00;
}
.search-container #results .autocomplete-item:hover a {
    color: #fefefe;
}
.autocomplete-item:hover .result-title {
    color: #000000 !important;
}
.search-container #results .no-results {
    padding: 10px;
    text-align: center;
    color: #9c9c9c;
}

@media screen and (max-width: 1980px) {
    .search-container {
        width: 80%;
    }
    .search-container form {
        max-width: 80%;
    }
    .search-container .izpis-rezultatov, .search-container .nazaj-na-iskalnik {
        width: 70%;
    }
    .search-container #results {
        width: 80%;
    }
}
@media screen and (max-width: 1440px) {
    .search-container .izpis-rezultatov, .search-container .nazaj-na-iskalnik {
        width: 80%;
    }
}
@media screen and (max-width: 1024px) {
    .search-container {
        width: 100%;
        padding: 30px;
    }
    .search-container img {
        width: 100%;
    }
    .search-container form {
        max-width: 100%;
    }
    .search-container input[type=text] {
        border: 2px solid #00ff00;
        border-radius: 5px;
        width: 100%;
        margin-bottom: 4px;
    }
    .search-container button, .search-container select {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
        border: 2px solid #00ff00;
        border-radius: 5px;
    }
    .search-container select {
        border-right: 1px solid #00ff00;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .search-container button {
        border-left: 1px solid #00ff00;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    .search-container #results {
        width: 94%;
        color: #1e1e1e;
        box-shadow: none;
        border-top: 1px solid #e5e5e5;
    }
    .search-container #results .autocomplete-item:hover {
        background: transparent;
        color: #1e1e1e;
    }
    .search-container #results .autocomplete-item:hover a {
        color: #1e1e1e;
    }
    .search-container .izpis-rezultatov {
        width: 100%;
        box-shadow: none;
        border: 2px solid #00ff00;
    }
    .search-container .izpis-rezultatov li:hover {
        background-color: transparent;
        transform: none;
        box-shadow: none;
        border-radius: 0;
    }
    .search-container .nazaj-na-iskalnik {
        width: 100%;
        background-color: transparent;
        border: 2px solid #00ff00;
    }
    .search-container .nazaj-na-iskalnik:hover {
        background-color: transparent;
        color: #1e1e1e;
        transform: none;
    }
}
@media screen and (max-width: 680px) {
    .search-container {
        padding-top: 100px;
    }
}
@media screen and (max-width: 580px) {
    .search-container {
        width: 100%;
        margin: 10px auto;
        padding-top: 190px;
    }
    .search-container form {
        max-width: 100%;
        margin: 0 auto;
    }
    .search-container input[type=text], .search-container button, .search-container select {
        width: 100%;
        margin: 5px 0;
    }
}
@media screen and (max-width: 300px) {
    .search-container {
        padding-top: 240px;
    }
}

/* --------------------------------------------------------------- */

.logo {
    display: block;
    margin: 0 auto;
    width: 25%;
}

.img-on-top-main {
    display: flex;
    justify-content: center;
    height: auto;
    width: 100%;
    margin-bottom: 20px;
}

.img-on-top {
    height: 100%;
    width: 18%;
    margin: 0 5px;
}
.img-on-top:first-child {
    margin-left: 0;
}
.img-on-top:last-child {
    margin-right: 0;
}
.img-on-top img {
    width: 100%;
    height: auto;
}

.command-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.command-card {
    display: flex;
    flex-direction: column;
    border: 1px solid;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: 100%;
}

.command-card h3 {
    color: #87d5fe;
    margin-top: 0;
    margin-bottom: 15px;
}

.command-card p {
    flex-grow: 1;
    margin: 0 0 15px 0;
}

.command-card code {
    display: block;
    padding: 10px;
    border-radius: 4px;
    margin-top: auto;
}

.zavihki {
    display: flex;
    height: 100%;
}

.sidebar {
    width: 200px;
}

.nav-button {
    display: block;
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    background-color: transparent;
    border: 2px solid transparent;
    text-align: left;
    font-size: 16px;
}
.nav-button:hover {
    transition: 0.3s ease-in-out;
    background-color: #00ff00;
    border-radius: 8px;
    border: 2px solid #9c9c9c;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
}

.main-content {
    flex: 1;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.meni-right {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.meni-right picture {
    width: 100%;
    height: 100%;
}
.meni-right picture img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.content-meni {
    display: none;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 1;
}

.content-meni.active {
    display: block;
}

.content-view {
    display: inline-block;
    width: 240px;
    padding: 10px;
    margin-bottom: 4px;
    border: 2px solid transparent;
    text-decoration: none;
    color: #1e1e1e;
}
.content-view:hover {
    color: #1e1e1e;
    background-color: #00ff00;
    border-radius: 8px;
    border: 2px solid #9c9c9c;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
}

#meni-right-img {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

#meni-right-img.hidden {
    opacity: 0;
    visibility: hidden;
}

/* ----------------------------------------------------------------
    SIDEBAR - stranski meni
   ---------------------------------------------------------------- */
aside {
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    width: 300px;
    background-color: var(--card);
    color: var(--fg);
    border-right: 1px solid var(--border);
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.08);
    padding: 20px;
    height: calc(100vh - 60px);
    transform: translateX(0);
    transition: transform 0.3s ease-in-out, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    z-index: 990;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    overscroll-behavior: contain;
}
aside::-webkit-scrollbar {
    width: 10px;
}
aside::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 8px;
}
aside::-webkit-scrollbar-track {
    background: transparent;
}
aside a {
    display: block;
    color: var(--fg);
    text-decoration: none;
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    background-color: color-mix(in srgb, var(--fg) 6%, transparent);
    border: 1px solid transparent !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, padding-left 0.2s ease;
}
aside a:hover {
    background-color: var(--accent);
    color: var(--mark-fg);
}

aside a.active {
    padding-left: 30px;
    font-size: 0.95em;
    background-color: color-mix(in srgb, var(--accent) 22%, transparent);
    color: var(--fg);
    border-color: var(--border);
}

aside a.active:first-child {
    padding-left: 15px;
    font-size: 1em;
}
aside a.submenu.active {
    padding-left: 30px;
    font-size: 0.95em;
    background-color: color-mix(in srgb, var(--fg) 8%, transparent);
    color: var(--fg);
    border-color: var(--border);
}

aside.active {
    transform: translateX(0);
}

.toggleSidebar {
    position: absolute;
    left: 300px;
}

.aktivniUrl {
    position: relative;
    transition: 0.3s;
    border-radius: 8px;
    font-weight: bold;
    background-color: var(--accent);
    color: var(--mark-fg);
}
.aktivniUrl::after {
    position: absolute;
    right: 20px;
}

@media (min-width: 1521px) {
    aside {
        transform: translateX(0) !important;
        z-index: 2000;
    }
}

@media screen and (max-width: 1520px) {
    aside {
        top: 80px;
        transform: translateX(-300px);
        height: calc(100vh - 60px);
        padding-bottom: 20px;
    }
    aside.active {
        transform: translateX(0);
    }
}

@media all and (max-width: 680px) {
    aside {
        /* Tvoj obstoječi popravek za višino, če imaš zgoraj večji header */
        top: 160px;
        height: calc(100vh - 160px);
        width: 100%; /* Celotna širina zaslona */
        transform: translateX(-100%); /* Skrije se za celo širino */
        border-right: none; /* Na mobilnem ne rabimo roba desno */
    }

    aside.active {
        transform: translateX(0);
    }

    /* Prilagoditev gumba za zapiranje, če ga imaš zunaj */
    .toggleSidebar {
        left: auto;
        right: 10px; /* Premaknemo ga nekam, kjer ne bo motil */
    }
}

@media all and (max-width: 520px) {
    aside {
        /* Tvoj obstoječi popravek za višino, če imaš zgoraj večji header */
        top: 180px;
        height: calc(100vh - 160px);
    }
}

/* ---------------------------------------------------------- */

/* ------------------------------------------------------------------
 * ARDUINO PRETVORNIK - iz sketch v C++
 * ------------------------------------------------------------------ */

/* Moderni slog za Arduino Translator */
.arduino-translator {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    font-family: 'Consolas', 'Monaco', monospace;
}

.arduino-translator h3 {
    color: #4ec9b0;
    margin-top: 0;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
}

.arduino-translator textarea {
    width: 100%;
    height: 250px;
    background: #252526;
    color: #9cdcfe;
    border: 1px solid #3e3e42;
    border-radius: 4px;
    padding: 15px;
    box-sizing: border-box;
    font-family: inherit;
    resize: vertical;
}

.arduino-translator button {
    background: #007acc;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 15px;
    transition: background 0.2s;
}

.arduino-translator button:hover {
    background: #0062a3;
}

.arduino-translator .result-header {
    margin-top: 30px;
    color: #ce9178;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Stil za rezultat prevajalnika */
.arduino-translator-result pre {
    background-color: #1e1e1e; /* Temno ozadje kot v CLion */
    color: #d4d4d4; /* Svetla koda */
    padding: 20px;
    border-radius: 0 0 8px 8px; /* Zaokroženo samo spodaj, ker je zgoraj header */
    border: 1px solid #333;

    /* Tvoje želje: višina in drsnik */
    height: 500px;
    overflow: auto;

    /* Pisava za programerje */
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 14px;
    line-height: 1.6;
    tab-size: 4; /* Da bo zamik kode lep */
}

/* Naslovna vrstica nad kodo (Terminal look) */
.result-header {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
}

.result-header h4 {
    margin: 0;
    font-size: 16px;
}

.arduino-translator code {
    color: #dcdcaa;
}

/* --------------------------------------------------------------------- */

/* ------------------------------------------------------------------
 * O PROJEKTU
 * Opis mojega spletišča. Kako in kaj sem delal.
 * ------------------------------------------------------------------ */

.about-container {
    max-width: 1000px;
    margin: 40px auto;
    padding: 20px;
    line-height: 1.6;
}

.about-container h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    text-align: center;
}

.intro-text {
    font-size: 1.2rem;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 30px;
}

.divider {
    border: 0;
    height: 1px;
    background: var(--border);
    margin: 40px 0;
}

.tech-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 50px;
}

@media (max-width: 768px) {
    .tech-grid { grid-template-columns: 1fr; }
}

.tech-card {
    padding: 25px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.tech-card.highlight {
    border-left: 5px solid #06a3fe;
}

.tech-list {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

.tech-list li {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

.tech-list li::before {
    content: "⚡";
    position: absolute;
    left: 0;
}

.stats-bar {
    display: flex;
    justify-content: space-around;
    background: var(--card);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--border);
    text-align: center;
}

.stat-num {
    display: block;
    font-size: 2rem;
    font-weight: bold;
    color: #06a3fe;
}

.stat-desc {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* --------------------------------------------------------------------- */

/* ------------------------------------------------------------------
 * MOJE STORITVE
 * Opis dela, kaj ponujam.
 * ------------------------------------------------------------------ */

.services-wrapper {
    padding: 40px 0;
}

.services-header {
    text-align: center;
    margin-bottom: 50px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.service-card {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 30px;
    border-radius: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.service-card.highlight {
    border: 2px solid #06a3fe;
    position: relative;
}

.service-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.service-card h3 {
    margin-bottom: 15px;
    color: #06a3fe;
}

.services-footer {
    text-align: center;
    background: var(--card);
    padding: 40px;
    border-radius: 15px;
    border: 1px solid var(--border);
}

.services-footer h4 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

/* Prilagoditev seznama znotraj kartice */
.service-card .list_standard {
    margin-top: auto;
    padding-top: 20px;
    font-size: 0.95rem;
}

/* --------------------------------------------------------------------- */

/* ------------------------------------------------------------------
 * NEKAJ O MENI
 * Opis sebe.
 * ------------------------------------------------------------------ */

/* IZOLIRAN CSS ZA STRAN O MENI */
.nekaj-o-meni {
    padding: 60px 0;
}

.nekaj-o-meni-header h1 {
    text-align: center;
    margin-bottom: 50px;
    font-size: 2.8rem;
    color: var(--accent, #06a3fe);
}

.nekaj-o-meni-grid {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    margin-bottom: 80px;
}

@media (max-width: 1100px) {
    .nekaj-o-meni-grid {
        flex-direction: column-reverse;
        gap: 40px;
    }
}

.nekaj-o-meni-text {
    flex: 1.5;
}

.intro-box {
    font-size: 1.25rem;
    line-height: 1.8;
    margin-bottom: 30px;
    border-left: 4px solid #06a3fe;
    padding-left: 20px;
    font-style: italic;
}

.content-section {
    margin-bottom: 40px;
}

.nekaj-o-meni-media {
    flex: 1;
    position: sticky; /* Slika te spremlja med branjem na desktopu */
    top: 100px;
}

.media-frame {
    position: relative;
    padding: 10px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.media-frame img {
    width: 100%;
    display: block;
    border-radius: 12px;
}

/* Stil za kontaktni obrazec - "Druga dimenzija" */
.nekaj-o-meni-contact {
    max-width: 800px;
    margin: 80px auto 0;
    padding: 40px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: 0 10px 50px rgba(0,0,0,0.1);
}

.nekaj-o-meni-form-group {
    margin-bottom: 25px;
    margin-left: auto;
    margin-right: auto;
    max-width: 95%;
    width: 650px;
    display: flex;
    flex-direction: column;
}

.nekaj-o-meni label {
    margin-bottom: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.nekaj-o-meni input,
.nekaj-o-meni textarea {
    padding: 15px;
    border: 1px solid var(--border);
    background: rgba(var(--bg-rgb, 255, 255, 255), 0.05);
    color: var(--fg);
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.nekaj-o-meni input:focus,
.nekaj-o-meni textarea:focus {
    border-color: #06a3fe;
    outline: none;
    box-shadow: 0 0 0 4px rgba(6, 163, 254, 0.15);
}

.nekaj-o-meni-btn {
    padding: 18px;
    background-color: #06a3fe;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin-top: 10px;
}

.nekaj-o-meni-btn:hover {
    background-color: #0084d1;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(6, 163, 254, 0.3);
}

/* Sporočila */
.container-about-me {
    background-color: #ffffff;
    color: #333333;
    padding: 20px;
    border-radius: 12px;
    max-width: 800px;
    margin: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.form-group {
    color: #333333;
    margin-bottom: 1rem;
}

.form-group input {
    color: #333333;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    color: #555;
    font-weight: 600;
}

input, textarea {
    color: #333333;
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box;
    resize: none;
}

input:focus, textarea:focus {
    color: #333333;
    border-color: #0088cc;
    outline: none;
}

button {
    width: 100%;
    padding: 12px;
    background-color: #0088cc;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    font-weight: bold;
}
button:hover {
    background-color: #006699;
}

#status-message {
    margin-top: 1rem;
    text-align: center;
    font-weight: bold;
}

/* --------------------------------------------------------------------- */

.js-num-playground {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    line-height: 1.5;
    margin-top: 1rem;
    color: #1e1e1e;
}
.js-num-playground h2 {
    font-size: 1.1rem;
    margin: 1rem 0 0.5rem;
}
.js-num-playground .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.js-num-playground .card {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 0.75rem;
    background: #fefefe;
}
.js-num-playground pre {
    background: #0f172a;
    color: #e5e5e5;
    padding: 0.75rem;
    border-radius: 6px;
    overflow: auto;
    min-height: 4.5em;
}
.js-num-playground code {
    color: #06a3fe;
}
.js-num-playground button {
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    background: #fefefe;
    cursor: pointer;
}
.js-num-playground button:hover {
    background: #e5e5e5;
}
.js-num-playground .muted {
    color: #1e1e1e;
    font-size: 0.95rem;
}

@media all and (max-width: 800px) {
    .row {
        grid-template-columns: 1fr;
    }
}
.selector-showcase {
    margin: 2rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.selector-showcase h2 {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 2rem;
    font-size: 1.8rem;
}

.selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.selector-example {
    background: #ffffff;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.selector-example .demo-box {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    min-height: 120px;
    border: 1px solid #dee2e6;
}
.selector-example .demo-box .element {
    padding: 0.5rem;
    background: #e9ecef;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}
.selector-example .demo-box .highlight {
    color: #2c3e50;
    background: #ffe066;
    padding: 0.5rem;
    border-radius: 4px;
}
.selector-example .demo-box #special {
    display: inline-block;
    background: #4dabf7;
    color: white;
    padding: 0.5rem;
    border-radius: 4px;
}
.selector-example .demo-box .hover-demo {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: #339af0;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}
.selector-example .demo-box .hover-demo:hover {
    transform: translateY(-2px);
    background: #1c7ed6;
}
.selector-example .demo-box input {
    padding: 0.5rem;
    border: 2px solid #dee2e6;
    border-radius: 4px;
    width: 100%;
}
.selector-example .demo-box input:focus {
    outline: none;
    border-color: #339af0;
    box-shadow: 0 0 0 3px rgba(51, 154, 240, 0.2);
}
.selector-example .code-example pre {
    background: #2c3e50;
    color: #f8f9fa;
    padding: 1rem;
    border-radius: 6px;
    font-family: "Fira Code", monospace;
    font-size: 0.9rem;
    overflow-x: auto;
}
.selector-example .code-example pre code {
    color: #f8f9fa;
    /* Syntax highlighting */
}
.selector-example .code-example pre code .comment {
    color: #8e959c;
}
.selector-example .code-example pre code .selector {
    color: #66d9ef;
}

.content-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ------------------------------------------------------------------
 * CONTAINER80 je za vse glavne vadnice HTML, CSS, JavaScript,
 * MySQL in PHP
 * ------------------------------------------------------------------ */

.container80 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 300px);
    height: 100%;
    padding: 60px 20px 20px;
    margin-left: 300px;
}

@media (max-width: 1520px) {
    .container80 {
        margin-top: 60px;
        margin-left: 0;
        width: 100%;
        padding: 20px 30px;
    }
}

@media (max-width: 680px) {
    .container80 {
        margin-top: 140px;
    }
}

@media (max-width: 520px) {
    .container80 {
        margin-top: 160px;
    }
}

@media (max-width: 390px) {
    .container80 {
        margin-top: 160px;
    }
}

@media (max-width: 357px) {
    .container80 {
        margin-top: 180px;
    }
}

@media (max-width: 320px) {
    .container80 h1 {
        font-size: 16px;
    }
    .container80 {
        padding: 15px;
    }
}

/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
 * CONTAINER90 je namenjen vsem vadnicam s primeri,
 * ker ni vključenega STRANSKEGA MENIJA
 * ------------------------------------------------------------------ */

.container90 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    height: 100%;
    padding: 60px 0 clamp(10px, 4%, 20px);
}
.container90 h1 {
    margin: clamp(0px, 2%, 10px) 0 0 0;
    font-size: clamp(20px, 4vw, 30px);
}
.container90 h4 {
    font-size: clamp(16px, 2.5vw, 20px);
}
.container90 picture {
    width: 100%;
    height: auto;
}
.container90 picture img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    height: auto;
}
.container90 section {
    padding: 60px 0;
}
.container90 section form {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
}
.container90 section form label {
    margin-bottom: 5px;
}
.container90 section form input, .container90 section form textarea {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #9c9c9c;
    border-radius: 5px;
}
.container90 section form textarea {
    height: 200px;
}
.container90 section form button {
    padding: 10px 20px;
    border: 1px solid transparent;
    background: #87d5fe;
    color: #1e1e1e;
    border-radius: 5px;
    cursor: pointer;
}
.container90 section form button:hover {
    background: #06a3fe;
    color: #1e1e1e;
    border: 1px solid #87d5fe;
}

@media (max-width: 1520px) {
    .container90 {
        margin-top: 60px;
        margin-left: 0;
        width: 100%;
        padding: 20px 30px;
    }
}

@media (max-width: 680px) {
    .container90 {
        margin-top: 160px;
    }
}

@media (max-width: 520px) {
    .container90 {
        margin-top: 180px;
    }
}

@media (max-width: 390px) {
    .container90 {
        margin-top: 180px;
    }
}

@media (max-width: 357px) {
    .container90 {
        margin-top: 220px;
    }
}

@media (max-width: 320px) {
    .container90 h1 {
        font-size: 16px;
    }
    .container90 {
        padding: 15px;
    }
}

/* ------------------------------------------------------------------ */

/* ---------------------------------------------------------- */
/* SLOG ZA ARDUINO VADNICNE PRIMERE (KODA + SLIKA)            */
/* ---------------------------------------------------------- */

.primeri {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: auto;
    margin: 20px 0;
    background-color: var(--card);
    color: var(--fg);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 15px;
    gap: 15px;
    border: 1px solid var(--border);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.primeri .kontrole {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}

.vsebina {
    height: 600px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    gap: 15px;
    overflow: hidden; /* Prepreči zunanji drsnik */
}

.primeri .kontrole button {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    background-color: #06a3fe;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
}

.primeri .kontrole button:hover {
    background-color: #0056b3;
}

.primeri .vsebina {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    gap: 15px;
}

.primeri .vsebina .primer,
.primeri .vsebina .rezultat {
    width: 50%;
    height: auto;
    min-height: 400px;
    overflow: auto;
    padding: 10px;
    background-color: var(--card);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.arduino-code-view {
    width: 100%;
    max-height: 500px;
    overflow: auto;
    font-family: "Source Code Pro", monospace;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre;
    margin: 0;
    padding: 15px;
    background-color: transparent;
    border: none;
}

/* Prikaz vezja na desni strani */
.arduino-circuit-display {
    width: 100%;
    height: auto;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    overflow: hidden;
    margin: 10px 0;
}

.circuit-img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* 2. Prikaz, ko je WRAPPER (ali slika) v Fullscreen načinu */
/* Ko klikneš in se sproži toggleFullScreen, brskalnik aktivira tole: */
:fullscreen .circuit-img {
    width: 100% !important;
    max-height: 95vh;
}

/* Podpora za Safari/Chrome starejše verzije */
:-webkit-full-screen .circuit-img {
    width: 100% !important;
}

.btn-run {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    background-color: #06a3fe;
    color: #333333 !important;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-run:hover {
    color: #ffffff !important;
}

@media screen and (max-width: 1440px) {
    .vsebina,
    .primeri .vsebina {
        flex-direction: column;
        height: auto; /* Višina se prilagodi vsebini obeh oken */
    }

    .primeri .vsebina .primer,
    .primeri .vsebina .rezultat {
        width: min(100%, 300px); /* Odzivna širina, max 300px */
        margin-left: auto;
        margin-right: auto;
        height: auto;
        min-height: 200px; /* Zmanjšano na mobilnikih */
        flex: none;
    }

    .arduino-circuit-display {
        min-height: 300px; /* Zmanjšano s 600px za boljši mobilni pogled */
    }

    .arduino-code-view {
        max-height: 350px; /* Še malo bolj kompaktno na manjših zaslonih */
    }
}

/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
 * MODAL okno
 * ------------------------------------------------------------------ */

/* Modal ozadje */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0; top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    overscroll-behavior: contain;
}

/* Vsebina modal-a - raztegnjena z odmikom 50px */
.modal-content {
    background-color: var(--bg);
    color: var(--fg);

    /* Centriranje z odmiki */
    position: absolute;
    top: 50px;
    left: 50px;

    /* Širina in višina: cel zaslon minus 100px (50px na vsaki strani) */
    width: calc(100vw - 100px);
    height: calc(100vh - 100px);

    margin: 0; /* Margin ni več potreben, ker uporabljamo top/left */
    padding: 30px;
    overflow-y: auto; /* Notranji scroll za dolge kode */
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* Prilagoditev za mobilne naprave (da na telefonu ni preveč odmika) */
@media (max-width: 768px) {
    .modal-content {
        top: 20px;
        left: 20px;
        width: calc(100vw - 40px);
        height: calc(100vh - 40px);
    }
}

/* Stil za textarea */
.arduino-translator textarea,
.modal-content textarea {
    width: 100%;             /* Polna širina */
    height: 300px;           /* Fiksna višina */
    resize: none;            /* ODSTRANJENO: Uporabnik ne more več vleči roba */
    overflow-y: auto;        /* Avtomatski navpični drsnik po potrebi */
    padding: 15px;
    font-family: 'Courier New', Courier, monospace; /* Lepša pisava za kodo */
    font-size: 14px;
    line-height: 1.5;
    background-color: var(--card); /* Tvoja barva ozadja za kartice */
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-sizing: border-box;  /* Pomembno: padding ne razširi width čez 100% */
}

/* Dodava še majhen vizualni poudarek, ko uporabnik klikne vanj */
.arduino-translator textarea:focus,
.modal-content textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 5px rgba(var(--accent-rgb), 0.3);
}

.closeBtn {
    /* Position mora biti absolute glede na .modal-content */
    position: absolute;

    /* Tukaj spreminjaj vrednosti, da ga premakneš */
    right: 25px;
    top: 15px;

    font-size: 35px;
    font-weight: bold;
    color: var(--muted);
    cursor: pointer;

    /* Dodaj visoko prioriteto, da ga ne prekrije vsebina (textarea) */
    z-index: 10001;

    /* Prepreči, da bi se tekst pod njim dal označiti */
    user-select: none;
    line-height: 1;
}

.closeBtn:hover {
    color: var(--accent);
    transform: scale(1.1); /* Majhen vizualni efekt ob prehodu */
}

/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
 * POVEČAVA SLIKE
 * ------------------------------------------------------------------ */
/* Ciljamo neposredno na pseudo-elemente brskalnika */
:-webkit-full-screen {
    background-color: white !important;
}
:-ms-fullscreen {
    background-color: white !important;
}
:fullscreen {
    background-color: white !important;
}

/* In še za tvoj razred, da ne bo dvoma */
.fullscreen-box:fullscreen {
    background: white !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    max-height: none !important;
}

/* Če je še vedno črno, poskusiva pobarvati tudi tisti 'prazni' del */
::backdrop {
    background-color: white !important;
}

/* ------------------------------------------------------------------
 * ANIMATION_MAIN - 3D INTERAKTIVNE KARTICE (VRHUNSKI EFEKT)
 * Povečana višina na 500px in izboljšana berljivost naslovov.
 * ------------------------------------------------------------------ */

.animation-main {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 40px;
    perspective: 2000px;
    margin: 60px 0;
}

.card-link {
    position: relative;
    height: 500px; /* Tvoja želja za 500px */
    border-radius: 30px;
    overflow: hidden;
    text-decoration: none;
    display: block;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
    border: 1px solid var(--border);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.card-link:hover {
    transform: translateY(-20px) rotateX(6deg) rotateY(-6deg);
    box-shadow: 0 40px 80px rgba(0,0,0,0.3);
    border-color: var(--accent);
}

.card-link picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s ease;
}

.card-link:hover picture img {
    transform: scale(1.1);
}

.card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}

.card-overlay h3 {
    font-size: 3.5rem;
    color: #ffffff !important; /* Prepreči rdečo barvo */
    margin: 0;
    font-family: 'Archivo Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    transform: translateZ(80px);
    text-shadow: 0 10px 20px rgba(0,0,0,0.8), 0 0 10px rgba(0,0,0,0.5);
    transition: transform 0.6s ease;
}

.card-link:hover .card-overlay h3 {
    transform: translateZ(120px) scale(1.05);
}

.card-overlay::after {
    content: '';
    width: 60px;
    height: 8px;
    background: var(--accent);
    margin-top: 20px;
    border-radius: 4px;
    transition: width 0.4s ease, background-color 0.4s ease;
    transform: translateZ(60px);
}

.card-link:hover .card-overlay::after {
    width: 150px;
    background-color: var(--green);
}

/* Scroll animacije */
.pomikanje { opacity: 0; transform: translateY(50px); transition: all 0.8s ease; }
.pomikanje.scrolled { opacity: 1; transform: translateY(0); }
.scrolled.slide-left { animation: slide-in-left 1s ease-out forwards; }
.scrolled.slide-right { animation: slide-in-right 1s ease-out forwards; }

@keyframes slide-in-left {
    0% { transform: translateX(-60px) rotateY(20deg); opacity: 0; }
    100% { transform: translateX(0) rotateY(0); opacity: 1; }
}
@keyframes slide-in-right {
    0% { transform: translateX(60px) rotateY(-20deg); opacity: 0; }
    100% { transform: translateX(0) rotateY(0); opacity: 1; }
}

@media all and (max-width: 780px) {
    .animation-main { display: flex; flex-direction: column; gap: 20px; }
    .card-link { height: 350px; }
    .card-overlay h3 { font-size: 2.2rem; }
}

.smallImg100 {
    display: block;
    width: 100%;
    height: auto;
    cursor: pointer;
}

.smallImg_left {
    display: block;
    width: 25%;
    height: auto;
    margin-bottom: 20px;
    opacity: 0.5;
    cursor: pointer;
}
.smallImg_left:hover {
    opacity: 1;
}
.smallImg_left .minImg {
    width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.smallImg_left .cursor {
    cursor: pointer;
}
.smallImg_left .visibility {
    opacity: 0.5;
}
.smallImg_left .visibility:hover {
    opacity: 1;
}
.smallImg_left .row {
    margin-bottom: 10px;
}
.smallImg_left .row .row:after {
    content: "";
    display: table;
    clear: both;
}
.smallImg_left .row .columns {
    float: left;
    width: 18%;
    height: auto;
    margin: 2px;
}
.smallImg_left .row .columns img {
    width: 100%;
    height: auto;
}

.smallImg_left10 {
    display: block;
    width: 10%;
    height: auto;
    margin-bottom: 20px;
    cursor: pointer;
}

.smallImg {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    cursor: pointer;
}
.smallImg .minImg {
    width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.smallImg .cursor {
    cursor: pointer;
}
.smallImg .visibility {
    opacity: 0.5;
}
.smallImg .visibility:hover {
    opacity: 1;
}
.smallImg .row {
    margin-bottom: 10px;
}
.smallImg .row .row:after {
    content: "";
    display: table;
    clear: both;
}
.smallImg .row .columns {
    float: left;
    width: 18%;
    height: auto;
    margin: 2px;
}
.smallImg .row .columns img {
    width: 100%;
    height: auto;
}

.maxImg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
    background-color: rgb(255, 255, 255);
    overflow: hidden;
}
.maxImg picture {
    width: 80%;
    height: 80%;
}
.maxImg picture img {
    display: block;
    margin: 0 auto;
    width: 80%;
    height: auto;
}
.maxImg .slides {
    width: auto;
    height: auto;
    display: none;
    justify-content: center;
    align-items: center;
}
.maxImg .slides picture {
    display: block;
    width: 80%;
    height: 80%;
    margin: 0 auto;
}
.maxImg .slides picture img {
    width: 100%;
    height: auto;
}
.maxImg .maxTop {
    position: fixed;
    top: 0;
    right: 20px;
    padding: 10px;
    z-index: 1;
}
.maxImg .maxTop button {
    position: relative;
    padding: 10px;
    text-transform: uppercase;
    cursor: pointer;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    background-color: #fefefe;
    color: #333333;
    line-height: 0.6;
}
.maxImg .maxTop button:hover {
    transition: 0.3s;
    border: 1px solid #f00b06;
    color: #ffff1a;
    background-color: #fe5849;
    filter: drop-shadow(0 0 0.25em #f00b06);
}
.maxImg .btnLeft, .maxImg .btnRight {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    padding: 16px;
    color: #fefefe;
    background-color: #1e1e1e;
    font-weight: bold;
    font-size: 20px;
    border: 1px solid black;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    opacity: 0.3;
    z-index: 999;
}
.maxImg .btnLeft:hover, .maxImg .btnRight:hover {
    opacity: 1;
    background-color: #fefefe;
    color: #1e1e1e;
}
.maxImg .btnLeft {
    border-radius: 8px;
    left: 30px;
}
.maxImg .btnRight {
    right: 30px;
    border-radius: 8px;
}

.beleznica {
    min-width: 600px;
    max-width: 900px;
    min-height: 100px;
    max-height: 500px;
    background-color: #fefefe;
    border: 1px solid #9c9c9c;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.glava-beleznice {
    background-color: #e5e5e5;
    color: #1e1e1e;
    padding: 5px 10px;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.glava-beleznice .gumbi-beleznice {
    display: flex;
    gap: 5px;
}

.gumb-beleznice {
    width: 15px;
    height: 15px;
    border: 1px solid #9c9c9c;
    cursor: context-menu;
    background-color: #f5f5f5;
}

.vsebina-beleznice {
    flex: 1;
    background-color: #fefefe;
    color: #1e1e1e !important;
    padding: 15px;
    border-top: 1px solid #e5e5e5;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    font-family: "Source Code Pro", monospace;
    overflow: auto;
}

@media all and (max-width: 1024px) {
    .beleznica {
        width: 100%;
    }
}
.boxShadow {
    display: flex;
    justify-content: center;
    margin: 0 0 30px;
    width: 100%;
    height: 300px;
}
.boxShadow .littleBox {
    width: 25%;
    height: 100%;
    padding: 20px;
    margin: 0 20px;
    border-radius: 4px;
    border: none;
    resize: none;
    outline: none;
    font-size: 18px;
    font-family: "Bookman Old Style", sans-serif;
}
.boxShadow .littleBox:first-child {
    margin-left: 0;
}
.boxShadow .littleBox:last-child {
    margin-right: 0;
}

.movingBoxMain {
    display: flex;
    justify-content: center;
    align-items: start;
    width: 100%;
    height: 25em;
}
.movingBoxMain .movingBox {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    height: auto;
    margin-top: 30px;
}
.movingBoxMain .movingBox .movingBoxInside {
    width: 50px;
    height: 50px;
    background-color: red;
}
.movingBoxMain .movingBox #anima1 {
    margin-left: 20px;
    animation: anima1 3s linear;
}
.movingBoxMain .movingBox #anima2 {
    margin-left: 20px;
    animation: anima2 3s linear;
    animation-delay: 3s;
}
.movingBoxMain .movingBox #anima3 {
    margin-left: 20px;
    animation: anima3 3s linear;
    animation-delay: 6s;
}
.movingBoxMain .movingBox #anima4 {
    margin-left: 20px;
    animation: anima4 3s linear;
    animation-delay: 9s;
}
.movingBoxMain .movingBox #anima5 {
    margin-left: 20px;
    animation: anima5 3s linear;
    animation-delay: 12s;
}
.movingBoxMain .movingBox #anima6 {
    margin-left: 20px;
    animation: anima6 3s linear;
    animation-delay: 15s;
}
.movingBoxMain .movingBox #anima7 {
    margin-left: 20px;
    animation: anima7 3s linear;
    animation-delay: 18s;
}
.movingBoxMain .movingBox #anima8 {
    margin-left: 20px;
    animation: anima8 3s linear;
    animation-delay: 21s;
}
.movingBoxMain .movingBox #anima9 {
    margin-left: 20px;
    animation: anima9 3s linear;
    animation-delay: 24s;
}
.movingBoxMain .movingBox #anima10 {
    margin-left: 20px;
    border-radius: 50%;
    animation: anima10 3s linear;
    animation-delay: 27s;
}

@keyframes anima1 {
    50% {
        transform: translateY(260px) scale(1.2) rotate3d(1, 1, 1, 360deg);
    }
}
@keyframes anima2 {
    50% {
        transform: translateY(260px) scale(1.2) rotate3d(1, 1, 1, 360deg);
    }
}
@keyframes anima3 {
    50% {
        transform: translateY(260px) scale(1.2) rotate3d(1, 1, 1, 360deg);
    }
}
@keyframes anima4 {
    50% {
        transform: translateY(260px) scale(1.2) rotate3d(1, 1, 1, 360deg);
    }
}
@keyframes anima5 {
    50% {
        transform: translateY(260px) scale(1.2) rotate3d(1, 1, 1, 360deg);
    }
}
@keyframes anima6 {
    0% {
        border-radius: 50%;
    }
    50% {
        transform: translateY(260px) scale(1.2) rotate3d(1, 1, 1, 360deg);
    }
    75% {
        border-radius: 50%;
    }
}
@keyframes anima7 {
    0% {
        border: 2px solid black;
        background-color: transparent;
    }
    50% {
        border: none;
        background-color: red;
        border-radius: 50%;
        transform: translateY(260px) scale(1.2) rotate3d(1, 1, 1, 360deg);
    }
    75% {
        border: 2px solid black;
        background-color: transparent;
    }
}
@keyframes anima8 {
    10% {
        transform: translateX(-1px);
    }
    20% {
        transform: translateX(1px);
    }
    30% {
        transform: translateX(-1px);
    }
    40% {
        transform: translateX(1px);
    }
    50% {
        border-radius: 50%;
        transform: translateY(260px) scale(1.2) rotate3d(1, 1, 1, 360deg);
    }
}
@keyframes anima9 {
    25% {
        background-color: transparent;
        border-radius: 50%;
        border: 2px solid blue;
    }
    50% {
        background-color: transparent;
        border-radius: 50%;
        border: 2px solid purple;
        transform: translateY(260px) scale(1.2) rotate3d(1, 1, 1, 360deg);
    }
    75% {
        background-color: transparent;
        border-radius: 50%;
        border: 2px solid red;
    }
}
@keyframes anima10 {
    0% {
        transform: translateY(260px);
    }
    25% {
        transform: rotate3d(1, 1, 1, 180deg);
    }
    50% {
        transform: translateY(260px);
    }
    75% {
        transform: rotate3d(1, 1, 1, -180deg);
    }
}
.animationPlayMain {
    width: 100%;
    height: 25em;
}
.animationPlayMain .animationPlayInside {
    display: flex;
    align-items: start;
    position: relative;
    margin: 0 auto;
    width: 90%;
    height: 100%;
}
.animationPlayMain .animationPlayInside .animationBox {
    position: absolute;
    bottom: 0;
    width: 30px;
    height: 100%;
    margin-left: 6px;
    background-color: red;
}
.animationPlayMain .animationPlayInside .animationBox:nth-child(1) {
    left: 0;
    animation: v-meter 0.8s backwards alternate infinite;
}
.animationPlayMain .animationPlayInside .animationBox:nth-child(2) {
    left: 40px;
    animation: v-meter 1.2s backwards alternate infinite;
}
.animationPlayMain .animationPlayInside .animationBox:nth-child(3) {
    left: 80px;
    animation: v-meter 0.9s backwards alternate infinite;
}
.animationPlayMain .animationPlayInside .animationBox:nth-child(4) {
    left: 120px;
    animation: v-meter 1.4s backwards alternate infinite;
}
.animationPlayMain .animationPlayInside .animationBox:nth-child(5) {
    left: 160px;
    animation: v-meter 1.3s backwards alternate infinite;
}
.animationPlayMain .animationPlayInside .animationBox:nth-child(6) {
    left: 200px;
    animation: v-meter 0.7s backwards alternate infinite;
}
.animationPlayMain .animationPlayInside .animationBox:nth-child(7) {
    left: 240px;
    animation: v-meter 0.8s backwards alternate infinite;
}
.animationPlayMain .animationPlayInside .animationBox:nth-child(8) {
    left: 280px;
    animation: v-meter 0.6s backwards alternate infinite;
}
.animationPlayMain .animationPlayInside .animationBox:nth-child(9) {
    left: 320px;
    animation: v-meter 1.1s backwards alternate infinite;
}
.animationPlayMain .animationPlayInside .animationBox:nth-child(10) {
    left: 360px;
    animation: v-meter 0.5s backwards alternate infinite;
}

@keyframes v-meter {
    0% {
        transition: 0.3s;
        height: 100%;
    }
    25% {
        transition: 0.6s;
        height: 75%;
    }
    50% {
        transition: 0.9s;
        height: 50%;
    }
    75% {
        transition: 1.2s;
        height: 25%;
    }
}
.datetime {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.razdeli_div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}
.razdeli_div pre {
    width: 45%;
    height: auto;
    padding: 10px;
    border: 1px solid #9c9c9c;
    border-radius: 8px;
    background-color: #fefefe;
    font-family: "Source Code Pro", monospace;
    overflow: auto;
}
@media (max-width: 1280px) {
    .razdeli_div {
        display: block;
    }
    .razdeli_div pre {
        width: 100%;
        margin-bottom: 20px;
    }
}

.doubleNotes {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: auto;
}
.doubleNotes .forNotes {
    width: 50%;
    height: auto;
    padding: 10px;
    border: 1px solid #9c9c9c;
    border-radius: 8px;
    background-color: #fefefe;
    font-family: "Source Code Pro", monospace;
    overflow: auto;
}

.function-groups {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}
.function-groups .group-link {
    margin-bottom: 1rem;
    padding: 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}
.function-groups .group-link:hover {
    background: #f5f5f5;
}
.function-groups .group-link a {
    display: block;
    color: #1e1e1e;
    text-decoration: none;
    font-weight: bold;
    margin-bottom: 0.3rem;
}
.function-groups .group-link a:hover {
    color: #06a3fe;
}
.function-groups .group-link .group-tables {
    font-size: 0.9rem;
    color: #9c9c9c;
    padding-left: 1rem;
}

/* ------------------------------------------------------------------
 * Iskalnik, ki se postavi nad tabelo za iskanje v tabeli.
 * ------------------------------------------------------------------ */

.table-filter {
    position: sticky;
    top: 72px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 0 0 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #0056b3, #06a3fe);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    color: #fff;
    overflow-x: auto;
    white-space: nowrap;
}
.table-filter label {
    font-weight: 600;
    color: #fff;
    margin-right: 4px;
}
.table-filter input[type=search] {
    min-width: 260px;
    max-width: 100%;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    background: #fff;
    color: #1e1e1e;
    font: inherit;
    transition: all 0.2s ease-in-out;
}
.table-filter input[type=search]::placeholder {
    color: #777;
}
.table-filter input[type=search]:focus {
    outline: none;
    border-color: #87d5fe;
    box-shadow: 0 0 0 3px rgba(135, 213, 254, 0.35);
}
.table-filter button[type=button][data-action=clear] {
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font: inherit;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.table-filter button[type=button][data-action=clear]:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #fff;
}
.table-filter button[type=button][data-action=clear]:active {
    transform: translateY(1px);
}
.table-filter [data-action=highlight] {
    margin-right: 4px;
}
.table-filter input[type=checkbox] + * {
    color: #fff;
}
.table-filter .result-count {
    margin-left: 6px;
    font-weight: 600;
    color: #fff;
    filter: brightness(1.08);
}

@media (max-width: 1520px) {
    .table-filter {
        position: static !important; /* Iskalnik postane navaden del vsebine */
        top: auto !important; /* Prekliče prejšnjo vrednost 72px */
        margin-top: 20px; /* Doda malo prostora, da ne "poljubi" navbar */
    }
}

@media (max-width: 680px) {
    .table-filter {
        position: static !important;
        flex-wrap: wrap;
        gap: 8px;
        /* Na mobilniku iskalnik zavzame celo širino */
        width: 100%;
    }
    .table-filter input[type=search] {
        min-width: 100%; /* Na telefonu naj bo iskalno polje čez celo širino */
    }
}

/* ------------------------------------------------------------------ */

html[data-theme=dark] .table-filter {
    background: linear-gradient(90deg, #084a8f, #0056b3);
}
html[data-theme=dark] .table-filter button[type=button][data-action=clear] {
    border-color: rgba(255, 255, 255, 0.45);
}
html[data-theme=dark] .table-filter input[type=search] {
    border-color: rgba(255, 255, 255, 0.45);
}
html[data-theme=dark] .table-filter input[type=search]:focus {
    border-color: #87d5fe;
    box-shadow: 0 0 0 3px rgba(135, 213, 254, 0.35);
}

html[data-theme=dark] .table-filter.table-filter--blend {
    background: var(--card);
    color: var(--fg);
    border: 1px solid var(--accent);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
html[data-theme=dark] .table-filter.table-filter--blend label, html[data-theme=dark] .table-filter.table-filter--blend .result-count {
    color: var(--fg);
}
html[data-theme=dark] .table-filter.table-filter--blend input[type=search] {
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--border);
}
html[data-theme=dark] .table-filter.table-filter--blend input[type=search]::placeholder {
    color: var(--muted);
}
html[data-theme=dark] .table-filter.table-filter--blend input[type=search]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
html[data-theme=dark] .table-filter.table-filter--blend button[type=button][data-action=clear] {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
}
html[data-theme=dark] .table-filter.table-filter--blend button[type=button][data-action=clear]:hover {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
}
html[data-theme=dark] .table-filter.table-filter--blend button[type=button][data-action=clear]:active {
    transform: translateY(1px);
}

[data-theme=dark] .tableText {
    --tbl-bg: #0f172a;
    --tbl-head-bg: #1e293b;
    --tbl-row-alt: #0b1222;
    --tbl-border: #263244;
    --tbl-text: #e5e7eb;
    --tbl-muted: #9ca3af;
}

.tableText {
    --tbl-bg: #ffffff;
    --tbl-head-bg: #87d5fe;
    --tbl-row-alt: #e5e5e5;
    --tbl-border: #9c9c9c;
    --tbl-text: #1e1e1e;
    --tbl-muted: #4c4c4c;
    --tbl-accent: #06a3fe;
    display: table;
    table-layout: fixed;
    width: 100%;
    margin: 0 0 20px;
    cursor: default;
    font-family: "Inter", "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
    color: var(--tbl-text);
    background: var(--tbl-bg);
    border: 1px solid var(--tbl-border);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
.tableText thead {
    display: table-header-group;
    position: sticky;
    top: 0;
    z-index: 2;
}
.tableText thead th, .tableText thead td {
    padding: 12px 14px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 12px;
    line-height: 1.2;
    color: var(--tbl-muted);
    background: var(--tbl-head-bg);
    border-bottom: 1px solid var(--tbl-border);
    backdrop-filter: saturate(140%) blur(4px);
}
.tableText thead th:first-child, .tableText thead td:first-child {
    border-top-left-radius: 8px;
}
.tableText thead th:last-child, .tableText thead td:last-child {
    border-top-right-radius: 8px;
}
.tableText thead .is-sortable {
    position: relative;
    cursor: pointer;
}
.tableText thead .is-sortable:after {
    content: "⇅";
    font-size: 11px;
    margin-left: 6px;
    color: var(--tbl-muted);
    opacity: 0.8;
}
.tableText thead .is-sortable.is-asc:after {
    content: "↑";
}
.tableText thead .is-sortable.is-desc:after {
    content: "↓";
}
.tableText tbody th {
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    background: transparent;
    color: var(--tbl-text);
    border-bottom: 1px solid var(--tbl-border);
}
.tableText tbody td {
    padding: 12px 14px;
    text-align: left;
    background: transparent;
    color: var(--tbl-text);
    border-bottom: 1px solid var(--tbl-border);
    vertical-align: middle;
    word-break: break-word;
}
.tableText tbody tr:last-child td,
.tableText tbody tr:last-child th {
    border-bottom: 0;
}
.tableText tbody tr:nth-child(even) td {
    background-color: color-mix(in srgb, var(--tbl-row-alt) 80%, transparent);
}
.tableText tbody tr:hover td {
    background-color: color-mix(in srgb, var(--tbl-row-alt) 100%, transparent);
}
.tableText tbody tr.is-clickable {
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.tableText tbody tr.is-clickable:hover td {
    background-color: color-mix(in srgb, var(--tbl-row-alt) 100%, transparent);
}
.tableText tbody tr.is-clickable:active td {
    background-color: color-mix(in srgb, var(--tbl-row-alt) 120%, transparent);
}
.tableText tbody a:focus-visible, .tableText tbody button:focus-visible, .tableText tbody input:focus-visible, .tableText tbody select:focus-visible, .tableText tbody textarea:focus-visible {
    outline: 2px solid var(--tbl-accent);
    outline-offset: 2px;
    border-radius: 6px;
}
.tableText--compact thead th, .tableText--compact thead td,
.tableText--compact tbody th, .tableText--compact tbody td {
    padding: 10px 12px;
}
.tableText--dense thead th, .tableText--dense thead td,
.tableText--dense tbody th, .tableText--dense tbody td {
    padding: 8px 10px;
    font-size: 14px;
}

@media all and (max-width: 1280px) {
    .tableText {
        margin-top: 20px;
    }
    .tableText tbody tr td:first-child {
        background-color: var(--tbl-head-bg);
        font-weight: 600;
    }
    .tableText tbody tr td {
        padding-bottom: 12px;
    }
    .tableText tr td.no-border {
        border-bottom: none;
    }
}
@media all and (max-width: 768px) {
    .tableText {
        display: block;
        border-radius: 8px;
        overflow: hidden;
    }
    .tableText thead {
        display: none;
    }
    .tableText tbody {
        display: block;
    }
    .tableText tbody tr {
        display: block;
        margin: 0 0 12px 0;
        border: 1px solid var(--tbl-border);
        border-radius: 8px;
        overflow: hidden;
        background: var(--tbl-bg);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .tableText tbody th,
    .tableText tbody td {
        display: grid;
        grid-template-columns: 160px 1fr;
        gap: 10px;
        width: 100%;
        padding: 12px 14px;
        text-align: left;
        border: 0;
        border-bottom: 1px solid var(--tbl-border);
    }
    .tableText tbody th:last-child,
    .tableText tbody td:last-child {
        border-bottom: 0;
    }
    .tableText tbody td::before,
    .tableText tbody th::before {
        content: attr(data-label);
        color: var(--tbl-muted);
        text-transform: uppercase;
        letter-spacing: 0.02em;
        font-size: 12px;
        align-self: start;
        overflow-wrap: anywhere;
    }
    .tableText tbody th {
        background-color: var(--tbl-head-bg);
        font-weight: 700;
    }
}
.sql-example-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    background: #fefefe;
}
.sql-example-table th, .sql-example-table td {
    border: 1px solid #dee2e6;
    padding: 8px 12px;
    text-align: left;
}
.sql-example-table th {
    background-color: #f1f3f5;
    font-weight: bold;
}
.sql-example-table tr:nth-child(even) {
    background-color: #f8f9fa;
}
.sql-example-table tr:hover {
    background-color: #e9ecef;
}

.table-meta__thead-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.table-meta {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--card);
    color: var(--fg);
    font-size: 16px;
    line-height: 1.5;
    border: var(--border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.table-meta thead th {
    background: var(--card);
    text-align: left;
    font-weight: 600;
    color: var(--fg);
    padding: 12px 14px;
    border-bottom: var(--border);
    white-space: nowrap;
}
.table-meta tbody td,
.table-meta tbody th {
    padding: 12px 14px;
    vertical-align: top;
    border-bottom: var(--border);
    color: var(--fg);
}
.table-meta tbody tr:nth-child(even) td,
.table-meta tbody tr:nth-child(even) th {
    background: var(--card);
}
.table-meta tbody tr:hover td,
.table-meta tbody tr:hover th {
    background: var(--card);
}
.table-meta th:first-child,
.table-meta td:first-child {
    border-left: none;
}
.table-meta th:last-child,
.table-meta td:last-child {
    border-right: none;
}
.table-meta code {
    background: rgba(2, 6, 23, 0.06);
    color: var(--fg);
    padding: 2px 6px;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.95em;
    word-break: break-word;
}
.table-meta pre {
    margin: 0;
}
.table-meta pre code {
    display: block;
    background: var(--card);
    color: var(--fg);
    padding: 10px 12px;
    border-radius: 8px;
    overflow: auto;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.table-meta .muted {
    color: var(--fg);
}
.table-meta a {
    color: var(--fg);
    text-decoration: none;
}
.table-meta a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .table-meta tbody tr:first-of-type {
        border-top: 2px solid #e5e5e5 !important;
    }
    .table-meta {
        border: none;
        /* Label pred vrednostjo iz data-label (ime stolpca) */
        /* Če imaš stolpec z daljšo kodo */
    }
    .table-meta thead {
        display: none;
    }
    .table-meta tbody, .table-meta tr, .table-meta td, .table-meta th {
        display: block;
        width: 100%;
    }
    .table-meta tbody tr {
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        margin-bottom: 12px;
        overflow: hidden;
        background: var(--tm-bg-row);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .table-meta tbody td, .table-meta tbody th {
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        padding: 10px 12px;
    }
    .table-meta tbody tr > *:last-child {
        border-bottom: 0;
    }
    .table-meta tbody td::before, .table-meta tbody th::before {
        content: attr(data-label);
        display: block;
        font-weight: 600;
        color: var(--tm-text-muted);
        margin-bottom: 4px;
    }
    .table-meta tbody td code, .table-meta tbody th code {
        white-space: pre-wrap;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}
@media (prefers-color-scheme: dark) {
    .table-meta {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    }
    .table-meta code {
        background: var(--card);
        color: var(--fg);
        display: block;
        max-width: 100%;
        white-space: pre-wrap;
        word-break: break-word;
    }
}
.table_side_by_side {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    margin-bottom: 20px;
}
.table_side_by_side > .table_side_by_side_center {
    /* POMEMBNO: brez fiksne širine (brez width: 50%) */
    flex: 1 1 0;
    min-width: 0;
    /* ostali stili po želji (videz kot pri table-programming) */
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 20px;
    font-family: "Roboto", sans-serif;
    background: var(--card);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    filter: drop-shadow(0 0 0.02em #06a3fe);
    cursor: context-menu;
}
.table_side_by_side > .table_side_by_side_center thead th {
    padding: 12px 14px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 700;
    color: #1e1e1e;
    background-color: #87d5fe;
    border-bottom: 2px solid #06a3fe;
}
.table_side_by_side > .table_side_by_side_center tbody tr {
    transition: background-color 0.18s ease;
}
.table_side_by_side > .table_side_by_side_center tbody tr:nth-child(odd) {
    background-color: rgba(135, 213, 254, 0.08);
}
.table_side_by_side > .table_side_by_side_center tbody tr:hover {
    background-color: rgba(135, 213, 254, 0.16);
}
.table_side_by_side > .table_side_by_side_center tbody th {
    width: 28%;
    padding: 12px 14px;
    text-align: left;
    background-color: transparent;
    color: #1e1e1e;
    border-bottom: 1px solid #06a3fe;
    font-weight: 700;
}
.table_side_by_side > .table_side_by_side_center tbody td {
    padding: 12px 14px;
    text-align: left;
    background-color: transparent;
    border-bottom: 1px solid rgba(6, 163, 254, 0.65);
}

.table_side_by_side .table_side_by_side_center tbody tr:hover th {
    background-color: inherit;
}

/* Breakpoint: vsaka tabela naj bo 100% širine */
@media screen and (max-width: 1440px) {
    .table_side_by_side {
        display: block;
    }
    .table_side_by_side > .table_side_by_side_center {
        display: table;
        width: 100%;
        max-width: none;
        flex: none;
        box-sizing: border-box;
        margin-bottom: 20px;
    }
    .table_side_by_side > .table_side_by_side_center:last-child {
        margin-bottom: 0;
    }
}
@media all and (max-width: 800px) {
    .table_side_by_side > .table_side_by_side_center {
        display: block;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0;
        filter: none;
        box-shadow: none;
    }
    .table_side_by_side > .table_side_by_side_center thead {
        display: none;
    }
    .table_side_by_side > .table_side_by_side_center tbody {
        display: grid;
        gap: 10px;
    }
    .table_side_by_side > .table_side_by_side_center tbody tr {
        display: block;
        width: 100%;
        margin: 0;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--card);
        color: var(--fg);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .table_side_by_side > .table_side_by_side_center tbody th {
        display: block;
        width: 100%;
        border-bottom: none;
        background: #ff9f00;
        color: #111;
        padding: 0.6rem 0.75rem;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        text-align: center;
    }
    .table_side_by_side > .table_side_by_side_center tbody td {
        display: block;
        width: 100%;
        border-bottom: none;
        background: #87d5fe;
        color: #111;
        padding: 0.6rem 0.75rem;
    }
}
.table_selectors {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 2rem 0;
    font-family: "Roboto", sans-serif;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.table_selectors .selector-link {
    text-decoration: none;
    color: inherit;
}
.table_selectors .selector-link:hover {
    text-decoration: underline;
    color: #06a3fe;
}
.table_selectors .selector-link:hover img {
    transform: scale(1.05);
}
.table_selectors thead {
    position: relative;
}
.table_selectors thead th {
    background: #06a3fe;
    color: #fefefe;
    padding: 1.2rem 1.5rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    font-size: 1.1rem;
    text-align: left;
    position: relative;
}
.table_selectors thead th:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #06a3fe, transparent);
}
.table_selectors tbody tr {
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.table_selectors tbody tr:last-child {
    border-bottom: none;
}
.table_selectors tbody tr:hover {
    background: rgba(52, 152, 219, 0.03);
}
.table_selectors tbody tr:hover th img {
    transform: scale(1.02);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.table_selectors tbody th {
    padding: 1.5rem;
    vertical-align: top;
    font-weight: 500;
    color: #2c3e50;
    border: none;
    width: 25%;
}
.table_selectors tbody th img {
    width: 75%;
    margin-top: 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    padding: 20px;
}
.table_selectors tbody th img:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}
.table_selectors tbody td {
    padding: 1.5rem;
    vertical-align: top;
    color: #444;
    line-height: 1.6;
    border: none;
}
.table_selectors tbody td.change {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 1.2rem;
}
.table_selectors tbody td:first-of-type {
    width: 25%;
}
.table_selectors tbody td:last-of-type {
    width: 100%;
}
.table_selectors .selector-btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 0.25rem;
    background: #87d5fe;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    font-family: "Fira Code", monospace;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}
.table_selectors .selector-btn:hover {
    background: rgb(0.836, 132.088, 208.164);
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.table_selectors .selector-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(135, 213, 254, 0.3);
}

@media (max-width: 1440px) {
    .table_selectors tbody td:first-of-type {
        width: 35%;
    }
}
@media (max-width: 920px) {
    .table_selectors {
        border-radius: 8px;
    }
    .table_selectors thead {
        display: none;
    }
    .table_selectors tbody tr {
        display: block;
        padding: 1rem;
        margin-bottom: 1rem;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 8px;
    }
    .table_selectors tbody tr:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }
    .table_selectors tbody th {
        display: block;
        width: 100%;
        padding: 1rem 0;
    }
    .table_selectors tbody th img {
        width: 100%;
        margin: 1rem 0;
    }
    .table_selectors tbody td {
        display: block;
        width: 100%;
        padding: 1rem 0;
    }
    .table_selectors tbody td.change {
        padding: 1rem 0;
    }
    .table_selectors tbody td.change a {
        font-size: 0.85rem;
        padding: 0.5rem 0.8rem;
    }
}
.inline-chars-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}
.inline-chars-table th {
    text-align: left;
    padding: 1rem;
    background-color: #87d5fe;
    color: #1e1e1e;
    font-weight: 600;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.inline-chars-table td {
    padding: 1rem;
}
.inline-chars-table .char-code {
    display: inline-block;
    padding: 0.5rem;
    margin: 0.25rem;
    border: 1px solid #87d5fe;
    border-radius: 4px;
    background-color: var(--card);
    transition: all 0.25s ease-in-out;
}
.inline-chars-table .char-code:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: #06a3fe;
    background-color: rgba(135, 213, 254, 0.05);
}

@media screen and (max-width: 768px) {
    tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 1.5rem;
        border: 1px solid #87d5fe;
        border-radius: 4px;
    }
    th {
        border-radius: 4px 4px 0 0;
        border-bottom: none;
    }
    td {
        border-radius: 0 0 4px 4px;
    }
    .char-code {
        margin: 0.25rem;
    }
}
.table-responsive {
    max-height: 500px !important;
    overflow-y: auto !important;
    display: block !important;
    margin-bottom: 20px;
}

.table_newest {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1.5rem;
    border: 1px solid #87d5fe;
    font-family: "Roboto", sans-serif;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.table_newest thead th {
    padding: 1rem;
    text-align: left;
    text-transform: uppercase;
    background-color: #87d5fe;
    font-weight: 500;
    color: #1e1e1e;
    transition: background-color 0.3s ease;
}
.table_newest tbody th {
    padding: 1rem;
    text-align: left;
    background-color: rgba(135, 213, 254, 0.1);
    border: 1px solid #87d5fe;
    font-weight: 500;
}
.table_newest tbody td {
    padding: 1rem;
    text-align: left;
    border: 1px solid #87d5fe;
    transition: background-color 0.2s ease;
}
.table_newest tbody td:hover {
    background-color: rgba(135, 213, 254, 0.05);
}
.table_newest tbody td ol {
    list-style: none;
    margin: 0;
    padding: 0 0 0 20px;
}
.table_newest tbody td ol li {
    margin: 0.5rem 0;
}
.table_newest tbody td.change a {
    display: inline-block;
    padding: 0.75rem 1rem;
    border: 1px solid #87d5fe;
    border-radius: 6px;
    text-decoration: none;
    color: #1e1e1e;
    margin: 0.25rem;
    transition: all 0.3s ease;
}
.table_newest tbody td.change a:hover {
    background-color: #87d5fe;
    border-color: #06a3fe;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.table_newest tbody td.list {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid #ff9f00;
    border-radius: 6px;
    margin: 0.25rem;
    background-color: #ffff1a;
    text-transform: lowercase;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}
.table_newest tbody td.list:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

@media all and (max-width: 800px) {
    .table_newest {
        border: none;
        box-shadow: none;
    }
    .table_newest thead {
        display: none;
    }
    .table_newest tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #e5e5e5;
        background-color: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    .table_newest tbody th, .table_newest tbody td {
        display: block;
        width: 100%;
        padding: 0.75rem;
        border: none;
    }
    .table_newest tbody th:not(:last-child), .table_newest tbody td:not(:last-child) {
        border-bottom: 1px solid rgba(135, 213, 254, 0.2);
    }
    .table_newest tbody td.change a {
        display: block;
        width: 100%;
        text-align: center;
        margin: 0.5rem 0;
    }
    .table_newest tbody td.list {
        display: block;
        width: auto;
        margin: 0.5rem;
    }
}
.table_standard_gray {
    background-color: #e5e5e5;
}

.table_standard {
    border-collapse: collapse;
    width: 100%;
    cursor: context-menu;
    margin-bottom: 20px;
    border: 1px solid #87d5fe;
    font-family: "Roboto", sans-serif;
}
.table_standard thead th {
    padding: 10px;
    text-align: left;
    text-transform: uppercase;
    background-color: #87d5fe;
}
.table_standard tbody th {
    padding: 10px;
    text-align: left;
    background: transparent;
    border: 1px solid #87d5fe;
    border-right: none;
}
.table_standard tbody td {
    padding: 10px;
    text-align: left;
    background: transparent;
    border: 1px solid #87d5fe;
    border-left: none;
    border-right: none;
}
.table_standard tbody td ol {
    list-style: none;
}
.table_standard tbody td ol li {
    margin-left: -36px;
}
.table_standard tbody td.change {
    text-transform: lowercase;
}
.table_standard tbody td.change a {
    display: inline-block;
    border: 1px solid #87d5fe;
    border-radius: 6px;
    padding: 10px;
    text-decoration: none;
    color: #1e1e1e;
    margin-bottom: 5px;
}
.table_standard tbody td.change a:hover {
    background-color: #87d5fe;
    border: 1px solid #06a3fe;
}
.table_standard tbody td.empty {
    width: 80em;
}
.table_standard tbody td.list {
    display: inline-block;
    width: auto;
    border: 1px solid #ff9f00;
    border-radius: 8px;
    margin: 4px;
    background-color: #ffff1a;
    text-transform: lowercase;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

@media all and (max-width: 800px) {
    .table_standard {
        width: 100%;
        display: block;
        border: none;
    }
    .table_standard thead th {
        display: none;
    }
    .table_standard tbody {
        display: block;
    }
    .table_standard tbody tr {
        display: block;
        margin-bottom: 10px;
        padding: 4px;
        border: 1px solid #e5e5e5;
        border-radius: 6px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .table_standard tbody tr:last-child {
        margin-bottom: 0;
    }
    .table_standard tbody th {
        display: block;
        width: 100%;
        padding: 8px;
        border: none;
    }
    .table_standard tbody td {
        display: block;
        width: 100%;
        padding: 8px;
    }
    .table_standard tbody td:nth-child(2) {
        display: none;
    }
    .table_standard tbody td:nth-child(3) {
        display: none;
    }
    .table_standard tbody td:nth-child(4) {
        display: none;
    }
    .table_standard tbody td:first-child {
        display: block;
        background-color: #c2ff02;
    }
    .table_standard tbody td:last-child {
        display: block;
        color: #e5e5e5;
        background-color: green;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
    }
    .table_standard tbody td.change, .table_standard tbody td.list {
        display: block;
        width: 100%;
        text-align: left;
    }
    .table_standard tbody td.change {
        background-color: #87d5fe;
    }
    .table_standard tbody td.change a {
        border: 1px solid #0056b3;
        border-radius: 6px;
    }
    .table_standard tbody td.change a:hover {
        border: 1px solid #0056b3;
    }
    .table_standard tbody td.empty {
        width: auto;
    }
}
.table_standard_zebra {
    border-collapse: collapse;
    width: 100%;
    cursor: context-menu;
    margin-bottom: 20px;
    border: 1px solid #e5e5e5;
    font-family: "Roboto", sans-serif;
}
.table_standard_zebra thead th {
    padding: 10px;
    text-align: left;
    text-transform: uppercase;
    background-color: #e5e5e5;
}
.table_standard_zebra tbody th {
    padding: 10px;
    text-align: left;
    background: transparent;
    border: 1px solid #e5e5e5;
    border-right: none;
}
.table_standard_zebra tbody td {
    padding: 10px;
    text-align: left;
    background: transparent;
    border: 1px solid #e5e5e5;
    border-left: none;
    border-right: none;
}
.table_standard_zebra tbody td ol {
    list-style: none;
}
.table_standard_zebra tbody td ol li {
    margin-left: -36px;
}
.table_standard_zebra tr:nth-child(even) {
    background-color: #e5e5e5;
}

.table_transition_property {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: #ffffff;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    overflow: hidden;
    animation: fadeIn 0.5s ease-out;
}
.table_transition_property caption {
    background: #fefefe;
    color: #9c9c9c;
    padding: 15px;
    font-weight: 600;
    font-size: 1.1em;
    text-align: left;
    border-bottom: 2px solid #fefefe;
}
.table_transition_property thead th {
    background: #fefefe;
    color: #1e1e1e;
    padding: 12px 15px;
    font-weight: 600;
    text-align: left;
    border-bottom: 2px solid #e5e5e5;
    border-left: 4px solid #06a3fe;
}
.table_transition_property thead th:first-child {
    border-left: none;
}
.table_transition_property thead:nth-of-type(1) th {
    border-left-color: #00ff00;
}
.table_transition_property thead:nth-of-type(2) th {
    border-left-color: #06a3fe;
}
.table_transition_property thead:nth-of-type(3) th {
    border-left-color: #ff9f00;
}
.table_transition_property thead:nth-of-type(4) th {
    border-left-color: #713af2;
}
.table_transition_property thead:nth-of-type(5) th {
    border-left-color: #f00b06;
}
.table_transition_property td {
    padding: 12px 15px;
    border: 1px solid #e5e5e5;
    color: #9c9c9c;
    font-size: 0.95em;
    transition: all 0.2s ease-in-out;
}
.table_transition_property td:hover {
    background-color: #fefefe;
    cursor: pointer;
    transform: scale(1.02);
    z-index: 1;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.table_transition_property td:focus {
    outline: 2px solid #06a3fe;
    outline-offset: -2px;
}
.table_transition_property td[title] {
    position: relative;
}
.table_transition_property td[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    background: #333;
    color: #ffffff;
    border-radius: 4px;
    font-size: 0.8em;
    white-space: nowrap;
    z-index: 10;
}
.table_transition_property tr {
    background-color: #ffffff;
    transition: background-color 0.2s ease-in-out;
}
.table_transition_property tr:nth-child(even) {
    background-color: #fefefe;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (max-width: 1440px) {
    .table_transition_property {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .table_transition_property caption {
        font-size: 1em;
        padding: 12px;
    }
    .table_transition_property td {
        padding: 10px;
        font-size: 0.9em;
    }
}
.table_standard_sql {
    border-collapse: collapse;
    width: 100%;
    cursor: context-menu;
    margin-bottom: 20px;
    border: 1px solid #87d5fe;
    font-family: "Roboto", sans-serif;
}
.table_standard_sql thead th {
    padding: 10px;
    text-align: left;
    background-color: #87d5fe;
}
.table_standard_sql tbody td {
    padding: 10px;
    text-align: left;
    background: transparent;
    border: 1px solid #87d5fe;
    border-left: none;
    border-right: none;
}

@media all and (max-width: 800px) {
    .table_standard_sql thead {
        position: sticky;
        top: 0;
    }
    .table_standard_sql tbody {
        display: block;
    }
    .table_standard_sql tr {
        display: block;
        border: 6px solid #e5e5e5;
    }
    .table_standard_sql th, .table_standard_sql td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: left;
    }
    .table_standard_sql th {
        font-weight: bold;
        background-color: #87d5fe;
    }
}
html {
    scroll-behavior: smooth;
}

.table-modern {
    width: 100%;
    cursor: context-menu;
    margin-bottom: 20px;
    font-family: "Roboto", sans-serif;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.table-modern tbody tr:hover th[scope=row] {
    background-color: #c2ff02;
}
.table-modern .group-header {
    scroll-margin-top: 60px;
}
.table-modern .group-header th {
    position: relative;
    background-color: #06a3fe;
    color: #fefefe;
    padding: 1rem;
    text-align: center;
    font-size: 1.2rem;
    transition: 0.2s all;
}
.table-modern .group-header th:hover {
    background-color: #0056b3;
}
.table-modern .group-header th .back-button {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #1e1e1e;
    text-decoration: none;
    background-color: #fefefe;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}
.table-modern .group-header th .back-button .arrow-up-icon {
    content: url("/icons/arrow-up.svg");
    width: 16px;
    height: 16px;
}
.table-modern .group-header .group-title {
    display: inline-block;
}
.table-modern thead th {
    padding: 1rem;
    text-align: left;
    text-transform: uppercase;
    background-color: #87d5fe;
    color: #1e1e1e;
    transition: 0.2s all;
}
.table-modern thead th:first-child {
    border-top-left-radius: 6px;
}
.table-modern thead th:last-child {
    border-top-right-radius: 6px;
    text-align: center;
}
.table-modern thead th:hover {
    background-color: #06a3fe;
    color: #ffffff;
}
.table-modern tbody tr {
    transition: 0.2s all;
}
.table-modern tbody tr:hover {
    background-color: #fefefe;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.table-modern tbody th {
    width: 20%;
    padding: 1rem;
    text-align: left;
    background-color: transparent;
    border: 1px solid #e5e5e5;
    transition: 0.2s all;
}
.table-modern tbody .znotraj {
    padding-left: 40px;
}
.table-modern tbody td {
    padding: 1rem;
    text-align: left;
    background-color: transparent;
    border-bottom: 1px solid #e5e5e5;
    transition: 0.2s all;
}
.table-modern tbody td:first-child {
    width: 20%;
    font-weight: 500;
    color: #0056b3;
}
.table-modern tbody td:last-child {
    position: relative;
    width: 20% !important;
    text-align: center;
    text-transform: uppercase;
    color: #1e1e1e;
    background-color: #00ff00;
    transition: 0.2s all;
}
.table-modern tbody td:last-child.noBackground {
    background-color: transparent !important;
    border: none !important;
}
.table-modern tbody td:last-child:hover {
    background-color: #06a3fe;
    color: #ffffff;
}
.table-modern tbody td:last-child a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    text-decoration: none;
    font-family: "Roboto", sans-serif;
    transition: 0.2s all;
}
.table-modern .letter-header {
    font-weight: bold;
    font-size: 1.2rem;
    color: #06a3fe;
    text-align: left;
    background-color: #fefefe;
    border-bottom: 2px solid #e5e5e5;
    padding: 1rem;
}

/* ------------------------------------------------------------------
 * Za velike tabele napisan meni in se pomika s scroll-om
 * ------------------------------------------------------------------ */

.function-groups {
    position: sticky;
    top: 70px;
    z-index: 15;
    margin-bottom: 20px;
    padding: 10px;
    background: var(--card);
    border-bottom: 1px solid #e5e5e5;
    border-radius: 5px;
    text-align: center;
    scroll-margin-top: 70px;
    overflow-x: auto;
    white-space: nowrap;
}
.function-groups a.group-link {
    padding: 5px 10px;
    text-decoration: none;
    color: var(--fg);
}
.function-groups a.group-link:hover {
    color: #06a3fe;
}

@media all and (max-width: 1520px) {
    .function-groups {
        position: static !important;
        top: auto !important;
        /* Na mobilniku je fajn, da ima malo več prostora spodaj,
           da ne "leži" direktno na tabeli */
        margin-bottom: 15px;
        border-bottom: 1px solid var(--border);
    }
}

/* ------------------------------------------------------------------ */

.badge-deprecated {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.75rem;
    line-height: 1;
    border-radius: 4px;
    background-color: #ffe4e6;
    color: #9f1239;
    vertical-align: middle;
}

.table-modern tr.group-header > th > a.back-button {
    display: none !important;
}

@media all and (max-width: 768px) {
    .table-modern {
        margin-bottom: 0;
        width: 100%;
        max-width: 100%;
    }
    .table-modern thead {
        display: none;
    }
    .table-modern tbody tr {
        display: block;
        margin-bottom: 1rem;
        padding: 0.25rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        border-radius: 6px;
        background-color: #ffffff;
    }
    .table-modern tbody tr:last-child {
        margin-bottom: 0;
    }
    .table-modern tbody th {
        border-bottom: 1px dotted #87d5fe;
        background-color: #87d5fe !important;
    }
    .table-modern tbody th, .table-modern tbody td {
        display: block;
        width: 100%;
        text-align: center;
        padding: 1rem;
    }
    .table-modern tbody td:first-child {
        display: block;
        width: 100%;
        background-color: #87d5fe !important;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }
    .table-modern tbody td:last-child {
        display: block !important;
        width: 100% !important;
        padding: 20px;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        background-color: #c2ff02;
    }
    .table-modern tbody td:last-child:hover {
        background-color: #06a3fe;
        color: #ffffff;
    }
    .function-groups {
        text-align: left;
        -webkit-overflow-scrolling: touch;
    }
}
@media all and (max-width: 680px) {
    .function-groups {
        top: 170px;
    }
}
.table-programming, .table_programming {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 20px;
    font-family: "Roboto", sans-serif;
    background: var(--card);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    filter: drop-shadow(0 0 0.02em #06a3fe);
    cursor: context-menu;
}
.table-programming thead th, .table_programming thead th {
    padding: 12px 14px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 700;
    color: #1e1e1e;
    background-color: #87d5fe;
    border-bottom: 2px solid #06a3fe;
}
.table-programming tbody tr, .table_programming tbody tr {
    transition: background-color 0.18s ease;
}
.table-programming tbody tr:nth-child(odd), .table_programming tbody tr:nth-child(odd) {
    background-color: rgba(135, 213, 254, 0.08);
}
.table-programming tbody tr:hover, .table_programming tbody tr:hover {
    background-color: rgba(135, 213, 254, 0.16);
}
.table-programming tbody th, .table_programming tbody th {
    width: 28%;
    padding: 12px 14px;
    text-align: left;
    background-color: transparent;
    color: #1e1e1e;
    border-bottom: 1px solid #06a3fe;
    font-weight: 700;
}
.table-programming tbody td, .table_programming tbody td {
    padding: 12px 14px;
    text-align: left;
    background-color: transparent;
    border-bottom: 1px solid rgba(6, 163, 254, 0.65);
}

.table-programming tbody tr:hover th, .table_programming tbody tr:hover th {
    background-color: inherit;
}

.table-programming.table-programming--entities, .table-programming--entities.table_programming {
    table-layout: fixed;
}
.table-programming.table-programming--entities thead th:nth-child(1), .table-programming--entities.table_programming thead th:nth-child(1), .table-programming.table-programming--entities tbody th, .table-programming--entities.table_programming tbody th {
    width: 14%;
}
.table-programming.table-programming--entities thead th:nth-child(2), .table-programming--entities.table_programming thead th:nth-child(2), .table-programming.table-programming--entities tbody td:nth-child(2), .table-programming--entities.table_programming tbody td:nth-child(2) {
    width: 46%;
}
.table-programming.table-programming--entities thead th:nth-child(3), .table-programming--entities.table_programming thead th:nth-child(3), .table-programming.table-programming--entities tbody td:nth-child(3), .table-programming--entities.table_programming tbody td:nth-child(3),
.table-programming.table-programming--entities thead th:nth-child(4),
.table-programming--entities.table_programming thead th:nth-child(4), .table-programming.table-programming--entities tbody td:nth-child(4), .table-programming--entities.table_programming tbody td:nth-child(4) {
    width: 20%;
}
.table-programming.table-programming--entities tbody th, .table-programming--entities.table_programming tbody th {
    text-align: center;
    font-size: 1.15rem;
    line-height: 1.2;
    white-space: pre-wrap;
    letter-spacing: 0.02em;
}
.table-programming.table-programming--entities tbody td:nth-child(3), .table-programming--entities.table_programming tbody td:nth-child(3),
.table-programming.table-programming--entities tbody td:nth-child(4),
.table-programming--entities.table_programming tbody td:nth-child(4) {
    font-family: "Fira Code", monospace;
    color: #0056b3;
    user-select: all;
    cursor: copy;
}

@media all and (max-width: 800px) {
    .table-programming, .table_programming {
        display: block;
        filter: none;
        border: 0;
        border-radius: 0;
    }
    .table-programming thead, .table_programming thead {
        display: none;
    }
    .table-programming tbody, .table_programming tbody {
        display: grid;
        gap: 10px;
    }
    .table-programming tbody tr, .table_programming tbody tr {
        display: block;
        width: 100%;
        margin: 0;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--card);
        color: var(--fg);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .table-programming tbody th, .table_programming tbody th {
        display: block;
        width: 100%;
        border-bottom: none;
        background-color: #ff9f00;
        color: #111;
        padding: 0.6rem 0.75rem;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        text-align: center;
    }
    .table-programming tbody td, .table_programming tbody td {
        display: block;
        width: 100%;
        border-bottom: none;
        background-color: #87d5fe;
        color: #111;
        padding: 0.6rem 0.75rem;
    }
}
.naslovi-v-knjiznici {
    display: inline-block;
    width: auto;
    margin: 5px 5px 20px;
    padding: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    text-decoration: none;
    color: #1e1e1e;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.24);
    font-family: "Roboto", sans-serif;
}
.naslovi-v-knjiznici:hover {
    transition: 0.4s;
    background-color: #c2ff02;
    border: 1px solid #00ff00;
    color: #1e1e1e;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.24);
}

@media all and (max-width: 800px) {
    .naslovi-v-knjiznici {
        display: block;
        margin-bottom: 10px;
    }
    .naslovi-v-knjiznici:hover {
        transition: none;
        border: 1px solid #e5e5e5;
        background-color: transparent;
    }
}
.table_index {
    width: 100%;
    cursor: context-menu;
    border: 4px double #ff9f00;
    font-family: "Roboto", sans-serif;
}
.table_index thead th {
    padding: 10px;
    text-align: left;
    text-transform: uppercase;
    background-color: #ff9f00;
}
.table_index thead th:last-child {
    text-align: center;
}
.table_index tbody th {
    width: 20%;
    padding: 10px;
    text-align: left;
    background-color: transparent;
    border: 1px solid transparent;
}
.table_index tbody td {
    padding: 10px;
    text-align: left;
    background-color: transparent;
    border-bottom: 1px solid transparent;
}
.table_index tbody td:first-child {
    width: 20%;
}
.table_index tbody td:last-child {
    position: relative;
    width: 20% !important;
    text-align: center;
    text-transform: uppercase;
    color: #1e1e1e;
    background-color: #ff9f00;
    border: 1px solid transparent;
}
.table_index tbody td:last-child a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e1e1e;
    text-decoration: none;
}
.table_index tbody td:last-child:hover {
    transition: 0.4s;
    background-color: #ffff1a;
}
.table_index tbody td:last-child:hover a {
    color: #f00b06;
}
.table_index tbody td:last-child:active {
    background-color: #fe5849;
}
.table_index tbody td:last-child:active a {
    color: #0056b3;
}

@media all and (max-width: 1024px) {
    .table_index {
        display: block;
        padding: 0;
    }
    .table_index thead {
        display: none;
        padding: 10px 0;
    }
    .table_index tbody th {
        display: block;
        width: 100%;
        padding: 10px 0;
    }
    .table_index tbody td {
        display: block;
        width: 100%;
        padding: 10px 0;
    }
    .table_index tbody td:first-child {
        width: 100%;
    }
    .table_index tbody td:last-child {
        position: unset;
        width: 100% !important;
        padding: 10px 0;
        text-align: left;
        background-color: transparent;
        border-bottom: 1px dotted #1e1e1e;
    }
    .table_index tbody td:last-child a {
        position: unset;
        justify-content: left;
    }
    .table_index tbody td:last-child:hover {
        transition: none;
        background-color: transparent;
    }
    .table_index tbody td:last-child:hover a {
        color: #1e1e1e;
    }
    .table_index tbody td:last-child:active {
        background-color: transparent;
    }
    .table_index tbody td:last-child:active a {
        color: #1e1e1e;
    }
}
@media all and (max-width: 800px) {
    .table_index tbody th {
        background-color: #87d5fe;
        padding: 10px;
        border-radius: 8px;
    }
    .table_index tbody td:last-child {
        background-color: #00ff00;
        padding: 10px;
        border-radius: 8px;
        margin-bottom: 10px;
        border-bottom: none;
    }
    .table_index tbody td:last-child:hover {
        background-color: #00ff00;
    }
}
.table_programming {
    width: 100%;
    filter: drop-shadow(0 0 0.02em #06a3fe);
    cursor: context-menu;
    margin-bottom: 20px;
    font-family: "Roboto", sans-serif;
}
.table_programming thead th {
    padding: 10px;
    text-align: left;
    text-transform: uppercase;
    background-color: #87d5fe;
}
.table_programming tbody th {
    width: 20%;
    padding: 10px;
    text-align: left;
    background-color: transparent;
    border-bottom: 1px solid #06a3fe;
}
.table_programming tbody td {
    padding: 10px;
    text-align: left;
    background-color: transparent;
    border-bottom: 1px solid #06a3fe;
}

@media all and (max-width: 800px) {
    .table_programming {
        display: block;
        filter: none;
    }
    .table_programming thead {
        display: none;
    }
    .table_programming tbody {
        display: block;
    }
    .table_programming tbody tr {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }
    .table_programming tbody th {
        display: block;
        width: 100%;
        border-bottom: none;
        background-color: #ff9f00;
    }
    .table_programming tbody td {
        display: block;
        width: 100%;
        border-bottom: none;
        background-color: #87d5fe;
    }
}
.table_split {
    display: flex;
    justify-content: center;
    align-content: center;
    width: 100%;
    font-family: "Roboto", sans-serif;
}
.table_split tbody {
    display: inline-block;
    width: 25%;
    height: 100%;
    margin: 0 5px;
    text-align: left;
}
.table_split tbody th {
    display: block;
    width: 100%;
    padding: 10px;
}
.table_split tr:nth-child(even) {
    background-color: lightgray;
}

.seznami-dl {
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: var(--bg);
    color: var(--fg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    overflow: hidden;
}

.seznami-dl dt {
    display: inline-block;
    width: max-content;
    margin-top: 0.5rem;
    padding: 0.25rem 0.5rem;
    font-family: "Fira Code", monospace;
    font-size: 1.2rem;
    font-weight: bold;
    color: #87d5fe;
    background-color: rgba(135, 213, 254, 0.08);
    border-bottom: 2px solid #87d5fe;
    border-radius: 4px 4px 0 0;
    transition: all 0.2s ease-in-out;
}

.seznami-dl dt:hover {
    background-color: rgba(135, 213, 254, 0.15);
    border-bottom-color: rgb(185.5785123967, 230.7024793388, 254.4214876033);
}

.seznami-dl dd {
    display: inline-block;
    width: max-content;
    margin-left: 0;
    padding: 0.25rem 0.5rem;
    color: var(--fg);
    /* Subtilen spodnji rob (30% prosojnost) */
    border-bottom: 1px solid color-mix(in srgb, var(--fg) 30%, transparent);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease-in-out;
}

.seznami-dl dd:hover {
    border-bottom-color: #87d5fe;
}

.seznami-dl dt,
.seznami-dl dd {
    width: 100%;
    display: block;
}

.seznami-dl dt {
    border-radius: 4px;
}

/* SEZNAMI (dark/light ready) */
.list {
    width: 100%;
}
.list li {
    list-style: none;
    margin-left: -50px;
    padding: 10px;
    color: var(--fg);
    font-family: "Roboto", sans-serif;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.list li a {
    display: inline-block;
    width: auto;
    padding: 0;
    margin: 0;
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.list li a:hover {
    color: #f00b06;
}

.list_standard {
    width: 100%;
}
.list_standard li {
    list-style: circle;
    padding: 10px;
    color: var(--fg);
    font-family: "Roboto", sans-serif;
    transition: color 0.2s ease;
    /* barva označevalnika (bullet) */
}
.list_standard li::marker {
    color: var(--accent);
}
.list_standard li a {
    display: inline-block;
    width: auto;
    padding: 0;
    margin: 0;
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.list_standard li a:hover {
    color: #f00b06;
}

@media all and (max-width: 340px) {
    .list_standard {
        overflow: auto;
    }
}
/* LIST_STANDARD z dodatnim ozadjem */
.list_standard_background {
    width: 100%;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.list_standard_background li {
    list-style: circle;
    padding: 10px;
    color: var(--fg);
    font-family: "Roboto", sans-serif;
}
.list_standard_background li::marker {
    color: var(--accent);
}
.list_standard_background li a {
    display: inline-block;
    width: auto;
    padding: 0;
    margin: 0;
    color: var(--accent);
    text-decoration: none;
}
.list_standard_background li a:hover {
    color: #f00b06;
}

/* Oštevilčeni seznami (+ variacije) */
.ostevilcen-seznam,
.ostevilcen-seznam-brez-bg,
.ostevilcen-seznam-shadow {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    font-family: "Roboto", sans-serif;
    color: var(--fg);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.ostevilcen-seznam li,
.ostevilcen-seznam-brez-bg li,
.ostevilcen-seznam-shadow li {
    width: 100%;
    padding: 10px;
    color: inherit;
    /* koda znotraj li */
}
.ostevilcen-seznam li pre,
.ostevilcen-seznam-brez-bg li pre,
.ostevilcen-seznam-shadow li pre {
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 100%;
    overflow-x: auto;
    padding: 12px 10px;
    background-color: var(--card);
    color: var(--fg);
    border: 1px solid var(--border);
    text-align: left;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 50px;
    font-family: "Source Code Pro", monospace;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ostevilcen-seznam li dfn,
.ostevilcen-seznam-brez-bg li dfn,
.ostevilcen-seznam-shadow li dfn {
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-style: italic;
    color: inherit;
    font-family: "Roboto", sans-serif;
}

.ostevilcen-seznam {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.ostevilcen-seznam-brez-bg {
    background-color: transparent;
    border: none;
}

.ostevilcen-seznam-shadow {
    border-radius: 8px;
    background-color: var(--card);
    border: 1px solid var(--border);
    box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px, rgba(0, 0, 0, 0.23) 0 3px 6px;
}

.list_standard_margin {
    width: 100%;
    margin: 20px;
}
.list_standard_margin li {
    list-style: circle;
    padding: 10px;
    font-family: "Roboto", sans-serif;
}
.list_standard_margin li a {
    display: inline-block;
    width: auto;
    padding: 0;
    margin: 0;
    color: #06a3fe;
    text-decoration: none;
}
.list_standard_margin li a:hover {
    color: red;
}

.list_sql {
    width: 100%;
}
.list_sql li {
    list-style: circle;
    padding: 10px;
    font-family: "Roboto", sans-serif;
}
.list_sql li a {
    display: inline-block;
    width: auto;
    padding: 0;
    margin: 0;
    color: #1e1e1e;
    text-decoration: none;
}
.list_sql li a:hover {
    color: red;
}

.list_inline {
    width: 100%;
}
.list_inline li {
    display: inline-block;
    width: 220px;
    margin: 2px 0;
    padding: 6px;
    border: 1px solid lightgray;
    border-radius: 8px;
    font-family: "Roboto", sans-serif;
}

.list_jquery {
    width: 100%;
}
.list_jquery li {
    list-style: circle;
    padding: 10px 0;
    font-family: "Roboto", sans-serif;
    font-style: italic;
}

.list_normal {
    list-style: none;
    width: 100%;
}
.list_normal li {
    list-style: circle;
    padding: 10px;
    font-family: "Roboto", sans-serif;
}

.list_display_inline {
    width: 100%;
    list-style: none;
    margin-left: -40px;
}
.list_display_inline li {
    display: inline-block;
    list-style: none;
    margin-bottom: 4px;
    padding: 12px;
    border: 1px solid #e5e5e5;
    font-family: "Roboto", sans-serif;
}

.library_input {
    display: block;
    width: 100%;
    padding: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    font-family: "Roboto", sans-serif;
    font-size: 24px;
    outline: #1e1e1e;
    margin-bottom: 10px;
}

.close {
    position: fixed; /* Ostane fiksno na desktopu */
    top: 95px;
    right: 25px;
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid var(--border); /* Uporabi spremenljivko za barvo */
    background-color: var(--card);   /* Da ni prozoren */
    color: var(--fg);
    padding: 8px;
    z-index: 1999;
    font-family: "Roboto", sans-serif;
    display: flex;             /* Centriranje X */
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.close:hover {
    transition: 0.5s;
    border: 1px solid #f00b06;
    color: #ffff1a;
    background-color: #fe5849;
    cursor: pointer;
    filter: drop-shadow(0 0 0.25em #f00b06);
}

.close:active {
    background-color: #fe5849;
    color: #ffff1a;
    border-color: #f00b06;
    transform: scale(0.95);
    transition: 0.1s;
}

/* MOBILNI POGLED: Gumb se ne premika več (ni več fiksno) */
@media screen and (max-width: 1520px) {
    .close {
        position: absolute; /* Gumb se zdaj premika skupaj s stranjo */
        top: 100px; /* Prilagodi to cifro tvojemu novemu margin-topu containerja */
        right: 20px;
    }
}

/* Če imaš pri 680px še večji odmik vsebine */
@media screen and (max-width: 680px) {
    .close {
        top: 200px; /* Da je poravnan z začetkom tvoje vadnice */
    }
}

@media screen and (max-width: 300px) {
    .close {
        top: 230px;
    }
}

.top {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 10px;
    width: 2%;
    padding: 10px;
    content: url("/icons/arrow-up.png");
    z-index: 22;
}
.top:hover {
    content: url("/icons/arrow-up-hover.png");
    cursor: pointer;
}

/* -----------------------------------------------------------
 * FOOTER
-------------------------------------------------------------- */

/* --- OSNOVNA NOGA --- */
.noga {
    display: block;
    width: 100%;
    min-height: 150px;
    margin: 0 auto;
    padding: 30px 0 60px 0; /* Več prostora spodaj (60px) */
    text-align: center;
    background-color: var(--card);
    color: var(--fg);
    font-size: 14px;
    border-top: 1px solid var(--border);
    z-index: 1000;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.noga p {
    margin: 10px 0;
}

.noga .noga-link {
    color: var(--accent);
    font-weight: bold;
    text-decoration: none;
    transition: color 0.2s ease;
}

.noga .noga-link:hover {
    color: var(--fg);
    text-decoration: underline;
}

/* --- DONACIJA SEKCIJA --- */
.donacija-sekcija {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    margin: 25px auto;
    max-width: 800px;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.donacija-tekst {
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 18px;
    font-style: italic;
    color: var(--fg);
    opacity: 0.9;
}

.donacija-kontejner {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

/* --- GUMBI --- */
.btn-donacija {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none !important;
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff !important;
    transition: transform 0.2s, filter 0.2s;
}

.btn-paypal { background-color: #003087; }
.btn-stripe { background-color: #635bff; }

.btn-donacija:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    color: #ffffff !important;
}

.btn-paypal:hover { background-color: #002569 !important; }
.btn-stripe:hover { background-color: #554dec !important; }

/* --- DARK MODE --- */
html[data-theme=dark] .donacija-sekcija {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
html[data-theme=dark] .donacija-tekst {
    color: var(--muted);
    opacity: 1;
}

/* --- MEDIA QUERIES (Tvoje prilagojene) --- */

@media all and (max-width: 1680px) {
    .noga {
        width: 100%;
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 60px; /* Prisili razmik na dnu */
    }
}

@media all and (max-width: 1280px) {
    .noga {
        padding-bottom: 60px; /* Prepreči 'lepljenje' na dno */
    }
    .donacija-sekcija {
        max-width: 90%; /* Da na tablicah ni preširoko */
    }
}

@media all and (max-width: 480px) {
    .donacija-kontejner {
        flex-direction: column;
        width: 100%;
    }
    .btn-donacija {
        width: 100%;
        justify-content: center;
    }
    .noga {
        padding-bottom: 80px; /* Še več prostora za prste na mobilnih */
    }
}

/* Ekstremno ozki zasloni */
@media all and (max-width: 260px) {
    .noga {
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 40px;
    }
    .donacija-tekst {
        font-size: 0.85rem;
    }
}

/* ----------------------------------------------------------- */

.cookie-notice {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: auto;
    padding: 10px;
    background-color: #1e1e1e;
    color: #fefefe;
    font-size: 24px;
    z-index: 9991;
}
.cookie-notice a {
    display: inline-block;
    text-decoration: none;
    color: #f00b06;
    border: 1px solid rgba(200, 200, 200, 0.4);
    border-radius: 6px;
    padding: 10px;
    margin: 10px;
}
.cookie-notice a:hover {
    border: 1px solid rgb(200, 200, 200);
    box-shadow: 0 0 8px rgb(0, 0, 0), 0 0 4px rgb(0, 0, 0);
    background-color: #00ff00;
    color: #1e1e1e;
    transition: 2s;
}

.cookie-btn {
    cursor: pointer;
    text-align: center;
    display: inline-block;
    width: 250px;
    padding: 20px;
    background-color: #fefefe;
    color: #1e1e1e;
    border-radius: 6px;
    font-size: 28px;
}
.cookie-btn:hover {
    background-color: #ffff1a;
    box-shadow: 0 0 4px #1e1e1e;
    transition: 1s;
}

@media all and (max-width: 1980px) {
    .insideSQL {
        width: auto !important;
    }
}
@media all and (max-width: 1680px) {
    .slides .inside .contentText {
        padding: 10px;
    }
}
@media all and (max-width: 1580px) {
    .modal .modal-content {
        width: 80%;
    }
    .modal-aboutMe .modal-content-aboutMe {
        width: 80%;
    }
    .content-wrapper {
        width: 100%;
    }
    .smallImg .visibility {
        opacity: 1;
    }
    .smallImg .row .columns {
        display: inline-block;
        float: none;
        width: 25%;
    }
}
@media all and (max-width: 1280px) {
    .indexContainerVpis {
        width: 100%;
        padding: 30px;
    }
    .glavna-slika {
        display: block;
    }
    .zavihki {
        display: none;
    }
    .pomikanje {
        opacity: 1;
        transition: none;
    }
    .scrolled {
        animation: none;
    }
    .animation-main-inside img {
        box-shadow: none;
        border-radius: 24px;
    }
    .animation-main-inside img:hover {
        transition: none;
        box-shadow: none;
    }
    .meni-window-img {
        display: block;
    }
    .meni-window-img img {
        width: 100%;
        height: auto;
    }
    .meni-window {
        display: none;
    }
}
@media all and (max-width: 1024px) {
    h3 {
        font-size: 2.6vw;
    }
}
@media all and (max-width: 920px) {
    .index-top-images {
        margin-top: 0;
    }
    .smallImg_left {
        width: 100%;
    }
    .content-view {
        display: block;
        width: 100%;
    }
    .img-on-top-main {
        display: none;
    }
}
@media all and (max-width: 800px) {
    h3 {
        font-size: 20px;
    }
}
@media all and (max-width: 780px) {
    h4 {
        font-size: 1rem;
    }
}
@media all and (max-width: 680px) {
    h2 {
        font-size: 6vw;
    }
    .img50, .img75 {
        width: 100%;
    }
}
@media all and (max-width: 583px) {
    .modal .modal-content {
        width: 100%;
    }
    .results {
        height: 50vw;
    }
}

/* //-------------------------------------------------
// HYBRID SWITCHER - Aplikacijski videz za PHP vadnico
//------------------------------------------------- */

/* 1. Skrijemo select meni na računalniku */
.php-mobile-select {
    display: none;
}

@media all and (max-width: 768px) {
    /* 2. Skrijemo vodoravne zavihke */
    .php-tabs-container {
        display: none !important;
    }

    /* 3. Prikažemo in stiliziramo Select meni za mobitel */
    .php-mobile-select {
        display: block;
        width: 100%;
        padding: 12px;
        margin-bottom: 10px;
        font-size: 16px;
        font-weight: bold;
        border: 2px solid var(--accent);
        border-radius: 8px;
        background-color: var(--card);
        color: var(--fg);
        font-family: inherit;
        /* Lepša puščica */
        appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306a3fe' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 15px center;
        background-size: 18px;
        cursor: pointer;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    /* Zmanjšava višino na mobitelu, da ne zavzame celega zaslona */
    .php-multi-separated textarea.php-code,
    .php-multi-separated .output {
        height: 350px !important;
        min-height: 350px;
    }
}