/* Pisave iz prototipa EKSIST HRM - samodejno izvozene, ne urejaj rocno. */

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/hrm/jetbrains-mono-400-d5bddd51.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/hrm/jetbrains-mono-400-aead8eda.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/hrm/jetbrains-mono-400-27b3c963.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/hrm/jetbrains-mono-400-fedb3d42.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/hrm/jetbrains-mono-400-aa370e2f.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/hrm/jetbrains-mono-400-a21c5c7f.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/hrm/jetbrains-mono-500-d5bddd51.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/hrm/jetbrains-mono-500-aead8eda.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/hrm/jetbrains-mono-500-27b3c963.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/hrm/jetbrains-mono-500-fedb3d42.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/hrm/jetbrains-mono-500-aa370e2f.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/hrm/jetbrains-mono-500-a21c5c7f.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/hrm/jetbrains-mono-600-d5bddd51.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/hrm/jetbrains-mono-600-aead8eda.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/hrm/jetbrains-mono-600-27b3c963.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/hrm/jetbrains-mono-600-fedb3d42.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/hrm/jetbrains-mono-600-aa370e2f.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/hrm/jetbrains-mono-600-a21c5c7f.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/hrm/manrope-400-22b3d16a.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/hrm/manrope-400-f27d5898.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/hrm/manrope-400-99ce7ab1.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/hrm/manrope-400-4ffd404e.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/hrm/manrope-400-fc882ae2.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/hrm/manrope-400-dc05df68.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/hrm/manrope-500-22b3d16a.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/hrm/manrope-500-f27d5898.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/hrm/manrope-500-99ce7ab1.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/hrm/manrope-500-4ffd404e.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/hrm/manrope-500-fc882ae2.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/hrm/manrope-500-dc05df68.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/hrm/manrope-600-22b3d16a.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/hrm/manrope-600-f27d5898.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/hrm/manrope-600-99ce7ab1.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/hrm/manrope-600-4ffd404e.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/hrm/manrope-600-fc882ae2.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/hrm/manrope-600-dc05df68.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/hrm/manrope-700-22b3d16a.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/hrm/manrope-700-f27d5898.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/hrm/manrope-700-99ce7ab1.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/hrm/manrope-700-4ffd404e.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/hrm/manrope-700-fc882ae2.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/hrm/manrope-700-dc05df68.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/fonts/hrm/manrope-800-22b3d16a.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/fonts/hrm/manrope-800-f27d5898.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/fonts/hrm/manrope-800-99ce7ab1.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/fonts/hrm/manrope-800-4ffd404e.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/fonts/hrm/manrope-800-fc882ae2.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/fonts/hrm/manrope-800-dc05df68.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/hrm/sora-500-fbad49fb.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/hrm/sora-500-36c8abfa.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/hrm/sora-600-fbad49fb.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/hrm/sora-600-36c8abfa.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/hrm/sora-700-fbad49fb.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/hrm/sora-700-36c8abfa.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/fonts/hrm/sora-800-fbad49fb.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/fonts/hrm/sora-800-36c8abfa.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Oblikovni sistem prototipa EKSIST HRM, preslikan na Filament.
 * Vrednosti so dobesedno prevzete iz prototipa (114 CSS spremenljivk).
 *
 * Filament barve pricakuje kot "R G B" trojcke, zato so hex vrednosti
 * pretvorjene. Izvirni hex je zapisan v komentarju ob vsaki vrstici.
 */

:root {
    /* --- Modra lestvica prototipa --- */
    --hrm-blue-50: #eef5fc;
    --hrm-blue-100: #d6e6f6;
    --hrm-blue-200: #aecdec;
    --hrm-blue-300: #7db0e0;
    --hrm-blue-400: #4a8ed0;
    --hrm-blue-500: #1968b3;
    --hrm-blue-600: #145a9c;
    --hrm-blue-700: #114c84;
    --hrm-blue-800: #0e3d6a;
    --hrm-blue-900: #0b3054;

    --hrm-ral-5010: #0e518d;

    /* --- Povrsine in besedilo --- */
    --hrm-surface-page: #f7f9fb;
    --hrm-surface-card: #ffffff;
    --hrm-surface-hover: #eef0f2;
    --hrm-surface-sunken: #f7f8f9;
    --hrm-border-subtle: #e2e4e8;
    --hrm-border-default: #d0d3d8;
    --hrm-text-strong: #23262c;
    --hrm-text-body: #3a3d44;
    --hrm-text-muted: #74767d;
    /* --text-subtle iz prototipa: bledo besedilo praznih stanj in drobnih opomb. */
    --hrm-text-subtle: #9a9ca2;
    --hrm-gray-100: #eef0f2;

    /* Zelena lestvica prototipa (--green-50, --green-500) in njen napis. */
    --hrm-green-50: #e7f6ef;
    --hrm-green-500: #1f9d6b;
    --hrm-green-text: #146c4a;

    /* Opozorilna rdeca iz prototipa (--status-error) in njen temnejsi napis. */
    --hrm-status-error: #d5453b;
    --hrm-status-error-text: #9c2d25;

    /*
     * Ikona nalaganja (heroicon arrow-up-tray) kot maska. Uporabljena je
     * tam, kjer izrisa ne moremo vstaviti kot element - npr. na napisu
     * FilePond gumba za izbiro datoteke.
     */
    --hrm-ikona-nalaganje: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.8' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 7.5 7.5 12M12 7.5V21'/%3E%3C/svg%3E");

    /* --- Zaobljenost in sence --- */
    --hrm-radius-sm: 10px;
    --hrm-radius-md: 14px;
    --hrm-radius-lg: 20px;
    --hrm-shadow-sm: 0 2px 6px rgba(11, 48, 84, 0.07);
    --hrm-shadow-md: 0 6px 18px rgba(11, 48, 84, 0.09);

    /* --- Pisave --- */
    --hrm-font-display: 'Sora', system-ui, -apple-system, sans-serif;
    --hrm-font-body: 'Manrope', system-ui, -apple-system, sans-serif;
    --hrm-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

    /* --- Filament primarna barva iz modre lestvice --- */
    --primary-50: 238 245 252;   /* #eef5fc */
    --primary-100: 214 230 246;  /* #d6e6f6 */
    --primary-200: 174 205 236;  /* #aecdec */
    --primary-300: 125 176 224;  /* #7db0e0 */
    --primary-400: 74 142 208;   /* #4a8ed0 */
    --primary-500: 25 104 179;   /* #1968b3 */
    --primary-600: 20 90 156;    /* #145a9c */
    --primary-700: 17 76 132;    /* #114c84 */
    --primary-800: 14 61 106;    /* #0e3d6a */
    --primary-900: 11 48 84;     /* #0b3054 */
    --primary-950: 8 36 64;      /* #082440 */

    /* --- Filament sive iz lestvice prototipa --- */
    --gray-50: 247 248 249;      /* #f7f8f9 */
    --gray-100: 238 240 242;     /* #eef0f2 */
    --gray-200: 226 228 232;     /* #e2e4e8 */
    --gray-300: 208 211 216;     /* #d0d3d8 */
    --gray-400: 188 189 193;     /* #bcbdc1 */
    --gray-500: 154 156 162;     /* #9a9ca2 */
    --gray-600: 116 118 125;     /* #74767d */
    --gray-700: 86 89 97;        /* #565961 */
    --gray-800: 58 61 68;        /* #3a3d44 */
    --gray-900: 35 38 44;        /* #23262c */
    --gray-950: 22 24 28;        /* #16181c */

    /* --- Statusne barve --- */
    --success-500: 31 157 107;   /* #1f9d6b */
    --success-600: 26 133 91;
    --warning-500: 217 147 10;   /* #d9930a */
    --warning-600: 184 124 8;
    --danger-500: 213 69 59;     /* #d5453b */
    --danger-600: 181 57 49;
    --info-500: 14 81 141;       /* #0e518d (RAL 5010) */
    --info-600: 12 69 120;
}

/* --- Pisave --- */
body,
.fi-body {
    font-family: var(--hrm-font-body);
    background-color: var(--hrm-surface-page);
}

/* --- Vec prostora za vsebino --- */
/* Filament ima privzeto 32 px roba na vsaki strani; 20 px zadosca in
   sprosti 24 px za vsebino. */
.fi-main {
    padding-inline: 1.25rem;
}

/*
 * Razmik med glavo strani in vsebino. Prototipova glava (HRM.pageHead)
 * ima margin-bottom 22 px, Filament pa 32 px, zato je nad vsebino
 * ostajala prazna vrstica vec, kot je treba.
 */
.fi-page-header-main-ctn {
    row-gap: 22px;
}

/* Naslovi v Sora, kot v prototipu. */
.fi-header-heading,
.fi-section-header-heading,
.fi-sc-section-header-heading,
.fi-modal-heading,
h1, h2, h3 {
    font-family: var(--hrm-font-display);
    letter-spacing: -0.02em;
    font-weight: 800;
}

.fi-in-text.fi-font-mono,
.fi-ta-text.fi-font-mono {
    font-family: var(--hrm-font-mono);
}

/* --- Kartice in sekcije --- */
/* Prototip: radius 20px, 1px rob v gray-200, shadow-sm. */
.fi-section,
.fi-sc-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    border-radius: var(--hrm-radius-lg);
    border: 1px solid var(--hrm-border-subtle);
    box-shadow: var(--hrm-shadow-sm);
    background-color: var(--hrm-surface-card);
}

/*
 * Naslov sekcije: moder, pod njim siva locnica - kot funkcija sec() v
 * prototipu (font-weight 800, color primary, border-bottom border-subtle).
 */
.fi-sc-section-header-heading,
.fi-section-header-heading {
    color: var(--hrm-blue-text);
    font-size: 14px;
    letter-spacing: 0.02em;
}

.fi-sc-section-header,
.fi-section-header {
    border-bottom: 1px solid var(--hrm-border-subtle);
    /* Naslov levo, opis na desnem robu iste vrstice. */
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    /* Tesno ob locnico - prej je bilo med njima prevec praznega prostora. */
    padding-bottom: 8px;
    margin-bottom: 0;
}

/* Ikona poravnana s sredino naslova, ne z osnovnico. */
.fi-sc-section-header .fi-icon,
.fi-section-header .fi-icon {
    flex-shrink: 0;
    align-self: center;
}

/* Naslov in ikona sta v isti vrstici brez dodatnega razmika. */
.fi-sc-section-header-ctn,
.fi-section-header-ctn {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.fi-sc-section-header-description,
.fi-section-header-description {
    margin-left: auto;
    text-align: right;
}

/* --- Stranski meni: preliv iz prototipa --- */
/* Izvirnik: linear-gradient(180deg, #0b3054, #004F7C), sirina 250px. */
.fi-sidebar,
.fi-sidebar-header,
.fi-sidebar-nav {
    background: linear-gradient(180deg, #0b3054, #004f7c);
    border-right-color: rgba(255, 255, 255, 0.08);
}

.fi-sidebar-header {
    box-shadow: none;
}

/* --- Znamka: logotip v belem okvircku + napis HRM --- */
/* Okvircek naredimo kar na sami sliki (.fi-logo), ker Filament ovojnice
   za logotip ne izpise. */
.fi-logo {
    background: #fff;
    border-radius: 10px;
    padding: 7px 10px;
    box-sizing: content-box;
    display: block;
}

.fi-sidebar-header .fi-logo-ctn,
.fi-topbar .fi-logo-ctn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.hrm-znamka-napis {
    color: #fff;
    font-family: var(--hrm-font-display);
    font-weight: 800;
    letter-spacing: 0.02em;
    font-size: 1.05rem;
}

/* --- Sifranti na dnu stranskega menija --- */
/*
 * Sifranti niso vsakodnevno delo kadrovske, ampak nastavitve, zato
 * stojijo loceni na dnu. Da jih lahko potisnemo dol, morata rasti tudi
 * skupina in njen seznam, sicer se ustavita pri visini vsebine.
 */
.fi-sidebar-nav .fi-sidebar-nav-groups,
.fi-sidebar-nav .fi-sidebar-group {
    flex-grow: 1;
}

.fi-sidebar-nav .fi-sidebar-group > ul {
    display: flex;
    flex-direction: column;
    row-gap: 0.25rem;
    flex-grow: 1;
}

.fi-sidebar-nav .fi-sidebar-item:has(a[href$="/admin/sifranti"]) {
    margin-top: auto;
}

/* --- Spustna polja brez kriza za praznjenje --- */
/*
 * Filament ob izbrani vrednosti izpise se krizec, ki polje izprazni.
 * Prototip ga nima; vrednost se zamenja z izbiro druge, prazno pa se
 * izbere s postavko "— izberi —" v seznamu.
 */
.fi-select-input-value-remove-btn {
    display: none;
}

.fi-select-input-ctn-clearable .fi-select-input-btn {
    padding-inline-end: 2.5rem;
}

/* --- Okna: zamegljeno modro ozadje, kot v prototipu --- */
/*
 * Prototip ima nad stranjo #modal-host z rgba(11,48,84,.55) in
 * backdrop-filter: blur(4px). Filament da samo prosojno crno, zato
 * prekrivalo poenotimo z lastnimi okni (hrm-okno-ozadje).
 */
.fi-modal-close-overlay {
    background-color: var(--hrm-prekrivalo);
    backdrop-filter: blur(4px);
}

/* --- Noga stranskega menija --- */
.hrm-meni-noga {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    padding: 12px 8px;
}

.fi-sidebar-nav .fi-sidebar-item-label,
.fi-sidebar-group-label {
    color: rgba(255, 255, 255, 0.72);
    font-weight: 600;
}

.fi-sidebar-item-icon {
    color: rgba(255, 255, 255, 0.6);
}

.fi-sidebar-item-button {
    border-radius: 12px;
}

.fi-sidebar-item-button:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/*
 * Izbrana postavka: belo ozadje, temno modro besedilo (izvirnik:
 * .nav-item.active { background:#fff; color:#0b3054 }).
 *
 * Filament uporablja razred fi-active na <li>, gumb pa je fi-sidebar-item-btn.
 * Ciljamo obe razlicici imen, ker se med verzijami razlikujeta.
 */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn:hover,
.fi-sidebar-item-active .fi-sidebar-item-button,
.fi-sidebar-item-active .fi-sidebar-item-button:hover {
    background-color: #ffffff !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon,
.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item-active .fi-sidebar-item-icon,
.fi-sidebar-item-active .fi-sidebar-item-button .fi-icon {
    color: var(--hrm-blue-900) !important;
    font-weight: 700;
}

/*
 * Znacka ob postavki menija je vedno modra z belim besedilom - enako kot
 * v prototipu (background: var(--ral-5010)). Mere so prevzete iz izvirnika.
 */
.fi-sidebar-item .fi-badge,
.fi-sidebar-item-active .fi-badge,
.fi-sidebar-item-badge-ctn .fi-badge {
    background-color: var(--hrm-ral-5010) !important;
    color: #ffffff !important;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

/*
 * Notranji ovojnici znacke imata svoj rob in visino vrstice, zaradi cesar
 * je stevilka zamaknjena iz sredine. Tu ju izniclimo.
 */
.fi-sidebar-item .fi-badge-label,
.fi-sidebar-item .fi-badge-label-ctn {
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    line-height: 1;
    height: 100%;
}

/* Znacka se drzi desnega roba, kot v prototipu (margin-left: auto). */
.fi-sidebar-item-badge-ctn {
    margin-left: auto;
}

/* --- Gumbi --- */
/* Prototip: visina 40px, radius 12px, weight 600. */
.fi-btn {
    border-radius: 12px;
    font-weight: 600;
}

/*
 * Glavna dejanja (Uredi, Shrani spremembe, Ustvari) v modri barvi.
 * Filament jim privzeto da sivo, kar jih ne loci od stranskih dejanj.
 */
.fi-btn.fi-color-gray.fi-ac-btn-action[type='submit'],
.fi-form-actions .fi-btn.fi-color-gray:first-child,
.fi-ac-btn-action.fi-color-primary,
.fi-btn.fi-color-primary {
    background-color: var(--hrm-blue-500);
    color: #fff;
    border-color: var(--hrm-blue-500);
}

.fi-btn.fi-color-primary:hover,
.fi-ac-btn-action.fi-color-primary:hover {
    background-color: var(--hrm-blue-600);
    border-color: var(--hrm-blue-600);
}

/* --- Znacke: oblika pilule iz prototipa --- */
.fi-badge {
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* --- Polja obrazcev --- */
/*
 * Filamentova polja imajo privzeto zelo bled obris. Tu ga okrepimo, da je
 * meja polja jasno vidna - predvsem na prijavni strani, kjer sta polji
 * edina elementa na prazni podlagi.
 */
.fi-input-wrp,
.fi-fo-field-wrp .fi-input-wrp {
    border-radius: var(--hrm-radius-sm);
    border: 1px solid var(--hrm-border-default);
    background: var(--hrm-surface-card);
    box-shadow: none;
}

.fi-input-wrp:hover {
    border-color: var(--hrm-border-strong);
}

/* Fokus: modri obris, kot ga ima prototip. */
.fi-input-wrp:focus-within {
    border-color: var(--hrm-blue-500);
    box-shadow: 0 0 0 3px var(--hrm-fokus-obroc-vnos);
}

/* --- Namigno besedilo v poljih --- */
/*
 * Namig (placeholder) mora biti jasno sivi in loclijv od vnesene vrednosti.
 * Filament ga privzeto obarva pretemno, zato se bere kot vsebina polja.
 */
.fi-input::placeholder,
.fi-input-wrp input::placeholder,
.fi-input-wrp textarea::placeholder,
input.fi-input::placeholder,
textarea.fi-input::placeholder {
    color: var(--hrm-text-subtle);
    opacity: 1;
}

/* Namig pri spustnih poljih (izbrana ni nobena vrednost). */
.fi-fo-select-placeholder,
.fi-select-placeholder,
.choices__placeholder,
.fi-fo-select .fi-input[data-placeholder='true'] {
    color: var(--hrm-text-subtle);
}

/* --- Spustni meniji --- */
/* Filamentov seznam nima sence in se zliva s stranjo pod njim. */
.fi-dropdown-panel,
.fi-fo-select-options,
.fi-select-options,
[role='listbox'] {
    box-shadow: var(--hrm-shadow-spustni);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: var(--hrm-radius-md);
}

/* --- Kljukice --- */
/* Neoznacena kljukica mora imeti viden obris, sicer se na belem izgubi. */
.fi-checkbox-input,
input[type='checkbox'].fi-checkbox-input {
    border: 1px solid var(--hrm-border-default);
    border-radius: 5px;
}

.fi-checkbox-input:checked {
    background-color: var(--hrm-blue-500);
    border-color: var(--hrm-blue-500);
}

/* --- Preklopna stikala --- */
/*
 * Privzeto je izklopljeno stikalo skoraj belo na beli podlagi in se ga
 * ne vidi. Damo mu siv obris in sivo podlago.
 */
.fi-toggle,
.fi-fo-toggle button[role='switch'] {
    border: 1px solid var(--hrm-border-default);
}

.fi-toggle[aria-checked='false'],
button[role='switch'][aria-checked='false'] {
    background-color: var(--hrm-border-default);
    border-color: var(--hrm-border-strong);
}

.fi-toggle[aria-checked='true'],
button[role='switch'][aria-checked='true'] {
    background-color: var(--hrm-blue-500);
    border-color: var(--hrm-blue-500);
}

/* Napaka: rdec obris, da je polje s tezavo takoj vidno. */
.fi-fo-field-wrp-error-message ~ * .fi-input-wrp,
.fi-input-wrp:has(input[aria-invalid='true']) {
    border-color: var(--hrm-status-error);
}

.fi-input-wrp:has(input[aria-invalid='true']):focus-within {
    box-shadow: 0 0 0 3px var(--hrm-fokus-obroc-napaka);
}

/* --- Oznake: velike tiskane, kot .lbl v prototipu --- */
/*
 * Izvirnik: font-size 12px, weight 700, muted, uppercase, letter-spacing .05em,
 * margin-bottom 5px. Enak slog velja za prikaz podatkov, polja obrazcev in
 * oznake skupin (Fieldset), da so vsi naslovi enotni.
 */
.fi-in-entry-label,
.fi-fo-field-label,
.fi-fo-field-label-content,
.fi-fieldset-label,
.fi-sc-fieldset > legend,
.fi-fieldset > legend {
    font-size: 12px;
    font-weight: 700;
    color: var(--hrm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
}

/* Oznaka poravnana z levim robom svojega polja - brez zamika. */
.fi-fo-field-label-col,
.fi-fo-field-label-ctn,
.fi-fo-field-label,
.fi-fieldset-label,
.fi-sc-fieldset > legend,
.fi-fieldset > legend {
    padding-left: 0;
    margin-left: 0;
}

/*
 * Razmik med oznako in poljem: prototip ima 5px, Filament pa sesteje troje -
 * row-gap 8px na .fi-fo-field, se en row-gap 8px na stolpcu oznake in 6px
 * odmika nad oznako. Zato razmike izenacimo na 5px, ne dodajamo margine.
 */
.fi-fo-field {
    row-gap: 5px;
}

.fi-fo-field-label-col {
    row-gap: 5px;
    padding-top: 0;
}

.fi-fo-field-label-ctn {
    margin-bottom: 0;
}

/* --- Postavke sifranta: naziv, premik in brisanje v eni vrstici --- */
/*
 * Sifrant delovnih mest ima 53 postavk. Privzeti razmiki Filamenta so
 * za tako dolg seznam preveliki, zato jih tu stisnemo: vrstica postavke
 * je visoka toliko kot polje, med vrsticami pa je 4px.
 */
.fi-fo-simple-repeater-items {
    gap: 4px;
}

.fi-fo-simple-repeater-item {
    align-items: center;
    gap: 6px;
}

.fi-fo-simple-repeater-item .fi-input {
    padding-top: 5px;
    padding-bottom: 5px;
}

.fi-fo-simple-repeater-item .fi-sc-has-gap {
    gap: 0;
}

/* Gumba za premik in brisanje sta ob polju, ne pod njim. */
.fi-fo-simple-repeater-item-actions {
    align-items: center;
    gap: 2px;
    padding-top: 0;
}

/* Brez oznak nad postavkami seznam ne potrebuje dodatnega odmika. */
.fi-fo-simple-repeater .fi-fo-field {
    row-gap: 0;
}

/* ==========================================================================
 * Semanticne barve in temna tema
 *
 * Vsaka barva, ki se med temama razlikuje, je spremenljivka. Pravila v
 * hrm.css berejo samo spremenljivke, zato temno temo dolocimo na enem
 * mestu - v bloku `.dark` spodaj. Filament razred `dark` postavi na
 * element <html>, zato blok velja za celo stran.
 *
 * Locnica, ki jo je treba spostovati: barve polnil (gumbi, znacke) v temni
 * temi ostanejo enake, ker na njih stoji bel napis; barve napisov pa se
 * posvetlijo, sicer na temni podlagi izginejo. Zato so v paru - npr.
 * `--hrm-green-500` (polnilo) in `--hrm-green-accent` (napis).
 * ========================================================================== */

:root {
    /* --- Napisi v barvi poudarka (par k polnilom zgoraj) --- */
    --hrm-blue-text: var(--hrm-blue-500);
    --hrm-info-text: var(--hrm-ral-5010);
    --hrm-green-accent: var(--hrm-green-500);
    --hrm-red-accent: var(--hrm-status-error);

    /* --- Nevtralne --- */
    --hrm-text-secondary: #565961;
    --hrm-border-strong: #bcbdc1;

    /* --- Zelena --- */
    --hrm-green-200: #bfe6d3;
    --hrm-green-svetla: #7ee0a8;

    /* --- Jantar (opozorila, roki, cakanje) --- */
    --hrm-amber-50: #fdf3e0;
    --hrm-amber-100: #ffe6b8;
    --hrm-amber-200: #f6cdb4;
    --hrm-amber-300: #f0c98a;
    --hrm-amber-400: #d99b1c;
    --hrm-amber-500: #d9930a;
    --hrm-amber-600: #b7791f;
    --hrm-amber-text: #8a5d05;
    --hrm-amber-text-strong: #7a5304;
    --hrm-amber-text-alt: #9a6a00;
    /* Napis na polnem jantarju - temen v obeh temah. */
    --hrm-amber-on-solid: #3d2a00;

    /* --- Rdeca --- */
    --hrm-red-50: #fbeae9;
    --hrm-red-100: #fdecea;
    --hrm-red-200: #f3c9c6;

    /* --- Barvne kartice stipendistov --- */
    --hrm-stip-sszd: #ffe6b8;
    --hrm-stip-sszd-pika: #f0a92b;
    --hrm-stip-solska: #c8e6a0;
    --hrm-stip-solska-pika: #4caf50;
    --hrm-stip-stip: #f6cdb4;
    --hrm-stip-stip-pika: #e2683c;
    --hrm-stip-vrsta-text: #3d2a00;
    --hrm-blue-naslov: #2f5f9e;

    /* --- Prosojni prelivi vrstic --- */
    --hrm-tint-jantar: rgba(240, 169, 43, 0.06);
    --hrm-tint-jantar-mocan: rgba(240, 169, 43, 0.07);
    --hrm-tint-jantar-izbran: rgba(240, 165, 0, 0.12);
    --hrm-tint-jantar-krogec: rgba(240, 165, 0, 0.15);
    --hrm-tint-jantar-vpis: rgba(217, 155, 28, 0.12);
    --hrm-tint-jantar-minimum: rgba(217, 155, 28, 0.14);
    --hrm-tint-rdeca: rgba(214, 73, 60, 0.05);
    --hrm-tint-rdeca-mocna: rgba(214, 73, 60, 0.06);
    --hrm-tint-modra: rgba(25, 104, 179, 0.05);
    --hrm-tint-zelena: rgba(46, 160, 67, 0.06);
    --hrm-tint-info: rgba(14, 81, 141, 0.1);

    /* --- Obrocki ob fokusu --- */
    --hrm-fokus-obroc: rgba(25, 104, 179, 0.15);
    --hrm-fokus-obroc-svetel: rgba(74, 142, 208, 0.35);
    --hrm-fokus-obroc-vnos: rgba(25, 104, 179, 0.18);
    --hrm-fokus-obroc-napaka: rgba(213, 69, 59, 0.18);

    /* --- Sence in prekrivala --- */
    --hrm-shadow-xs: 0 1px 2px rgba(11, 48, 84, 0.06);
    --hrm-shadow-okno: 0 28px 70px rgba(11, 48, 84, 0.16);
    --hrm-shadow-spustni: 0 10px 28px rgba(11, 48, 84, 0.16), 0 2px 6px rgba(11, 48, 84, 0.08);
    --hrm-senca-znacka: rgba(156, 45, 37, 0.35);
    --hrm-senca-lepljiv: rgba(0, 0, 0, 0.12);
    --hrm-prekrivalo: rgba(11, 48, 84, 0.55);
    --hrm-filepond-gumb: rgba(11, 48, 84, 0.1);
    --hrm-filepond-gumb-hover: rgba(11, 48, 84, 0.2);
}

/* --------------------------------------------------------------------------
 * Temna tema
 * -------------------------------------------------------------------------- */

.dark {
    /* --- Povrsine --- */
    --hrm-surface-page: #14161a;
    --hrm-surface-card: #1c1f24;
    --hrm-surface-hover: #262a30;
    --hrm-surface-sunken: #191c21;
    --hrm-gray-100: #262a30;
    --hrm-border-subtle: #2b3037;
    --hrm-border-default: #3a4048;
    --hrm-border-strong: #4d545e;

    /* --- Besedilo --- */
    --hrm-text-strong: #f1f3f6;
    --hrm-text-body: #d5d9df;
    --hrm-text-secondary: #b9bec6;
    --hrm-text-muted: #9aa0a9;
    --hrm-text-subtle: #7b818a;

    /*
     * Modra: 50-200 so podlage in se v temnem prevesijo v temne odtenke,
     * 500 in RAL 5010 ostaneta polnili gumbov (bel napis nanju), napisi
     * pa gredo na svetlo modro.
     */
    --hrm-blue-50: #14283f;
    --hrm-blue-100: #17324f;
    --hrm-blue-200: #1d4269;
    --hrm-blue-300: #2a5c8f;
    --hrm-blue-400: #3f7db8;
    --hrm-blue-700: #9fc8ec;
    --hrm-blue-text: #6fadea;
    --hrm-info-text: #6fadea;
    --hrm-blue-naslov: #24486f;

    /* --- Zelena --- */
    --hrm-green-50: #12291f;
    --hrm-green-200: #2c5c45;
    --hrm-green-text: #5fd6a2;
    --hrm-green-accent: #45c791;

    /* --- Jantar --- */
    --hrm-amber-50: #2e2413;
    --hrm-amber-100: #3a2c15;
    --hrm-amber-200: #40301c;
    --hrm-amber-300: #6b5326;
    --hrm-amber-600: #e0a83c;
    --hrm-amber-text: #f0c26a;
    --hrm-amber-text-strong: #f5d189;
    --hrm-amber-text-alt: #edc067;

    /* --- Rdeca --- */
    --hrm-red-50: #2e1a19;
    --hrm-red-100: #331b1a;
    --hrm-red-200: #5a2f2c;
    --hrm-status-error-text: #f09189;
    --hrm-red-accent: #ef7a70;

    /* --- Kartice stipendistov: pastele zamenjajo zamolkli odtenki --- */
    --hrm-stip-sszd: #3a2c15;
    --hrm-stip-solska: #24361d;
    --hrm-stip-stip: #3a2a20;
    --hrm-stip-vrsta-text: #e8dcc8;

    /* --- Prelivi vrstic: na temni podlagi potrebujejo vec motnosti --- */
    --hrm-tint-jantar: rgba(240, 169, 43, 0.1);
    --hrm-tint-jantar-mocan: rgba(240, 169, 43, 0.12);
    --hrm-tint-jantar-izbran: rgba(240, 165, 0, 0.18);
    --hrm-tint-jantar-krogec: rgba(240, 165, 0, 0.2);
    --hrm-tint-jantar-vpis: rgba(217, 155, 28, 0.16);
    --hrm-tint-jantar-minimum: rgba(217, 155, 28, 0.18);
    --hrm-tint-rdeca: rgba(214, 73, 60, 0.12);
    --hrm-tint-rdeca-mocna: rgba(214, 73, 60, 0.14);
    --hrm-tint-modra: rgba(74, 142, 208, 0.12);
    --hrm-tint-zelena: rgba(46, 160, 67, 0.14);
    --hrm-tint-info: rgba(74, 142, 208, 0.16);

    /* --- Obrocki ob fokusu --- */
    --hrm-fokus-obroc: rgba(74, 142, 208, 0.3);
    --hrm-fokus-obroc-svetel: rgba(125, 176, 224, 0.4);
    --hrm-fokus-obroc-vnos: rgba(74, 142, 208, 0.32);
    --hrm-fokus-obroc-napaka: rgba(213, 69, 59, 0.32);

    /* --- Sence: na temni podlagi delujejo samo crne --- */
    --hrm-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --hrm-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
    --hrm-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55);
    --hrm-shadow-okno: 0 28px 70px rgba(0, 0, 0, 0.65);
    --hrm-shadow-spustni: 0 10px 28px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
    --hrm-senca-znacka: rgba(0, 0, 0, 0.5);
    --hrm-senca-lepljiv: rgba(0, 0, 0, 0.45);
    --hrm-prekrivalo: rgba(0, 0, 0, 0.65);
    --hrm-filepond-gumb: rgba(255, 255, 255, 0.14);
    --hrm-filepond-gumb-hover: rgba(255, 255, 255, 0.24);

    /*
     * Filamentove lestvice (--gray-*, --primary-*) ostanejo nespremenjene.
     * Njegova lastna pravila v temni temi same izbirajo druge stopnje
     * (npr. gray-900 namesto gray-50); ce bi lestvico obrnili, bi te
     * izbire pokvarili.
     */
}

/*
 * Belo platno za podpis ostane belo tudi v temni temi - podpis je temno
 * pisalo in bi na temni podlagi izginil.
 */
.dark .hrm-lr-platno,
.dark .hrm-lr-podpis-slika,
.dark .hrm-lr-podpis-mini {
    background: #fff;
}

/*
 * Filamentov preklopnik teme in uporabniski meni: nasa pravila prepisejo
 * Filamentova (nas slog se nalozi za njegovim), zato jima podlago in
 * napise dolocimo tudi tu.
 */
.dark .fi-dropdown-panel,
.dark .fi-modal-window,
.dark .fi-select-options,
.dark [role='listbox'] {
    background-color: var(--hrm-surface-card);
    color: var(--hrm-text-body);
}

/* Vnosna polja: podlaga kartice je presvetla, vdrto polje je bolj berljivo. */
.dark .fi-input-wrp,
.dark .fi-input,
.dark textarea.fi-input,
.dark .fi-fo-select .fi-input {
    background-color: var(--hrm-surface-sunken);
    color: var(--hrm-text-body);
}

/* Tabele: vrstice na kartici, glava malenkost temnejsa. */
.dark .fi-ta-header-cell,
.dark .fi-ta-header-ctn {
    background-color: var(--hrm-surface-sunken);
}

/*
 * Dodatki k Filament vmesniku, povzeti po prototipu EKSIST HRM.
 * Vstavljeni prek render hooka v AdminPanelProvider (brez gradnje teme).
 */

/* --- Krogec z zacetnicami v seznamu zaposlenih --- */
/*
 * Prototip: 46 px, blue-100 na blue-700, weight 800, pisava Sora
 * (19_7512ec86.js, HRM.renderEmployees).
 */
.fi-avatar-krog {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    background: var(--hrm-blue-100);
    color: var(--hrm-blue-700);
    font-family: var(--hrm-font-display);
    font-weight: 800;
    font-size: 15px;
    line-height: 1;
}

/* --- Karticni prikaz nima svojega drsnika --- */
/*
 * Filament vsaki tabeli doda .fi-ta-content-ctn { overflow-x: auto }.
 * Pri navadni tabeli je to smiselno, pri karticah pa ustvari odvecen
 * drsnik znotraj strani.
 */
.fi-ta-content-ctn:has(.fi-ta-content-grid) {
    overflow-x: visible;
    overflow-y: visible;
}

/* Vsak zapis v mrezi je samostojna kartica. */
.fi-ta-content-grid .fi-ta-record {
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: var(--hrm-radius-lg);
    box-shadow: var(--hrm-shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.fi-ta-content-grid .fi-ta-record:hover {
    border-color: var(--hrm-blue-300);
    box-shadow: var(--hrm-shadow-md);
}

/* Ovojnica mreze naj nima lastnega roba in sence - kartice jih imajo same. */
.fi-ta-ctn:has(.fi-ta-content-grid) {
    background: transparent;
    border: 0;
    box-shadow: none;
}

/*
 * Prototip ima nad karticami samo naslov strani. Ce v orodni vrstici ni
 * nicesar (ne iskalnika ne filtrov), jo skrijemo, sicer bi ostala prazna
 * vrstica s sivo locnico.
 */
.fi-ta-ctn:has(.fi-ta-content-grid) .fi-ta-header {
    border-bottom: 0;
    padding: 0 0 12px;
}

.fi-ta-ctn:has(.fi-ta-content-grid) .fi-ta-header-ctn:not(:has(.fi-ta-search-field, .fi-ta-filters)) {
    display: none;
}

/* --- Cela kartica zaposlenega klikabilna --- */
/* Velja samo za karticni prikaz, navadnih tabel se ne dotika. */
.fi-ta-content-grid .fi-ta-record-content-ctn,
.fi-ta-content-grid .fi-ta-record-content-ctn > div {
    height: 100%;
}

.fi-ta-content-grid .fi-ta-record-content {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
}

/* --- Kartica zaposlenega: dobesedno po prototipu --- */
/*
 * Izvirnik je vrstica v HRM.renderEmployees: padding 16 px, gap 14 px,
 * krogec z zacetnicami, ime in "delovno mesto - sektor", nato pilula s
 * tarifnim razredom v poudarku in puscica.
 */
/*
 * Prototip ima mrezo brez notranjega roba in z razmikom 12 px; Filament
 * ji doda 16 px navpicno in 24 px vodoravno, zaradi cesar so kartice
 * zamaknjene glede na naslov strani.
 */
.fi-ta-content-grid {
    padding: 0;
    gap: 12px;
}

.fi-ta-content-grid .fi-ta-record-content > .fi-grid-col {
    width: 100%;
}

/* Notranji rob nosi trak .fi-ta-split, zunanja povezava ga nima. */
.fi-ta-content-grid .fi-ta-record-content {
    padding: 0;
}

.fi-ta-content-grid .fi-ta-record-content .fi-ta-split {
    gap: 14px;
    padding: 16px;
    align-items: center;
}

/* Ime: weight 700 v najtemnejsi barvi, 15 px. */
.fi-ta-content-grid .fi-ta-stack > .fi-grid-col:first-child .fi-ta-text-item {
    font-size: 15px;
    font-weight: 700;
    color: var(--hrm-text-strong);
}

/* Podnaslov "delovno mesto - sektor": 13 px, prigusen. */
.fi-ta-content-grid .fi-ta-stack > .fi-grid-col:last-child .fi-ta-text-item {
    font-size: 13px;
    font-weight: 400;
    color: var(--hrm-text-muted);
}

/* Tarifni razred je pilula v poudarku - rgba(14,81,141,.1) na RAL 5010. */
.hrm-zaposleni-tarifa .fi-badge {
    background: var(--hrm-tint-info);
    color: var(--hrm-info-text);
    border: 0;
    box-shadow: none;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.hrm-zaposleni-tarifa .fi-badge .fi-badge-label {
    color: var(--hrm-info-text);
}

.hrm-zaposleni-pusicica .fi-icon {
    width: 18px;
    height: 18px;
    color: var(--hrm-text-subtle);
}

/* --- Zavihki digitalne mape --- */
/*
 * Zavihki v eni vrstici, dokler je prostora dovolj. Ko ga zmanjka, se
 * presezek prelije v novo vrstico - brez vodoravnega drsenja, tako da so
 * vsi zavihki vedno vidni. Enako resitev ima prototip.
 */
.fi-tabs {
    flex-wrap: wrap;
    gap: 6px;
    /* Siva locnica pod trakom zavihkov, kot v prototipu. */
    border-bottom: 1px solid var(--hrm-border-subtle);
    padding: 0 0 14px;
    margin-bottom: 16px;
    /* Brez skupnega ozadja - vsak zavihek je svoja kartica. */
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

/*
 * Vsak zavihek je samostojna kartica z robom, brez sence, in zavzame samo
 * toliko prostora, kolikor ga potrebuje njegov napis - brez `flex-grow`,
 * sicer bi se zavihka v drugi vrstici raztegnila cez celo sirino. Prav tako
 * se ne skrcijo pod svoj napis (brez min-width: 0), sicer besedilo uide iz
 * okvirja in se prekriva s sosedom.
 */
.fi-tabs .fi-tabs-item {
    flex: 0 1 auto;
    justify-content: center;
    padding: 8px 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-default);
    border-radius: 9px;
    box-shadow: none;
    color: var(--hrm-text-body);
}

.fi-tabs .fi-tabs-item:hover {
    background: var(--hrm-surface-hover);
}

/* Izbran zavihek: primarna barva, kot v prototipu. */
.fi-tabs .fi-tabs-item.fi-active,
.fi-tabs .fi-tabs-item[aria-selected='true'] {
    background: var(--hrm-blue-500);
    border-color: var(--hrm-blue-500);
    color: #fff;
    font-weight: 800;
}

.fi-tabs .fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs .fi-tabs-item[aria-selected='true'] .fi-tabs-item-label {
    color: #fff;
}

/*
 * Zavihek s stevilko je v prototipu rdec: rdec rob, temno rdec napis in
 * ikona, ob njem pa okrogla znacka v --status-error z belo stevilko.
 * Izbran zavihek ostane moder, znacka pa se obrne - bela podlaga in
 * rdeca stevilka. (19_7512ec86.js, tabNav)
 */
.fi-tabs .fi-tabs-item:has(.fi-badge) {
    border-color: var(--hrm-status-error);
    color: var(--hrm-status-error-text);
}

.fi-tabs .fi-tabs-item:has(.fi-badge) .fi-tabs-item-label,
.fi-tabs .fi-tabs-item:has(.fi-badge) .fi-icon {
    color: var(--hrm-status-error-text);
}

/* Modra izbranega zavihka premaga rdeco - enako kot v prototipu. */
.fi-tabs .fi-tabs-item.fi-active:has(.fi-badge),
.fi-tabs .fi-tabs-item[aria-selected='true']:has(.fi-badge) {
    border-color: var(--hrm-blue-500);
    color: #fff;
}

.fi-tabs .fi-tabs-item.fi-active:has(.fi-badge) .fi-tabs-item-label,
.fi-tabs .fi-tabs-item.fi-active:has(.fi-badge) .fi-icon,
.fi-tabs .fi-tabs-item[aria-selected='true']:has(.fi-badge) .fi-tabs-item-label,
.fi-tabs .fi-tabs-item[aria-selected='true']:has(.fi-badge) .fi-icon {
    color: #fff;
}

/* Znacka: okrogla, 20 px, kot .pill v prototipu. */
.fi-tabs .fi-tabs-item .fi-badge {
    background: var(--hrm-status-error);
    color: #fff;
    border: 0;
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 1px 3px var(--hrm-senca-znacka);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/*
 * Znacka ima dve notranji ovojnici s svojim robom in visino vrstice,
 * zaradi cesar stevilka ni na sredini podlage. Enako kot pri znackah v
 * glavnem meniju ju izniclimo in poravnamo na sredino.
 */
.fi-tabs .fi-tabs-item .fi-badge .fi-badge-label,
.fi-tabs .fi-tabs-item .fi-badge .fi-badge-label-ctn {
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    line-height: 1;
    height: 100%;
}

.fi-tabs .fi-tabs-item.fi-active .fi-badge,
.fi-tabs .fi-tabs-item[aria-selected='true'] .fi-badge {
    background: #fff;
}

.fi-tabs .fi-tabs-item.fi-active .fi-badge .fi-badge-label,
.fi-tabs .fi-tabs-item.fi-active .fi-badge .fi-badge-label-ctn,
.fi-tabs .fi-tabs-item[aria-selected='true'] .fi-badge .fi-badge-label,
.fi-tabs .fi-tabs-item[aria-selected='true'] .fi-badge .fi-badge-label-ctn {
    color: var(--hrm-red-accent);
}

.fi-tabs .fi-tabs-item-label {
    white-space: nowrap;
}

/* --- Profil zaposlenega: dobesedno po prototipu --- */
.hrm-profil {
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: var(--hrm-radius-lg);
    box-shadow: var(--hrm-shadow-sm);
    overflow: hidden;
}

.hrm-profil-glava {
    background: var(--hrm-blue-500);
    color: #fff;
    text-align: center;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: var(--hrm-font-display);
    /* Naslov vedno v eni vrstici. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hrm-profil-telo {
    padding: 22px 20px;
}

/* Avatar: 118 px, preliv blue-100 -> blue-200, bel rob 4 px. */
.hrm-profil-avatar {
    width: 118px;
    height: 118px;
    border-radius: 50%;
    margin: 0 auto 14px;
    background: linear-gradient(135deg, var(--hrm-blue-100), var(--hrm-blue-200));
    color: var(--hrm-blue-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 40px;
    font-family: var(--hrm-font-display);
    border: 4px solid var(--hrm-surface-card);
    box-shadow: var(--hrm-shadow-md);
}

.hrm-profil-ime {
    margin: 0;
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    color: var(--hrm-text-strong);
    font-family: var(--hrm-font-display);
    letter-spacing: -0.02em;
}

.hrm-profil-mesto {
    text-align: center;
    color: var(--hrm-text-muted);
    font-size: 14px;
    margin: 2px 0 16px;
}

.hrm-profil-locnica {
    border-top: 1px solid var(--hrm-border-subtle);
    padding-top: 12px;
}

/*
 * Vsak podatek kot "oznaka: vrednost" v isti vrstici. Nic se ne skrajsuje -
 * kar ne gre v eno vrstico, se prelije v naslednjo, tako da je vsaka
 * vrednost v celoti vidna.
 */
.hrm-vrstica {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 5px 0;
    font-size: 13px;
    color: var(--hrm-text-body);
}

.hrm-vrstica > span {
    min-width: 0;
    flex: 1 1 auto;
    word-break: normal;
    overflow-wrap: break-word;
}

.hrm-vrstica b {
    color: var(--hrm-text-strong);
    font-weight: 600;
}

.hrm-oznaka {
    color: var(--hrm-text-subtle);
}

.hrm-ikona {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--hrm-blue-text);
}

/* --- Postavitev strani zaposlenega --- */
/*
 * Kot v prototipu: profil ima fiksno sirino, mapa dobi ves preostali
 * prostor. Zato se mapa raztegne cez celotno prazno povrsino desno.
 */
/*
 * Pozor: razred pristane na ovojnici, prava mreza je njen otrok .fi-grid.
 * Ciljati je treba otroka, sicer se stolpca ne razporedita.
 */
/* Dimenzije iz prototipa: vsebina do 1160 px, profil 308 px, razmik 24 px. */
.hrm-postavitev {
    width: 100%;
}

.hrm-postavitev > .fi-grid {
    display: grid !important;
    /*
     * Profil ima svojo sirino kot v prototipu, mapa pa dobi ves preostali
     * prostor - prej je bila postavitev omejena na 1160 px in je na sirokem
     * zaslonu desno ostal prazen pas.
     */
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) !important;
    gap: 24px;
    align-items: start;
    justify-items: stretch;
    width: 100%;
}

/* Filament otrokom nastavi lasten grid-column; tu ga prepisemo. */
.hrm-postavitev > .fi-grid > * {
    grid-column: auto !important;
    min-width: 0;
    width: 100%;
}

/* Vsebina mape se mora raztegniti do desnega roba stolpca. */
.hrm-postavitev > .fi-grid > *:last-child .fi-grid,
.hrm-postavitev > .fi-grid > *:last-child .fi-sc-component,
.hrm-mapa,
.hrm-dok {
    width: 100%;
}

/* Sele na tablicah in manj se zlozita eden pod drugega. */
@media (max-width: 1023px) {
    .hrm-postavitev > .fi-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* --- Naslov mape --- */
.hrm-mapa-uvod {
    margin-bottom: 0;
}

/*
 * Filament med naslov in zavihke vrine svoj razmik mreze (2 rem). Skupaj
 * z mojimi robovi je nastala velika praznina, zato ga tu skrcim.
 */
.hrm-mapa-stolpec > .fi-grid {
    row-gap: 12px !important;
}

.hrm-mapa-naslov {
    font-family: var(--hrm-font-display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--hrm-text-strong);
    margin: 0;
}

.hrm-mapa-podnaslov {
    margin: 3px 0 0;
    color: var(--hrm-text-muted);
    font-size: 14px;
}

/* --- Dokumenti v zavihku: po vzoru prototipa --- */
.hrm-dok {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Orodna vrstica: iskanje levo, gumb desno (kot v prototipu). */
.hrm-dok-orodja {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 2px;
}

.hrm-dok-razmik {
    flex: 1;
}

.hrm-polje {
    max-width: 320px;
    width: 100%;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--hrm-border-default);
    border-radius: var(--hrm-radius-sm);
    background: var(--hrm-surface-card);
    font-size: 14px;
    color: var(--hrm-text-body);
    font-family: inherit;
}

.hrm-polje:focus {
    outline: none;
    border-color: var(--hrm-blue-400);
    box-shadow: 0 0 0 3px var(--hrm-fokus-obroc-svetel);
}

/* Velikost datoteke in stevec nalozenih v povzetku zavihka. */
.hrm-dok-velikost {
    color: var(--hrm-text-subtle);
}

.hrm-dok-nalozenih {
    font-size: 12px;
    color: var(--hrm-text-muted);
    white-space: nowrap;
}

/* Gumb v barvi poudarka (RAL 5010), kot .btn-accent v prototipu. */
.hrm-gumb-poudarek {
    background: var(--hrm-ral-5010);
    color: #fff;
    height: 40px;
}

/* Povzetek z levim robom v primarni barvi. */
.hrm-dok-povzetek {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-left: 3px solid var(--hrm-blue-500);
    border-radius: var(--hrm-radius-md);
    box-shadow: var(--hrm-shadow-xs);
}

.hrm-dok-povzetek-naslov {
    flex: 1;
    font-weight: 700;
    color: var(--hrm-text-strong);
}

.hrm-dok-stevec {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--hrm-blue-50);
    color: var(--hrm-blue-700);
    font-size: 12px;
    font-weight: 800;
}

.hrm-dok-ikona-velika {
    width: 20px;
    height: 20px;
    color: var(--hrm-blue-text);
    flex-shrink: 0;
}

/*
 * Vrstica dokumenta je kartica v eni vrstici: ikona, besedni podatki,
 * nato gumbi ob desnem robu. Brez ovijanja - gumbi nikoli ne padejo pod
 * besedilo.
 */
.hrm-dok-vrstica {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    padding: 14px 16px;
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: var(--hrm-radius-md);
    box-shadow: var(--hrm-shadow-sm);
}

.hrm-dok-ikona {
    width: 20px;
    height: 20px;
    color: var(--hrm-blue-text);
    flex-shrink: 0;
}

/* Besedni podatki zasedejo prostor do gumbov; predolg naziv se prelomi. */
.hrm-dok-telo {
    flex: 1 1 auto;
    min-width: 0;
}

.hrm-dok-naziv {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-weight: 600;
    color: var(--hrm-text-strong);
}

.hrm-dok-znacka {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.hrm-dok-meta {
    font-size: 12px;
    color: var(--hrm-text-muted);
    margin-top: 2px;
}

.hrm-dok-datoteka {
    color: var(--hrm-text-body);
}

.hrm-dok-opomba {
    margin-top: 6px;
    background: var(--hrm-green-50);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 12px;
    color: var(--hrm-green-text);
}

.hrm-dok-prazno {
    padding: 18px;
    color: var(--hrm-text-muted);
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: var(--hrm-radius-md);
}

/* Gumbi po vzoru .btn iz prototipa; nekateri so povezave (prenos). */
.hrm-gumb {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}

.hrm-gumb:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.hrm-gumb-primaren {
    background: var(--hrm-blue-500);
    color: #fff;
}

.hrm-gumb-zelen {
    background: var(--hrm-green-500);
    color: #fff;
}

/* Prazni gumbi - .btn-ghost iz prototipa: bel, siv rob, crn napis. */
.hrm-gumb-prazen {
    background: var(--hrm-surface-card);
    border-color: var(--hrm-border-default);
    color: var(--hrm-text-strong);
    padding: 0 10px;
}

.hrm-gumb-prazen:hover {
    background: var(--hrm-surface-hover);
}

.hrm-gumb-rdec {
    color: var(--hrm-red-accent);
}

.hrm-gumb-ikona {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* Vsi gumbi skupaj desno od besednih podatkov, v isti vrstici. */
.hrm-dok-gumbi {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}

.hrm-gumb {
    white-space: nowrap;
}

/* --- Digitalna mapa ni kartica --- */
/* Zavihki stojijo neposredno na strani, brez roba in sence. */
.hrm-mapa,
.hrm-mapa > .fi-sc-tabs,
.hrm-mapa .fi-sc-tabs-tab {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
}

/*
 * Filament odprtemu zavihku doda 24 px odmika nad vsebino; prototip ima
 * pod locnico samo 16 px, ki jih nosi ze trak zavihkov.
 */
.hrm-mapa .fi-sc-tabs-tab.fi-active {
    margin-top: 0;
}

/*
 * Vsebina zavihka mora biti poravnana z naslovom in trakom zavihkov.
 * Filament panelu doda vodoravni rob, zaradi cesar so bile kartice
 * datotek zamaknjene v desno.
 */
.hrm-mapa .fi-sc-tabs-tab {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.hrm-vrstica-aktiven {
    font-weight: 700;
    color: var(--hrm-green-accent);
    padding-top: 7px;
}

.hrm-vrstica-neaktiven {
    font-weight: 700;
    color: var(--hrm-text-muted);
    padding-top: 7px;
}

.hrm-ikona-stanje {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* Placa: vpadljiv levi rob v RAL 5010, kot v prototipu. */
.hrm-placa {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--hrm-surface-sunken);
    border: 1px solid var(--hrm-border-subtle);
    border-left: 3px solid var(--hrm-ral-5010);
    border-radius: var(--hrm-radius-sm);
}

.hrm-placa-glava {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hrm-info-text);
    margin-bottom: 6px;
}

.hrm-ikona-placa {
    width: 14px;
    height: 14px;
    color: var(--hrm-info-text);
}

.hrm-placa-znesek {
    font-size: 13px;
    color: var(--hrm-text-body);
}

.hrm-placa-znesek b {
    color: var(--hrm-text-strong);
}

.hrm-placa-opomba {
    font-size: 10.5px;
    color: var(--hrm-text-subtle);
    margin-top: 5px;
    line-height: 1.45;
}

/* --- Kartica letnega dopusta (modra, levi rob v primarni barvi) --- */
.hrm-dopust {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--hrm-blue-50);
    border: 1px solid var(--hrm-blue-100);
    border-left: 3px solid var(--hrm-blue-500);
    border-radius: var(--hrm-radius-sm);
}

.hrm-dopust-glava {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hrm-blue-text);
    margin-bottom: 7px;
}

.hrm-ikona-dopust {
    width: 14px;
    height: 14px;
    color: var(--hrm-blue-text);
}

.hrm-dopust-vrh {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.hrm-dopust-stevilka {
    font-size: 22px;
    font-weight: 800;
    font-family: var(--hrm-font-display);
    color: var(--hrm-text-strong);
}

.hrm-dopust-enota {
    font-size: 12px;
    color: var(--hrm-text-muted);
}

.hrm-dopust-razclemba {
    display: flex;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--hrm-text-muted);
}

.hrm-dopust-razclemba b {
    color: var(--hrm-text-strong);
}

.hrm-dopust-navoljo {
    color: var(--hrm-green-accent) !important;
}

.hrm-dopust-opomba {
    font-size: 10.5px;
    color: var(--hrm-text-subtle);
    margin-top: 6px;
    line-height: 1.45;
}

/* --- Gumbi pod profilom --- */
.hrm-profil-gumbi {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 18px;
}

.hrm-profil-gumbi-par {
    display: flex;
    gap: 9px;
}

.hrm-profil-gumbi-par > * {
    flex: 1;
}

/* Napis in ikona sta crna; barvo nosi ze .hrm-gumb-prazen. */
.hrm-profil-gumbi-par .hrm-gumb-prazen .hrm-gumb-ikona {
    color: inherit;
}

/* Gumb cez celo sirino s sredinsko vsebino. */
.hrm-gumb-poln {
    width: 100%;
    justify-content: center;
    height: 40px;
    text-decoration: none;
}

/* --- Sklop Placa: po vzoru prototipa --- */
/*
 * Izvirnik: pogreznjeno ozadje, levi rob 4 px v barvi poudarka (RAL 5010),
 * naslov z velikimi crkami.
 */
/* --- Kompaktni sklopi obrazca --- */
/*
 * Osnovni podatki in Podatki firma imata veliko polj. Privzeti razmiki
 * Filamenta jih raztegnejo cez cel zaslon, zato jih tu skrcimo.
 */
.hrm-kompaktno .fi-section-content,
.hrm-kompaktno .fi-fo-component-ctn,
.hrm-kompaktno .fi-grid {
    row-gap: 0.9rem !important;
}

/* Nizja polja. */
.hrm-kompaktno .fi-input-wrp .fi-input,
.hrm-kompaktno .fi-input-wrp .fi-fo-select-input,
.hrm-kompaktno .fi-fo-date-time-picker input {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    font-size: 0.875rem;
}

/* Razmik oznaka-polje je enoten in urejen v hrm-tema.css; tu ga ne podvajamo. */
.hrm-kompaktno .fi-fo-field-label-col,
.hrm-kompaktno .fi-fo-field-label-ctn {
    margin-bottom: 0;
    padding-bottom: 0;
}

/*
 * Skupine (Fieldset) so imele svoj okvir in notranji rob, kar je vsako
 * skupino spremenilo v kartico v kartici. Ostane le oznaka.
 */
.hrm-kompaktno .fi-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
}

.hrm-kompaktno .fi-fieldset-label,
.hrm-kompaktno .fi-fieldset legend {
    padding: 0;
    margin-bottom: 5px;
}

/* --- Kartica Placa: dobesedno po prototipu --- */
/*
 * Izvirnik: .card s pogreznjenim ozadjem, levim robom 4 px v RAL 5010
 * in notranjim robom 16 px.
 */
/*
 * Pozor: razred pristane na ovojnici, prava kartica je <section class="fi-section">
 * znotraj nje. Ovojnica mora ostati prazna, sicer se okrog kartice pokaze
 * njeno ozadje kot prazen pas.
 */
.hrm-sekcija-placa {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.hrm-sekcija-placa > .fi-section {
    background: var(--hrm-surface-sunken) !important;
    border-left: 4px solid var(--hrm-ral-5010) !important;
    box-shadow: var(--hrm-shadow-sm) !important;
}

/* Notranji rob 16 px, kot v prototipu - le enkrat, ne dvojno. */
.hrm-sekcija-placa .fi-section-content-ctn {
    padding: 0 !important;
}

.hrm-sekcija-placa .fi-section-content {
    padding: 16px !important;
    /*
     * Filament med glavo in polji vrine svoj razmik mreze. Skupaj z robom
     * pod naslovom je bilo praznine prevec, zato ga odstranimo - razmik
     * doloca samo margin-bottom glave (12 px, kot v prototipu).
     */
    row-gap: 0 !important;
}

/* Filamentova glava sekcije je prazna - uporabljamo lastno. */
.hrm-sekcija-placa .fi-section-header,
.hrm-sekcija-placa .fi-sc-section-header {
    display: none;
}

.hrm-placa-vrh {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.hrm-placa-vrh-ikona {
    width: 16px;
    height: 16px;
    color: var(--hrm-info-text);
    flex-shrink: 0;
}

.hrm-placa-vrh-naslov {
    font-size: 14px;
    font-weight: 800;
    color: var(--hrm-text-strong);
    font-family: var(--hrm-font-display);
    letter-spacing: 0.02em;
}

/* Pilula v barvi poudarka, kot HRM.pill(..., 'accent'). */
.hrm-placa-vrh-pilula {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: var(--hrm-blue-50);
    color: var(--hrm-info-text);
}

/* --- Sklop Otroci: dobesedno po prototipu --- */
.hrm-otroci {
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: var(--hrm-radius-lg);
    box-shadow: var(--hrm-shadow-sm);
    padding: 13px 15px;
}

.hrm-otroci-glava {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
    flex-wrap: wrap;
}

.hrm-otroci-ikona {
    width: 15px;
    height: 15px;
    color: var(--hrm-blue-text);
    flex-shrink: 0;
}

.hrm-otroci-naslov {
    flex: 1;
    min-width: 130px;
    font-size: 12px;
    font-weight: 700;
    color: var(--hrm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hrm-otroci-opomba {
    font-size: 11px;
    color: var(--hrm-text-muted);
}

/* Vrstica otroka; modra podlaga, ce se steje pri odmeri dopusta. */
.hrm-otrok {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border: 1px solid var(--hrm-border-subtle);
    border-radius: 8px;
    margin-bottom: 6px;
    background: var(--hrm-surface-card);
}

.hrm-otrok-steje {
    background: var(--hrm-blue-50);
}

.hrm-otrok-ikona {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--hrm-text-subtle);
}

.hrm-otrok-steje .hrm-otrok-ikona {
    color: var(--hrm-blue-700);
}

.hrm-otrok-ime {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--hrm-text-strong);
}

.hrm-otrok-datum {
    font-size: 11.5px;
    color: var(--hrm-text-muted);
    white-space: nowrap;
}

.hrm-otrok-znacka {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: var(--hrm-gray-100);
    color: var(--hrm-text-secondary);
}

.hrm-otrok-znacka-steje {
    background: var(--hrm-blue-100);
    color: var(--hrm-blue-700);
}

.hrm-otrok-brisi {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
}

.hrm-otrok-ikona-brisi {
    width: 13px;
    height: 13px;
    color: var(--hrm-red-accent);
}

.hrm-otroci-prazno {
    font-size: 12px;
    color: var(--hrm-text-subtle);
}

.hrm-otroci-povzetek {
    font-size: 11.5px;
    color: var(--hrm-text-muted);
    margin-top: 4px;
}

/* Vrstica za dodajanje: ime, datum, gumb na desnem robu. */
.hrm-otroci-dodaj {
    display: grid;
    grid-template-columns: 1fr 150px auto;
    gap: 9px;
    align-items: end;
    margin-top: 9px;
}

.hrm-otroci-lbl {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--hrm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
}

.hrm-polje-nizko {
    height: 32px;
    font-size: 12.5px;
}

.hrm-gumb-nizek {
    height: 32px;
    font-size: 12px;
}

@media (max-width: 640px) {
    .hrm-otroci-dodaj {
        grid-template-columns: 1fr;
    }
}

/* --- Kljukica stanja pri sifrantih --- */
.hrm-sifrant-kljukica {
    font-size: 20px;
    line-height: 1;
    color: var(--hrm-blue-text);
}

/* --- Berljivost podatkov v ozjih stolpcih --- */
/*
 * Brez tega se v ozkem stolpcu besede lomijo sredi (EKSI/ST, Logis/tika).
 * Dolg neprekinjen niz se se vedno prelomi, navadne besede pa ne.
 */
.fi-in-entry-label,
.fi-in-entry-content-col {
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
}

/* --- Pomanjkljive datoteke: dobesedno po prototipu --- */
/*
 * Izvirnik je HRM.renderPendingDocs (19_7512ec86.js): povzetek s 4 px
 * levim robom v RAL 5010, nato kartica na naziv dokumenta z vodoravnim
 * modrim prelivom, merilnikom napredka in tabelo zaposlenih.
 */
.hrm-pd-povzetek {
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-left: 4px solid var(--hrm-ral-5010);
    border-radius: var(--hrm-radius-md);
    box-shadow: var(--hrm-shadow-sm);
    padding: 16px 20px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.hrm-pd-povzetek-oznaka {
    font-size: 12px;
    color: var(--hrm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hrm-pd-povzetek-stevilo {
    font-family: var(--hrm-font-display);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--hrm-info-text);
}

.hrm-pd-povzetek-razclenitev {
    font-size: 13px;
    color: var(--hrm-text-body);
}

/* Gumb je .btn .btn-ghost iz prototipa. */
.hrm-pd-gumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: 12px;
    border: 1px solid var(--hrm-border-default);
    background: var(--hrm-surface-card);
    color: var(--hrm-text-body);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
}

.hrm-pd-gumb:hover {
    background: var(--hrm-surface-hover);
}

.hrm-pd-gumb-vse {
    margin-left: auto;
}

.hrm-pd-gumb-vrstica {
    height: 30px;
    padding: 0 12px;
    font-size: 12px;
    gap: 6px;
}

.hrm-pd-gumb-ikona {
    width: 16px;
    height: 16px;
}

.hrm-pd-gumb-vrstica .hrm-pd-gumb-ikona {
    width: 14px;
    height: 14px;
}

.hrm-pd-kartica {
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: var(--hrm-radius-md);
    box-shadow: var(--hrm-shadow-sm);
    overflow: hidden;
    margin-bottom: 16px;
}

.hrm-pd-glava {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 13px 16px;
    background: linear-gradient(90deg, var(--hrm-blue-500), var(--hrm-ral-5010));
    color: #fff;
}

.hrm-pd-naslov {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 800;
}

.hrm-pd-naslov-ikona {
    width: 17px;
    height: 17px;
    color: #fff;
}

.hrm-pd-napredek {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}

.hrm-pd-napredek-besedilo {
    opacity: 0.9;
}

.hrm-pd-tir {
    width: 120px;
    height: 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.25);
    overflow: hidden;
}

.hrm-pd-tir-polnilo {
    display: block;
    height: 100%;
    background: #fff;
}

.hrm-pd-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.hrm-pd-tabela thead tr {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hrm-text-muted);
    border-bottom: 1px solid var(--hrm-border-subtle);
}

.hrm-pd-tabela th {
    padding: 9px 12px;
    font-weight: 700;
}

.hrm-pd-tabela td {
    padding: 10px 12px;
}

.hrm-pd-levo {
    text-align: left;
}

.hrm-pd-sredina {
    text-align: center;
}

.hrm-pd-desno {
    text-align: right;
}

.hrm-pd-vrstica {
    border-bottom: 1px solid var(--hrm-border-subtle);
    cursor: pointer;
    transition: background 0.15s;
}

.hrm-pd-vrstica:hover {
    background: var(--hrm-surface-hover);
}

.hrm-pd-oseba {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hrm-pd-zacetnice {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: var(--hrm-blue-100);
    color: var(--hrm-blue-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 11px;
}

.hrm-pd-ime {
    font-weight: 600;
    color: var(--hrm-text-strong);
    font-size: 13px;
}

.hrm-pd-enota {
    font-size: 11px;
    color: var(--hrm-text-muted);
}

.hrm-pd-cakanje {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

.hrm-pd-cakanje-ikona {
    width: 14px;
    height: 14px;
}

.hrm-pd-ton-nevtralno {
    color: var(--hrm-text-muted);
}

.hrm-pd-ton-poudarjeno {
    color: var(--hrm-info-text);
}

.hrm-pd-ton-kriticno {
    color: var(--hrm-red-accent);
}

/* Pilula je .pill iz prototipa; barve so iz HRM.pill. */
.hrm-pd-pilula {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.hrm-pd-zelena {
    background: var(--hrm-green-50);
    color: var(--hrm-green-text);
}

.hrm-pd-jantar {
    background: var(--hrm-amber-50);
    color: var(--hrm-amber-text);
}

.hrm-pd-rdeca {
    background: var(--hrm-red-50);
    color: var(--hrm-status-error-text);
}

.hrm-pd-crtica {
    color: var(--hrm-border-strong);
}

.hrm-pd-prazno {
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: var(--hrm-radius-md);
    box-shadow: var(--hrm-shadow-sm);
    padding: 40px;
    text-align: center;
    max-width: 560px;
}

.hrm-pd-prazno-ikona {
    width: 34px;
    height: 34px;
    color: var(--hrm-green-accent);
    margin: 0 auto 10px;
}

.hrm-pd-prazno h3 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--hrm-text-strong);
}

.hrm-pd-prazno p {
    margin: 0;
    color: var(--hrm-text-muted);
    font-size: 14px;
}

.hrm-pd-poudarek {
    background: var(--hrm-tint-info);
    color: var(--hrm-info-text);
}

/* --- Zavihek Interni akti (HRM.tabAkti iz prototipa) --- */
/*
 * Zavihek je razdeljen na kartice: rdeca za zapise, ki cakajo odziv, in
 * dve modri za seznanitve ter soglasja. Mere so prevzete iz izvirnika.
 */
/*
 * Gumb za dodajanje stoji tik pod locnico zavihkov; prototip ima pod njim
 * 14 px, nad njim pa nic.
 */
.hrm-akti-orodja {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.hrm-akti-blok {
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: var(--hrm-radius-md);
    box-shadow: var(--hrm-shadow-sm);
    padding: 16px 18px;
    margin-bottom: 14px;
}

/* Blok z zapisi, ki cakajo: 2 px rdec rob na bledo rdeci podlagi. */
.hrm-akti-caka {
    border: 2px solid var(--hrm-status-error);
    background: var(--hrm-red-50);
}

.hrm-akti-glava {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.hrm-akti-glava h3 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--hrm-text-strong);
}

.hrm-akti-caka .hrm-akti-glava h3,
.hrm-akti-caka .hrm-akti-opis {
    color: var(--hrm-status-error-text);
}

.hrm-akti-ikona {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: var(--hrm-status-error-text);
}

.hrm-akti-ikona-modra {
    color: var(--hrm-blue-text);
}

/* Stevec ob naslovu razdelka: siva pilula, v rdecem bloku rdeca. */
.hrm-akti-stevec {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--hrm-gray-100);
    color: var(--hrm-text-muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.hrm-akti-stevec-rdec {
    background: var(--hrm-status-error);
    color: #fff;
    font-size: 11.5px;
    padding: 0 6px;
}

.hrm-akti-opis {
    font-size: 11.5px;
    color: var(--hrm-text-muted);
    line-height: 1.5;
    margin-bottom: 10px;
}

.hrm-akti-prazno {
    font-size: 12.5px;
    color: var(--hrm-text-subtle);
    padding: 6px 0;
}

/* --- Vrstica zapisa --- */
.hrm-akt-vrstica {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 0;
    border-bottom: 1px solid var(--hrm-border-subtle);
}

.hrm-akt-vrstica:last-child {
    border-bottom: 0;
}

.hrm-akt-ikona {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--hrm-text-subtle);
}

.hrm-akt-telo {
    flex: 1 1 200px;
    min-width: 150px;
}

.hrm-akt-naziv {
    font-weight: 600;
    color: var(--hrm-text-strong);
    font-size: 13.5px;
}

.hrm-akt-veljavnost {
    font-size: 11px;
    color: var(--hrm-text-muted);
}

/* --- Zavihek Izobrazevanja (HRM.tabEdu iz prototipa) --- */
.hrm-izo-orodja {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

/* Stevec prosenj je v prototipu gumb, ki le izpise obvestilo. */
.hrm-izo-cakajoce {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--hrm-border-default);
    background: var(--hrm-surface-card);
    color: var(--hrm-text-body);
    font-size: 13px;
    font-weight: 600;
}

/* Modro pojasnilo nad seznamom. */
.hrm-izo-pojasnilo {
    background: var(--hrm-blue-50);
    border: 1px solid var(--hrm-blue-100);
    border-radius: var(--hrm-radius-md);
    padding: 12px 14px;
    margin-bottom: 14px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--hrm-blue-700);
}

.hrm-izo-seznam {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hrm-izo-kartica {
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: var(--hrm-radius-md);
    box-shadow: var(--hrm-shadow-sm);
    padding: 14px 16px;
}

/* Izobrazevanje z zamudo dobi levi rob v barvi poudarka. */
.hrm-izo-zamuja {
    border-left: 3px solid var(--hrm-ral-5010);
}

.hrm-izo-glava {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.hrm-izo-ikona {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--hrm-blue-text);
}

.hrm-izo-telo {
    flex: 1 1 200px;
    min-width: 150px;
}

.hrm-izo-naziv {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-weight: 600;
    color: var(--hrm-text-strong);
}

.hrm-izo-meta {
    font-size: 12px;
    color: var(--hrm-text-muted);
}

/* Podrobnosti so zamaknjene pod ikono, kot v prototipu (margin-left 32px). */
.hrm-izo-podrobnosti {
    margin-left: 32px;
    margin-top: 8px;
}

.hrm-izo-razlog {
    font-size: 12px;
    color: var(--hrm-text-muted);
    margin-top: 4px;
}

.hrm-izo-povezava {
    font-size: 12px;
    margin-top: 3px;
}

.hrm-izo-povezava a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}

/* Sklopa "Podrobnosti izvedbe" in "Zakljucek" locuje crtkana crta. */
.hrm-izo-sklop {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px dashed var(--hrm-border-subtle);
    font-size: 12.5px;
    color: var(--hrm-text-body);
    line-height: 1.7;
}

.hrm-izo-sklop-naslov {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hrm-blue-text);
    margin-bottom: 2px;
}

.hrm-izo-sklop-zelen {
    color: var(--hrm-green-accent);
}

.hrm-izo-posebnosti {
    color: var(--hrm-text-muted);
}

/*
 * Priloga izobrazevanja: 12 px prigusen napis z modro ikono dokumenta
 * (v prototipu ICON('file',12,'var(--color-primary)')).
 */
.hrm-izo-datoteka {
    font-size: 12px;
    color: var(--hrm-text-muted);
    margin-top: 3px;
}

/*
 * Ime datoteke je povezava za prenos, a mora izgledati kot navadno
 * besedilo - prototip datoteke ne ponuja v prenos, mi pa je ne skrivamo.
 */
.hrm-izo-ime-datoteke {
    color: inherit;
    text-decoration: none;
}

.hrm-izo-ime-datoteke:hover {
    text-decoration: underline;
}

.hrm-izo-drobna-ikona {
    width: 12px;
    height: 12px;
    display: inline-block;
    vertical-align: -1px;
    color: var(--hrm-text-muted);
}

.hrm-izo-ikona-modra {
    color: var(--hrm-blue-text);
}

.hrm-izo-ikona-zelena {
    color: var(--hrm-green-accent);
}

.hrm-izo-prazno {
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: var(--hrm-radius-md);
    box-shadow: var(--hrm-shadow-sm);
    padding: 18px;
    color: var(--hrm-text-muted);
}

/* Manjkajoca tona pilul, ki ju uporablja ta zavihek. */
.hrm-pd-modra {
    background: var(--hrm-blue-50);
    color: var(--hrm-blue-700);
}

.hrm-pd-siva {
    background: var(--hrm-gray-100);
    color: var(--hrm-text-secondary);
}

/* --- Okno "Dodaj zapis v Drugo" (HRM.addOtherDoc) --- */
.hrm-okno-drugo {
    max-width: 500px;
}

/*
 * Vsaka akcija je v prototipu svoja kartica z robom, ne gola kljukica.
 */
.hrm-okno-drugo .hrm-akcija {
    padding: 11px 13px;
    border: 1px solid var(--hrm-border-subtle);
    border-radius: 10px;
    cursor: pointer;
}

.hrm-okno-drugo .hrm-akcija .fi-fo-field-label {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--hrm-text-strong);
}

.hrm-okno-drugo .hrm-akcija .fi-fo-field-wrp-hint,
.hrm-okno-drugo .hrm-akcija .fi-fo-field-wrp-helper-text {
    font-size: 12px;
    color: var(--hrm-text-muted);
}

/* --- Zavihek Drugo (HRM.tabDrugo iz prototipa) --- */
/* Gumb za vnos stoji ob desnem robu. */
.hrm-drg-orodja {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}

.hrm-drg-razdelek {
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: var(--hrm-radius-md);
    box-shadow: var(--hrm-shadow-sm);
    padding: 18px;
    margin-bottom: 14px;
}

.hrm-drg-razdelek:last-child {
    margin-bottom: 0;
}

.hrm-drg-glava {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.hrm-drg-glava h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--hrm-text-strong);
}

.hrm-drg-ikona {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--hrm-blue-text);
}

.hrm-drg-telo {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hrm-drg-vrstica {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 0;
    border-bottom: 1px solid var(--hrm-border-subtle);
}

.hrm-drg-vrstica:last-child {
    border-bottom: 0;
}

.hrm-drg-vrstica-ikona {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--hrm-text-subtle);
}

.hrm-drg-naziv {
    flex: 1 1 200px;
    min-width: 150px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--hrm-text-strong);
}

.hrm-drg-prazno {
    font-size: 13px;
    color: var(--hrm-text-subtle);
    padding: 6px 0;
}

/* --- Zavihek Predlogi in izboljsave (HRM.tabPredlogi) --- */
.hrm-prd-kartica {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    padding: 13px 15px;
    margin-bottom: 9px;
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: var(--hrm-radius-md);
    box-shadow: var(--hrm-shadow-sm);
}

/* Levi rob pove izid obravnave. */
.hrm-prd-rob-moder {
    border-left: 4px solid var(--hrm-blue-500);
}

.hrm-prd-rob-zelen {
    border-left: 4px solid var(--hrm-green-500);
}

.hrm-prd-rob-rdec {
    border-left: 4px solid var(--hrm-status-error);
}

.hrm-prd-ikona {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--hrm-blue-text);
}

.hrm-prd-telo {
    flex: 1;
    min-width: 170px;
}

.hrm-prd-naslov {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--hrm-text-strong);
}

.hrm-prd-meta {
    font-size: 11.5px;
    color: var(--hrm-text-muted);
    margin-top: 1px;
}

.hrm-prd-odstavek {
    font-size: 12.5px;
    color: var(--hrm-text-body);
    margin-top: 3px;
    line-height: 1.55;
}

.hrm-prd-priloga {
    font-size: 11.5px;
    color: var(--hrm-info-text);
    margin-top: 4px;
}

.hrm-prd-podpis {
    font-size: 11px;
    color: var(--hrm-text-subtle);
    margin-top: 5px;
}

/* Odziv vodstva: zelen pas, ob zavrnitvi rdec. */
.hrm-prd-odziv {
    margin-top: 8px;
    padding: 8px 11px;
    border-radius: 8px;
    background: var(--hrm-green-50);
    color: var(--hrm-green-text);
    font-size: 12.5px;
    line-height: 1.5;
}

.hrm-prd-odziv-rdec {
    background: var(--hrm-red-50);
    color: var(--hrm-status-error-text);
}

.hrm-prd-odziv-podpis {
    font-size: 11px;
    margin-top: 3px;
    opacity: 0.85;
}

.hrm-okno-predlog {
    max-width: 660px;
}

/* --- Zavihek Pohvale in graje (HRM.tabNotes iz prototipa) --- */
.hrm-zap-kartice {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

/* Kartica s stevcem je hkrati filter; izbrana dobi 2 px rob in podlago. */
.hrm-zap-kartica {
    flex: 1;
    min-width: 150px;
    padding: 11px 13px;
    border: 1px solid var(--hrm-border-subtle);
    border-radius: 12px;
    background: var(--hrm-surface-card);
    cursor: pointer;
    text-align: left;
}

.hrm-zap-kartica-glava {
    display: flex;
    align-items: center;
    gap: 7px;
}

.hrm-zap-ikona {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.hrm-zap-naziv {
    flex: 1;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--hrm-text-muted);
}

.hrm-zap-stevilo {
    font-family: var(--hrm-font-display);
    font-size: 20px;
    font-weight: 800;
    margin-top: 3px;
}

/* Barve po vrsti zapisa; ista lestvica velja za kartico in levi rob. */
.hrm-zap-zelena .hrm-zap-ikona,
.hrm-zap-zelena .hrm-zap-stevilo {
    color: var(--hrm-green-text);
}

.hrm-zap-jantar .hrm-zap-ikona,
.hrm-zap-jantar .hrm-zap-stevilo {
    color: var(--hrm-amber-text-alt);
}

.hrm-zap-rdeca .hrm-zap-ikona,
.hrm-zap-rdeca .hrm-zap-stevilo {
    color: var(--hrm-status-error-text);
}

.hrm-zap-izbrana {
    border-width: 2px;
}

.hrm-zap-izbrana.hrm-zap-zelena {
    border-color: var(--hrm-green-text);
    background: var(--hrm-green-50);
}

.hrm-zap-izbrana.hrm-zap-jantar {
    border-color: var(--hrm-amber-text-alt);
    background: var(--hrm-tint-jantar-izbran);
}

.hrm-zap-izbrana.hrm-zap-rdeca {
    border-color: var(--hrm-status-error-text);
    background: var(--hrm-red-50);
}

/* Vrstica zapisa: kartica z levim robom v barvi vrste. */
.hrm-zap-vrstica {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    padding: 13px 15px;
    margin-bottom: 9px;
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: var(--hrm-radius-md);
    box-shadow: var(--hrm-shadow-sm);
}

.hrm-zap-vrstica.hrm-zap-zelena {
    border-left: 4px solid var(--hrm-green-text);
}

.hrm-zap-vrstica.hrm-zap-jantar {
    border-left: 4px solid var(--hrm-amber-text-alt);
}

.hrm-zap-vrstica.hrm-zap-rdeca {
    border-left: 4px solid var(--hrm-status-error-text);
}

.hrm-zap-vrstica-ikona {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin-top: 1px;
}

.hrm-zap-vrstica.hrm-zap-zelena .hrm-zap-vrstica-ikona {
    color: var(--hrm-green-text);
}

.hrm-zap-vrstica.hrm-zap-jantar .hrm-zap-vrstica-ikona {
    color: var(--hrm-amber-text-alt);
}

.hrm-zap-vrstica.hrm-zap-rdeca .hrm-zap-vrstica-ikona {
    color: var(--hrm-status-error-text);
}

.hrm-zap-telo {
    flex: 1;
    min-width: 170px;
}

.hrm-zap-naslov {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--hrm-text-strong);
}

.hrm-zap-opis {
    font-size: 12.5px;
    color: var(--hrm-text-body);
    margin-top: 3px;
    line-height: 1.55;
}

.hrm-zap-ukrep {
    font-size: 12px;
    font-weight: 600;
    margin-top: 5px;
}

.hrm-zap-vrstica.hrm-zap-zelena .hrm-zap-ukrep {
    color: var(--hrm-green-text);
}

.hrm-zap-vrstica.hrm-zap-jantar .hrm-zap-ukrep {
    color: var(--hrm-amber-text-alt);
}

.hrm-zap-vrstica.hrm-zap-rdeca .hrm-zap-ukrep {
    color: var(--hrm-status-error-text);
}

.hrm-zap-podpis {
    font-size: 11px;
    color: var(--hrm-text-subtle);
    margin-top: 5px;
}

.hrm-zap-obravnavano {
    color: var(--hrm-green-text);
    font-weight: 700;
}

/* --- Zavihek VZD (HRM.tabVzd iz prototipa) --- */
/* Vrstica pred iztekom oziroma po njem je rahlo podlozena. */
.hrm-vzd-poteka {
    background: var(--hrm-tint-jantar);
}

.hrm-vzd-potekla {
    background: var(--hrm-tint-rdeca);
}

.hrm-vzd-veljavnost {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--hrm-text-strong);
}

.hrm-vzd-rdeca {
    color: var(--hrm-red-accent);
}

.hrm-vzd-jantar {
    color: var(--hrm-amber-text);
}

.hrm-vzd-potrdilo {
    font-size: 12px;
    color: var(--hrm-text-muted);
}

.hrm-vzd-razpisano {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--hrm-blue-700);
    margin-top: 3px;
}

.hrm-vzd-drobna {
    width: 10px;
    height: 10px;
    display: inline-block;
    vertical-align: -1px;
}

/* Dejanja so v prototipu same ikone, brez okvirja. */
.hrm-vzd-gumbi {
    display: flex;
    gap: 2px;
    justify-content: flex-end;
}

.hrm-vzd-ikonski {
    background: none;
    border: 0;
    cursor: pointer;
    padding: 3px;
    line-height: 0;
}

.hrm-vzd-ikona-modra,
.hrm-vzd-ikona-siva,
.hrm-vzd-ikona-rdeca {
    width: 14px;
    height: 14px;
}

.hrm-vzd-ikona-modra {
    color: var(--hrm-blue-700);
}

.hrm-vzd-ikona-siva {
    color: var(--hrm-text-muted);
}

.hrm-vzd-ikona-rdeca {
    color: var(--hrm-red-accent);
}

/* --- Zavihek Zdravniski pregled (HRM.tabMed iz prototipa) --- */
.hrm-med-orodja {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

/* Razpisan termin: modra kartica z levim robom. */
.hrm-med-razpis {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 15px;
    margin-bottom: 12px;
    border: 1px solid var(--hrm-blue-100);
    border-left: 4px solid var(--hrm-blue-500);
    border-radius: var(--hrm-radius-md);
    background: var(--hrm-blue-50);
}

.hrm-med-razpis-ikona {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--hrm-blue-700);
}

.hrm-med-razpis-telo {
    flex: 1;
    min-width: 160px;
}

.hrm-med-razpis-naslov {
    font-size: 13px;
    font-weight: 800;
    color: var(--hrm-blue-700);
}

.hrm-med-razpis-vrstice {
    font-size: 12.5px;
    color: var(--hrm-blue-700);
    margin-top: 3px;
    line-height: 1.6;
}

.hrm-med-blago {
    opacity: 0.85;
}

.hrm-med-potekel {
    color: var(--hrm-red-accent);
    font-weight: 700;
}

.hrm-med-razpisal {
    font-size: 11px;
    color: var(--hrm-text-muted);
    margin-top: 4px;
}

.hrm-med-drobna-ikona {
    width: 12px;
    height: 12px;
    display: inline-block;
    vertical-align: -1px;
}

/* Opozorilo o izteku potrdila: 2 px rob v barvi opozorila. */
.hrm-med-opozorilo {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 15px;
    margin-bottom: 14px;
    border: 2px solid var(--hrm-amber-500);
    border-radius: var(--hrm-radius-md);
    background: var(--hrm-amber-50);
    font-size: 13px;
    font-weight: 700;
    color: var(--hrm-amber-text-strong);
}

.hrm-med-opozorilo-rdece {
    border-color: var(--hrm-status-error);
    background: var(--hrm-red-50);
    color: var(--hrm-status-error-text);
}

.hrm-med-opozorilo-ikona {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.hrm-med-kartica {
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: var(--hrm-radius-md);
    box-shadow: var(--hrm-shadow-sm);
    padding: 18px;
    margin-bottom: 14px;
}

.hrm-med-kartica-ozja {
    padding: 16px 18px;
    margin-bottom: 0;
}

.hrm-med-glava {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.hrm-med-glava-tesna {
    margin-bottom: 4px;
}

.hrm-med-glava h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--hrm-text-strong);
}

.hrm-med-naslov-manjsi {
    font-size: 14.5px;
}

.hrm-med-ikona {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--hrm-blue-text);
}

.hrm-med-mreza {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.hrm-med-mreza .hrm-ipd-oznaka {
    margin-bottom: 2px;
}

.hrm-med-preostanek {
    font-size: 11px;
    font-weight: 600;
    color: var(--hrm-text-muted);
}

.hrm-med-omejitve {
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--hrm-amber-50);
    font-size: 12.5px;
    color: var(--hrm-amber-text-strong);
}

.hrm-med-datoteka {
    margin-top: 10px;
    font-size: 12px;
    color: var(--hrm-info-text);
}

.hrm-med-pripis {
    color: var(--hrm-text-subtle);
}

/* Opomba o tem, da se izvidi ne nalagajo. */
.hrm-med-gdpr {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--hrm-surface-sunken);
    font-size: 11.5px;
    color: var(--hrm-text-muted);
}

.hrm-med-gdpr-ikona {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--hrm-info-text);
}

.hrm-med-opis {
    font-size: 11.5px;
    color: var(--hrm-text-muted);
    line-height: 1.5;
    margin-bottom: 10px;
}

/* Vrstica opombe. */
.hrm-med-opomba {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    flex-wrap: wrap;
    padding: 8px 0;
    border-bottom: 1px solid var(--hrm-border-subtle);
}

.hrm-med-opomba:last-child {
    border-bottom: 0;
}

.hrm-med-opomba-ikona {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--hrm-text-subtle);
}

.hrm-med-opomba-rdeca {
    color: var(--hrm-red-accent);
}

.hrm-med-opomba-telo {
    flex: 1 1 200px;
    min-width: 150px;
}

.hrm-med-opomba-besedilo {
    font-size: 12.5px;
    color: var(--hrm-text-body);
    line-height: 1.5;
}

.hrm-med-opomba-podpis {
    font-size: 11px;
    color: var(--hrm-text-subtle);
    margin-top: 2px;
}

.hrm-med-brisi {
    background: none;
    border: 0;
    cursor: pointer;
    padding: 2px;
}

.hrm-med-brisi-ikona {
    width: 13px;
    height: 13px;
    color: var(--hrm-red-accent);
}

.hrm-med-prazno {
    font-size: 12.5px;
    color: var(--hrm-text-subtle);
    padding: 6px 0;
}

/* --- Zavihek Oprema (HRM.tabEquipNew iz prototipa) --- */
.hrm-opr-opomba {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    font-size: 12.5px;
    color: var(--hrm-text-muted);
}

.hrm-opr-opomba-ikona {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--hrm-info-text);
}

.hrm-opr-servis {
    font-size: 12px;
    font-weight: 700;
    color: var(--hrm-blue-700);
}

.hrm-opr-garancija {
    font-size: 12px;
    font-weight: 700;
    color: var(--hrm-amber-text);
}

/* Podmeni sklopov opreme. */
.hrm-opr-podmeni {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.hrm-opr-sklop {
    height: 36px;
    font-size: 12.5px;
}

.hrm-opr-stevec {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 7px;
    margin-left: 2px;
    border-radius: 999px;
    background: var(--hrm-gray-100);
    font-size: 10.5px;
    font-weight: 800;
}

.hrm-gumb-primaren .hrm-opr-stevec {
    background: rgba(255, 255, 255, 0.25);
}

.hrm-opr-servis-znak {
    font-size: 10px;
    font-weight: 800;
    color: var(--hrm-blue-700);
}

.hrm-gumb-primaren .hrm-opr-servis-znak {
    color: #fff;
}

/* Kartica s tabelo; siroka tabela drsi znotraj nje. */
.hrm-opr-kartica {
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: var(--hrm-radius-md);
    box-shadow: var(--hrm-shadow-sm);
    overflow: hidden;
}

.hrm-opr-drsnik {
    overflow-x: auto;
}

.hrm-opr-tabela {
    width: 100%;
    border-collapse: collapse;
}

.hrm-opr-tabela thead tr {
    background: var(--hrm-surface-sunken);
}

.hrm-opr-tabela th {
    padding: 9px 10px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--hrm-text-muted);
    border-bottom: 1px solid var(--hrm-border-subtle);
    white-space: nowrap;
}

.hrm-opr-tabela tbody tr {
    border-bottom: 1px solid var(--hrm-border-subtle);
}

/* Kos na servisu je rahlo modro podlozen. */
.hrm-opr-vrstica-servis {
    background: var(--hrm-tint-modra);
}

.hrm-opr-tabela td {
    padding: 11px 13px;
}

.hrm-opr-tip {
    font-size: 13px;
    font-weight: 600;
    color: var(--hrm-text-strong);
}

.hrm-opr-model {
    font-size: 12.5px;
}

.hrm-opr-serijska {
    font-family: var(--hrm-font-mono);
    font-size: 12px;
}

.hrm-opr-datum {
    font-size: 12.5px;
    white-space: nowrap;
}

.hrm-opr-garancija-datum {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--hrm-text-strong);
}

.hrm-opr-potekla {
    color: var(--hrm-red-accent);
}

.hrm-opr-poteka {
    color: var(--hrm-amber-text);
}

.hrm-opr-garancija-opomba {
    font-size: 10.5px;
    color: var(--hrm-text-muted);
}

.hrm-opr-brez {
    font-size: 12px;
    color: var(--hrm-text-subtle);
}

.hrm-opr-status {
    white-space: nowrap;
}

.hrm-opr-servis-opomba {
    font-size: 10.5px;
    color: var(--hrm-blue-700);
    margin-top: 3px;
}

.hrm-opr-akcije {
    padding: 11px 10px;
    text-align: right;
    white-space: nowrap;
}

.hrm-opr-gumbi {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
}

.hrm-opr-prazno {
    padding: 18px;
    font-size: 13px;
    color: var(--hrm-text-subtle);
}

.hrm-opr-noga {
    padding: 9px 14px;
    font-size: 11.5px;
    color: var(--hrm-text-muted);
    border-top: 1px solid var(--hrm-border-subtle);
}

.hrm-opr-dodaj {
    display: flex;
    margin-top: 14px;
}

/* --- Okno Podrobno pri izobrazevanju (HRM.eduDetailModal) --- */
.hrm-okno-podrobnosti {
    max-width: 660px;
}

.hrm-ipd-kartica {
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: var(--hrm-radius-md);
    box-shadow: var(--hrm-shadow-sm);
    padding: 14px 16px;
    margin-bottom: 13px;
}

.hrm-ipd-kartica:last-child {
    margin-bottom: 0;
}

/* Oznaka kartice je .lbl iz prototipa. */
.hrm-ipd-oznaka {
    font-size: 12px;
    font-weight: 700;
    color: var(--hrm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 9px;
}

.hrm-ipd-glava {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 9px;
}

.hrm-ipd-oznaka-vrstica {
    flex: 1;
    margin-bottom: 0;
}

/* Pripeta pogodba: pogreznjeno polje z imenom datoteke. */
.hrm-ipd-datoteka {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--hrm-surface-sunken);
    border-radius: 9px;
    padding: 11px 13px;
}

.hrm-ipd-datoteka-telo {
    flex: 1 1 200px;
    min-width: 150px;
}

.hrm-ipd-ikona-datoteka {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--hrm-info-text);
}

.hrm-ipd-ime {
    font-size: 13px;
    font-weight: 700;
    color: var(--hrm-text-strong);
}

.hrm-ipd-drobno {
    font-size: 11px;
    color: var(--hrm-text-muted);
}

.hrm-ipd-prazno {
    font-size: 12.5px;
    color: var(--hrm-text-subtle);
}

.hrm-ipd-gumb-spodaj {
    margin-top: 9px;
}

.hrm-gumb-drobec {
    height: 28px;
    font-size: 11.5px;
    padding: 0 10px;
}

/* Podatki certifikata v prilagodljivi mrezi. */
.hrm-ipd-mreza {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 13px;
}

.hrm-ipd-mreza .hrm-ipd-oznaka {
    margin-bottom: 2px;
}

.hrm-ipd-vrednost {
    font-size: 13px;
    font-weight: 700;
    color: var(--hrm-text-strong);
}

.hrm-ipd-potekel {
    color: var(--hrm-red-accent);
}

.hrm-ipd-poteka {
    color: var(--hrm-amber-text);
}

.hrm-ipd-preostanek {
    font-size: 11px;
    font-weight: 600;
    color: var(--hrm-text-muted);
}

.hrm-ipd-priponka {
    font-size: 12px;
    color: var(--hrm-info-text);
}

.hrm-ipd-ikona-priponka {
    width: 12px;
    height: 12px;
    display: inline-block;
    vertical-align: -1px;
    color: var(--hrm-info-text);
}

/* Opozorilo o izteku certifikata. */
.hrm-ipd-opozorilo {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 11px;
    padding: 8px 11px;
    border-radius: 8px;
    background: var(--hrm-amber-50);
    color: var(--hrm-amber-text-strong);
    font-size: 12px;
}

.hrm-ipd-opozorilo-rdece {
    background: var(--hrm-red-50);
    color: var(--hrm-status-error-text);
}

.hrm-ipd-ikona-opozorilo {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* Zapiski. */
.hrm-ipd-zapisek {
    padding: 7px 0;
    border-bottom: 1px solid var(--hrm-border-subtle);
}

.hrm-ipd-zapisek:last-child {
    border-bottom: 0;
}

.hrm-ipd-zapisek-besedilo {
    font-size: 12.5px;
    color: var(--hrm-text-body);
    line-height: 1.5;
}

.hrm-ipd-zapisek-podpis {
    font-size: 11px;
    color: var(--hrm-text-subtle);
    margin-top: 2px;
}

/* --- Pregledovalnik dokumenta (HRM.openDoc) --- */
.hrm-okno-pregled {
    max-width: 640px;
}

.hrm-pregled {
    font-size: 14px;
    color: var(--hrm-text-body);
    line-height: 1.7;
}

.hrm-pregled p {
    margin: 0 0 12px;
}

.hrm-pregled p:last-of-type {
    margin-bottom: 0;
}

/* Crtkana locnica nad stanjem, kot v izvirniku. */
.hrm-pregled-akcije {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed var(--hrm-border-strong);
}

.hrm-pregled-stanje {
    flex: 1;
    font-size: 12.5px;
    color: var(--hrm-text-muted);
}

/* --- Okno za dokument (HRM.docModal iz prototipa) --- */
/*
 * Prototip: sirina 520 px, na vrhu 6 px moder trak, naslov 19 px, pod njim
 * ime zaposlenega, polja z oznakami .lbl in na dnu Preklici / Shrani.
 */
.hrm-okno-dokument {
    max-width: 520px;
}

/*
 * Moder trak na vrhu okna. Okno namenoma nima overflow: hidden - to bi
 * odrezalo spustne sezname, ki segajo cez rob - zato je zaobljen trak
 * sam, po zgornjih dveh kotih okna.
 */
.hrm-okno-dokument::before {
    content: '';
    display: block;
    height: 6px;
    background: linear-gradient(90deg, var(--hrm-blue-500), var(--hrm-ral-5010));
    border-radius: var(--hrm-radius-md) var(--hrm-radius-md) 0 0;
}

/*
 * Spustni seznam v oknu naj se odpre cez rob in ne raztegne okna;
 * pri sestih moznostih je sicer visji od vsebine.
 */
.hrm-okno-dokument .fi-select-input-options-ctn {
    max-height: 15rem;
    overflow-y: auto;
}

.hrm-okno-dokument .fi-modal-heading {
    font-size: 19px;
    letter-spacing: -0.01em;
}

.hrm-okno-dokument .fi-modal-description {
    font-size: 13px;
    color: var(--hrm-text-muted);
    margin-top: 4px;
}

/*
 * Nalaganje datoteke je v prototipu gumb cez celo sirino s crtkanim
 * robom. FilePond privzeto izrise veliko podrocje za spust datoteke,
 * zato ga skrcimo na visino gumba.
 */
.hrm-okno-dokument .fi-fo-file-upload .filepond--root {
    margin-bottom: 0;
}

.hrm-okno-dokument .fi-fo-file-upload .filepond--panel-root {
    background: var(--hrm-surface-card);
    border: 1px dashed var(--hrm-border-strong);
    border-radius: 12px;
}

.hrm-okno-dokument .fi-fo-file-upload .filepond--drop-label {
    min-height: 44px;
    color: var(--hrm-text-body);
}

/*
 * Napis na gumbu ima pred sabo ikono nalaganja, kot ICON('upload',16) v
 * prototipu. FilePond izpise samo besedilo, zato jo narisemo z masko -
 * tako prevzame barvo napisa in deluje v obeh temah.
 */
.hrm-okno-dokument .fi-fo-file-upload .filepond--drop-label label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--hrm-font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 0 18px;
}

.hrm-okno-dokument .fi-fo-file-upload .filepond--drop-label label::before {
    content: '';
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background-color: currentColor;
    -webkit-mask: var(--hrm-ikona-nalaganje) center / contain no-repeat;
    mask: var(--hrm-ikona-nalaganje) center / contain no-repeat;
}

.hrm-okno-dokument .fi-fo-file-upload .filepond--root:hover .filepond--panel-root {
    background: var(--hrm-surface-hover);
}

/* Nalozena datoteka: modro ime z ikono, kot v prototipu. */
.hrm-okno-dokument .fi-fo-file-upload .filepond--file {
    color: var(--hrm-text-strong);
}

/* --- Predogled e-opomnika (HRM.emailModal) --- */
/*
 * Prototip ne poslje sporocila, ampak ga pokaze v oknu sirine 540 px nad
 * zameglenim modrim ozadjem. Mere in barve so prevzete dobesedno.
 */
/*
 * Obvestila Filamenta so na z-index 50, prekrivalo predogleda pa na 100,
 * zato bi obvestilo ob "Opomni vse" izginilo za njim. V prototipu je
 * toast na 200, nad oknom - enako postavimo tudi tu.
 */
.fi-no {
    z-index: 200;
}

/*
 * Ovojnica je pri vseh oknih enaka (HRM.modal): zamegljeno modro ozadje
 * in bela kartica sredi zaslona. Sirino doloci posamezno okno - privzeto
 * 520 px, predogled e-poste 540 px, nastavitev prikaza 460 px.
 */
.hrm-okno-ozadje,
.hrm-eposta-ozadje {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--hrm-prekrivalo);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.hrm-okno,
.hrm-eposta-okno {
    width: 520px;
    max-width: 100%;
    max-height: 90vh;
    overflow: auto;
    background: var(--hrm-surface-card);
    border-radius: var(--hrm-radius-md);
    box-shadow: var(--hrm-shadow-okno);
}

.hrm-eposta-okno {
    width: 540px;
}

.hrm-okno-ozka {
    width: 460px;
}

.hrm-okno-siroka {
    width: 600px;
}

/* Tanek moder trak na vrhu okna, kot pri izbiri stolpcev v prototipu. */
.hrm-okno-trak {
    height: 6px;
    background: linear-gradient(90deg, var(--hrm-blue-500), var(--hrm-ral-5010));
}

.hrm-okno-telo {
    padding: 24px;
}

.hrm-okno-naslov {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 800;
    color: var(--hrm-text-strong);
}

.hrm-okno-naslov-log {
    margin-bottom: 14px;
}

.hrm-okno-podnaslov {
    margin: 0 0 6px;
    color: var(--hrm-text-muted);
    font-size: 13px;
}

/* Naslov sklopa v izboru polj - moder, kot v prototipu. */
.hrm-okno-sklop {
    font-size: 12px;
    font-weight: 800;
    color: var(--hrm-blue-text);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin: 14px 0 4px;
}

.hrm-okno-izbira {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    cursor: pointer;
    font-size: 14px;
    color: var(--hrm-text-body);
}

.hrm-okno-izbira input[type='checkbox'] {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    accent-color: var(--hrm-blue-500);
}

.hrm-okno-noga {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 16px;
}

.hrm-pd-gumb-primaren {
    background: var(--hrm-blue-500);
    border-color: var(--hrm-blue-500);
    color: #fff;
}

.hrm-pd-gumb-primaren:hover {
    background: var(--hrm-blue-600);
    border-color: var(--hrm-blue-600);
}

/* --- Dnevnik sprememb (LOG) --- */
.hrm-log-vrstica {
    padding: 10px 0;
    border-bottom: 1px solid var(--hrm-border-subtle);
}

.hrm-log-kaj {
    font-size: 13px;
    color: var(--hrm-text-strong);
}

.hrm-log-kdo {
    font-size: 12px;
    color: var(--hrm-text-muted);
}

.hrm-log-prazno {
    font-size: 13px;
    color: var(--hrm-text-subtle);
}

/* --- Gumba na dnu obrazca za novega zaposlenega --- */
/*
 * Prekliči in Ustvari stojita ob desnem robu, kot v oknih prototipa.
 * Filament ju privzeto poravna levo (razred .fi-align-start).
 */
.fi-resource-create-record-page .fi-sc-actions .fi-ac.fi-align-start {
    justify-content: flex-end;
}

/* --- Beli gumbi imajo siv rob (.btn-ghost iz prototipa) --- */
/*
 * Filament belemu gumbu brez barve ne da roba, zato se na beli kartici
 * ne vidi, kje se konca. Rob narisemo s senco, ne z border, da se
 * velikost gumba ne spremeni.
 *
 * Barvni gumbi (razred .fi-color) so polni in roba ne potrebujejo,
 * ikonski gumbi v vrhnji vrstici pa niso beli.
 */
.fi-btn:not(.fi-outlined):not(.fi-color) {
    box-shadow: 0 0 0 1px var(--hrm-border-default);
}

/*
 * Obrisani gumb (neizbrani nacin prikaza) ima v Filamentu temno sivo
 * podlago ob prehodu z misko; prototip ima belo podlago, siv rob in
 * svetlo sivo ob prehodu.
 */
.fi-btn.fi-outlined {
    background-color: var(--hrm-surface-card);
    color: var(--hrm-text-body);
    --tw-ring-color: var(--hrm-border-default);
}

.fi-btn.fi-outlined:hover {
    background-color: var(--hrm-surface-hover);
}

/* --- Masovni pogled zaposlenih (HRM.massTable) --- */
/*
 * Zadnja kartica ne rabi spodnjega roba - razmik do dna strani poskrbi
 * ze postavitev.
 */
.hrm-mp > .hrm-pd-kartica:last-child {
    margin-bottom: 0;
}

.hrm-mp-orodja {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.hrm-mp-stevilo {
    margin-left: auto;
    font-size: 12px;
    opacity: 0.85;
}

/* Tabela je lahko sirsa od kartice, zato drsi znotraj nje. */
.hrm-mp-drsnik {
    overflow-x: auto;
}

.hrm-mp-tabela th,
.hrm-mp-celica {
    white-space: nowrap;
}

.hrm-mp-celica {
    padding: 10px 12px;
    color: var(--hrm-text-body);
}

/*
 * Prvi stolpec ostane viden tudi ob vodoravnem drsenju. Ima svoje
 * neprosojno ozadje, sicer bi se pod njim videle druge celice - zato
 * mora ob prehodu z misko posvetliti tudi sam, sicer edini ostane bel.
 */
.hrm-mp-lepljiv {
    position: sticky;
    left: 0;
    background: var(--hrm-surface-card);
    z-index: 1;
}

/* Enak prehod kot vrstica, sicer se ime obarva v hipu, ostalo pa mehko. */
.hrm-mp-lepljiv {
    transition: background 0.15s;
}

.hrm-pd-vrstica:hover .hrm-mp-lepljiv {
    background: var(--hrm-surface-hover);
}

.hrm-mp-tabela thead .hrm-mp-lepljiv {
    background: var(--hrm-surface-sunken);
}

.hrm-mp-ime {
    font-weight: 600;
    color: var(--hrm-text-strong);
}

.hrm-mp-ime .hrm-pd-zacetnice {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
}

/* Vmesna vrstica z imenom oddelka. */
.hrm-mp-oddelek td {
    padding: 7px 12px;
    background: var(--hrm-blue-50);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hrm-blue-700);
}

.hrm-mp-oddelek-ikona {
    width: 13px;
    height: 13px;
    display: inline-block;
    vertical-align: -2px;
    margin-right: 4px;
}

.hrm-mp-oddelek-stevilo {
    color: var(--hrm-text-subtle);
    font-weight: 600;
}

/* --- Okno "Stolpci masovnega pogleda" (HRM.massColPicker) --- */
/*
 * Izvirnik ni seznam kljukic, ampak razvrscen seznam izbranih stolpcev
 * (rocaj, zaporedna stevilka, pusicici in krizec) in pod njim cipi z
 * neizbranimi podatki.
 */
.hrm-mc-telo {
    max-height: 84vh;
    overflow: auto;
}

.hrm-mc-naslov {
    font-size: 19px;
}

.hrm-mc-podnaslov {
    margin-bottom: 16px;
}

/* Oznaka sklopa je .lbl iz prototipa. */
.hrm-mc-oznaka {
    font-size: 12px;
    font-weight: 700;
    color: var(--hrm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
}

.hrm-mc-seznam {
    margin: 8px 0 18px;
}

.hrm-mc-vrstica {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid var(--hrm-border-subtle);
    border-radius: 10px;
    margin-bottom: 8px;
    background: var(--hrm-blue-50);
}

/* Vrstica, nad katero se spusca vlecen stolpec. */
.hrm-mc-cilj {
    border-color: var(--hrm-blue-500);
    box-shadow: 0 0 0 2px var(--hrm-blue-50);
}

.hrm-mc-rocaj {
    cursor: grab;
    color: var(--hrm-text-subtle);
    flex-shrink: 0;
    padding: 0 2px;
    display: inline-flex;
}

.hrm-mc-rocaj-ikona {
    width: 16px;
    height: 16px;
}

.hrm-mc-stevilka {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 6px;
    background: var(--hrm-blue-500);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
}

.hrm-mc-naziv {
    flex: 1;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--hrm-text-strong);
}

/* Pusicici in krizec so mali .btn-ghost. */
.hrm-mc-gumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--hrm-border-default);
    border-radius: 8px;
    background: var(--hrm-surface-card);
    color: var(--hrm-text-body);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.hrm-mc-gumb:hover:not(:disabled) {
    background: var(--hrm-surface-hover);
}

.hrm-mc-gumb:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.hrm-mc-gumb-rdec,
.hrm-mc-gumb-rdec .hrm-mc-gumb-ikona {
    color: var(--hrm-red-accent);
}

.hrm-mc-gumb-ikona {
    width: 14px;
    height: 14px;
}

.hrm-mc-cipi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.hrm-mc-cip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--hrm-border-default);
    border-radius: 12px;
    background: var(--hrm-surface-card);
    color: var(--hrm-text-body);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.hrm-mc-cip:hover {
    background: var(--hrm-surface-hover);
}

.hrm-mc-cip-ikona {
    width: 13px;
    height: 13px;
}

.hrm-mc-prazno {
    color: var(--hrm-text-subtle);
    font-size: 13px;
    padding: 6px 0;
    display: block;
}

.hrm-mc-noga {
    margin-top: 20px;
}

.hrm-eposta-glava {
    background: var(--hrm-surface-sunken);
    border-bottom: 1px solid var(--hrm-border-subtle);
    padding: 14px 22px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hrm-eposta-glava strong {
    font-size: 14px;
    color: var(--hrm-text-strong);
}

.hrm-eposta-glava .hrm-pd-pilula {
    margin-left: auto;
}

.hrm-eposta-glava-ikona {
    width: 20px;
    height: 20px;
    color: var(--hrm-blue-text);
}

.hrm-eposta-telo {
    padding: 22px;
}

.hrm-eposta-naslovnik {
    font-size: 13px;
    color: var(--hrm-text-muted);
    line-height: 1.9;
    border-bottom: 1px solid var(--hrm-border-subtle);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.hrm-eposta-naslovnik b {
    color: var(--hrm-text-body);
}

.hrm-eposta-uvod {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--hrm-text-body);
    line-height: 1.6;
}

.hrm-eposta-tabela {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--hrm-border-subtle);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 6px;
}

.hrm-eposta-tabela thead tr {
    background: var(--hrm-surface-sunken);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hrm-text-muted);
}

.hrm-eposta-tabela th {
    padding: 8px 10px;
    text-align: left;
    font-weight: 700;
}

.hrm-eposta-tabela tbody tr {
    border-bottom: 1px solid var(--hrm-border-subtle);
}

.hrm-eposta-tabela td {
    padding: 8px 10px;
}

.hrm-eposta-dokument {
    font-weight: 600;
    color: var(--hrm-text-strong);
    font-size: 13px;
}

.hrm-eposta-akcija {
    font-size: 12.5px;
    color: var(--hrm-text-body);
}

.hrm-eposta-cakanje {
    font-size: 12.5px;
    color: var(--hrm-text-muted);
    white-space: nowrap;
}

.hrm-eposta-povezava {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    background: var(--hrm-blue-500);
    color: #fff;
    text-decoration: none;
    padding: 11px 18px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
}

.hrm-eposta-povezava:hover {
    background: var(--hrm-blue-600);
}

.hrm-eposta-povezava-ikona {
    width: 16px;
    height: 16px;
    color: #fff;
}

.hrm-eposta-drobno {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--hrm-text-subtle);
}

.hrm-eposta-podpis {
    margin-top: 16px;
}

.hrm-eposta-noga {
    text-align: right;
    margin-top: 12px;
}

/* ==========================================================================
   Zavihek "Akcijski plan" (HRM.tabPlanPo) in okno plana (HRM.pdPoModal)
   ========================================================================== */

.hrm-akp {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

/* Oznaka polja, kot .lbl v prototipu. */
.hrm-lbl {
    font-size: 12px;
    font-weight: 700;
    color: var(--hrm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
}

/* Modra uvodna opomba nad kartico napredka. */
.hrm-akp-opomba {
    background: var(--hrm-blue-50);
    border: 1px solid var(--hrm-blue-100);
    border-radius: 14px;
    padding: 13px 15px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--hrm-blue-700);
}

/* Kartica napredka: tir, odstotek, števec in gumb v eni vrstici. */
.hrm-akp-napredek {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: 14px;
    padding: 13px 15px;
}

.hrm-akp-crta {
    flex: 1;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hrm-akp-tir {
    height: 9px;
    background: var(--hrm-gray-100);
    border-radius: 5px;
    overflow: hidden;
}

.hrm-akp-polnilo {
    height: 100%;
    background: var(--hrm-blue-500);
    transition: width 0.2s;
}

.hrm-akp-polnilo-koncan {
    background: var(--hrm-green-500);
}

.hrm-akp-odstotek {
    font-size: 20px;
    font-weight: 800;
    color: var(--hrm-blue-text);
    font-variant-numeric: tabular-nums;
}

.hrm-akp-odstotek-koncan {
    color: var(--hrm-green-accent);
}

.hrm-akp-stevec {
    font-size: 12px;
    color: var(--hrm-text-muted);
}

.hrm-akp-sredina {
    text-align: center;
}

.hrm-akp-odgovoren {
    padding: 9px 10px;
    font-size: 12px;
}

/* Zelen zapis, kaj je bilo ob potrditvi urejeno. */
.hrm-akp-opomba-izvedbe {
    margin-top: 4px;
    padding: 4px 6px;
    border-radius: 6px;
    background: var(--hrm-green-50);
    color: var(--hrm-green-text);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
}

.hrm-akp-prazno {
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: 14px;
    padding: 18px;
    font-size: 13px;
    color: var(--hrm-text-subtle);
}

/* --- Okno plana --- */

.hrm-akp-uvod {
    background: var(--hrm-green-50);
    border: 1px solid var(--hrm-green-500);
    border-radius: 12px;
    padding: 11px 13px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.hrm-akp-uvod-besedilo {
    font-size: 12px;
    line-height: 1.6;
    color: var(--hrm-green-text);
}

.hrm-akp-uvod-vrstica {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.hrm-akp-znacka {
    background: var(--hrm-ral-5010);
    color: #fff;
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 800;
}

.hrm-akp-namig {
    font-size: 11px;
    color: var(--hrm-text-muted);
}

.hrm-gumb-drobni {
    height: 28px;
    font-size: 11.5px;
}

.hrm-akp-obdobje,
.hrm-akp-obdobje-zaklenjeno {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: 8px;
    padding: 8px 10px;
}

.hrm-akp-obdobje-zaklenjeno {
    border-color: var(--hrm-green-500);
}

.hrm-akp-obdobje > div:first-child {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hrm-akp-obdobje-vrednost {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--hrm-text-strong);
}

.hrm-akp-kljucavnica {
    width: 14px;
    height: 14px;
    color: var(--hrm-green-text);
    flex-shrink: 0;
}

.hrm-akp-obdobje-napis {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--hrm-green-text);
}

.hrm-akp-obdobje-kdo {
    font-size: 11px;
    color: var(--hrm-text-muted);
}

.hrm-akp-naslov-obrazca {
    margin-top: 14px;
}

/* --- Seznam postavk v oknu --- */

.hrm-akp-postavke {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.hrm-akp-postavke-glava {
    display: flex;
    align-items: center;
    gap: 9px;
}

.hrm-akp-postavke-glava .hrm-lbl {
    flex: 1;
}

.hrm-akp-postavka {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: 12px;
    padding: 9px 11px;
}

.hrm-akp-kljukica,
.hrm-akp-brisi {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    display: flex;
    flex-shrink: 0;
}

.hrm-akp-kljukica-ikona {
    width: 18px;
    height: 18px;
    color: var(--hrm-text-subtle);
}

.hrm-akp-kljukica-potrjena {
    color: var(--hrm-green-accent);
}

.hrm-akp-postavka-telo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hrm-akp-naloga {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--hrm-text-strong);
}

.hrm-akp-naloga-urejena {
    text-decoration: line-through;
    opacity: 0.7;
}

.hrm-akp-merilo {
    font-size: 11px;
    color: var(--hrm-text-muted);
}

.hrm-akp-meta {
    font-size: 10.5px;
    color: var(--hrm-text-subtle);
}

.hrm-akp-zamuda {
    color: var(--hrm-red-accent);
    font-weight: 700;
}

.hrm-akp-brisi-ikona {
    width: 14px;
    height: 14px;
    color: var(--hrm-red-accent);
}

.hrm-akp-postavke-prazno {
    font-size: 12px;
    color: var(--hrm-text-subtle);
}

/* --- Zgodovina prejšnjih planov --- */

.hrm-akp-zgodovina {
    margin-top: 6px;
    background: var(--hrm-surface-sunken);
    border-radius: 12px;
    padding: 11px 13px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.hrm-akp-zgodovina-vrstica {
    border-top: 1px solid var(--hrm-border-subtle);
    padding-top: 7px;
}

.hrm-akp-zgodovina-glava {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: baseline;
    font-size: 11.5px;
    color: var(--hrm-text-muted);
}

.hrm-akp-zgodovina-glava b {
    font-size: 12.5px;
    color: var(--hrm-text-strong);
}

.hrm-akp-zgodovina-kdo {
    color: var(--hrm-text-subtle);
    font-size: 11px;
}

.hrm-akp-zgodovina-naloge {
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--hrm-text-muted);
    line-height: 1.5;
}

/*
 * Obrazec za novo postavko je svoja kartica s poglobljenim ozadjem, kot
 * v prototipu. Razred pade na zunanjo ovojnico, kartico pa rise notranji
 * .fi-section - zato je videz nastavljen tam.
 */
.hrm-akp-obrazec .fi-section {
    background: var(--hrm-surface-sunken);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: 14px;
    padding: 11px 13px;
    box-shadow: none;
}

.hrm-akp-obrazec .fi-section-header {
    padding: 0 0 8px;
}

.hrm-akp-obrazec .fi-section-content-ctn,
.hrm-akp-obrazec .fi-section-content {
    padding: 0;
    background: none;
    border: none;
}

/* Pilula stanja v tabeli je gumb za potrditev oz. ponovno odprtje. */
.hrm-akp-dejanja {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hrm-akp-pilula-gumb {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* Naslov kartice je oznaka .lbl iz prototipa, ne modri naslov sekcije. */
.hrm-akp-obrazec .fi-section-header-heading {
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--hrm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hrm-akp-obrazec .fi-section-header {
    border-bottom: none;
}

/*
 * Obdobje plana v zeleni kartici: dve polji in gumb v eni vrstici, kot
 * grid 1fr 1fr auto v prototipu.
 */
.hrm-akp-obdobje-vnos {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: end;
}

.hrm-akp-obdobje-vnos > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.hrm-akp-polje {
    width: 100%;
    height: 32px;
    padding: 0 9px;
    border: 1px solid var(--hrm-border-default);
    border-radius: 10px;
    background: var(--hrm-surface-card);
    font-size: 12.5px;
    color: var(--hrm-text-strong);
}

.hrm-akp-polje:focus {
    outline: none;
    border-color: var(--hrm-blue-500);
    box-shadow: 0 0 0 3px var(--hrm-fokus-obroc);
}

@media (max-width: 640px) {
    .hrm-akp-obdobje-vnos {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Veljavnosti - zbirna tabela iztekov (HRM.renderExpiry)
   ========================================================================== */

.hrm-vel-stevci {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 8px;
}

.hrm-vel-stevec {
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: 20px;
    box-shadow: var(--hrm-shadow-sm);
    padding: 16px;
}

.hrm-vel-stevilka {
    font-family: var(--hrm-font-display);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.hrm-vel-rdeca {
    color: var(--hrm-red-accent);
}

.hrm-vel-jantar {
    color: var(--hrm-amber-600);
}

.hrm-vel-modra {
    color: var(--hrm-blue-text);
}

.hrm-vel-oznaka {
    margin-top: 2px;
    font-size: 12px;
    color: var(--hrm-text-muted);
}

.hrm-vel-kartica {
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: 20px;
    box-shadow: var(--hrm-shadow-sm);
    overflow: hidden;
}

.hrm-vel-glava {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    padding: 13px 16px;
    background: var(--hrm-surface-sunken);
    border-bottom: 1px solid var(--hrm-border-subtle);
}

.hrm-vel-glava h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--hrm-text-strong);
}

.hrm-vel-glava-ikona {
    width: 17px;
    height: 17px;
    color: var(--hrm-blue-text);
    flex-shrink: 0;
}

.hrm-vel-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.hrm-vel-tabela thead tr {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hrm-text-muted);
}

.hrm-vel-tabela th {
    padding: 9px 14px;
    font-weight: 700;
}

.hrm-vel-tabela td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--hrm-border-subtle);
    vertical-align: top;
}

.hrm-vel-tabela tbody tr:last-child td {
    border-bottom: none;
}

.hrm-vel-desno {
    text-align: right;
}

.hrm-vel-zaposleni a {
    font-weight: 600;
    color: var(--hrm-text-strong);
    text-decoration: none;
}

.hrm-vel-zaposleni a:hover {
    color: var(--hrm-blue-text);
}

.hrm-vel-oddelek {
    font-size: 11.5px;
    color: var(--hrm-text-muted);
    font-weight: 400;
}

.hrm-vel-datum {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.hrm-vel-resena {
    opacity: 0.62;
}

.hrm-vel-resitev {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: 12px;
    color: var(--hrm-text-muted);
}

.hrm-vel-komentar {
    max-width: 320px;
    text-align: right;
    line-height: 1.45;
}

.hrm-vel-prazno {
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: 20px;
    box-shadow: var(--hrm-shadow-sm);
    padding: 28px;
    font-size: 14px;
    color: var(--hrm-text-muted);
}

/* Okno sifranta rokov: polje za dni je ozko in poravnano desno. */
.hrm-okno-roki .fi-fo-text-input input {
    text-align: right;
}

/* Sifrant opozorilnih rokov: naziv levo, dnevi desno (mreza 1fr 120px). */
.hrm-okno-roki .hrm-rok-vrstica {
    grid-template-columns: 1fr 120px;
    gap: 9px;
    align-items: center;
}

.hrm-okno-roki .hrm-rok-naziv {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--hrm-text-strong);
}

.hrm-okno-roki .hrm-rok-polje input {
    height: 34px;
    text-align: right;
    font-size: 12.5px;
}

/* ==========================================================================
   Poskusno delo - pregled (HRM.pdPregledView) in obrazec (HRM.pdModal)
   ========================================================================== */

.hrm-pdd-sredina {
    text-align: center;
}

.hrm-pdd-ral {
    color: var(--hrm-info-text);
}

.hrm-pdd-zelena {
    color: var(--hrm-green-accent);
}

.hrm-pdd-bledo {
    color: var(--hrm-text-subtle);
}

.hrm-pdd-nujno {
    color: var(--hrm-red-accent);
    font-weight: 700;
}

.hrm-pdd-ocena {
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.hrm-pdd-gumbi {
    display: inline-flex;
    gap: 5px;
    justify-content: flex-end;
}

.hrm-pdd-podpis {
    margin-top: 2px;
    font-size: 10.5px;
    color: var(--hrm-text-muted);
}

/* --- Obrazec za spremljanje --- */

.hrm-pdo {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.hrm-pdo-povzetek {
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-left-width: 4px;
    border-radius: 14px;
    padding: 12px 14px;
}

.hrm-pdo-rob-modra {
    border-left-color: var(--hrm-ral-5010);
}

.hrm-pdo-rob-jantar {
    border-left-color: var(--hrm-amber-400);
}

.hrm-pdo-rob-zelena {
    border-left-color: var(--hrm-green-500);
}

.hrm-pdo-rob-rdeca {
    border-left-color: var(--hrm-status-error);
}

.hrm-pdo-vrstica {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: baseline;
}

.hrm-pdo-vrednost {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--hrm-text-strong);
    margin-top: 2px;
}

.hrm-pdo-ocena {
    font-size: 16px;
    font-weight: 800;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.hrm-pdo-modra {
    color: var(--hrm-info-text);
}

.hrm-pdo-jantar {
    color: var(--hrm-amber-600);
}

.hrm-pdo-zelena {
    color: var(--hrm-green-text);
}

.hrm-pdo-rdeca {
    color: var(--hrm-status-error-text);
}

.hrm-pdo-cilji {
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--hrm-text-muted);
    line-height: 1.55;
}

.hrm-pdo-gumbi {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    align-items: center;
}

.hrm-pdo-zaklenjeno {
    font-size: 12px;
    color: var(--hrm-text-muted);
    line-height: 1.5;
}

.hrm-pdo-naslov {
    margin-top: 4px;
}

/* Končno mnenje - zelen ali rdeč blok. */
.hrm-pdo-mnenje {
    border-radius: 14px;
    border: 2px solid;
    padding: 12px 14px;
}

.hrm-pdo-mnenje-ok {
    border-color: var(--hrm-green-500);
    background: var(--hrm-green-50);
    color: var(--hrm-green-text);
}

.hrm-pdo-mnenje-ne {
    border-color: var(--hrm-status-error);
    background: var(--hrm-red-100);
    color: var(--hrm-status-error-text);
}

.hrm-pdo-mnenje-oznaka {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hrm-pdo-mnenje-izid {
    margin-top: 4px;
    font-size: 13.5px;
    font-weight: 800;
}

.hrm-pdo-mnenje-besedilo {
    margin-top: 5px;
    font-size: 12.5px;
    line-height: 1.55;
}

.hrm-pdo-mnenje-podpis {
    margin-top: 5px;
    font-size: 11px;
    opacity: 0.85;
}

/* --- Vpisi mentorja --- */

.hrm-pdo-vpis {
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: 14px;
    padding: 11px 13px;
}

.hrm-pdo-vpis-glava {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.hrm-pdo-vpis-datum {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--hrm-text-strong);
}

.hrm-pdo-vpis-kdo {
    font-size: 11.5px;
    color: var(--hrm-text-muted);
    flex: 1;
}

.hrm-pdo-ocene {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 7px;
}

.hrm-pdo-znak {
    font-size: 10.5px;
    font-weight: 700;
    background: var(--hrm-surface-sunken);
    border-radius: 6px;
    padding: 2px 7px;
    white-space: nowrap;
}

.hrm-pdo-znak-dobra {
    color: var(--hrm-green-text);
}

.hrm-pdo-znak-srednja {
    color: var(--hrm-amber-text-strong);
}

.hrm-pdo-znak-slaba {
    color: var(--hrm-status-error-text);
}

.hrm-pdo-besedilo {
    margin-top: 7px;
    font-size: 12px;
    color: var(--hrm-text-body);
    line-height: 1.55;
}

.hrm-pdo-prazno {
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: 14px;
    padding: 14px;
    font-size: 12.5px;
    color: var(--hrm-text-subtle);
}

/* Vrstica ocenjevanja v oknu novega vpisa: področje levo, ocena desno. */
.hrm-okno-vpis .hrm-pd-ocena-vrstica {
    grid-template-columns: 1fr 190px;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--hrm-border-subtle);
}

.hrm-okno-vpis .hrm-pd-podrocje {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--hrm-text-strong);
}

.hrm-okno-vpis .hrm-pd-podrocje-opis {
    display: block;
    font-size: 10.5px;
    color: var(--hrm-text-muted);
    line-height: 1.4;
}

/* Odločitev v končnem mnenju: dve možnosti v okvirčkih, ena ob drugi. */
.hrm-pd-odlocitev .fi-fo-radio-option-ctn {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.hrm-pd-odlocitev .fi-fo-radio-option {
    flex: 1 1 220px;
    border: 1.5px solid var(--hrm-border-default);
    border-radius: 10px;
    padding: 9px 12px;
}

/* ==========================================================================
   Evidenca časa in odsotnosti (HRM.renderTime)
   ========================================================================== */

.hrm-cas-preklop {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.hrm-cas-stevilka {
    font-family: var(--hrm-font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--hrm-text-strong);
    line-height: 1.15;
    margin: 2px 0 4px;
    font-variant-numeric: tabular-nums;
}

.hrm-cas-zelena {
    color: var(--hrm-green-accent);
}

.hrm-cas-rdeca {
    color: var(--hrm-red-accent);
}

.hrm-cas-modra {
    color: var(--hrm-blue-text);
}

.hrm-cas-izbira {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hrm-cas-select {
    width: auto;
    min-width: 240px;
    height: 34px;
}

.hrm-cas-desno {
    margin-left: auto;
}

.hrm-cas-pojasnilo {
    padding: 10px 16px;
    font-size: 11.5px;
    color: var(--hrm-text-muted);
    line-height: 1.55;
    border-bottom: 1px solid var(--hrm-border-subtle);
}

.hrm-cas-dopust {
    font-size: 17px;
    font-weight: 800;
    color: var(--hrm-info-text);
    font-variant-numeric: tabular-nums;
}

.hrm-cas-ikona {
    width: 14px;
    height: 14px;
    color: var(--hrm-text-muted);
}

/* --- Koledar --- */

.hrm-cas-koledar {
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: 20px;
    box-shadow: var(--hrm-shadow-sm);
    padding: 22px;
    max-width: 720px;
}

.hrm-cas-koledar-glava {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.hrm-cas-koledar-glava h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--hrm-text-strong);
    min-width: 150px;
}

.hrm-cas-legenda {
    margin-left: auto;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.hrm-cas-legenda span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--hrm-text-muted);
}

.hrm-cas-znak {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid var(--hrm-border-default);
    display: inline-block;
}

.hrm-cas-znak-delo {
    background: var(--hrm-blue-50);
}

.hrm-cas-znak-dopust {
    background: var(--hrm-green-50);
}

.hrm-cas-znak-bolniska {
    background: var(--hrm-red-100);
}

.hrm-cas-mreza {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.hrm-cas-dow {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--hrm-text-subtle);
    padding: 6px 0;
}

.hrm-cas-dan {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--hrm-border-subtle);
    background: var(--hrm-surface-card);
    color: var(--hrm-text-subtle);
    font-weight: 600;
}

.hrm-cas-dan-delo {
    background: var(--hrm-blue-50);
    color: var(--hrm-blue-700);
}

.hrm-cas-opomba {
    margin-top: 14px;
    font-size: 11.5px;
    color: var(--hrm-text-muted);
    line-height: 1.55;
}

/* --- Masovni pogled --- */

.hrm-cas-sektor {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    background: linear-gradient(90deg, var(--hrm-blue-500), var(--hrm-ral-5010));
    color: #fff;
    font-weight: 800;
    font-size: 14px;
}

.hrm-cas-sektor-ikona {
    width: 17px;
    height: 17px;
    color: #fff;
}

.hrm-cas-sektor-stevilo {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    opacity: 0.9;
}

.hrm-cas-oddelek td {
    background: var(--hrm-blue-50);
    padding: 7px 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hrm-blue-700);
}

.hrm-cas-oddelek-stevilo {
    color: var(--hrm-text-subtle);
    font-weight: 600;
}

.hrm-cas-vrstica {
    cursor: pointer;
}

.hrm-cas-vrstica:hover td {
    background: var(--hrm-surface-hover);
}

.hrm-cas-ime {
    font-weight: 600;
    color: var(--hrm-text-strong);
}

.hrm-cas-tir-vrstica {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hrm-cas-tir-napis {
    font-size: 12.5px;
    color: var(--hrm-text-body);
    white-space: nowrap;
}

.hrm-cas-tir {
    flex: 1;
    min-width: 60px;
    max-width: 110px;
    height: 7px;
    border-radius: 4px;
    background: var(--hrm-surface-sunken);
    overflow: hidden;
    display: block;
}

.hrm-cas-tir-polnilo {
    display: block;
    height: 100%;
}

.hrm-cas-tir-zelena {
    background: var(--hrm-green-500);
}

.hrm-cas-tir-modra {
    background: var(--hrm-ral-5010);
}

.hrm-cas-tir-rdeca {
    background: var(--hrm-status-error);
}

.hrm-cas-odstotek {
    font-size: 11px;
    font-weight: 700;
}

.hrm-cas-stevec {
    font-family: var(--hrm-font-mono);
    font-weight: 700;
    color: var(--hrm-text-strong);
}

.hrm-cas-enota {
    font-size: 11px;
    color: var(--hrm-text-subtle);
}

/* --- Razčlemba odmere --- */

.hrm-cas-osnova {
    font-weight: 600;
    color: var(--hrm-text-strong);
}

.hrm-cas-dni {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.hrm-cas-vsota td {
    font-weight: 800;
    color: var(--hrm-text-strong);
    background: var(--hrm-surface-sunken);
}

.hrm-cas-koncno {
    font-size: 16px;
    color: var(--hrm-info-text);
}

/* --- Šifrant odmere dopusta: kartica na sklop --- */
.hrm-okno-sifrant-odmere .hrm-odmera-kartica .fi-section {
    background: var(--hrm-surface-sunken);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: 14px;
    padding: 13px 15px;
    box-shadow: none;
}

.hrm-okno-sifrant-odmere .hrm-odmera-kartica .fi-section-header {
    border-bottom: none;
    padding: 0 0 9px;
}

.hrm-okno-sifrant-odmere .hrm-odmera-kartica .fi-section-header-heading {
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--hrm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hrm-okno-sifrant-odmere .hrm-odmera-kartica .fi-section-content-ctn,
.hrm-okno-sifrant-odmere .hrm-odmera-kartica .fi-section-content {
    padding: 0;
    background: none;
    border: none;
}

.hrm-okno-sifrant-odmere .hrm-rok-vrstica {
    grid-template-columns: 1fr 120px;
    gap: 9px;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid var(--hrm-border-subtle);
}

.hrm-okno-sifrant-odmere .hrm-rok-polje input {
    height: 30px;
    text-align: right;
    font-size: 12px;
}

.hrm-odmera-naziv {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--hrm-text-strong);
}

.hrm-odmera-opis {
    display: block;
    font-size: 10.5px;
    color: var(--hrm-text-muted);
    line-height: 1.45;
}

/* Kljukica o invalidnosti je poravnana z vrstico polj. */
.hrm-cas-kljukica {
    align-self: end;
    padding-bottom: 8px;
}

.hrm-cas-dni-prazna {
    color: var(--hrm-text-subtle);
    font-weight: 600;
}

.hrm-cas-minimum {
    margin-top: 10px;
    padding: 9px 11px;
    border-radius: 8px;
    background: var(--hrm-tint-jantar-minimum);
    color: var(--hrm-amber-text-strong);
    font-size: 12px;
    line-height: 1.5;
}

.hrm-cas-poslana {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--hrm-green-text);
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    white-space: nowrap;
}

.hrm-cas-poslana-ikona {
    width: 11px;
    height: 11px;
}

/* --- Odločba o odmeri letnega dopusta --- */

.hrm-odlocba {
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-default);
    border-radius: 8px;
    padding: 26px 30px;
    color: var(--hrm-text-body);
}

.hrm-odlocba-glava {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    border-bottom: 2px solid var(--hrm-blue-500);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.hrm-odlocba-podjetje {
    font-family: var(--hrm-font-display);
    font-weight: 800;
    font-size: 18px;
    color: var(--hrm-blue-text);
}

.hrm-odlocba-naslov,
.hrm-odlocba-stevilka {
    font-size: 11.5px;
    color: var(--hrm-text-muted);
}

.hrm-odlocba-desno {
    text-align: right;
}

.hrm-odlocba-vrsta {
    font-weight: 800;
    font-size: 14px;
    color: var(--hrm-text-strong);
}

.hrm-odlocba-uvod {
    font-size: 12.5px;
    line-height: 1.7;
    margin: 0 0 14px;
}

.hrm-odlocba-tabela {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 14px;
    font-size: 12px;
}

.hrm-odlocba-tabela th,
.hrm-odlocba-tabela td {
    border: 1px solid var(--hrm-border-subtle);
    padding: 5px 8px;
    text-align: left;
    vertical-align: top;
}

.hrm-odlocba-tabela th {
    background: var(--hrm-surface-sunken);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 700;
}

.hrm-odlocba-oznaka {
    width: 180px;
    color: var(--hrm-text-muted);
}

.hrm-odlocba-poudarjeno {
    font-weight: 700;
}

.hrm-odlocba-podlaga {
    font-size: 11px;
    color: var(--hrm-text-muted);
}

.hrm-odlocba-vsota {
    font-weight: 800;
    font-size: 12.5px;
    background: var(--hrm-surface-sunken);
}

.hrm-odlocba-koncno {
    font-weight: 800;
    font-size: 13px;
    color: var(--hrm-info-text);
    background: var(--hrm-surface-sunken);
}

.hrm-odlocba-oznaka-razdelka {
    margin-top: 12px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hrm-info-text);
    margin-bottom: 5px;
}

.hrm-odlocba-besedilo {
    margin: 0 0 7px;
    font-size: 11.5px;
    line-height: 1.7;
}

.hrm-odlocba-drobno {
    font-size: 11.5px;
    color: var(--hrm-text-muted);
    line-height: 1.65;
    margin: 0 0 6px;
}

.hrm-odlocba-podpisi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    margin-top: 26px;
}

.hrm-odlocba-crta {
    border-bottom: 1px solid var(--hrm-text-body);
    height: 36px;
}

.hrm-odlocba-vloga {
    font-size: 11px;
    color: var(--hrm-text-muted);
    margin-top: 5px;
}

.hrm-odlocba-ime {
    font-size: 12px;
    font-weight: 700;
}

/* Tiskanje: na papir gre samo odločba. */
@media print {
    body * {
        visibility: hidden;
    }

    .hrm-odlocba,
    .hrm-odlocba * {
        visibility: visible;
    }

    .hrm-odlocba {
        position: absolute;
        inset: 0;
        border: none;
        border-radius: 0;
        padding: 0;
    }
}

/*
 * Evidenca časa: celice so poravnane na sredino vrstice, kot v prototipu -
 * številke pod imenom in gumbi ob njem so tako v isti liniji.
 */
.hrm-cas-tabela td {
    vertical-align: middle;
}

/* --- Šifrant odmere: tesnejše vrstice prilog --- */
/*
 * Filament med komponente sheme doda razmik; v prilogah je vsaka vrstica
 * svoja komponenta, zato je bilo pod ločnico preveč praznega prostora.
 */
.hrm-okno-sifrant-odmere .hrm-odmera-priloga .fi-sc-has-gap {
    gap: 0;
}

.hrm-okno-sifrant-odmere .hrm-rok-vrstica {
    padding: 3px 0;
}

.hrm-okno-sifrant-odmere .hrm-rok-vrstica .fi-fo-field,
.hrm-okno-sifrant-odmere .hrm-rok-vrstica .fi-fo-field-content-col {
    row-gap: 0;
}

.hrm-okno-sifrant-odmere .hrm-rok-vrstica:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Osnovni kriteriji so v treh stolpcih; polja naj bodo nizka kot v prilogah. */
.hrm-okno-sifrant-odmere .hrm-odmera-kartica input {
    height: 32px;
    font-size: 12.5px;
}

/* Osnovni kriteriji: dva stolpca z razmikom, polja dovolj široka. */
.hrm-okno-sifrant-odmere .hrm-odmera-kriteriji .fi-sc-has-gap {
    gap: 10px 18px;
}

.hrm-okno-sifrant-odmere .hrm-odmera-kriteriji .fi-fo-field-label {
    white-space: normal;
}

/* Ikonski gumb v vrstici odmere je enako visok kot Razčlemba in Odločba. */
.hrm-cas-ikonski {
    padding: 0 9px;
}

.hrm-pdd-gumbi {
    align-items: center;
}

/* --- Masovni pogled: oseba s krogcem, lepljiv prvi stolpec --- */

.hrm-cas-oseba {
    display: flex;
    align-items: center;
    gap: 9px;
}

.hrm-cas-krogec {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--hrm-blue-100);
    color: var(--hrm-blue-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 11px;
    flex-shrink: 0;
}

.hrm-cas-masovna {
    min-width: 760px;
}

/* Ime ostane vidno tudi ob vodoravnem drsenju. */
.hrm-cas-lepljiv {
    position: sticky;
    left: 0;
    background: var(--hrm-surface-card);
    z-index: 1;
}

.hrm-cas-masovna thead .hrm-cas-lepljiv {
    background: var(--hrm-surface-sunken);
}

.hrm-cas-vrstica:hover .hrm-cas-lepljiv {
    background: var(--hrm-surface-hover);
}

.hrm-cas-oddelek-ikona {
    width: 13px;
    height: 13px;
    color: var(--hrm-blue-700);
    display: inline-block;
    vertical-align: -2px;
    margin-right: 4px;
}

/* ==========================================================================
   Štipendisti (HRM.renderStip)
   ========================================================================== */

.hrm-stip-tabs,
.hrm-stip-dok-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.hrm-stip-znacka {
    margin-left: 7px;
    font-size: 11px;
    font-weight: 800;
    background: var(--hrm-gray-100);
    color: inherit;
    border-radius: 999px;
    padding: 1px 7px;
}

.hrm-gumb-primaren .hrm-stip-znacka {
    background: rgba(255, 255, 255, 0.25);
}

/* Orodna vrstica: iskalnik in gumbi v eni vrstici, poravnani desno. */
.hrm-stip-orodja {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.hrm-stip-polje {
    flex: 1;
    min-width: 200px;
    max-width: 260px;
    height: 38px;
}

.hrm-stip-orodja .hrm-gumb {
    height: 38px;
}

.hrm-stip-kartice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 11px;
}

.hrm-stip-stevilka {
    font-family: var(--hrm-font-display);
    font-size: 20px;
    font-weight: 800;
    white-space: nowrap;
    color: var(--hrm-text-strong);
    margin: 2px 0 3px;
    font-variant-numeric: tabular-nums;
}

/* Opozorilo o nepopolni dokumentaciji. */
.hrm-stip-opozorilo {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    border: 2px solid var(--hrm-status-error);
    background: var(--hrm-red-100);
    border-radius: 14px;
    padding: 12px 15px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--hrm-status-error-text);
}

.hrm-stip-opozorilo-ikona {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: var(--hrm-red-accent);
}

.hrm-stip-opozorilo-drobno {
    margin-top: 3px;
    font-weight: 500;
}

/* --- Široka tabela z barvnimi skupinami stolpcev --- */

.hrm-stip-tabela {
    min-width: 1100px;
}

.hrm-stip-tabela th {
    font-size: 10.5px;
    letter-spacing: 0.04em;
}

/*
 * Skupine stolpcev so v slogu aplikacije: poglobljeno ozadje in tanka
 * navpicna locnica med skupinami, brez pastelnih barv iz prototipa.
 */
.hrm-stip-skupine th {
    text-align: left;
    color: var(--hrm-text-muted);
    background: var(--hrm-surface-sunken);
    padding: 8px 10px;
    border-bottom: 1px solid var(--hrm-border-subtle);
}

.hrm-stip-skupine th + th {
    border-left: 1px solid var(--hrm-border-subtle);
}

.hrm-stip-tabela thead tr + tr th {
    background: var(--hrm-surface-card);
    border-bottom: 1px solid var(--hrm-border-subtle);
    vertical-align: bottom;
}

.hrm-stip-znesek {
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Nepopolna dokumentacija: rdec levi rob vrstice, kot drugod v aplikaciji. */
.hrm-stip-nepopoln td:first-child {
    box-shadow: inset 3px 0 0 var(--hrm-status-error);
}

.hrm-stip-zap {
    color: var(--hrm-text-muted);
    font-size: 12px;
}

/* Ime in števila dokumentov so povezave, ne gumbi. */
.hrm-stip-povezava {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--hrm-info-text);
    text-align: left;
}

.hrm-stip-povezava:hover {
    text-decoration: underline;
}

.hrm-stip-manjka {
    color: var(--hrm-red-accent);
}

.hrm-stip-da,
.hrm-stip-ne {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 700;
}

.hrm-stip-da {
    color: var(--hrm-green-text);
}

.hrm-stip-ne {
    color: var(--hrm-red-accent);
}

.hrm-stip-mini-ikona {
    width: 12px;
    height: 12px;
}

.hrm-stip-ni-termina {
    color: var(--hrm-amber-600);
    font-weight: 700;
}

.hrm-stip-lepljiv {
    position: sticky;
    right: 0;
    background: var(--hrm-surface-card);
    box-shadow: -6px 0 8px -6px var(--hrm-senca-lepljiv);
}

/* --- Plan dela --- */

.hrm-stip-filter {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
    padding: 12px 14px;
}

.hrm-stip-leto {
    width: auto;
    min-width: 130px;
    height: 36px;
}

.hrm-stip-legenda {
    flex: 1;
    min-width: 220px;
}

.hrm-stip-legenda-gumbi {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 5px;
}

.hrm-stip-vrsta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 11px;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: var(--hrm-amber-on-solid);
    background: var(--hrm-gray-100);
}

.hrm-stip-pika {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: currentColor;
    display: inline-block;
}

/* Barve vrst dela iz prototipa (HRM.STIP_VRSTE_DELA). */
.hrm-stip-vrsta-sszd {
    background: var(--hrm-amber-100);
}

.hrm-stip-vrsta-sszd .hrm-stip-pika {
    background: var(--hrm-stip-sszd-pika);
}

.hrm-stip-vrsta-solska {
    background: var(--hrm-stip-solska);
}

.hrm-stip-vrsta-solska .hrm-stip-pika {
    background: var(--hrm-stip-solska-pika);
}

.hrm-stip-vrsta-stip {
    background: var(--hrm-amber-200);
}

.hrm-stip-vrsta-stip .hrm-stip-pika {
    background: var(--hrm-stip-stip-pika);
}

.hrm-stip-vrsta-izbrana {
    border-color: currentColor;
}

.hrm-stip-naslov {
    padding: 11px 15px;
    background: var(--hrm-blue-naslov);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0.03em;
}

.hrm-stip-povprecje {
    font-family: var(--hrm-font-display);
    font-size: 14px;
}

/* --- Okno dokumentacije --- */

.hrm-stip-dok {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.hrm-stip-dok-seznam {
    border: 1px solid var(--hrm-border-subtle);
    border-radius: 14px;
    overflow: auto;
    max-height: 280px;
}

.hrm-stip-dok-naslov {
    margin-top: 2px;
}

/* Vrstice z opozorilom v drugih podpogledih - enak slog kot pri štipendistih. */
.hrm-stip-brez-termina td:first-child {
    box-shadow: inset 3px 0 0 var(--hrm-amber-400);
}

.hrm-stip-aktiven td:first-child {
    box-shadow: inset 3px 0 0 var(--hrm-blue-500);
}

/*
 * Filter opreme: oznaka stoji ob gumbih, ne nad njimi, zato je vrstica
 * poravnana na sredino in gumbi nimajo odmika nad sabo.
 */
.hrm-stip-filter-vrstica {
    align-items: center;
}

.hrm-stip-filter-vrstica .hrm-lbl {
    flex-shrink: 0;
}

.hrm-stip-filter-vrstica .hrm-stip-legenda-gumbi {
    margin-top: 0;
}

/* ==========================================================================
   Plače in nagrajevanje (HRM.renderPay)
   ========================================================================== */

/* Trak podzavihkov je zavihek s podčrto, kot .tab v prototipu. */
.hrm-place-tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--hrm-border-subtle);
}

.hrm-place-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--hrm-text-muted);
}

.hrm-place-tab:hover {
    color: var(--hrm-text-strong);
}

.hrm-place-tab-izbran {
    color: var(--hrm-blue-text);
    border-bottom-color: var(--hrm-blue-500);
    font-weight: 800;
}

/* Kot v prototipu: dve kartici v vrsti, na ozkem zaslonu ena. */
.hrm-place-mreza {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

@media (max-width: 1100px) {
    .hrm-place-mreza {
        grid-template-columns: 1fr;
    }
}

.hrm-place-kartica {
    padding: 18px 20px;
}

.hrm-place-kartica h3 {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 800;
    color: var(--hrm-text-strong);
}

.hrm-place-razmerje {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 14px;
}

.hrm-place-tir {
    display: flex;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--hrm-surface-sunken);
}

.hrm-place-tir-fiksno {
    background: var(--hrm-blue-500);
}

.hrm-place-tir-variabilno {
    background: var(--hrm-ral-5010);
}

.hrm-place-legenda {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--hrm-text-body);
}

.hrm-place-legenda span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.hrm-place-znak {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}

.hrm-place-znak-fiksno {
    background: var(--hrm-blue-500);
}

.hrm-place-znak-variabilno {
    background: var(--hrm-ral-5010);
}

.hrm-place-vrednosti {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.hrm-place-vrednosti-stolpec {
    grid-template-columns: 1fr;
    gap: 8px;
}

/*
 * Grafi nadzorne plosce. Prototip jih rise s Chart.js; tu sta kolobar in
 * stolpca izrisana z SVG oziroma CSS, da stran ne potrebuje dodatne
 * knjiznice in gradnje.
 */
.hrm-graf-vrsta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.hrm-kolobar {
    position: relative;
    width: 130px;
    height: 130px;
    flex-shrink: 0;
}

.hrm-kolobar svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.hrm-kolobar-tir,
.hrm-kolobar-lok {
    fill: none;
    /* Polmer 54 + polovica debeline mora ostati znotraj viewBox 120. */
    stroke-width: 11;
}

.hrm-kolobar-tir {
    stroke: var(--hrm-gray-100);
}

.hrm-kolobar-zelen {
    stroke: var(--hrm-green-500);
}

.hrm-kolobar-moder {
    stroke: var(--hrm-blue-500);
}

.hrm-kolobar-ral {
    stroke: var(--hrm-ral-5010);
}

.hrm-kolobar-sredina {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--hrm-font-display);
    font-weight: 800;
    font-size: 22px;
    color: var(--hrm-text-strong);
}

.hrm-graf-ob-strani {
    flex: 1 1 200px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.hrm-place-zamudnik {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 0;
    border-bottom: 1px solid var(--hrm-border-subtle);
}

.hrm-place-zamudnik-ime {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 13.5px;
    color: var(--hrm-text-strong);
}

.hrm-stolpci {
    display: flex;
    align-items: flex-end;
    gap: 22px;
    height: 150px;
    margin-bottom: 16px;
    padding: 0 8px;
}

.hrm-stolpec {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.hrm-stolpec span {
    font-size: 12px;
    color: var(--hrm-text-muted);
}

.hrm-stolpec-tir {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    background: var(--hrm-surface-sunken);
    border-radius: 8px;
}

.hrm-stolpec-polnilo {
    width: 100%;
    min-height: 5px;
    border-radius: 8px;
}

.hrm-stolpec-moder {
    background: var(--hrm-blue-500);
}

.hrm-stolpec-zelen {
    background: var(--hrm-green-500);
}

.hrm-stolpec-oranzen {
    background: var(--hrm-amber-500);
}

.hrm-place-rob-oranzen {
    border-left: 4px solid var(--hrm-amber-500);
}

.hrm-place-rob-rdec {
    border-left: 4px solid var(--hrm-status-error);
}

.hrm-place-legenda-stolpec {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.hrm-place-drobno {
    font-size: 14px;
    font-weight: 700;
}

.hrm-place-stevilka {
    font-family: var(--hrm-font-display);
    font-size: 20px;
    font-weight: 800;
    color: var(--hrm-text-strong);
    margin: 2px 0 3px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- Sistemska opozorila --- */

.hrm-place-opozorila .hrm-vel-glava h3 {
    margin: 0;
    font-size: 15px;
}

.hrm-place-glava-ikona {
    width: 17px;
    height: 17px;
    color: var(--hrm-red-accent);
}

.hrm-place-opozorila-telo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
}

.hrm-place-opozorilo {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--hrm-red-100);
    border-radius: 10px;
    padding: 11px 12px;
}

.hrm-place-opozorilo-besedilo {
    flex: 1;
    font-size: 13px;
    color: var(--hrm-status-error-text);
}

.hrm-place-opozorilo-reseno {
    background: var(--hrm-green-50);
}

.hrm-place-opozorilo-reseno .hrm-place-opozorilo-besedilo {
    color: var(--hrm-green-text);
}

.hrm-place-vredu {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--hrm-green-text);
}

.hrm-place-vredu-ikona {
    width: 18px;
    height: 18px;
    color: var(--hrm-green-accent);
    flex-shrink: 0;
}

/* --- Register --- */

.hrm-place-orodja {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.hrm-place-bruto {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hrm-place-vsota {
    font-size: 11px;
    font-weight: 700;
    color: var(--hrm-blue-700);
    background: var(--hrm-blue-50);
}

/* --- Šifrant razredov --- */

.hrm-place-sifrant {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hrm-place-razred {
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hrm-place-razred-glava {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hrm-place-razred-naziv {
    font-weight: 800;
    font-size: 15px;
    color: var(--hrm-text-strong);
}

.hrm-place-placilni {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid var(--hrm-border-subtle);
}

.hrm-place-placilni:last-of-type {
    border-bottom: none;
}

.hrm-place-placilni-naziv {
    flex: 1;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--hrm-text-strong);
}

.hrm-place-placilni-znesek {
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--hrm-text-body);
}

.hrm-place-prazno {
    font-size: 12px;
    color: var(--hrm-text-subtle);
}

/* --- LOG plačnih sprememb --- */

.hrm-place-dnevnik {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hrm-place-dnevnik-vrstica {
    border-left: 3px solid var(--hrm-blue-500);
    background: var(--hrm-surface-sunken);
    border-radius: 8px;
    padding: 9px 11px;
}

.hrm-place-dnevnik-glava {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--hrm-text-muted);
}

.hrm-place-dnevnik-besedilo {
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--hrm-text-body);
    line-height: 1.5;
}

/* Podzavihek v pripravi. */
.hrm-place-vpripravi {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--hrm-blue-50);
    border: 1px solid var(--hrm-blue-100);
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 12.5px;
    color: var(--hrm-blue-700);
    line-height: 1.6;
}

.hrm-place-vpripravi-ikona {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.hrm-place-vpripravi-drobno {
    margin-top: 3px;
}

/* --- Matrika plač --- */

.hrm-place-obdobje {
    border-left: 4px solid var(--hrm-ral-5010);
    padding: 13px 15px;
}

.hrm-place-obdobje-zaklenjeno {
    border-left-color: var(--hrm-green-500);
}

.hrm-place-obdobje-vrstica {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.hrm-place-mesec {
    width: auto;
    min-width: 170px;
    height: 36px;
    font-weight: 700;
}

.hrm-place-pilula-ikona {
    width: 12px;
    height: 12px;
    display: inline-block;
    vertical-align: -2px;
    margin-right: 3px;
}

.hrm-place-obdobje-opomba {
    margin-top: 7px;
    font-size: 11.5px;
    color: var(--hrm-text-muted);
    line-height: 1.55;
}

.hrm-place-obdobje-opomba-zaklenjena {
    color: var(--hrm-green-text);
}

.hrm-place-normala {
    font-size: 12px;
    color: var(--hrm-text-muted);
    margin-left: auto;
}

.hrm-place-podlaga {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    background: var(--hrm-surface-sunken);
    border-left: 3px solid var(--hrm-blue-500);
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 12.5px;
    color: var(--hrm-text-body);
    line-height: 1.55;
}

.hrm-place-podlaga-ikona {
    width: 15px;
    height: 15px;
    color: var(--hrm-blue-text);
    flex-shrink: 0;
}

.hrm-place-matrika {
    min-width: 980px;
}

/* Potrjene postavke: zelen levi rob vrstice. */
.hrm-place-potrjen td:first-child {
    box-shadow: inset 3px 0 0 var(--hrm-green-500);
}

.hrm-place-urejeno {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--hrm-green-text);
}

.hrm-place-slabo {
    color: var(--hrm-red-accent);
    font-weight: 700;
}

/* --- Sestava variabile --- */

.hrm-place-koraki {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.hrm-place-skupine {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.hrm-place-skupina {
    padding: 13px 15px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hrm-place-vrednost {
    align-self: flex-start;
}

.hrm-place-skupina-vrstica {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 0;
    border-bottom: 1px solid var(--hrm-border-subtle);
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--hrm-text-body);
    text-align: left;
}

.hrm-place-skupina-vrstica span {
    flex: 1;
}

.hrm-place-skupina-vrstica:hover {
    color: var(--hrm-blue-text);
}

.hrm-place-nedolocen {
    color: var(--hrm-text-subtle);
    font-weight: 500;
}

.hrm-place-obdobje-drobno {
    font-size: 10.5px;
    color: var(--hrm-text-muted);
    margin: -2px 0 4px;
}

.hrm-place-shema {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hrm-place-sestavina {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--hrm-border-subtle);
}

.hrm-place-sestavina:last-child {
    border-bottom: none;
}

.hrm-place-sestavina-telo {
    flex: 1;
    min-width: 0;
}

.hrm-place-delez {
    font-size: 13px;
    font-weight: 800;
    color: var(--hrm-info-text);
    font-variant-numeric: tabular-nums;
}

/* --- Pregled variabile --- */

.hrm-place-vpisi {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    background: var(--hrm-green-50);
    border: 1px solid var(--hrm-green-500);
    border-radius: 14px;
    padding: 13px 15px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--hrm-green-text);
}

.hrm-place-vpisi-caka {
    background: var(--hrm-tint-jantar-vpis);
    border-color: var(--hrm-amber-400);
    color: var(--hrm-amber-text-strong);
}

.hrm-place-vpisi-ikona {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.hrm-place-vpisi-telo {
    flex: 1;
    min-width: 220px;
}

.hrm-place-razprto {
    background: var(--hrm-surface-sunken);
    padding: 10px 14px;
}

/* --- KPI nastavitev --- */

.hrm-kpi {
    display: grid;
    grid-template-columns: 260px minmax(380px, 1fr) 300px;
    gap: 18px;
    align-items: start;
}

@media (max-width: 1100px) {
    .hrm-kpi {
        grid-template-columns: 1fr;
    }
}

.hrm-kpi-stolpec {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hrm-kpi-glava {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hrm-kpi-verzije {
    margin-left: auto;
    display: flex;
    gap: 6px;
}

.hrm-kpi-vozlisce {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    border: none;
    background: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--hrm-text-body);
    text-align: left;
    width: 100%;
}

.hrm-kpi-vozlisce:hover {
    background: var(--hrm-surface-hover);
}

.hrm-kpi-vozlisce-izbrano {
    background: var(--hrm-blue-50);
    color: var(--hrm-blue-700);
    font-weight: 700;
}

.hrm-kpi-raven-znak {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hrm-text-subtle);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: 4px;
    padding: 1px 4px;
}

.hrm-kpi-zaklenjeno {
    display: flex;
    gap: 8px;
    align-items: center;
    background: var(--hrm-surface-sunken);
    border-left: 3px solid var(--hrm-ral-5010);
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 12.5px;
    color: var(--hrm-text-body);
}

.hrm-kpi-raven {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hrm-text-muted);
}

.hrm-kpi-raven i {
    flex: 1;
    height: 1px;
    background: var(--hrm-border-subtle);
}

.hrm-kpi-kartica {
    border: 1px solid var(--hrm-border-subtle);
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--hrm-surface-card);
}

.hrm-kpi-podedovana {
    background: var(--hrm-surface-sunken);
}

.hrm-kpi-kartica-glava {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.hrm-kpi-ikona {
    width: 16px;
    height: 16px;
    color: var(--hrm-blue-text);
    flex-shrink: 0;
}

.hrm-kpi-naziv {
    font-weight: 700;
    color: var(--hrm-text-strong);
    flex: 1;
    min-width: 120px;
}

.hrm-kpi-podatki {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--hrm-text-muted);
}

.hrm-kpi-podatki b {
    color: var(--hrm-text-strong);
}

.hrm-kpi-vsiljena {
    color: var(--hrm-info-text);
    font-weight: 600;
}

.hrm-kpi-otroci {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--hrm-border-subtle);
}

.hrm-kpi-otrok {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0 4px 14px;
    font-size: 12.5px;
    border-left: 2px solid var(--hrm-border-subtle);
}

.hrm-kpi-otrok span {
    flex: 1;
}

.hrm-kpi-vsota-otrok {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 4px 0;
    margin-top: 4px;
    border-top: 1px dashed var(--hrm-border-default);
    font-size: 12px;
}

.hrm-kpi-vsota-otrok span {
    flex: 1;
    font-weight: 700;
    color: var(--hrm-text-strong);
}

.hrm-kpi-vsota {
    font-family: var(--hrm-font-display);
    font-size: 30px;
    font-weight: 800;
    text-align: center;
    padding: 8px 0;
    font-variant-numeric: tabular-nums;
}

.hrm-kpi-vsota-ok {
    color: var(--hrm-green-accent);
}

.hrm-kpi-vsota-slaba {
    color: var(--hrm-red-accent);
}

.hrm-kpi-skupaj {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    border-top: 2px solid var(--hrm-border-default);
    font-weight: 800;
    color: var(--hrm-text-strong);
}

.hrm-kpi-skupaj span:first-child {
    flex: 1;
}

.hrm-kpi-siroki {
    width: 100%;
    justify-content: center;
}

.hrm-kpi-onemogocen {
    opacity: 0.5;
    pointer-events: none;
}

.hrm-kpi-shranjena {
    background: var(--hrm-green-50);
    border-radius: 9px;
    padding: 10px 12px;
    font-size: 12px;
    color: var(--hrm-green-text);
    line-height: 1.55;
}

/* ---------------------------------------------------------------------------
   Letni razgovori (HRM.renderLR): terminski plan, zapisniki in ukrepi.
   --------------------------------------------------------------------------- */

.hrm-lr-orodja {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

/* Iskalnik je enak kot drugod v aplikaciji (.hrm-akp-polje). */
.hrm-lr-iskalnik {
    flex: 1;
    min-width: 200px;
    max-width: 240px;
    height: 38px;
}

.hrm-lr-orodja-desno {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hrm-lr-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.hrm-lr-stevec {
    margin-left: 7px;
    font-size: 11px;
    font-weight: 800;
    background: var(--hrm-gray-100);
    border-radius: 999px;
    padding: 1px 7px;
}

.hrm-gumb-primaren .hrm-lr-stevec {
    background: rgba(255, 255, 255, 0.25);
}

/* Rumeno opozorilo (razgovori v tem tednu, zapisniki brez podpisa). */
.hrm-lr-opomnik {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px 15px;
    margin-bottom: 13px;
    border: 2px solid var(--hrm-amber-500);
    border-radius: var(--hrm-radius-sm);
    background: var(--hrm-amber-50);
    font-size: 12.5px;
    color: var(--hrm-amber-text-strong);
    line-height: 1.55;
}

.hrm-lr-opomnik-ikona {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: var(--hrm-amber-text);
}

.hrm-lr-tabela-kartica {
    padding: 0;
    overflow-x: auto;
}

.hrm-lr-tabela-kartica .hrm-cas-opomba {
    padding: 9px 14px;
    margin: 0;
    border-top: 1px solid var(--hrm-border-subtle);
}

.hrm-lr-vrstica-kmalu {
    background: var(--hrm-tint-jantar);
}

.hrm-lr-vrstica-caka {
    background: var(--hrm-tint-jantar-mocan);
}

.hrm-lr-vrstica-zamuda {
    background: var(--hrm-tint-rdeca-mocna);
}

.hrm-lr-povezava {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    color: var(--hrm-info-text);
    text-align: left;
}

.hrm-lr-povezava:hover {
    text-decoration: underline;
}

.hrm-lr-ura {
    font-size: 11px;
    font-weight: 700;
    color: var(--hrm-info-text);
}

.hrm-lr-manjka {
    font-size: 12px;
    font-weight: 700;
    color: var(--hrm-amber-text);
}

/* Gumbi v vrstici: napis levo, ikone v skupini z obrobo desno. */
.hrm-lr-dejanja {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
}

.hrm-lr-ikone {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--hrm-border-default);
    border-radius: 8px;
    overflow: hidden;
    background: var(--hrm-surface-card);
}

.hrm-lr-ikona {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 28px;
    background: none;
    border: none;
    border-left: 1px solid var(--hrm-border-subtle);
    cursor: pointer;
    color: var(--hrm-info-text);
    transition: background 0.12s ease, color 0.12s ease;
}

.hrm-lr-ikone .hrm-lr-ikona:first-child {
    border-left: none;
}

.hrm-lr-ikona:hover {
    background: var(--hrm-surface-sunken);
}

.hrm-lr-ikona-rdeca {
    color: var(--hrm-red-accent);
}

.hrm-lr-ikona-rdeca:hover {
    background: var(--hrm-red-50);
}

.hrm-lr-ikona-slika {
    width: 15px;
    height: 15px;
}

.hrm-lr-tir {
    height: 5px;
    background: var(--hrm-gray-100);
    border-radius: 3px;
    margin-top: 3px;
    overflow: hidden;
}

.hrm-lr-tir-polnilo {
    height: 100%;
    background: var(--hrm-ral-5010);
}

.hrm-lr-podpis-mini {
    height: 26px;
    background: #fff;
    border: 1px solid var(--hrm-border-subtle);
    border-radius: 4px;
}

.hrm-lr-rok {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--hrm-text-muted);
}

.hrm-lr-rok-kmalu {
    color: var(--hrm-amber-text);
}

/* Sprozilec spustnika stanja ukrepa je videti kot polje. */
.hrm-lr-status {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: auto;
    min-width: 132px;
    height: 30px;
    font-size: 12px;
    cursor: pointer;
    text-align: left;
}

.hrm-lr-status:hover {
    border-color: var(--hrm-blue-500);
}

.hrm-lr-status-ikona {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--hrm-text-muted);
}

.hrm-lr-zakljucek {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hrm-lr-filtri {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    padding: 11px 14px;
    margin-bottom: 13px;
}

.hrm-lr-filtri .hrm-lbl {
    margin: 0;
}

/* --- Okno zapisnika --- */

.hrm-lr-stanje {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 13px;
    border-radius: var(--hrm-radius-sm);
    background: var(--hrm-surface-sunken);
    font-size: 12.5px;
    color: var(--hrm-text-body);
    line-height: 1.55;
}

.hrm-lr-stanje-ikona {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--hrm-info-text);
}

.hrm-lr-stanje-podpisan {
    background: var(--hrm-green-50);
    color: var(--hrm-green-text);
    font-weight: 600;
}

.hrm-lr-sklop {
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: flex-start;
    padding: 12px 14px;
    margin-top: 13px;
    border: 1px solid var(--hrm-border-default);
    border-radius: 9px;
    background: var(--hrm-surface-sunken);
}

.hrm-lr-sklop-naslov {
    font-size: 12px;
    font-weight: 800;
    color: var(--hrm-text-strong);
}

.hrm-lr-priloga,
.hrm-lr-ukrep {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 9px;
    background: var(--hrm-surface-card);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: 8px;
    font-size: 12.5px;
}

.hrm-lr-priloga-naziv,
.hrm-lr-ukrep-naloga {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.hrm-lr-podpis-sklop {
    border-color: var(--hrm-ral-5010);
    border-width: 2px;
    background: var(--hrm-surface-card);
}

.hrm-lr-podpis-oddan {
    border-color: var(--hrm-green-500);
    background: var(--hrm-green-50);
}

.hrm-lr-podpis-oddan-telo {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--hrm-green-text);
    line-height: 1.55;
}

.hrm-lr-podpis-slika {
    height: 64px;
    background: #fff;
    border: 1px solid var(--hrm-border-subtle);
    border-radius: 8px;
    padding: 4px;
}

.hrm-lr-podpis-navodilo {
    font-size: 12.5px;
    color: var(--hrm-text-body);
    line-height: 1.55;
    margin-bottom: 9px;
}

.hrm-lr-platno {
    width: 100%;
    max-width: 560px;
    height: 150px;
    background: #fff;
    border: 1px dashed var(--hrm-border-default);
    border-radius: 8px;
    touch-action: none;
    cursor: crosshair;
    display: block;
}

.hrm-lr-podpis-orodja {
    display: flex;
    gap: 9px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 9px;
}

.hrm-lr-podpis-orodja .hrm-gumb[disabled] {
    opacity: 0.5;
    pointer-events: none;
}

/* --- Pripravljena vabila --- */

.hrm-lr-vabila {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 460px;
    overflow-y: auto;
}

.hrm-lr-vabilo {
    border-bottom: 1px solid var(--hrm-border-subtle);
    padding-bottom: 10px;
}

.hrm-lr-vabilo-zadeva {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--hrm-text-strong);
}

.hrm-lr-vabilo-prejemniki {
    font-size: 11px;
    color: var(--hrm-info-text);
    margin-top: 2px;
}

.hrm-lr-vabilo-vsebina {
    font-size: 11.5px;
    color: var(--hrm-text-muted);
    margin-top: 4px;
    line-height: 1.55;
    white-space: pre-line;
}

/* Seznam udelezencev v oknu termina ostane znotraj okvira. */
.hrm-lr-udelezenci .fi-fo-checkbox-list {
    max-height: 210px;
    overflow-y: auto;
}

/* ---------------------------------------------------------------------------
   Kadrovski sestanki (HRM.renderKs): zapisniki, opravila in revizijska sled.
   Ikonski gumbi in spustnik stanja so skupni z letnimi razgovori (.hrm-lr-*).
   --------------------------------------------------------------------------- */

.hrm-ks-orodja {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.hrm-ks-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.hrm-ks-tabela-kartica {
    padding: 0;
    overflow-x: auto;
}

.hrm-ks-tabela-kartica .hrm-cas-opomba {
    padding: 9px 14px;
    margin: 0;
    border-top: 1px solid var(--hrm-border-subtle);
}

.hrm-ks-prisotni-stolpec {
    max-width: 220px;
    font-size: 12px;
}

.hrm-ks-tocke,
.hrm-ks-opomba {
    max-width: 260px;
    font-size: 12px;
    color: var(--hrm-text-muted);
}

/* Modro obvestilo o dodeljenih opravilih in zamudah. */
.hrm-ks-obvestila {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 15px;
    margin-bottom: 13px;
    border: 2px solid var(--hrm-ral-5010);
    border-radius: var(--hrm-radius-sm);
    background: var(--hrm-blue-50);
}

.hrm-ks-obvestila-ikona {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: var(--hrm-info-text);
}

.hrm-ks-obvestila-telo {
    flex: 1;
    min-width: 220px;
}

.hrm-ks-obvestila-naslov {
    font-size: 13px;
    font-weight: 800;
    color: var(--hrm-info-text);
}

.hrm-ks-obvestilo {
    font-size: 12px;
    color: var(--hrm-info-text);
    margin-top: 3px;
    line-height: 1.5;
}

.hrm-ks-obvestilo-cas {
    opacity: 0.7;
}

/* Opozorilo, da je prikaz omejen na en sestanek. */
.hrm-ks-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--hrm-border-default);
    border-radius: var(--hrm-radius-sm);
    background: var(--hrm-blue-50);
    font-size: 12.5px;
    color: var(--hrm-info-text);
}

.hrm-ks-filter > div {
    flex: 1;
    min-width: 200px;
}

/* Revizijska sled. */
.hrm-ks-sled {
    padding: 6px 18px 14px;
}

.hrm-ks-sled-okno {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 440px;
    overflow-y: auto;
}

.hrm-ks-sled-vrstica {
    display: flex;
    gap: 11px;
    padding: 10px 0;
    border-bottom: 1px solid var(--hrm-border-subtle);
}

.hrm-ks-sled-ikona {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--hrm-info-text);
}

.hrm-ks-sled-besedilo {
    font-size: 12.5px;
    color: var(--hrm-text-strong);
    line-height: 1.45;
}

.hrm-ks-noga-gumbi {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

/* Seznam prisotnih je ponavljalnik - vrstice naj se ne razlezejo. */
.hrm-ks-prisotni .fi-fo-repeater-item {
    margin-bottom: 6px;
}

/*
 * Nalozena datoteka v oknu. FilePond obarva plosco po stanju: sivo med
 * nalaganjem, temno zeleno ob uspehu in temno rdece ob napaki. Temne
 * ploskve v svetlem oknu izstopajo, zato prevzamejo blede barve
 * aplikacije - iste kot pilule in okvircki stanj drugod.
 */
.hrm-okno-dokument .fi-fo-file-upload .filepond--item-panel {
    background-color: var(--hrm-surface-sunken);
    border: 1px solid var(--hrm-border-subtle);
    border-radius: 10px;
}

.hrm-okno-dokument .fi-fo-file-upload [data-filepond-item-state='processing-complete'] .filepond--item-panel {
    background-color: var(--hrm-green-50);
    border-color: var(--hrm-green-200);
}

.hrm-okno-dokument .fi-fo-file-upload [data-filepond-item-state*='error'] .filepond--item-panel,
.hrm-okno-dokument .fi-fo-file-upload [data-filepond-item-state*='invalid'] .filepond--item-panel {
    background-color: var(--hrm-red-50);
    border-color: var(--hrm-red-200);
}

/* Napis na bledi podlagi mora biti temen, ne bel. */
.hrm-okno-dokument .fi-fo-file-upload .filepond--file {
    color: var(--hrm-text-strong);
}

.hrm-okno-dokument .fi-fo-file-upload [data-filepond-item-state='processing-complete'] .filepond--file {
    color: var(--hrm-green-text);
}

.hrm-okno-dokument .fi-fo-file-upload [data-filepond-item-state*='error'] .filepond--file,
.hrm-okno-dokument .fi-fo-file-upload [data-filepond-item-state*='invalid'] .filepond--file {
    color: var(--hrm-status-error-text);
}

.hrm-okno-dokument .fi-fo-file-upload .filepond--file-info-sub {
    color: var(--hrm-text-muted);
    opacity: 1;
}

.hrm-okno-dokument .fi-fo-file-upload .filepond--file-action-button {
    background-color: var(--hrm-filepond-gumb);
    color: var(--hrm-text-strong);
}

.hrm-okno-dokument .fi-fo-file-upload .filepond--file-action-button:hover {
    background-color: var(--hrm-filepond-gumb-hover);
}

/*
 * Gumba za prenos in odpiranje obstojece priloge (Filament ju vrine pred
 * ime datoteke). Privzeto sta bela in se na bledi podlagi ne vidita,
 * zato ju obarvamo modro in postavimo na skrajni desni rob vrstice -
 * gumb za odstranitev je levo.
 */
/*
 * Sidro gumbov je .filepond--item, ki se razteza cez vso sirino vrstice.
 * .filepond--file-info ima will-change: transform, s cimer postane
 * ovojnica za absolutno postavljene potomce - gumba bi zato viseli ob
 * njegovem desnem robu, ne ob robu vrstice. Zato mu to odvzamemo.
 */
.hrm-okno-dokument .fi-fo-file-upload .filepond--file,
.hrm-okno-dokument .fi-fo-file-upload .filepond--file-wrapper {
    position: static;
}

.hrm-okno-dokument .fi-fo-file-upload .filepond--file-info {
    will-change: auto;
    transform: none !important;
    /* Rezerva za kos na levi; brez transforma ga FilePond ne odmakne sam. */
    padding-inline-start: 2.25em;
}

/*
 * FilePond stanju datoteke doda margin-right: 2.25em - rezervo za gumb, ki
 * ga privzeto postavi na desno. Vsa dejanja so pri nas levo, zato rezerva
 * ostane prazna in stanje odriva od roba; odvzamemo jo.
 */
.hrm-okno-dokument .fi-fo-file-upload .filepond--file-status {
    margin-right: 0;
    /*
     * FilePond stanje dodatno zamakne z inline transformom (rezerva za gumb
     * na desni). Zamik potisne besedilo cez rob vrstice, kjer ga porezese
     * .filepond--list-scroller, zato ga odvzamemo - enako kot pri imenu.
     */
    transform: none !important;
    will-change: auto;
}

/*
 * Stanje datoteke stoji ob desnem robu vrstice; rezervo dobi samo takrat,
 * ko sta v vrstici gumba za prenos in odpiranje (torej pri ze shranjeni
 * prilogi), da se z njima ne prekriva.
 */
.hrm-okno-dokument .fi-fo-file-upload .filepond--file:has(.filepond--download-icon) .filepond--file-status,
.hrm-okno-dokument .fi-fo-file-upload .filepond--file:has(.filepond--open-icon) .filepond--file-status {
    padding-inline-end: 46px;
}

.hrm-okno-dokument .fi-fo-file-upload .filepond--download-icon,
.hrm-okno-dokument .fi-fo-file-upload .filepond--open-icon {
    position: absolute;
    top: 50%;
    width: 17px;
    height: 17px;
    margin: 0;
    transform: translateY(-50%);
    background-color: var(--hrm-ral-5010);
}

.hrm-okno-dokument .fi-fo-file-upload .filepond--download-icon:hover,
.hrm-okno-dokument .fi-fo-file-upload .filepond--open-icon:hover {
    background-color: var(--hrm-blue-500);
}

.hrm-okno-dokument .fi-fo-file-upload .filepond--download-icon {
    right: 8px;
}

.hrm-okno-dokument .fi-fo-file-upload .filepond--open-icon {
    right: 31px;
}



/*
 * Napaka pri nalaganju (prevelika datoteka, nedovoljena vrsta): sporocilo
 * se ne krci in dobi natanko toliko prostora, kot ga potrebuje, ime
 * datoteke pa vse ostalo in se ob predolgem nazivu konca s tremi pikami.
 */
.hrm-okno-dokument .fi-fo-file-upload [data-filepond-item-state*='invalid'] .filepond--file-status,
.hrm-okno-dokument .fi-fo-file-upload [data-filepond-item-state*='error'] .filepond--file-status {
    flex: 0 0 auto;
    min-width: max-content;
    padding-inline-end: 0;
    overflow: visible;
}

.hrm-okno-dokument .fi-fo-file-upload [data-filepond-item-state*='invalid'] .filepond--file-info,
.hrm-okno-dokument .fi-fo-file-upload [data-filepond-item-state*='error'] .filepond--file-info {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 0.75em;
}

.hrm-okno-dokument .fi-fo-file-upload [data-filepond-item-state*='invalid'] .filepond--file-status *,
.hrm-okno-dokument .fi-fo-file-upload [data-filepond-item-state*='error'] .filepond--file-status * {
    line-height: 1.35;
    overflow: visible;
}

/* Napaka je pomembnejsa od podnapisa - podnapis naj se ne bledi. */
.hrm-okno-dokument .fi-fo-file-upload [data-filepond-item-state*='invalid'] .filepond--file-status-sub,
.hrm-okno-dokument .fi-fo-file-upload [data-filepond-item-state*='error'] .filepond--file-status-sub {
    opacity: 1;
}

/* ---------------------------------------------------------------------------
   Izobrazevanja (HRM.renderIzb): baza izobrazevanj in Smart Arena.
   Ikonski gumbi, pilule in tir napredka so skupni z drugimi moduli.
   --------------------------------------------------------------------------- */

.hrm-izb-orodja {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.hrm-izb-iskalnik {
    flex: 1;
    min-width: 200px;
    max-width: 260px;
    height: 38px;
}

.hrm-izb-orodja-desno {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hrm-izb-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.hrm-izb-filtri {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    padding: 11px 14px;
    margin-bottom: 13px;
}

.hrm-izb-filtri .hrm-lbl {
    margin: 0;
}

.hrm-izb-locilo {
    width: 12px;
}

.hrm-izb-tabela-kartica {
    padding: 0;
    overflow-x: auto;
}

.hrm-izb-tabela-kartica .hrm-cas-opomba {
    padding: 9px 14px;
    margin: 0;
    border-top: 1px solid var(--hrm-border-subtle);
}

.hrm-izb-znesek {
    font-weight: 700;
    white-space: nowrap;
}

.hrm-izb-namen {
    max-width: 260px;
    font-size: 11.5px;
    color: var(--hrm-text-muted);
}

.hrm-izb-vpis,
.hrm-izb-prijave {
    font-size: 10.5px;
    font-weight: 700;
    margin-top: 2px;
}

.hrm-izb-tir-zelen {
    background: var(--hrm-green-500);
}

.hrm-izb-opravili {
    font-weight: 700;
}

.hrm-izb-napredek {
    width: 150px;
}

/* Dnevnik modula pod tabelo. */
.hrm-izb-dnevnik {
    margin-top: 14px;
    padding: 0;
    overflow-x: auto;
}

.hrm-izb-dnevnik-glava {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
}

.hrm-izb-dnevnik-glava .hrm-lbl {
    flex: 1;
    margin: 0;
}

/* Stanje povezave s Smart Areno. */
.hrm-izb-stanje {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    padding: 13px 15px;
    margin-bottom: 14px;
    border-radius: var(--hrm-radius-sm);
    border-left: 4px solid var(--hrm-amber-500);
    background: var(--hrm-amber-50);
    font-size: 12.5px;
    color: var(--hrm-amber-text-strong);
    line-height: 1.6;
}

.hrm-izb-stanje > div {
    flex: 1;
    min-width: 230px;
}

.hrm-izb-stanje-povezan {
    border-left-color: var(--hrm-green-500);
    background: var(--hrm-green-50);
    color: var(--hrm-green-text);
}

.hrm-izb-stanje-ikona {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.hrm-izb-stanje-drobno {
    margin-top: 3px;
    color: var(--hrm-text-body);
}

/* Okno prijav. */
.hrm-izb-povzetek {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 14px;
    margin-bottom: 13px;
    border: 1px solid var(--hrm-amber-300);
    border-radius: var(--hrm-radius-sm);
    background: var(--hrm-amber-50);
    color: var(--hrm-amber-text-strong);
}

.hrm-izb-povzetek-ok {
    border-color: var(--hrm-green-200);
    background: var(--hrm-green-50);
    color: var(--hrm-green-text);
}

.hrm-izb-povzetek-besedilo {
    flex: 1;
    min-width: 200px;
    font-size: 12.5px;
    line-height: 1.55;
}

.hrm-izb-stevilka {
    font-family: var(--hrm-font-display);
    font-size: 22px;
    font-weight: 800;
}

.hrm-izb-tabela-okno {
    max-height: 340px;
    overflow: auto;
    border: 1px solid var(--hrm-border-subtle);
    border-radius: var(--hrm-radius-sm);
}

.hrm-izb-vrstica-prijavljen {
    background: var(--hrm-tint-zelena);
}

/*
 * Nacin udelezbe: dve kartici z opisom, kot v prototipu. Filament izrise
 * <label class="fi-fo-radio-label"> z gumbom in besedilom, zato kartico
 * naredimo iz oznake - klik po vsej ploskvi izbere moznost.
 */
/* Razmik do naslova polja in med karticama. */
.hrm-izb-nacin {
    gap: 10px;
    margin-top: 6px;
}

.hrm-izb-nacin .fi-fo-radio-label {
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: 10px 11px;
    border: 1.5px solid var(--hrm-border-default);
    border-radius: 9px;
    background: var(--hrm-surface-card);
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.hrm-izb-nacin .fi-fo-radio-label:hover {
    border-color: var(--hrm-blue-500);
}

/* Izbrana kartica: moder rob in bleda modra podlaga. */
.hrm-izb-nacin .fi-fo-radio-label:has(.fi-radio-input:checked) {
    border-color: var(--hrm-ral-5010);
    background: var(--hrm-blue-50);
}

.hrm-izb-nacin .fi-fo-radio-label .fi-radio-input {
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

/* Izbran gumb je moder krog z belo piko, ne bela pika na belem. */
.hrm-izb-nacin .fi-radio-input:checked {
    background-color: var(--hrm-ral-5010);
    border-color: var(--hrm-ral-5010);
}

.hrm-izb-nacin .fi-fo-radio-label-text {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--hrm-text-strong);
}

.hrm-izb-nacin .fi-fo-radio-label-description {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--hrm-text-muted);
    line-height: 1.5;
    margin-top: 2px;
}

/* ---------------------------------------------------------------------------
   Filamentove tabele (Zaposleni, Šifranti): straničenje, iskalnik in filtri
   dobijo enak videz kot gumbi in polja drugod v aplikaciji.
   --------------------------------------------------------------------------- */

.fi-pagination {
    gap: 10px;
    flex-wrap: wrap;
}

.fi-pagination-overview {
    font-size: 12px;
    color: var(--hrm-text-muted);
}

.fi-pagination-items {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fi-pagination-item-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--hrm-border-default);
    border-radius: 10px;
    background: var(--hrm-surface-card);
    box-shadow: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--hrm-text-body);
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.fi-pagination-item-btn:hover {
    border-color: var(--hrm-blue-500);
    background: var(--hrm-surface-hover);
    color: var(--hrm-text-strong);
}

/* Trenutna stran je modra, kot izbrani gumb drugod. */
.fi-pagination-item.fi-active .fi-pagination-item-btn {
    border-color: var(--hrm-ral-5010);
    background: var(--hrm-ral-5010);
    color: #fff;
}

.fi-pagination-item.fi-disabled .fi-pagination-item-btn {
    opacity: 0.45;
    background: var(--hrm-surface-sunken);
}

.fi-pagination-item-icon {
    width: 15px;
    height: 15px;
}

/* Izbirnik števila vrstic in iskalnik: enako kot .hrm-akp-polje. */
.fi-pagination-records-per-page-select .fi-input-wrp,
.fi-ta-search-field .fi-input-wrp {
    border: 1px solid var(--hrm-border-default);
    border-radius: 10px;
    background: var(--hrm-surface-card);
    box-shadow: none;
    outline: none;
}

.fi-pagination-records-per-page-select .fi-input-wrp:focus-within,
.fi-ta-search-field .fi-input-wrp:focus-within {
    border-color: var(--hrm-blue-500);
    box-shadow: 0 0 0 3px var(--hrm-fokus-obroc);
}

.fi-pagination-records-per-page-select .fi-select-input,
.fi-ta-search-field .fi-input {
    font-size: 12.5px;
    color: var(--hrm-text-strong);
}

/* Gumb filtrov je prazen gumb aplikacije. */
.fi-ta-filters-trigger-action-ctn .fi-icon-btn,
.fi-ta-filters-dropdown .fi-dropdown-trigger .fi-icon-btn {
    height: 34px;
    width: auto;
    min-width: 34px;
    padding: 0 10px;
    border: 1px solid var(--hrm-border-default);
    border-radius: 10px;
    background: var(--hrm-surface-card);
    color: var(--hrm-text-body);
}

.fi-ta-filters-trigger-action-ctn .fi-icon-btn:hover,
.fi-ta-filters-dropdown .fi-dropdown-trigger .fi-icon-btn:hover {
    border-color: var(--hrm-blue-500);
    background: var(--hrm-surface-hover);
}

/* Okno filtrov: naslov in razmiki kot v karticah aplikacije. */
.fi-ta-filters-dropdown .fi-dropdown-panel {
    border-radius: var(--hrm-radius-md);
}

.fi-ta-filters-heading {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--hrm-text-strong);
}

.fi-ta-filters .fi-fo-field-wrp-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--hrm-text-muted);
}

/*
 * Sifranti: seznam nima strani, filtrov ne razvrscanja, zato locilne crte
 * nad karticami in pod njimi nimajo cesa lociti - odstranimo jih.
 */
.hrm-sifranti-stran .fi-ta-header-ctn,
.hrm-sifranti-stran .fi-ta-header,
.hrm-sifranti-stran .fi-ta-header-toolbar,
.hrm-sifranti-stran .fi-ta-content,
.hrm-sifranti-stran .fi-ta-footer,
.hrm-sifranti-stran .fi-ta-content-ctn {
    border-top: none;
    border-bottom: none;
    box-shadow: none;
}

.hrm-sifranti-stran .fi-ta-header-toolbar {
    padding-bottom: 14px;
}

/* Po iskanju se pokaze vrstica z znackami filtrov - te na tej strani ni. */
.hrm-sifranti-stran .fi-ta-filter-indicators {
    display: none;
}

/*
 * Sirine posameznih oken. Osnovni .hrm-okno-dokument je po prototipu ozek
 * (520 px), obrazci z vec stolpci pa potrebujejo vec prostora; brez teh
 * pravil jih omejuje osnovna sirina.
 */
.hrm-okno-dokument.hrm-okno-izb {
    max-width: 800px;
}

.hrm-okno-dokument.hrm-okno-lr-zapisnik,
.hrm-okno-dokument.hrm-okno-stip-dok {
    max-width: 980px;
}

.hrm-okno-dokument.hrm-okno-ks,
.hrm-okno-dokument.hrm-okno-lr-termin {
    max-width: 900px;
}

.hrm-okno-dokument.hrm-okno-roki,
.hrm-okno-dokument.hrm-okno-sifrant-odmere {
    max-width: 660px;
}

/*
 * Sifranti: vse kartice naj bodo enako visoke in enako poravnane. Visino
 * je doslej dolocal najdaljsi opis v vrstici, zato so bile vrstice
 * razlicno visoke, vsebina pa enkrat na vrhu, drugic na sredini.
 *
 * Opis zato vedno zasede natanko dve vrstici (daljsi se odreze s tremi
 * pikami), s cimer je visina vsebine povsod enaka; vsebina je poravnana
 * na vrh kartice.
 */
.hrm-sifranti-stran .fi-ta-content-grid .fi-ta-record-content,
.hrm-sifranti-stran .fi-ta-content-grid .fi-ta-record-content > .fi-grid-col,
.hrm-sifranti-stran .fi-ta-content-grid .fi-ta-record-content .fi-ta-split {
    height: 100%;
}

.hrm-sifranti-stran .fi-ta-content-grid .fi-ta-record-content .fi-ta-split {
    align-items: flex-start;
}

.hrm-sifranti-stran .fi-ta-content-grid .hrm-sifrant-kljukica {
    margin-top: 1px;
}

.hrm-sifranti-stran .fi-ta-content-grid .fi-ta-stack {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Opis: natanko dve vrstici, daljsi se odreze. */
.hrm-sifranti-stran .fi-ta-content-grid .fi-ta-stack > .fi-grid-col:nth-child(2) .fi-ta-text-item {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.9em;
    line-height: 1.45;
}

.hrm-sifranti-stran .fi-ta-content-grid .fi-ta-stack > .fi-grid-col:last-child {
    padding-top: 3px;
}

/* ---------------------------------------------------------------------------
   Pregled (HRM.renderDashboard): izvrsni trak, sistemska opozorila in
   trije stolpci s kazalniki.
   --------------------------------------------------------------------------- */

.hrm-pregled-trak {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 22px;
    margin-bottom: 18px;
    border-radius: var(--hrm-radius-lg);
    background: linear-gradient(90deg, #0b3054, #004f7c);
    box-shadow: var(--hrm-shadow-md);
}

.hrm-pregled-trak-naslov {
    font-family: var(--hrm-font-display);
    font-size: 20px;
    font-weight: 800;
    color: #fff;
}

.hrm-pregled-trak-status {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.hrm-pregled-trak-status span {
    color: var(--hrm-green-svetla);
}

.hrm-pregled-trak-desno {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.hrm-pregled-trak-ikona {
    width: 18px;
    height: 18px;
}

/* --- Sistemska opozorila --- */

.hrm-pregled-opozorila {
    border: 2px solid var(--hrm-border-subtle);
    border-radius: var(--hrm-radius-md);
    background: var(--hrm-surface-card);
    box-shadow: var(--hrm-shadow-md);
    overflow: hidden;
    margin-bottom: 20px;
}

.hrm-pregled-opozorila-nujno {
    border-color: var(--hrm-amber-500);
}

.hrm-pregled-opozorila-glava {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 18px;
    background: var(--hrm-surface-sunken);
    border-bottom: 1px solid var(--hrm-border-subtle);
}

.hrm-pregled-opozorila-nujno .hrm-pregled-opozorila-glava {
    background: var(--hrm-amber-50);
}

.hrm-pregled-opozorila-ikona {
    width: 18px;
    height: 18px;
    color: var(--hrm-text-muted);
}

.hrm-pregled-opozorila-nujno .hrm-pregled-opozorila-ikona {
    color: var(--hrm-amber-text);
}

.hrm-pregled-opozorila-naslov {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--hrm-text-strong);
}

.hrm-pregled-opozorila-nujno .hrm-pregled-opozorila-naslov {
    color: var(--hrm-amber-text-strong);
}

.hrm-pregled-stevec {
    font-size: 11px;
    font-weight: 800;
    background: var(--hrm-gray-100);
    color: var(--hrm-text-body);
    border-radius: 999px;
    padding: 2px 9px;
}

.hrm-pregled-opozorila-nujno .hrm-pregled-stevec {
    background: var(--hrm-amber-500);
    color: var(--hrm-amber-on-solid);
}

.hrm-pregled-nujno {
    font-size: 12px;
    font-weight: 700;
    color: var(--hrm-status-error-text);
}

.hrm-pregled-razmik {
    flex: 1;
}

.hrm-pregled-opozorila-mreza {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.hrm-pregled-opozorilo {
    display: flex;
    gap: 10px;
    padding: 13px 16px;
    border-left: 4px solid var(--hrm-blue-500);
    border-right: 1px solid var(--hrm-border-subtle);
    background: var(--hrm-blue-50);
    color: var(--hrm-info-text);
}

.hrm-pregled-opozorilo-jantar {
    border-left-color: var(--hrm-amber-500);
    background: var(--hrm-amber-50);
    color: var(--hrm-amber-text-strong);
}

.hrm-pregled-opozorilo-zeleno {
    border-left-color: var(--hrm-green-500);
    background: var(--hrm-green-50);
    color: var(--hrm-green-text);
}

.hrm-pregled-opozorilo-ikona {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.hrm-pregled-opozorilo-besedilo {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.hrm-pregled-opozorilo-noga {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 3px;
    font-size: 11px;
    opacity: 0.85;
}

.hrm-pregled-povezava {
    font-size: 11px;
    font-weight: 800;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}

/* --- Trije stolpci --- */

.hrm-pregled-mreza {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.25fr) minmax(0, 0.9fr);
    gap: 20px;
    align-items: start;
}

@media (max-width: 1200px) {
    .hrm-pregled-mreza {
        grid-template-columns: 1fr;
    }
}

.hrm-pregled-stolpec {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hrm-pregled-oznaka {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hrm-text-subtle);
    margin: 2px 2px -4px;
}

.hrm-pregled-kartica {
    padding: 16px;
}

.hrm-pregled-kartica h3 {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hrm-text-muted);
}

/* Skupaj zaposlenih. */
.hrm-pregled-stevilo {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.hrm-pregled-stevilo b {
    font-family: var(--hrm-font-display);
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    color: var(--hrm-text-strong);
}

.hrm-pregled-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-bottom: 5px;
    font-size: 13px;
    font-weight: 700;
    color: var(--hrm-text-muted);
}

/* Kolobar oddelkov je tanjsi od tistega na nadzorni plosci plac. */
.hrm-pregled-kolobar {
    width: 118px;
    height: 118px;
}

.hrm-pregled-kolobar .hrm-kolobar-lok {
    stroke-width: 16;
}

.hrm-pregled-legenda {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.hrm-pregled-legenda-vrstica {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--hrm-text-body);
    min-width: 0;
}

.hrm-pregled-legenda-vrstica i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.hrm-pregled-legenda-vrstica span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hrm-pregled-legenda-vrstica b {
    margin-left: auto;
    color: var(--hrm-text-muted);
    flex-shrink: 0;
}

/* Starostna struktura. */
.hrm-pregled-palice {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hrm-pregled-palica {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    color: var(--hrm-text-body);
}

.hrm-pregled-palica-naziv {
    width: 78px;
    flex-shrink: 0;
}

.hrm-pregled-palica-tir {
    flex: 1;
    height: 14px;
    background: var(--hrm-gray-100);
    border-radius: 5px;
    overflow: hidden;
}

.hrm-pregled-palica-polnilo {
    display: block;
    height: 100%;
    background: var(--hrm-blue-500);
    border-radius: 5px;
}

.hrm-pregled-palica b {
    width: 34px;
    text-align: right;
    font-size: 12.5px;
    color: var(--hrm-text-strong);
}

/* Spol. */
.hrm-pregled-spol-tir {
    display: flex;
    height: 9px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 11px;
}

/* Dogodki in novi zaposleni. */
.hrm-pregled-dogodek {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
}

.hrm-pregled-krogec {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    background: var(--hrm-blue-100);
    color: var(--hrm-info-text);
}

.hrm-pregled-krogec-obletnica {
    background: var(--hrm-tint-jantar-krogec);
    color: var(--hrm-amber-text-alt);
}

.hrm-pregled-dogodek-telo {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.hrm-pregled-ime {
    font-size: 13px;
    font-weight: 600;
    color: var(--hrm-text-strong);
    text-decoration: none;
}

.hrm-pregled-ime:hover {
    color: var(--hrm-info-text);
    text-decoration: underline;
}

.hrm-pregled-jubilej {
    color: var(--hrm-amber-text-alt);
    font-weight: 700;
}

.hrm-pregled-dogodek-ikona {
    width: 15px;
    height: 15px;
    margin-left: auto;
    flex-shrink: 0;
    color: var(--hrm-blue-text);
}

.hrm-pregled-vec {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--hrm-info-text);
    text-decoration: none;
}

.hrm-pregled-vec:hover {
    text-decoration: underline;
}

/*
 * Kolobar in palice se ob nalaganju strani izrisejo z animacijo, kot pri
 * Chart.js v prototipu; ob prehodu miske se odsek oziroma palica poudari,
 * podrobnosti pa pove namig (title).
 */
@keyframes hrm-kolobar-vstop {
    from {
        opacity: 0;
        transform: rotate(-180deg) scale(0.85);
    }

    to {
        opacity: 1;
        transform: rotate(-90deg) scale(1);
    }
}

@keyframes hrm-palica-vstop {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

.hrm-pregled-kolobar svg {
    animation: hrm-kolobar-vstop 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hrm-pregled-kolobar .hrm-kolobar-lok {
    transition: opacity 0.12s ease;
    cursor: default;
}

.hrm-pregled-kolobar svg:hover .hrm-kolobar-lok {
    opacity: 0.45;
}

.hrm-pregled-kolobar svg .hrm-kolobar-lok:hover {
    opacity: 1;
}

.hrm-pregled-palica-polnilo {
    transform-origin: left center;
    animation: hrm-palica-vstop 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hrm-pregled-palica {
    cursor: default;
    transition: color 0.12s ease;
}

.hrm-pregled-palica:hover {
    color: var(--hrm-text-strong);
}

.hrm-pregled-palica:hover .hrm-pregled-palica-polnilo {
    background: var(--hrm-ral-5010);
}

.hrm-pregled-legenda-vrstica {
    cursor: default;
}

.hrm-pregled-legenda-vrstica:hover {
    color: var(--hrm-text-strong);
}

/* Kdor ne mara animacij, jih ne dobi. */
@media (prefers-reduced-motion: reduce) {
    .hrm-pregled-kolobar svg,
    .hrm-pregled-palica-polnilo {
        animation: none;
    }
}


/* --------------------------------------------------------------------------
 * Iskanje in strani dolgih seznamov (odmera dopusta, veljavnosti)
 *
 * Seznami cez vse zaposlene so straniceni; iskalnik je enak kot drugod v
 * aplikaciji (.hrm-akp-polje), gumbi strani pa so navadni .hrm-gumb, da se
 * paging ne loci od preostale aplikacije. Nogo izrise skupna predloga
 * `filament.pages.delci.strani`.
 * ------------------------------------------------------------------------ */
/* Iskalnik je ob desnem robu, poravnan z gumbom v glavi kartice. */
.hrm-isk-orodja {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

/* Dovolj siroko, da se dolg namig izpise cel tudi z ikono lupe. */
.hrm-isk-polje {
    flex: 0 1 380px;
    min-width: 240px;
    height: 38px;
}

.hrm-isk-zadetki {
    font-size: 12px;
    color: var(--hrm-text-muted);
}

.hrm-cas-brez {
    padding: 18px 14px;
    text-align: center;
    font-size: 12.5px;
    color: var(--hrm-text-muted);
}

.hrm-strani {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 9px 14px;
    border-top: 1px solid var(--hrm-border-subtle);
}

.hrm-strani-napis {
    font-size: 11.5px;
    color: var(--hrm-text-muted);
}

.hrm-strani-velikost {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--hrm-text-muted);
}

.hrm-strani-izbira {
    width: auto;
    height: 28px;
    padding: 0 6px;
    font-size: 11.5px;
}

.hrm-strani-gumbi {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* Kvadratni gumbi, da vrsta strani ne poskakuje pri dvomestnih stevilkah. */
.hrm-strani-stevilka,
.hrm-strani-korak {
    min-width: 28px;
    padding: 0 7px;
    justify-content: center;
}

.hrm-strani-korak[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

.hrm-strani-izpust {
    padding: 0 2px;
    font-size: 11.5px;
    color: var(--hrm-text-muted);
}

/* --------------------------------------------------------------------------
 * Povecevalna lupa v iskalnih poljih
 *
 * Ikona je ozadje polja, ne dodaten element - tako jo dobijo vsi iskalniki
 * hkrati in nobene predloge ni treba spreminjati. Filamentova polja (iskanje
 * v tabelah) imajo svojo ikono, zato jih pravilo namenoma ne zajame.
 * ------------------------------------------------------------------------ */
.hrm-polje[type='search'],
.hrm-akp-polje[type='search'] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%2374767d'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-5.2-5.2m0 0a7.5 7.5 0 1 0-10.6-10.6 7.5 7.5 0 0 0 10.6 10.6Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-color: var(--hrm-surface-card);
}

.hrm-polje[type='search'] {
    padding-left: 36px;
    background-position: 13px center;
    background-size: 15px 15px;
}

.hrm-akp-polje[type='search'] {
    padding-left: 30px;
    background-position: 9px center;
    background-size: 14px 14px;
}

/* Brskalnikov kriz za praznjenje polja - da ne trci z besedilom. */
.hrm-polje[type='search']::-webkit-search-cancel-button,
.hrm-akp-polje[type='search']::-webkit-search-cancel-button {
    margin-left: 4px;
    cursor: pointer;
}

/*
 * Strani v glavi razdelka (preizkus na Veljavnostih). Glava je ze vrstica
 * flex, zato tu odpadejo crta, odmiki in lastna sirina - ostane samo skupina
 * gumbov, potisnjena na desni rob za rokom.
 */
.hrm-strani-glava {
    padding: 0;
    border-top: 0;
    gap: 8px;
    /* Rok je zdaj v nogi, zato skupino na desni rob potisne paging sam. */
    margin-left: auto;
    flex: 0 0 auto;
}

.hrm-strani-glava .hrm-strani-napis {
    display: none;
}

.hrm-strani-glava .hrm-strani-gumbi {
    margin-left: 0;
}

/* Opozorilni rok razdelka je v nogi kartice, pod tabelo. */
.hrm-vel-noga {
    padding: 9px 16px;
    border-top: 1px solid var(--hrm-border-subtle);
    font-size: 11.5px;
    color: var(--hrm-text-muted);
}

/* Iskalnik masovnega pogleda stoji ob gumbih, na levi strani vrstice. */
.hrm-mp-iskalnik {
    margin-right: auto;
    height: 34px;
}

/*
 * Strani v isti vrstici kot iskalnik (kartice zaposlenih): brez crte in
 * odmikov, napis in gumbi ob levem robu, iskalnik pa ostane na desnem.
 */
.hrm-strani-vrstica {
    padding: 0;
    border-top: 0;
    flex: 1 1 auto;
}

.hrm-strani-vrstica .hrm-strani-gumbi {
    margin-left: 0;
}

/*
 * Mreza kartic nima ovojnice - kartice imajo rob in senco same. Filamentova
 * glava tabele odpade z njo tudi locnica pod iskalnikom; brez tega bi ob
 * iskanju cela mreza dobila videz ene kartice.
 */
.hrm-zaposleni-stran .fi-ta-ctn {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.hrm-zaposleni-stran .fi-ta-header-ctn {
    display: none;
}

/*
 * Iskanje je nase, zato Filamentova vrstica "Aktivni filtri" z znacko in
 * locnicama ni potrebna - kaj je iskano, pise v samem polju.
 */
.hrm-zaposleni-stran .fi-ta-filter-indicators {
    display: none;
}

/* Prazno stanje v slogu aplikacije: lupa in pod njo kratek napis. */
/*
 * Blok stoji sredi prostora pod naslovom in iskalnikom. Odsteti moramo vse,
 * kar je nad njim in pod njim (glava panela, naslov strani, orodna vrstica in
 * odmiki) - z manjso vrednostjo stran dobi drsnik, ceprav je prazna.
 * `max()` poskrbi, da na nizkem oknu blok ne postane pretesen.
 */
.hrm-zaposleni-stran .fi-ta-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: max(240px, calc(100dvh - 27rem));
    padding: 16px;
    background: transparent;
    text-align: center;
}

.hrm-zaposleni-stran .fi-ta-empty-state-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Lupa je sama, brez kroga in ozadja - kot znak nad napisom. */
.hrm-zaposleni-stran .fi-ta-empty-state-icon-bg {
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--hrm-text-muted);
}

.hrm-zaposleni-stran .fi-ta-empty-state-icon-bg .fi-icon {
    width: 34px;
    height: 34px;
}

.hrm-zaposleni-stran .fi-ta-empty-state-heading {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--hrm-text-strong);
}

/* Napis o prikazanih zapisih je pod gumbi strani, ne ob njih. */
.hrm-strani-vrstica {
    flex-wrap: wrap;
}

.hrm-strani-vrstica .hrm-strani-napis {
    order: 2;
    flex: 0 0 100%;
}

/*
 * "Ni zadetkov" pri iskanju: brez kartice, sredi prostora, ki na zaslonu
 * ostane pod naslovom in iskalnikom. Enako kot na seznamu zaposlenih.
 */
.hrm-isk-prazno {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: max(240px, calc(100dvh - 30rem));
    padding: 16px;
    text-align: center;
}

.hrm-isk-prazno-ikona {
    width: 34px;
    height: 34px;
    color: var(--hrm-text-muted);
}

.hrm-isk-prazno-napis {
    font-size: 16px;
    font-weight: 700;
    color: var(--hrm-text-strong);
}

/* Izbirnik vrste zaposlitve v orodni vrstici seznama zaposlenih. */
.hrm-zap-vrsta {
    width: auto;
    min-width: 190px;
    height: 38px;
    padding: 0 10px;
}

/* V masovnem pogledu stoji ob iskalniku na levi strani vrstice. */
.hrm-mp-orodja .hrm-zap-vrsta {
    height: 34px;
    margin-left: auto;
}

.hrm-mp-orodja .hrm-mp-iskalnik {
    margin-left: 0;
    margin-right: 0;
}

/* Razdelitev po vrsti zaposlitve pod skupnim stevilom (Pregled). */
.hrm-pregled-vrste {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--hrm-text-muted);
}

.hrm-pregled-vrsta b {
    color: var(--hrm-text-strong);
    font-weight: 700;
}

/*
 * Stolpec "Zaposleni" v masovnem pogledu je v vsakem sektorju enako sirok -
 * brez tega vsaka tabela stolpec razsiri po najdaljsem imenu v svoji skupini
 * in stolpci se med karticami ne poravnajo. Predolgo ime se odreze s tremi
 * pikami.
 */
.hrm-mp-tabela th.hrm-mp-lepljiv,
.hrm-mp-tabela td.hrm-mp-lepljiv {
    width: 250px;
    min-width: 250px;
    max-width: 250px;
}

.hrm-mp-ime .hrm-pd-oseba {
    min-width: 0;
}

.hrm-mp-ime-besedilo {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Prijavna stran po oblikovni predlogi: slika ozadja cez ves zaslon, steklena
 * kartica ob levem robu.
 *
 * Vse je omejeno na `.fi-simple-layout` - to je Filamentova postavitev za
 * prijavo in podobne samostojne strani, ne pa za panel.
 *
 * Prijava je temna v obeh temah, ker je taka slika ozadja. Zato tu ne beremo
 * spremenljivk teme, ampak barve zapisemo naravnost.
 */

.fi-simple-layout {
    position: relative;
    min-height: 100dvh;
    /* JPEG je zasilna moznost za brskalnike brez image-set oziroma WebP. */
    background-image: url('/images/hrm/prijava-ozadje.jpg');
    background-image: image-set(
        url('/images/hrm/prijava-ozadje.webp') type('image/webp'),
        url('/images/hrm/prijava-ozadje.jpg') type('image/jpeg')
    );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #0a1c33;
}

/*
 * Pri zelo sirokih zaslonih slika na levi potemni, da napis na kartici ostane
 * berljiv tudi, ce se svetli del slike premakne pod njo.
 */
.fi-simple-layout::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(6, 20, 38, 0.72) 0%, rgba(6, 20, 38, 0.35) 38%, rgba(6, 20, 38, 0) 62%);
    pointer-events: none;
}

/* Kartica ni na sredini, ampak ob levem robu - kot v predlogi. */
.fi-simple-layout .fi-simple-main-ctn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 100dvh;
    padding: 32px 24px;
}

@media (min-width: 1024px) {
    .fi-simple-layout .fi-simple-main-ctn {
        padding-inline-start: 9vw;
    }
}

/* --- Znamka zgoraj levo --- */

/*
 * Poravnana je z levim robom kartice (isti 9vw), da par deluje kot ena
 * postavitev in ne kot dve nepovezani stvari.
 */
.hrm-prijava-znamka {
    position: absolute;
    top: 40px;
    left: 24px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
}

@media (min-width: 1024px) {
    .hrm-prijava-znamka {
        left: 9vw;
    }
}

/*
 * Logotip je moder na prosojnem in bi se na temni podlagi zlil z njo, zato
 * stoji na belem - enako kot v stranskem meniju panela.
 */
.hrm-prijava-znamka img {
    display: block;
    /*
     * Privzeto je box-sizing: border-box, pri katerem bi odmik pojedel
     * visino in bi logotip ostal drobcen. Tu naj visina velja za sliko samo.
     */
    box-sizing: content-box;
    height: 30px;
    width: auto;
    padding: 10px 14px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(3, 12, 26, 0.35);
}

.hrm-prijava-znamka-crta {
    width: 1px;
    height: 30px;
    background: rgba(150, 200, 240, 0.45);
}

.hrm-prijava-znamka-napis {
    font-family: var(--hrm-font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #ffffff;
    /* Razmik na desni izenaci opticno sredino - crkovni razmik siri zadnjo crko. */
    padding-inline-end: 0.18em;
}

/* --- Steklena kartica --- */

.fi-simple-layout .fi-simple-main {
    box-sizing: border-box;
    width: 100%;
    /*
     * Filament sirino kartice pripne z `.fi-width-lg { max-width: ... !important }`,
     * zato je tudi tu potreben !important - brez njega kartica na ozkem zaslonu
     * ostane 32rem siroka in celotna stran uide cez desni rob.
     */
    max-width: min(430px, 100%) !important;
    min-width: 0;
    padding: 36px 32px 32px;
    border-radius: 18px;
    border: 1.5px solid rgba(94, 190, 240, 0.55);
    background:
        linear-gradient(165deg, rgba(19, 56, 98, 0.86) 0%, rgba(8, 28, 52, 0.9) 100%);
    backdrop-filter: blur(14px) saturate(115%);
    -webkit-backdrop-filter: blur(14px) saturate(115%);
    box-shadow:
        0 24px 60px rgba(3, 12, 26, 0.5),
        inset 0 1px 0 rgba(180, 226, 255, 0.18);
}

/* --- Ikona, naslov, podnaslov --- */

/* Ikono doda render hook; krog in barvo naredi slog. */
.hrm-prijava-ikona {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.hrm-prijava-ikona svg {
    width: 56px;
    height: 56px;
    padding: 12px;
    border-radius: 999px;
    border: 1.5px solid rgba(120, 200, 245, 0.85);
    color: rgba(150, 214, 250, 0.95);
    stroke-width: 1.4;
}

.fi-simple-layout .fi-simple-header {
    display: block;
    text-align: center;
    margin-bottom: 20px;
}

.fi-simple-layout .fi-simple-header-heading {
    font-family: var(--hrm-font-display);
    /*
     * Naslovi v panelu so debeli (800), tu je po predlogi lahek. 500 je
     * najlazja Sora, ki jo imamo - lazje teze niso naložene.
     */
    font-weight: 500;
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #ffffff;
    margin: 0 0 7px;
}

.fi-simple-layout .fi-simple-header-subheading {
    font-size: 14px;
    line-height: 1.4;
    color: rgba(196, 216, 238, 0.82);
    margin: 0;
}

/* --- Polja --- */

/* Filament ima med sklopi obrazca 24 px; na tej kartici je to prevec. */
.fi-simple-layout .fi-sc-form {
    gap: 18px;
}

/*
 * V panelu so oznake polj drobne velike tiskane crke; po predlogi prijave so
 * navadne, zato je treba prepisati vse tri lastnosti.
 */
.fi-simple-layout .fi-fo-field-label,
.fi-simple-layout .fi-fo-field-label-content {
    color: rgba(214, 229, 245, 0.92);
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* Obe polji sta obvezni; zvezdica po predlogi ni izpisana. */
.fi-simple-layout .fi-fo-field-label-required-mark {
    display: none;
}

.fi-simple-layout .fi-input-wrp {
    border-radius: 10px;
    border: 1px solid rgba(122, 168, 214, 0.42);
    background: rgba(9, 28, 54, 0.55);
    box-shadow: none;
}

.fi-simple-layout .fi-input-wrp:hover {
    border-color: rgba(140, 195, 240, 0.6);
}

.fi-simple-layout .fi-input-wrp:focus-within {
    border-color: rgba(110, 205, 250, 0.95);
    box-shadow: 0 0 0 3px rgba(80, 180, 240, 0.22);
}

.fi-simple-layout .fi-input,
.fi-simple-layout input.fi-input {
    padding-block: 11px;
    font-size: 14px;
    color: #ffffff;
    background: transparent;
}

.fi-simple-layout .fi-input::placeholder {
    color: rgba(168, 191, 216, 0.65);
    opacity: 1;
}

/* Ikona v polju in gumb za razkritje gesla. */
.fi-simple-layout .fi-input-wrp-prefix .fi-icon,
.fi-simple-layout .fi-input-wrp-suffix .fi-icon,
.fi-simple-layout .fi-input-wrp-actions .fi-icon {
    color: rgba(160, 192, 222, 0.85);
}

/*
 * Gumb za razkritje gesla je po predlogi le ikona v polju - brez okvirja in
 * navpicne locnice, ki ju Filament sicer izrise.
 */
.fi-simple-layout .fi-input-wrp-actions,
.fi-simple-layout .fi-input-wrp-suffix {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.fi-simple-layout .fi-input-wrp-actions .fi-icon-btn {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.fi-simple-layout .fi-input-wrp-actions .fi-icon-btn:hover .fi-icon {
    color: rgba(200, 228, 250, 0.95);
}

/* Samodejno izpolnjevanje v Chromu sicer pobarva polje belo. */
.fi-simple-layout input.fi-input:-webkit-autofill,
.fi-simple-layout input.fi-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow: 0 0 0 1000px rgba(12, 34, 62, 0.98) inset;
    caret-color: #ffffff;
}

/* --- Zapomni si me --- */

.fi-simple-layout .fi-checkbox-input {
    width: 17px;
    height: 17px;
    border-radius: 4px;
    border: 1.5px solid rgba(140, 180, 220, 0.7);
    background: rgba(9, 28, 54, 0.5);
}

.fi-simple-layout .fi-checkbox-input:checked {
    border-color: rgba(110, 205, 250, 0.95);
    background-color: rgba(52, 152, 219, 0.95);
}

.fi-simple-layout .fi-fo-checkbox .fi-fo-field-label-content {
    color: rgba(206, 224, 242, 0.9);
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* --- Gumb Prijava --- */

/* Po predlogi je nad gumbom vec zraka kot med polji. */
.fi-simple-layout .fi-form-actions,
.fi-simple-layout .fi-sc-actions {
    margin-top: 8px;
}

.fi-simple-layout .fi-form-actions .fi-btn,
.fi-simple-layout .fi-sc-actions .fi-btn {
    width: 100%;
    justify-content: center;
    padding-block: 13px;
    border: 0;
    border-radius: 9px;
    font-family: var(--hrm-font-display);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffffff;
    background: linear-gradient(90deg, #1c7ec0 0%, #35a8dd 55%, #5ecdef 100%);
    /* Topel odsev na desni je iz predloge - povzame sonce iz slike ozadja. */
    box-shadow:
        0 8px 24px rgba(30, 130, 200, 0.35),
        6px 6px 26px -6px rgba(240, 176, 88, 0.45);
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.fi-simple-layout .fi-form-actions .fi-btn:hover,
.fi-simple-layout .fi-sc-actions .fi-btn:hover {
    filter: brightness(1.08);
    box-shadow: 0 10px 30px rgba(30, 130, 200, 0.45);
}

.fi-simple-layout .fi-form-actions .fi-btn:focus-visible,
.fi-simple-layout .fi-sc-actions .fi-btn:focus-visible {
    outline: 2px solid rgba(160, 220, 255, 0.9);
    outline-offset: 2px;
}

/* --- Napake --- */

.fi-simple-layout .fi-fo-field-wrp-error-message {
    color: #ffb4ad;
}

.fi-simple-layout .fi-input-wrp:has(input[aria-invalid='true']) {
    border-color: rgba(240, 130, 120, 0.9);
}

/* --- Ozji zasloni --- */

@media (max-width: 640px) {
    /* Na ozkem zaslonu je kartica na sredini, zato tja gre tudi znamka. */
    .hrm-prijava-znamka {
        top: 28px;
        left: 50%;
        transform: translateX(-50%);
        gap: 12px;
    }

    .hrm-prijava-znamka img {
        height: 22px;
    }

    .hrm-prijava-znamka-napis {
        font-size: 19px;
    }

    .fi-simple-layout .fi-simple-main-ctn {
        justify-content: center;
        /* Nad kartico mora ostati prostor za znamko. */
        padding: 100px 16px 20px;
        overflow-x: hidden;
    }

    .fi-simple-layout .fi-simple-main {
        max-width: 100% !important;
        padding: 26px 22px 24px;
    }

    .fi-simple-layout .fi-simple-header-heading {
        font-size: 28px;
    }
}