/*
    Globalna velikost pisave za vse aplikacije.

    Meridian tema definira velikosti pisav izkljucno prek spremenljivk na :root, zato
    tu prepisemo celotno lestvico. Ta datoteka se nalozi zadnja, za all.css teme in za
    meridian-swatches.css, zato prepis velja povsod.

    Spreminja se samo --t-font-scale: 1 = privzeto Kendo (16px), 0.875 = 14px, 0.8125 = 13px.
    Privzeto 0.875 (namizje), na napravah na dotik (pointer: coarse) 1.
    Razmiki (--kendo-spacing-base) ostanejo nedotaknjeni.

    Za posamezno aplikacijo ali uporabnika se faktor prepise z inline stilom na <html>:
    document.documentElement.style.setProperty('--t-font-scale', '0.8125');

    Ostrina besedila:
    - velikosti so zaokrozene na cele piksle (round), necele (npr. 12.25px) se izrisejo mehkeje;
    - "Segoe UI" je pred Inter, ker je hintan za ClearType; Inter tema ne nalozi, uporabi se le,
      ce je namescen lokalno, in je pri majhnih velikostih na Windows tanek in zabrisan;
    - --kendo-color-subtle (glave stolpcev, labele) je temnejsi od privzetega (L 55%) za vecji kontrast;
    - osnovno besedilo (meni, celice mreze, gumbi in vnosna polja) je crno namesto temno sivo-modre (L 28%),
      da ostane ostro tudi pri povecavi brskalnika pod 100%.
*/
:root
{
    --t-font-scale: 0.875;

    --kendo-font-size:     round(calc(1rem     * var(--t-font-scale)), 1px);
    --kendo-font-size-xxs: round(calc(0.5rem   * var(--t-font-scale)), 1px);
    --kendo-font-size-xs:  round(calc(0.75rem  * var(--t-font-scale)), 1px);
    --kendo-font-size-sm:  round(calc(0.875rem * var(--t-font-scale)), 1px);
    --kendo-font-size-md:  round(calc(1rem     * var(--t-font-scale)), 1px);
    --kendo-font-size-lg:  round(calc(1.125rem * var(--t-font-scale)), 1px);
    --kendo-font-size-xl:  round(calc(1.25rem  * var(--t-font-scale)), 1px);

    --kendo-font-family:            "Segoe UI", system-ui, -apple-system, Inter, Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --kendo-font-family-sans-serif: "Segoe UI", system-ui, -apple-system, Inter, Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    --kendo-color-subtle: oklch(45% 0.0407 257.42deg);

    --kendo-color-on-app-surface:  black;
    --kendo-color-on-base:         black;
    --kendo-color-base-on-subtle:  black;
}

/* Naprave na dotik (telefon, tablica, terminal brez miske): 16px, sicer iOS Safari ob fokusu poveca vnosno polje. */
@media (pointer: coarse)
{
    :root
    {
        --t-font-scale: 1;
    }
}

/* .k-body sam ne postavi font-size, zato bi navaden markup (div, span, p) ostal na 16px. */
body.k-body
{
    font-size: var(--kendo-font-size);
}

.h-10
{
    height: 10% !important;
}

.h-20
{
    height: 20% !important;
}

.h-30
{
    height: 30% !important;
}

.h-40
{
    height: 40% !important;
}

.h-60
{
    height: 60% !important;
}

.h-70
{
    height: 70% !important;
}

.h-80
{
    height: 80% !important;
}

.h-90
{
    height: 90% !important;
}

.t-auth-container
{
    height: 100%;
    width: 100%;
    background: #f5f6f8 !important;
    overflow: auto;
}

.t-auth-form-panel
{
    padding-bottom: 15%;
}

.font-larger
{
    font-size: var(--kendo-font-size-lg) !important;
}

.t-auth-title h4
{
    font-weight: 600 !important;
    color: dimgray;
}

.t-subtitle
{
    color: darkgray;
}

.t-auth-screen
{
    width: 600px !important;
    /*margin-top: 100px;*/
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.t-auth-smallscreen
{
    width: 100%;
    height: 100%;
}

/* Login 7 — split-screen brand panel */
.t-auth-brand-panel
{
    background: var(--kendo-color-primary);
}

.t-auth-brand-content
{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: white;
    padding: 2rem;
}

.t-auth-brand-content h2
{
    color: white;
    font-weight: 600;
}

.t-auth-brand-company
{
    color: rgba(255, 255, 255, 0.75);
    font-weight: 400;
}

.t-auth-form-content
{
    width: 100%;
    max-width: 480px;
    padding: 2rem;
    box-sizing: border-box;
}

.t-auth-title-text
{
    font-weight: 600;
    color: dimgray;
}

.k-appbar
{
    /*box-shadow: none !important;*/
    border-radius:0!important;
    height: 60px;
}

.t-text-truncate
{
    overflow: inherit;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/*fontawsome*/
.t-fa-theme-level0
{
    --fa-secondary-opacity: 0.8;
    --fa-primary-color: maroon;
    --fa-secondary-color: var(--kendo-color-primary);
}

.t-fa-theme-level0-reverse
{
/*    --fa-secondary-opacity: 0.8;
    --fa-primary-color: var(--kendo-color-primary);
    --fa-secondary-color: maroon;*/
}

.k-selected .t-fa-theme-level0, .k-selected .t-fa-theme-level0-reverse
{
/*    --fa-secondary-opacity: 0.8;
    --fa-primary-color: var(--kendo-color-on-primary);
    --fa-secondary-color: var(--kendo-color-primary-subtle);*/
}


.t-fa-theme-level1
{
    --fa-secondary-opacity: 0.7;
    --fa-primary-color: chocolate;
    --fa-secondary-color: var(--kendo-color-primary);
}

.t-fa-theme-level1-reverse
{
/*    --fa-secondary-opacity: 0.7;
    --fa-primary-color: var(--kendo-color-primary);
    --fa-secondary-color: chocolate;*/
}

.k-selected .t-fa-theme-level1, .k-selected .t-fa-theme-level1-reverse
{
/*    --fa-secondary-opacity: 0.7;
    --fa-primary-color: var(--kendo-color-on-primary);
    --fa-secondary-color: var(--kendo-color-primary-subtle);*/
}


.t-fa-theme-level2
{
    --fa-secondary-opacity: 0.6;
    --fa-primary-color: chocolate;
    --fa-secondary-color: var(--kendo-color-primary);
}

.t-fa-theme-level2-reverse
{
/*    --fa-secondary-opacity: 0.6;
    --fa-primary-color: var(--kendo-color-primary);
    --fa-secondary-color: chocolate;*/
}

.k-selected .t-fa-theme-level2, .k-selected .t-fa-theme-level2-reverse
{
/*    --fa-secondary-opacity: 0.6;
    --fa-primary-color: var(--kendo-color-on-primary);
    --fa-secondary-color: var(--kendo-color-primary-subtle);*/
}
/*Telerik FileSelect*/
.k-upload.t-upload-button-only
{
    /* remove component border */
    border-width: 0;
    /* prevent expansion to 100% */
    display: inline-block;
}

    .k-upload.t-upload-button-only .k-dropzone
    {
        /* remove space around button */
        padding: 0;
        /* remove background around button */
        /* use if Upload status below is NOT hidden */
        background-color: var(--kendo-color-surface, #fafafa);
    }

    .k-upload.t-upload-button-only .k-upload-button
    {
        border-width: 0;
        background-color: var(--kendo-color-surface, #fafafa);
        min-width: 0;
    }

    /* hide selected files */
    .k-upload.t-upload-button-only .k-upload-files,
    /* hide Upload status */
    .k-upload.t-upload-button-only .k-upload-status,
    /* hide drop hint */
    .k-upload.t-upload-button-only .k-dropzone-hint
    {
        display: none;
    }

.k-drawer-container
{
    height: calc(100vh - 60px) !important;   /* fallback za brskalnike brez podpore za dvh */
    height: calc(100dvh - 60px) !important;  /* dejanska vidna višina - pravilno tudi v mobilnih brskalniških tabih */
}

/*.k-drawer
{
    background-color: #ebebeb !important;
}*/

.k-drawer-content
{
    height: 100%;
    width: calc(100vw - 350px) !important;
}

.t-drawer-item-level-0
{
    padding-block: var(--kendo-spacing-2, 0.5rem) !important;
    padding-left: 0.5rem !important;
}

.t-drawer-item-level-1
{
    padding-block: var(--kendo-spacing-1, 0.5rem) !important;
}

.t-drawer-item.k-drawer-item
{
}

/* Drawer search row: fixed height matching normal level-0 items using Kendo theme variables.
   for switching between search and normal state since height of components isnt the same */
.drawer-search-row.t-drawer-item-level-0 {
    box-sizing: border-box;
    height: calc( var(--kendo-line-height-lg, 1.5) * var(--kendo-font-size-lg, 1rem) + 2 * var(--kendo-spacing-2, 0.5rem) );
    padding-block: 0 !important;
    align-items: center;
    flex-wrap: nowrap !important;
    overflow: hidden;
}

.drawer-search-content {
    display: flex;
    align-items: center;
    width: 100%;
}

    .drawer-search-content > .k-input {
        flex: 1;
        min-width: 0;
    }

.drawer-search-exit-icon {
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    padding-left: var(--kendo-spacing-2, 0.5rem);
}

.drawer-search-highlight {
    background-color: #fff3cd;
    border-radius: 2px;
}

.t-card-content.k-card
{
    height: 100% !important;
    /*border: none !important;*/
}

.t-card-header .k-card-header
{
    border: none;
}

.t-card-body
{
    height: 75% !important;
}


.t-disabled-content
{
    pointer-events: none;
    opacity: 0.9;
    /*background-color: #f2f2f2;*/
    color: #999;
    cursor: not-allowed;
}

.t-btn-appupdater
{
    background-color: red !important;
}

.t-report-viewer
{
}

.t-notification-container
{
    position: absolute;
    top: 60px !important;
    z-index: 99999;
}

/*    .t-notification-container .k-notification
    {
        font-size: 0.875rem;
    }*/

.t-loading-container
{
    height: 100%;
    width: 100%;
    background: var(--kendo-color-primary) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-bottom: 15%;
}

.t-loading-section
{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .t-loading-section h2
    {
        font-weight: 600 !important;
        color: dimgray;
    }

.t-startup-loader-container
{
    background: var(--kendo-color-surface) !important;
    border: solid 1px var(--kendo-color-primary) !important;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    min-width: 500px;
}

.t-loader-container
{
/*    background: var(--kendo-color-surface) !important;
    border: solid 1px var(--kendo-color-primary) !important;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);*/
    min-width: 250px;
}

.t-loader
{
}

.t-loader-dot
{
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: var(--kendo-color-surface) !important;
    border: 2px solid var(--kendo-color-primary);
    box-sizing: border-box;
    display: inline-block;
    margin: 0 4px;
    -webkit-animation: grow 1.4s infinite ease-in-out both;
    animation: grow 1.4s infinite ease-in-out both;
}

    .t-loader-dot.dot1
    {
        -webkit-animation-delay: -0.64s;
        animation-delay: -0.64s;
    }

    .t-loader-dot.dot2
    {
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }

.t-loading-progress-text
{
}

.t-loading-footer
{
    position: absolute;
    bottom: 1.5rem;
    text-align: center;
    width: 100%;
}

.t-loading-brand
{
    color: rgba(255, 255, 255, 0.9);
    padding: 0;
    margin: 0;
    font-size: var(--kendo-font-size-lg);
    font-weight: 500;
}

.t-loading-copyright
{
    padding: 0;
    margin: 0;
    font-size: var(--kendo-font-size-sm);
    color: rgba(255, 255, 255, 0.45);
}

.t-loading-company
{
    color: #888;
    font-size: var(--kendo-font-size-sm);
    font-weight: 400;
    margin: 0;
    padding: 0;
}

@keyframes grow
{
    0%, 80%, 100% { transform: scale(0); }
    40%           { transform: scale(1.0); }
}

@-webkit-keyframes grow
{
    0%, 80%, 100% { -webkit-transform: scale(0); }
    40%           { -webkit-transform: scale(1.0); }
}
/*inputs*/
.k-input.k-disabled > .k-input-inner
{
    pointer-events: initial !important;
}
/*grid*/
.t-grid-no-data
{
    position: absolute !important;
    inset: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

.t-grid-cell-ellipsis
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Vrstica spustnega seznama z virtualnim drsenjem (ScrollMode.Virtual računa s fiksno ItemHeight): brez preloma, sicer se
   prelomljen naziv ob drsenju prekriva z naslednjim; predolg naziv se odreže (celoten v title). min-width: vrstica je flex. */
.t-list-item-ellipsis
{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Popup z ListPopup.Class (ovoja ComboBox/DropDownList privzeto, neposredni Telerikovi seznami izrecno): isto pravilo za vrstico
   brez lastne predloge - Telerikovo besedilo vrstice ali karkoli je v njej. */
.t-list-popup .k-list-item
{
    white-space: nowrap;
}

.t-list-popup .k-list-item > *
{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.t-grid-no-headers .k-grid-header
{
    display: none;
}

/*.k-grid-content
{
    background-color: transparent;
}*/

.k-grid th.t-grid-wrap-title-column
{
    word-wrap: normal;
    white-space: normal;
}

    .k-grid th.t-grid-wrap-title-column .k-column-title
    {
        white-space: normal;
    }

.t-grid-wrap-title-columns .k-column-title
{
    word-wrap: normal;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.k-grid th.t-grid-wrap-title-column .k-column-title
{
    word-wrap: normal;
    white-space: normal;
}


.k-grid-footer td, .k-group-footer td, .k-grid-footer .k-table-td, .k-group-footer .k-table-td
{
    font-weight: 600 !important;
    color: var(--kendo-color-primary, #ff9411) !important;
    pointer-events: none;
}

/* Vrstica GLAVE SKUPINE ima isti videz kot noge, NE sme pa dobiti pointer-events: none - v njej je preklopnik za
   odpiranje in zapiranje skupine. Dokler je bila v zgornjem seznamu, klik nanjo ni prišel do mreže: skupine ni bilo
   mogoče ne odpreti ne zapreti v NOBENI mreži cele rešitve, OnRead se ob kliku sploh ni sprožil. Videti je bilo kot
   napaka v nalaganju skupin na zahtevo (LoadGroupsOnDemand), v resnici pa klik ni nikoli prišel do komponente. */
.k-grouping-row td, .k-grouping-row .k-table-td
{
    font-weight: 600 !important;
    color: var(--kendo-color-primary, #ff9411) !important;
}

/* CardTitle v glavi kartice nosi orodno vrstico, iskanje in vrstice filtrov, ne naslova. Tema pa .k-card-title nastavi
   font-weight: medium, ki ga podedujejo <label>, oznake stikal (DA/NE) in drugo besedilo brez lastne debeline - bilo
   je krepko (npr. WarehouseStockFilterBar). Krepak ostane samo naslov strani - komponenta <Header> (h3-h6); debelina
   je zapisana izrecno, da ne visi na Bootstrapu. */
.k-card-title
{
    font-weight: var(--kendo-font-weight-normal, normal);
}

.k-card-title :is(h3, h4, h5, h6)
{
    font-weight: var(--kendo-font-weight-medium, 500);
}

.t-grid-cell-no-padding
{
    padding: 0 !important;
}

.t-grid-no-scroll .k-grid-content
{
    overflow-y: auto;
}

.t-grid-no-scroll .k-grid-header,
.t-grid-no-scroll .k-grid-footer
{
    padding-right: 0; /* version 2.26 and older requires !important here */
}

.t-grid-no-scroll .k-grid-header-wrap,
.t-grid-no-scroll .k-grid-footer-wrap
{
    border-right-width: 0;
}

/*t-grid-header-right: desno poravnana glava stolpca (GridColumn HeaderClass) - za številske stolpce s TextAlign=Right;
  naslov razvrščljivega stolpca je v flex vsebniku .k-link, zato samo text-align ne zadošča*/
.k-grid th.t-grid-header-right,
.k-grid th.t-grid-header-right .k-column-title
{
    text-align: right;
}

.k-grid th.t-grid-header-right .k-cell-inner > .k-link
{
    justify-content: flex-end;
}

.k-grid-filter-popup
{
    max-width: 400px !important;
    width: max-content !important;
}

.t-grid-minheight-200.k-grid
{
    min-height: 200px;
}

.t-grid-minheight-300.k-grid
{
    min-height: 300px;
}

.t-grid-minheight-500
{
    min-height: 500px;
}

.t-grid-minheight-600
{
    min-height: 600px;
}

.t-grid-maxheight-200.k-grid
{
    max-height: 200px;
}

.t-grid-maxheight-300.k-grid
{
    max-height: 300px;
}

.t-grid-maxheight-500
{
    max-height: 500px;
}

.t-grid-maxheight-600
{
    max-height: 600px;
}

.t-pager-numbers-hide .k-pager-numbers-wrap
{
    display: none !important;
}

.t-pager-sizes-hide .k-pager-sizes
{
    display: none !important;
}

.t-pager-info-show .k-pager-info
{
    display: flex !important;
}
/*t-tabstrip-content-no-padding*/
.t-tabstrip-content-no-padding > .k-tabstrip-content
{
    padding: 0 !important;
    /*border-radius: 0 !important;*/
}
/*t-tabstrip-content-p1-padding*/
.t-tabstrip-content-p-1-padding > .k-tabstrip-content
{
    padding: 5px !important;
    /*border-radius: 0 !important;*/
}
/*t-tab-header (TabValidationHeader): zavihek s poljem z napako validacije - rdeč naslov + ikona, tudi na izbranem zavihku*/
.t-tab-header
{
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.t-tab-header-error,
.t-tab-header-error .t-tab-error-icon
{
    color: var(--kendo-color-error);
}
/*t-collapsible-fields (CollapsibleFields): puščica desno v vrstici zavihkov (oz. nad polji); zložen blok skrije vsebino zavihkov, glave ostanejo*/
.t-collapsible-fields
{
    position: relative;
}

.t-collapsible-fields-toggle
{
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 1;
}

.t-collapsible-fields.t-collapsed .k-tabstrip-content
{
    display: none !important;
}

/*povzetek zloženega bloka: z zavihki desno v vrstici zavihkov (::before kot flex element za zavihki), brez zavihkov v tanki vrstici*/
.t-collapsible-fields.t-collapsed > .k-tabstrip > .k-tabstrip-items-wrapper
{
    display: flex;
    align-items: center;
}

.t-collapsible-fields.t-collapsed > .k-tabstrip > .k-tabstrip-items-wrapper > .k-tabstrip-items
{
    flex: 0 0 auto;
}

.t-collapsible-fields.t-collapsed > .k-tabstrip > .k-tabstrip-items-wrapper::before
{
    content: var(--t-collapsible-summary, "");
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    padding: 0 2.75rem 0 1rem;
    font-weight: 600;
}

.t-collapsible-fields-summary
{
    display: none;
}

.t-collapsible-fields.t-collapsed:not(:has(> .k-tabstrip)) > .t-collapsible-fields-summary
{
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 2rem;
    padding: 0 .5rem;
    font-weight: 600;
}

/*brez zavihkov: prostor za puščico desno; zložen blok skrije vsa polja, ostane vrstica s puščico*/
.t-collapsible-fields:not(:has(> .k-tabstrip))
{
    padding-right: 2rem;
}

.t-collapsible-fields.t-collapsed:not(:has(> .k-tabstrip))
{
    min-height: 2rem;
    border-bottom: 1px solid var(--kendo-color-border);
}

.t-collapsible-fields.t-collapsed:not(:has(> .k-tabstrip)) > :not(.t-collapsible-fields-toggle):not(.t-collapsible-fields-summary)
{
    display: none !important;
}
/**/
.t-input-suffix > .k-input-suffix
{
    width: 80%;
}
/*message-dialog*/
.t-dialog-content .k-dialog-content
{
    padding: 0 !important;
}

@keyframes blink
{
    0%
    {
        opacity: 1;
    }

    50%
    {
        opacity: 0;
    }

    100%
    {
        opacity: 1;
    }
}

.blinking-text
{
    animation: blink 1s infinite;
}

.t-message-dialog-h,
.t-modal-dialog-h
{
    overflow: auto;
}

@media only screen and (min-height: 801px)
{
    .t-message-dialog-h,
    .t-modal-dialog-h
    {
        max-height: 95%;
    }
}

@media only screen and (min-height: 701px) and (max-height: 800px)
{
    .t-message-dialog-h,
    .t-modal-dialog-h
    {
        max-height: 95%;
    }
}

@media only screen and (min-height: 601px) and (max-height: 700px)
{
    .t-message-dialog-h,
    .t-modal-dialog-h
    {
        max-height: 95%;
    }
}

@media only screen and (min-height: 501px) and (max-height: 600px)
{
    .t-message-dialog-h,
    .t-modal-dialog-h
    {
        max-height: 95%;
    }
}

@media only screen and (min-height: 401px) and (max-height: 500px)
{
    .t-message-dialog-h,
    .t-modal-dialog-h
    {
        max-height: 98%;
    }
}

@media only screen and (min-height: 301px) and (max-height: 400px)
{
    .t-message-dialog-h,
    .t-modal-dialog-h
    {
        max-height: 98%;
    }
}

@media only screen and (max-height: 300px)
{
    .t-message-dialog-h,
    .t-modal-dialog-h
    {
        max-height: 98%;
    }
}

@media only screen and (min-width: 1201px)
{
    .t-message-dialog-w,
    .t-modal-dialog-w
    {
        max-width: 85% !important;
    }
}

@media only screen and (min-width: 961px) and (max-width: 1200px)
{
    .t-message-dialog-w,
    .t-modal-dialog-w
    {
        max-width: 90% !important;
    }
}

@media only screen and (min-width: 769px) and (max-width: 960px)
{
    .t-message-dialog-w,
    .t-modal-dialog-w
    {
        max-width: 90% !important;
    }
}

@media only screen and (min-width: 501px) and (max-width: 767px)
{
    .t-message-dialog-w,
    .t-modal-dialog-w
    {
        max-width: 94% !important;
    }
}

@media only screen and (max-width: 500px)
{
    .t-message-dialog-w,
    .t-modal-dialog-w
    {
        max-width: 98% !important;
    }
}

/* EditOverlay — full-screen slide-in panel */
.edit-overlay-backdrop
{
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 999;
}

.edit-overlay-backdrop.open
{
    display: block;
}

.edit-overlay
{
    position: fixed;
    top: 0;
    /* Slid off-screen via `right`, not `transform` - a `transform` on this ancestor (even translateX(0) once
       "open") would create a new containing block AND stacking context for any position:fixed descendant,
       trapping a nested EditOverlay (e.g. ReportViewerDialog opened from a dialog living inside this overlay,
       like SsccPackingDialog) inside this element's own z-index instead of the true root - no z-index on the
       descendant, however high, can then out-stack a Telerik popup (TelerikDialog/Window), which portals
       straight onto document.body and so never has this problem. `right` avoids creating that trap. Both this
       and `width` resolve against the same containing block, so `calc(-1 * width)` reliably parks the panel
       exactly one panel-width off-screen regardless of --edit-overlay-width. */
    right: calc(-1 * var(--edit-overlay-width, 100%));
    bottom: 0;
    width: var(--edit-overlay-width, 100%);
    background: var(--kendo-color-surface, #fff);
    z-index: 1000;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.edit-overlay.open
{
    right: 0;
}

/* Set by EditOverlay.razor whenever Width is "100%": the panel then covers the whole viewport and the
   floating-card corners would only cut into the screen edges. A plain omission of Bootstrap's .rounded-4
   would be enough for the markup this component writes itself, but callers can also pass rounding through
   the Class parameter - hence an explicit !important reset rather than just leaving the utility off. */
.edit-overlay.edit-overlay-full
{
    border-radius: 0 !important;
}

.edit-overlay-close-button
{
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    /* Mora biti nad Kendo `.k-card-header { position: relative; z-index: 1 }` iz ChildContent. Do Telerik 14.1
       je `.k-card { isolation: isolate }` glavo zaprl v kontekst kartice (nivo 0), od 15.0 tega ni vec, zato je
       glava pri enakem z-indexu in kasneje v DOM prekrila gumb - kliknil se je le del desno od roba kartice. */
    z-index: 2;
}

/* ReportViewerDialog's own EditOverlay instance - raised above Kendo's TelerikDialog/Window z-index (10000)
   so a report preview opened from inside an already-open ModalDialog (e.g. SsccPackingDialog) stays reachable
   instead of being covered by it. Do not apply this class to any other EditOverlay usage. */
.edit-overlay.t-report-viewer-overlay
{
    z-index: 10010;
}

.edit-overlay-backdrop.t-report-viewer-overlay
{
    z-index: 10009;
}

/* The viewer's own windows (send e-mail, search, export options, AI prompt) are Kendo windows at the root with
   an inline z-index from 10000 up - below the report overlay above, so they opened hidden behind the preview.
   !important beats the inline value; their popups take the z-index from the window. A modal one (send e-mail)
   sits in a wrapper (with its .k-overlay) that carries the z-index and its own stacking context, so the
   window's direct parent is raised too - a static parent ignores z-index, so this is harmless elsewhere. */
.k-window.trv-send-email,
.k-window.trv-search-dialog,
.k-window.trv-export-options-dialog,
.k-window.trv-ai-prompt-dialog,
.k-window.trv-ai-consent-dialog,
:has(> .k-window.trv-send-email),
:has(> .k-window.trv-search-dialog),
:has(> .k-window.trv-export-options-dialog),
:has(> .k-window.trv-ai-prompt-dialog),
:has(> .k-window.trv-ai-consent-dialog)
{
    z-index: 10012 !important;
}

@media (max-width: 768px)
{
    /* Na ozkih zaslonih je panel vedno cez cel zaslon. Povozi SE SPREMENLJIVKO, ne `width` - `width` in
       `right` (glej .edit-overlay zgoraj) se oba racunata iz nje, zato mora ostati en sam vir resnice.
       Prej je bilo tu `width: 100% !important`, kar je povozilo samo sirino: zaprt panel z inline
       `--edit-overlay-width: 60%` je tako dobil sirino 100 %, parkiran pa je bil le na `right: -60%`,
       zato je 40 % belega panela trajno visela na desni strani (opazeno na tablici v pokoncni legi na
       WorkPoint HarvestWorkHourGroupEdit, kjer je edini EditOverlay - HarvestWorkHourGroupEmployeeEdit -
       nastavljen na 60 %). `right` se tu NE sme povozit z !important, ker bi porazil tudi
       `.edit-overlay.open { right: 0 }` in se panel ne bi vec odprl. */
    .edit-overlay
    {
        --edit-overlay-width: 100% !important;
        /* Panel covers the whole viewport here, so the floating-card corners would only cut into the
           screen edges. !important because Bootstrap's own .rounded-4 utility (still on the element
           whenever Width is not literally "100%" - EditOverlay.razor drops it only for that case) is
           itself !important; this file loads after bootstrap.min.css, so at equal specificity we win. */
        border-radius: 0 !important;
    }

    .edit-overlay-backdrop
    {
        display: none !important;
    }
}

/* Nadzorna plošča na domači strani (DashboardTile + TelerikTileLayout s Class="t-tilelayout t-dashboard").
   Repo-specifične barve in dodatne točke preloma ostanejo v <style> bloku posamezne Home.razor. */
.t-tilelayout.k-tilelayout
{
    grid-auto-rows: auto !important;
}

.t-tilelayout-item > .k-card-header
{
    padding-bottom: 0.25rem;
}

.t-tilelayout-item > .k-card-body
{
    padding-top: 0.25rem;
}

.t-dashboard-kpi > .k-card-body
{
    padding: 0.5rem 0.75rem;
}

.t-dashboard-tile-link
{
    cursor: pointer;
}

.t-dashboard-tile-title
{
    font-size: 0.8rem;
    opacity: 0.75;
}

.t-dashboard-tile-value
{
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

/* odmik namesto presledka: Blazor presledek med vrednostjo in <small> odstrani */
.t-dashboard-tile-suffix
{
    font-size: 0.9rem;
    opacity: 0.6;
    margin-left: 0.25rem;
}

/* več vrstic (DashboardTile.Lines): manjša vrednost, da ploščica ostane v višini sosednjih; oznaka za vrednostjo */
.t-dashboard-tile-line
{
    font-size: 1.15rem;
}

.t-dashboard-tile-line-label
{
    font-size: 0.75rem;
    font-weight: normal;
    opacity: 0.7;
    margin-left: 0.25rem;
    white-space: nowrap;
}

.t-dashboard-tile-subtitle
{
    font-size: 0.75rem;
    opacity: 0.7;
}

.t-dashboard-link
{
    font-size: 0.8rem;
    text-decoration: none;
    white-space: nowrap;
}

.t-dashboard-grid .k-grid-header
{
    font-size: 0.8rem;
}

.t-dashboard-ellipsis
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ozek zaslon: dve koloni ne glede na Columns na TileLayout; ploščice KPI po ena, ostale čez obe. */
@media (max-width: 992px)
{
    .t-dashboard.k-tilelayout
    {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .t-dashboard.k-tilelayout > .k-tilelayout-item
    {
        grid-column: span 2 !important;
    }

    .t-dashboard.k-tilelayout > .t-dashboard-kpi
    {
        grid-column: span 1 !important;
    }
}

/* DashboardLoader: prvo branje nadzorne plošče - vrtavka s sporočilom nad obrisom ploščic (4 v vrsti) in grafov (2 v vrsti). */
.t-dashboard-loader
{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.t-dashboard-loader-status
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.25rem 1rem;
}

.t-dashboard-loader-text
{
    display: flex;
    flex-direction: column;
}

.t-dashboard-loader-title
{
    font-size: 1.1rem;
    font-weight: 600;
}

.t-dashboard-loader-hint
{
    color: var(--kendo-color-subtle);
}

.t-dashboard-loader-skeleton
{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

    .t-dashboard-loader-skeleton > .k-skeleton
    {
        border-radius: var(--kendo-border-radius-lg);
    }

    .t-dashboard-loader-skeleton > .t-dashboard-loader-chart
    {
        grid-column: span 2;
    }

@media (max-width: 992px)
{
    .t-dashboard-loader-skeleton
    {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* TaskQueueButtonBadge z besedilom: značka v vrstici za ikono gumba namesto na njegovem robu (ne prekriva sosednjih gumbov). */
.k-button .k-badge.t-badge-inline
{
    position: static;
    transform: none;
    margin-inline-start: 0.5rem;
}

/* GridActiveRow: izbrana vrstica brez Telerikove izbire (oznaka GridActiveRowMarker v eni celici) - ista barva kot k-selected
   teme; zaklenjeni stolpci (k-grid-content-sticky) imajo neprozorno ozadje, zato jih tema barva s ::before, enako tu.
   !important zaradi zebre vrstic, ki jo seznami postavijo z !important (npr. AttendanceTimelineList).
   Zaklenjene celice izključene: prosojna barva z !important bi jim povozila neprozorno ozadje in ob vodoravnem
   drsenju bi se pod njimi videli premaknjeni stolpci (enako izključi GridSelectionStyle). */
.k-grid .k-table-row:has(.t-grid-row-active) > .k-table-td:not(.k-group-cell):not(.k-grid-content-sticky)
{
    background-color: color-mix(in srgb, var(--kendo-color-secondary) 12%, transparent) !important;
}

.k-grid .k-master-row.k-table-row:has(.t-grid-row-active) .k-grid-content-sticky::before
{
    background-color: color-mix(in srgb, var(--kendo-color-secondary) 12%, transparent);
}

/* Kartični gradniki strani (PageContainer, StatusHeroCard, PrimaryActionButton, ActionGrid/ActionTile, ActionSheet,
   DayGroupList, InfiniteScroll, StatusChip) ter obrazec in podrobnosti v ActionSheet (t-form-*, t-detail): velike tarče za
   dotik, na telefonu cela širina. Samo barve teme (--kendo-color-*), zato velja za vse swatch-e Meridian. */
.t-page-container
{
    max-width: 720px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.75rem;
}

.t-hero-card.k-card
{
    border-radius: var(--kendo-border-radius-xl, 12px);
    border-color: var(--kendo-color-border);
    background: linear-gradient(180deg, var(--kendo-color-primary-subtle, var(--kendo-color-base-subtle)) 0%, var(--kendo-color-surface) 70%);
}

.t-hero-body
{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.25rem 1.25rem;
}

.t-hero-head
{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.t-hero-person
{
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.t-hero-title
{
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--kendo-color-on-app-surface);
}

.t-hero-subtitle
{
    font-size: 0.8rem;
    color: var(--kendo-color-subtle);
}

.t-hero-clock-time
{
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    color: var(--kendo-color-subtle);
    white-space: nowrap;
}

.t-hero-status
{
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.t-hero-status-dot
{
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
    align-self: center;
}

.t-hero-status-text
{
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--kendo-color-on-app-surface);
}

.t-hero-status-detail
{
    font-size: 0.9rem;
    color: var(--kendo-color-subtle);
}

.t-hero-details
{
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: 0.85rem;
    color: var(--kendo-color-subtle);
}

.t-hero-action
{
    margin-top: 0.25rem;
}

.t-action-primary.k-button
{
    width: 100%;
    min-height: 72px;
    padding: 0.75rem 1rem;
    border-radius: var(--kendo-border-radius-xl, 12px);
}

.t-action-primary-content
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
}

.t-action-primary-icon
{
    font-size: 1.8rem;
}

.t-action-primary-texts
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.t-action-primary-text
{
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: normal;
}

.t-action-primary-subtitle
{
    font-size: 0.8rem;
    opacity: 0.85;
    white-space: normal;
}

.t-action-section
{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.t-action-section-title
{
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--kendo-color-subtle);
    margin: 0 0.25rem;
}

.t-action-grid
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

@media (min-width: 576px)
{
    .t-action-grid
    {
        grid-template-columns: repeat(var(--t-action-columns, 3), minmax(0, 1fr));
    }
}

.t-action-tile
{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    min-height: 88px;
    padding: 0.75rem;
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-lg, 8px);
    background: var(--kendo-color-surface);
    color: var(--kendo-color-on-app-surface);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.t-action-tile:hover:not(:disabled)
{
    background: var(--kendo-color-base-subtle);
    border-color: var(--kendo-color-primary);
}

.t-action-tile:focus-visible
{
    outline: 2px solid var(--kendo-color-primary);
    outline-offset: 2px;
}

.t-action-tile:disabled
{
    opacity: 0.5;
    cursor: default;
}

.t-action-tile-icon-wrap
{
    position: relative;
}

.t-action-tile-icon
{
    font-size: 1.4rem;
}

.t-action-tile-badge
{
    position: absolute;
    top: -0.5rem;
    right: -0.9rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    border-radius: 0.625rem;
    background: var(--kendo-color-error);
    color: var(--kendo-color-on-primary, #fff);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-align: center;
}

.t-action-tile-text
{
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
}

.t-action-tile-subtitle
{
    font-size: 0.75rem;
    color: var(--kendo-color-subtle);
}

/* Ploščica skupine (npr. lokacija), ki pod svojo vrsto razpre vrinjen seznam dejanj (t-action-group-panel):
   barva se loči od ploščic dejanj; razprta skupina je polna barva poudarka, seznam pod njo nosi isti rob;
   spodnji razmik loči seznam od naslednje vrste skupin. */
.t-action-tile.t-action-tile-group
{
    background: var(--kendo-color-primary-subtle);
    border-color: var(--kendo-color-primary-subtle);
    color: var(--kendo-color-primary-on-subtle);
}

.t-action-tile.t-action-tile-group:hover:not(:disabled)
{
    background: var(--kendo-color-primary-subtle-hover);
    border-color: var(--kendo-color-primary);
}

.t-action-tile.t-action-tile-group .t-action-tile-subtitle
{
    color: inherit;
    opacity: 0.8;
}

.t-action-tile.t-action-tile-group.t-action-tile-expanded,
.t-action-tile.t-action-tile-group.t-action-tile-expanded:hover:not(:disabled)
{
    background: var(--kendo-color-primary);
    border-color: var(--kendo-color-primary);
    color: var(--kendo-color-on-primary);
}

.t-action-group-panel
{
    padding: 0.6rem;
    margin-bottom: 1rem;
    border: 1px solid var(--kendo-color-primary);
    border-left-width: 4px;
    border-radius: var(--kendo-border-radius-lg, 8px);
    background: var(--kendo-color-base-subtle);
}


.t-action-sheet.k-window
{
    max-width: calc(100vw - 2rem);
    max-height: 90vh;
    border-radius: var(--kendo-border-radius-xl, 12px);
}

.t-action-sheet-title
{
    font-weight: 600;
}

.t-action-sheet-body
{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.t-action-sheet-footer
{
    display: flex;
    gap: 0.6rem;
    width: 100%;
}

.t-action-sheet-footer > .k-button
{
    flex: 1 1 0;
    min-height: 48px;
}

/* telefon: spodnji list čez celo širino; Telerik postavi okno z inline top/left, zato !important */
@media (max-width: 575.98px)
{
    .t-action-sheet.k-window
    {
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100vw !important;
        max-width: 100vw;
        border-radius: var(--kendo-border-radius-xl, 12px) var(--kendo-border-radius-xl, 12px) 0 0;
    }
}

/* PageContainer */
.t-page-head
{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.t-page-titles
{
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.t-page-title
{
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0;
    color: var(--kendo-color-on-app-surface);
}

.t-page-subtitle
{
    font-size: 0.85rem;
    color: var(--kendo-color-subtle);
}

.t-page-actions
{
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* DayGroupList */
.t-daylist.k-card
{
    border-radius: var(--kendo-border-radius-lg, 8px);
    overflow: hidden;
}

.t-daylist-empty
{
    padding: 1.25rem 1rem;
    text-align: center;
    color: var(--kendo-color-subtle);
}

.t-daylist-day
{
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--kendo-color-subtle);
    background: var(--kendo-color-base-subtle);
    border-bottom: 1px solid var(--kendo-color-border);
}

.t-daylist-items
{
    list-style: none;
    margin: 0;
    padding: 0;
}

.t-daylist-item
{
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--kendo-color-border);
}

.t-daylist-item:last-child
{
    border-bottom: none;
}

.t-row-icon
{
    width: 1.5rem;
    text-align: center;
    font-size: 1.1rem;
    flex: 0 0 auto;
}

.t-row-main
{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.t-row-title
{
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}

.t-row-sub
{
    font-size: 0.8rem;
    color: var(--kendo-color-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
}

.t-row-value
{
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.t-row-actions
{
    display: flex;
    gap: 0.5rem;
    flex: 0 0 auto;
}

/* InfiniteScroll: oznaka pod kartičnim seznamom (sproži nalaganje naslednje strani) in vrtavka med nalaganjem */
.t-infinite
{
    display: flex;
    justify-content: center;
    min-height: 1px;
    padding: 0.5rem 0;
}

/* StatusChip */
.t-chip
{
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

.t-chip-base { background: var(--kendo-color-base-subtle); color: var(--kendo-color-on-app-surface); border-color: var(--kendo-color-border); }
.t-chip-info { background: var(--kendo-color-info-subtle); color: var(--kendo-color-info-on-subtle); }
.t-chip-success { background: var(--kendo-color-success-subtle); color: var(--kendo-color-success-on-subtle); }
.t-chip-warning { background: var(--kendo-color-warning-subtle); color: var(--kendo-color-warning-on-subtle); }
.t-chip-error { background: var(--kendo-color-error-subtle); color: var(--kendo-color-error-on-subtle); }

/* zavihki v PageContainer brez notranjega roba vsebine */
.t-page-container .k-tabstrip > .k-tabstrip-content,
.t-page-container .k-tabstrip > .k-content
{
    padding: 0.75rem 0 0 0;
    border: none;
    background: transparent;
}

/* podrobnosti zapisa v ActionSheet (dl: oznaka | vrednost) */
.t-detail
{
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
}

.t-detail dt
{
    color: var(--kendo-color-subtle);
    font-weight: normal;
}

.t-detail dd
{
    margin: 0;
    font-weight: 500;
}

/* obrazec v ActionSheet (polja, vrstica dveh polj, namig, izbira s čipi, nalaganje v dialogu fiksne višine) */
.t-form
{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.t-form-field
{
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 0;
    min-width: 0;
}

.t-form-row
{
    display: flex;
    gap: 0.75rem;
}

.t-form-hint
{
    font-size: 0.85rem;
    color: var(--kendo-color-subtle);
}

.t-choice
{
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* dve polji v vrsti; na ozkem zaslonu eno pod drugim */
.t-form-row
{
    flex-wrap: wrap;
}

.t-form-row > .t-form-field
{
    min-width: 150px;
}


/* Kartične strani s PageContainer: nabiralnik zahtevkov (t-inbox-*, t-bulkbar, t-segment, t-reasons, t-bulk-names),
   mesečni plan (t-plan-*), domača stran z današnjimi dogodki in povzetkom žiga (t-home-*, t-punch-*). */

/* potrdi/zavrni na kartici nabiralnika: barvna, dovolj velika tarča za prst (48 px) */
.t-inbox-decide.k-button
{
    min-width: 48px;
    min-height: 48px;
    font-size: 1.15rem;
}

/* nabiralnik zahtevkov */
.t-inbox-warning
{
    padding: 0.6rem 0.8rem;
    border-radius: var(--kendo-border-radius-lg, 8px);
    background: var(--kendo-color-warning-subtle);
    color: var(--kendo-color-warning-on-subtle);
}

.t-inbox-filters
{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.t-segment
{
    display: inline-flex;
}

.t-segment > .k-button
{
    border-radius: 0;
}

.t-segment > .k-button:first-child
{
    border-radius: var(--kendo-border-radius-lg, 8px) 0 0 var(--kendo-border-radius-lg, 8px);
}

.t-segment > .k-button:last-child
{
    border-radius: 0 var(--kendo-border-radius-lg, 8px) var(--kendo-border-radius-lg, 8px) 0;
}

.t-inbox-search
{
    flex: 1 1 200px;
}

.t-bulkbar
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-lg, 8px);
    background: var(--kendo-color-surface);
    position: sticky;
    top: 0;
    z-index: 2;
}

.t-bulkbar-label
{
    font-weight: 600;
    margin: 0;
}

.t-bulkbar-actions
{
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
    flex-wrap: wrap;
}

.t-inbox-item
{
    align-items: flex-start;
}

.t-inbox-open
{
    cursor: pointer;
}

.t-reasons
{
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.t-bulk-names
{
    margin: 0;
    padding-left: 1.1rem;
    max-height: 40vh;
    overflow: auto;
    color: var(--kendo-color-subtle);
}

/* mesečni plan (dan za dnem) */
.t-plan-day
{
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--kendo-color-border);
}

.t-plan-day:last-child
{
    border-bottom: none;
}

.t-plan-weekend
{
    background: var(--kendo-color-base-subtle);
}

.t-plan-today
{
    box-shadow: inset 4px 0 0 var(--kendo-color-primary);
}

.t-plan-date
{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 2.5rem;
    flex: 0 0 auto;
}

.t-plan-dow
{
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--kendo-color-subtle);
}

.t-plan-dom
{
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.1;
}

.t-plan-today .t-plan-dom
{
    color: var(--kendo-color-primary);
}

.t-plan-row
{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.6rem;
    font-size: 0.85rem;
}

.t-plan-event
{
    font-weight: 500;
}

.t-plan-time
{
    font-variant-numeric: tabular-nums;
}

.t-plan-meta
{
    color: var(--kendo-color-subtle);
}

/* domača stran: današnji dogodki, povzetek žiga (tudi v panelu ur) */
.t-home-empty
{
    padding: 1rem;
    color: var(--kendo-color-subtle);
    text-align: center;
}

.t-home-events
{
    list-style: none;
    margin: 0;
    padding: 0;
}

.t-home-events li
{
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--kendo-color-border);
}

.t-home-events li:last-child
{
    border-bottom: none;
}

.t-home-events-name
{
    flex: 1 1 auto;
    min-width: 0;
}

.t-home-events-time
{
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.t-punch-summary
{
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: var(--kendo-border-radius-lg, 8px);
    background: var(--kendo-color-base-subtle);
}

.t-punch-summary-event
{
    font-size: 1.1rem;
    font-weight: 600;
}

.t-punch-summary-time
{
    color: var(--kendo-color-subtle);
    font-variant-numeric: tabular-nums;
}

/* APS planiranje proizvodnje: bloki operacij na gantogramu po DC in v Ganttu po DN (barva = stanje), celice brez izmene,
   vikend in danes, filter ugotovitev (ostali bloki zatemnjeni), primerjava različic */
.t-aps-board .k-event
{
    border-width: 1px;
    border-style: solid;
    font-size: 0.8em;
}
.t-aps-firm { background: var(--kendo-color-primary-subtle); border-color: var(--kendo-color-primary); color: var(--kendo-color-on-app-surface); }
.t-aps-proposal { background: var(--kendo-color-base-subtle); border-color: var(--kendo-color-border); border-style: dashed !important; color: var(--kendo-color-on-app-surface); }
.t-aps-late { background: var(--kendo-color-error-subtle); border-color: var(--kendo-color-error); color: var(--kendo-color-error-on-subtle); }
.t-aps-locked { background: var(--kendo-color-tertiary-subtle); border-color: var(--kendo-color-tertiary); color: var(--kendo-color-on-app-surface); }
.t-aps-material { background: var(--kendo-color-warning-subtle); border-color: var(--kendo-color-warning); color: var(--kendo-color-warning-on-subtle); }
.t-aps-ignored { background: var(--kendo-color-base-subtle); border-color: var(--kendo-color-border); color: var(--kendo-color-subtle); text-decoration: line-through; }
.t-aps-history { background: repeating-linear-gradient(45deg, var(--kendo-color-base-subtle), var(--kendo-color-base-subtle) 3px, var(--kendo-color-surface) 3px, var(--kendo-color-surface) 6px); border-color: var(--kendo-color-subtle); color: var(--kendo-color-on-app-surface); }
.t-aps-history-1 { border-color: var(--kendo-color-success); }
.t-aps-history-2 { border-color: var(--kendo-color-warning); }
.t-aps-history-3 { border-color: var(--kendo-color-subtle); opacity: 0.7; }
.t-aps-dim { opacity: 0.35; }
.t-aps-highlight { box-shadow: 0 0 0 2px var(--kendo-color-secondary); }
.t-aps-noshift { background: repeating-linear-gradient(135deg, var(--kendo-color-base-subtle), var(--kendo-color-base-subtle) 4px, transparent 4px, transparent 8px); }
.t-aps-weekend { background-color: var(--kendo-color-base-subtle); }
.t-aps-today { box-shadow: inset 2px 0 0 var(--kendo-color-error); }
.t-aps-item
{
    display: flex;
    align-items: center;
    gap: 0.25rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 0.15rem;
}
.t-aps-item i { font-size: 0.85em; }
.t-aps-legend
{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.8em;
}
.t-aps-legend span
{
    padding: 0 0.4rem;
    border-width: 1px;
    border-style: solid;
    border-radius: 2px;
}
.t-aps-compare
{
    border-collapse: collapse;
    width: 100%;
    font-variant-numeric: tabular-nums;
}
.t-aps-compare th,
.t-aps-compare td
{
    border: 1px solid var(--kendo-color-border);
    padding: 0.2rem 0.4rem;
    white-space: nowrap;
}
.t-aps-compare thead th
{
    position: sticky;
    top: 0;
    background: var(--kendo-color-surface);
}
.t-aps-best { background: var(--kendo-color-success-subtle); color: var(--kendo-color-success-on-subtle); }
.t-aps-worse { background: var(--kendo-color-error-subtle); color: var(--kendo-color-error-on-subtle); }
.t-aps-detail
{
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.15rem 0.75rem;
}
.t-aps-detail dt { color: var(--kendo-color-subtle); font-weight: normal; }
.t-aps-detail dd { margin: 0; }
/* Besedilo z ohranjenimi prelomi vrstic (zaznamki, komentarji ...) */
.t-text-pre-wrap
{
    white-space: pre-wrap;
    word-break: break-word;
}
/* FileViewer: seznam datotek levo, predogled desno; ozka komponenta (dialog, polovicni zavihek, tablica) - spustni seznam nad
   predogledom. Container query: steje sirina komponente, ne zaslona. */
.t-file-viewer
{
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    container-type: inline-size;
}
.t-file-viewer-toolbar
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}
.t-file-viewer-body
{
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.t-file-viewer-list
{
    display: flex;
    flex-direction: column;
    width: 320px;
    min-width: 320px;
    overflow: auto;
    padding-right: 0.5rem;
    border-right: 1px solid var(--kendo-color-border, #dee2e6);
}
.t-file-viewer-preview
{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    padding-left: 0.5rem;
}
.t-file-viewer-select
{
    display: none;
    flex: 1 1 220px;
    min-width: 0;
}
.t-file-viewer-empty
{
    display: none;
}
/* okvir predogleda slike/besedila - enak videz kot PdfViewer (obroba, vrstica s povecavo, vsebina z drsnikom) */
.t-file-viewer-frame
{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    border: 1px solid var(--kendo-color-border, #dee2e6);
    border-radius: var(--kendo-border-radius-md, 0.25rem);
    overflow: hidden;
}
.t-file-viewer-frame-toolbar
{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--kendo-color-border, #dee2e6);
}
.t-file-viewer-frame-content
{
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0.5rem;
}
@container (max-width: 700px)
{
    .t-file-viewer-list
    {
        display: none;
    }
    .t-file-viewer-select
    {
        display: block;
    }
    .t-file-viewer-empty
    {
        display: block;
    }
    .t-file-viewer-preview
    {
        padding-left: 0;
    }
}
/* Slika v predogledu: prilagojena sirini, brez popacenja */
.t-image-fit
{
    max-width: 100%;
    object-fit: contain;
}
/* Video / iframe v predogledu: zapolni preostanek stolpca (flex), brez popacenja */
.t-media-fit
{
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    object-fit: contain;
}

/* pageTabs - zavihki strani v AppMainLayout (PageTabHost): TabStrip izrise samo glave, strani so v lastnem vsebniku.
   Skrit zavihek ima display:none - s tem je skrit tudi njegov EditOverlay (position:fixed). */
.t-page-tabs
{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.t-page-tabs-header
{
    flex: 0 0 auto;
    padding: 0.25rem 0.5rem 0 0.5rem;
}
.t-page-tabs-header > .k-tabstrip-content
{
    display: none !important;
}
.t-page-tabs-content
{
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}
.t-page-tab
{
    display: none;
    height: 100%;
}
.t-page-tab.t-page-tab-active
{
    display: block;
}
.t-page-tab-header
{
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    max-width: 220px;
}
.t-page-tab-title
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
    Kompaktno stikalo (TelerikSwitch).

    Meridian privzeto riše stikalo 60x30 (Size="sm" 52x26) z napisom ON/OFF, kar je
    precej vec od vnosnih polj in potrditvenih polj ob njem. Vse velikosti (sm/md/lg)
    poenotimo na 34x18, napisa skrijemo (stanje kaze barva in polozaj gumba).
    Na napravah na dotik (pointer: coarse) nekoliko vecje, 42x22.
*/
.k-switch,
.k-switch.k-switch-sm,
.k-switch.k-switch-md,
.k-switch.k-switch-lg
{
    --t-switch-width: 34px;
    --t-switch-height: 18px;
    --t-switch-thumb: 14px;
    width: var(--t-switch-width);
    height: var(--t-switch-height);
    vertical-align: middle;
}
@media (pointer: coarse)
{
    .k-switch,
    .k-switch.k-switch-sm,
    .k-switch.k-switch-md,
    .k-switch.k-switch-lg
    {
        --t-switch-width: 42px;
        --t-switch-height: 22px;
        --t-switch-thumb: 18px;
    }
}
.k-switch .k-switch-track,
.k-switch.k-switch-sm .k-switch-track,
.k-switch.k-switch-md .k-switch-track,
.k-switch.k-switch-lg .k-switch-track
{
    width: var(--t-switch-width);
    height: var(--t-switch-height);
}
.k-switch .k-switch-thumb,
.k-switch.k-switch-sm .k-switch-thumb,
.k-switch.k-switch-md .k-switch-thumb,
.k-switch.k-switch-lg .k-switch-thumb
{
    width: var(--t-switch-thumb);
    height: var(--t-switch-thumb);
}
.k-switch.k-switch-on .k-switch-thumb-wrap,
.k-switch.k-switch-sm.k-switch-on .k-switch-thumb-wrap,
.k-switch.k-switch-md.k-switch-on .k-switch-thumb-wrap,
.k-switch.k-switch-lg.k-switch-on .k-switch-thumb-wrap
{
    inset-inline-start: calc(100% - var(--t-switch-thumb) / 2 - 2px);
}
.k-switch.k-switch-off .k-switch-thumb-wrap,
.k-switch.k-switch-sm.k-switch-off .k-switch-thumb-wrap,
.k-switch.k-switch-md.k-switch-off .k-switch-thumb-wrap,
.k-switch.k-switch-lg.k-switch-off .k-switch-thumb-wrap
{
    inset-inline-start: calc(var(--t-switch-thumb) / 2 + 2px);
}
.k-switch .k-switch-label-on,
.k-switch .k-switch-label-off
{
    display: none;
}
/* Izklopljeno stanje ima na Meridianu zelo svetlo sled brez obrobe - pri manjsem stikalu skoraj izgine. */
.k-switch-off .k-switch-track
{
    box-shadow: inset 0 0 0 1px var(--kendo-color-border-alt, var(--kendo-color-border));
}

/* TelerikTextArea cez celotno visino starsa (TextCell okno): ovoj k-textarea in notranji textarea do roba */
.t-textarea-fill
{
    height: 100%;
}

.t-textarea-fill .k-input-inner
{
    height: 100%;
    overflow-y: auto;
}

/* TelerikTextArea, ki v flex stolpcu zapolni preostalo visino (npr. telo zahteve/odgovora v Agent ApiClientRequest) */
.t-textarea-grow
{
    flex: 1 1 auto;
    min-height: 0;
}

.t-textarea-grow .k-input-inner
{
    height: 100%;
    overflow-y: auto;
}

/* TextCell z IsMarkup: HTML vsebina z obrobo kot TextArea, drsnik znotraj */
.t-textcell-markup
{
    height: 100%;
    overflow: auto;
    padding: 0.5rem;
    border: 1px solid var(--kendo-color-border, #ced4da);
    border-radius: var(--kendo-border-radius-md, 4px);
}

/* barcodeScanner: skeniranje s kamero (BarcodeScannerView). Video z object-fit: cover, cez njega platno z obrobami
   prebranih kod in kriz na sredini - koda pod krizem se sprejme (barcodeScanner v traceblazor.js). */
.t-barcode-scanner
{
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.t-barcode-scanner-viewport
{
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: #000;
    border-radius: var(--kendo-border-radius-md, 4px);
}

.t-barcode-scanner-video,
.t-barcode-scanner-overlay
{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.t-barcode-scanner-video
{
    object-fit: cover;
}

/* dotik na kodo jo izbere - platno mora dobiti dogodke in ne sme sproziti drsenja ali povecave */
.t-barcode-scanner-overlay
{
    touch-action: none;
}

.t-barcode-scanner-reticle
{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    background:
        linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)) center / 2px 100% no-repeat,
        linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)) center / 100% 2px no-repeat;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.8));
}

.t-barcode-scanner-toolbar
{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    padding-top: 0.5rem;
}

.t-barcode-scanner-hint
{
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875em;
    color: var(--kendo-color-subtle, #6c757d);
}

/* Trace AI ------------------------------------------------------------------------------------------------------
   Barvni žeton in glava/telo klepeta (AppBar AIAssistantPanel, Analize po meri AIAnalysisView, Klepet AIChat). */
:root {
    /* barva teme (Kendo primary), da se Trace AI ujema z ostalimi gumbi in se zamenja s temo */
    --t-ai-accent: var(--kendo-color-primary);
}

.t-ai-accent {
    color: var(--t-ai-accent);
}

.t-ai-chat-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
    border-bottom: 1px solid var(--kendo-color-border);
}

.t-ai-chat-title {
    flex: 1 1 auto;
    font-weight: 600;
}

.t-ai-chat-body {
    flex: 1 1 auto;
    min-height: 0;
}

/* odgovor Trace AI v markdownu (AIMarkdown): brez odvečnih robov v oblačku, kompaktni seznami in tabele */
.t-ai-markdown > :first-child {
    margin-top: 0;
}

.t-ai-markdown > :last-child {
    margin-bottom: 0;
}

.t-ai-markdown p,
.t-ai-markdown ul,
.t-ai-markdown ol {
    margin-bottom: 0.4rem;
}

.t-ai-markdown ul,
.t-ai-markdown ol {
    padding-left: 1.2rem;
}

.t-ai-markdown h1,
.t-ai-markdown h2,
.t-ai-markdown h3,
.t-ai-markdown h4 {
    font-size: 1em;
    font-weight: 600;
    margin: 0.4rem 0 0.2rem;
}

.t-ai-markdown code {
    font-size: 0.9em;
    padding: 0 0.2em;
    border-radius: 3px;
    background: var(--kendo-color-base-subtle, rgba(0, 0, 0, 0.06));
    color: inherit;
}

.t-ai-markdown pre {
    white-space: pre-wrap;
    margin-bottom: 0.4rem;
}

.t-ai-markdown table {
    border-collapse: collapse;
    margin-bottom: 0.4rem;
    font-size: 0.95em;
}

.t-ai-markdown th,
.t-ai-markdown td {
    border: 1px solid var(--kendo-color-border);
    padding: 0.15rem 0.4rem;
    text-align: left;
}

    .t-ai-chat-body .k-chat {
        border: none;
        max-width: none;
    }

/* Trace AI klepet aplikacije (AppMainLayout, AIAssistantPanel): stranski list čez desni rob, nad vrstico aplikacije */
.t-ai-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 100vw;
    z-index: 9000;
    display: none;
    flex-direction: column;
    background: var(--kendo-color-surface);
    border-left: 1px solid var(--kendo-color-border);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
}

.t-ai-panel.t-ai-panel-open {
    display: flex;
}

@media (max-width: 767.98px) {
    .t-ai-panel {
        width: 100vw;
    }
}

/* Analize po meri (AIAnalysisView): klepet levo, urejanje opisa, graf in mreža rezultata desno */
.t-ai-analysis {
    display: flex;
    gap: 0.5rem;
    height: 100%;
    min-height: 0;
}

.t-ai-analysis-chat {
    display: flex;
    flex-direction: column;
    flex: 0 0 380px;
    min-height: 0;
    border: 1px solid var(--kendo-color-border);
    border-radius: 4px;
}

.t-ai-analysis-chat .k-chat {
    border: none;
    max-width: none;
}

.t-ai-analysis-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    gap: 0.5rem;
}

.t-ai-analysis-editor {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: flex-end;
}

.t-ai-analysis-field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.t-ai-analysis-field > label {
    font-size: 0.85em;
    color: var(--kendo-color-subtle);
}

.t-ai-analysis-field-wide {
    flex: 1 1 260px;
    min-width: 220px;
}

.t-ai-analysis-problems {
    font-size: 0.9em;
}

.t-ai-analysis-grid {
    flex: 1 1 auto;
    min-height: 200px;
}

.t-ai-analysis-save {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* Trace AI - veščine (AISkillEdit): SKILL.md v pisavi s stalno širino, podseznam datotek pod poljem */
.t-text-monospace,
.t-text-monospace textarea {
    font-family: var(--kendo-font-family-monospace, ui-monospace, SFMono-Regular, Consolas, monospace);
}

.t-sublist-min-height {
    min-height: 250px;
}

.t-ai-log-text {
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--kendo-color-base-subtle);
    padding: 0.5rem;
    border-radius: 4px;
    max-height: 40vh;
    overflow: auto;
}

/* Trace AI - obdelava dokumentov (AIPipelineRunView): v glavi vrstica korakov; datoteke levo, zavihki Osnutki/Pogovor/Koraki desno; na ozkem zaslonu eno pod drugim */
.t-ai-run {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    min-height: 0;
}

.t-ai-run-body {
    display: flex;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-height: 0;
}

.t-ai-run-files {
    flex: 1 1 55%;
    min-width: 0;
    min-height: 400px;
    border: 1px solid var(--kendo-color-border);
    border-radius: 4px;
    overflow: hidden;
}

.t-ai-run-side {
    flex: 1 1 45%;
    min-width: 0;
    min-height: 400px;
    overflow: hidden;
}

    .t-ai-run-side .k-tabstrip-content {
        overflow: auto;
    }

.t-ai-run-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.t-ai-run-step {
    border: 1px solid var(--kendo-color-border);
    border-radius: 4px;
    padding: 0.1rem 0.5rem;
    white-space: nowrap;
}

.t-ai-run-draft {
    border: 1px solid var(--kendo-color-border);
    border-radius: 4px;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
}

.t-ai-run-message-user,
.t-ai-run-message-ai {
    white-space: pre-wrap;
    word-break: break-word;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-bottom: 0.25rem;
}

.t-ai-run-message-user {
    background: var(--kendo-color-primary-subtle);
    margin-left: 2rem;
}

.t-ai-run-message-ai {
    background: var(--kendo-color-base-subtle);
    margin-right: 2rem;
}

@media (max-width: 991px) {
    .t-ai-run-body {
        flex-direction: column;
    }
}

@media (max-width: 991.98px) {
    .t-ai-analysis {
        flex-direction: column;
    }

    .t-ai-analysis-chat {
        flex: 0 0 360px;
    }
}

/* Trace AI pogovor (AIChatThread): sporočila, odgovor v markdownu, urejevalnik spodaj; stran Klepet (AIChat) in plošča v AppBar */
.t-ai-thread {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.t-ai-thread-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.75rem 0.75rem 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.t-ai-thread:not(.t-ai-thread-compact) .t-ai-thread-messages,
.t-ai-thread:not(.t-ai-thread-compact) .t-ai-composer,
.t-ai-thread:not(.t-ai-thread-compact) .t-ai-thread-readonly {
    width: 100%;
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
}

.t-ai-thread-empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-align: center;
    color: var(--kendo-color-subtle, #6c757d);
    padding: 1rem;
}

.t-ai-thread-welcome {
    max-width: 36rem;
}

.t-ai-thread-suggestions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.t-ai-msg {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.t-ai-msg-user {
    align-items: flex-end;
}

.t-ai-msg-bubble {
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 85%;
    padding: 0.5rem 0.75rem;
    border-radius: 1rem;
    background: var(--kendo-color-primary-subtle);
}

.t-ai-msg-ai {
    align-items: stretch;
    word-break: break-word;
}

.t-ai-msg-ai .t-ai-markdown {
    overflow-x: auto;
}

.t-ai-msg-progress,
.t-ai-msg-status,
.t-ai-msg-used {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9em;
    color: var(--kendo-color-subtle, #6c757d);
}

.t-ai-msg-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    opacity: 0.75;
}

.t-ai-msg:hover .t-ai-msg-tools {
    opacity: 1;
}

.t-ai-edit-input {
    width: 85%;
    min-height: 4rem;
    padding: 0.5rem;
    border: 1px solid var(--kendo-color-border);
    border-radius: 0.5rem;
    resize: vertical;
    field-sizing: content;
    max-height: 40vh;
}

.t-ai-files {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    max-width: 100%;
}

.t-ai-file {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 16rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--kendo-color-border);
    border-radius: 0.5rem;
    background: var(--kendo-color-surface);
    color: inherit;
    font-size: 0.9em;
}

button.t-ai-file:not(:disabled) {
    cursor: pointer;
}

.t-ai-file-remove {
    border: none;
    background: none;
    padding: 0 0.15rem;
    color: inherit;
    cursor: pointer;
}

/* blok kode z gumbom Kopiraj (AIMarkdown, traceblazor.js) */
.t-ai-code {
    position: relative;
}

.t-ai-code pre {
    padding: 0.5rem 2rem 0.5rem 0.5rem;
    border-radius: 0.375rem;
    background: var(--kendo-color-base-subtle, rgba(0, 0, 0, 0.06));
}

.t-ai-code-copy {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    border: none;
    background: none;
    padding: 0.25rem;
    color: var(--kendo-color-subtle, #6c757d);
    cursor: pointer;
}

.t-ai-composer {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--kendo-color-border);
    border-radius: 1rem;
    background: var(--kendo-color-surface);
}

.t-ai-thread-compact .t-ai-composer {
    margin: 0.25rem 0.5rem 0.5rem;
}

.t-ai-composer-input {
    width: 100%;
    min-height: 2.5rem;
    max-height: 30vh;
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    color: inherit;
    padding: 0.25rem;
    field-sizing: content;
}

.t-ai-composer-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.t-ai-thread-readonly {
    flex: 0 0 auto;
    padding: 0.5rem 0.75rem;
    color: var(--kendo-color-subtle, #6c757d);
}

/* stran Klepet (AIChat): razdelilnik (TelerikSplitter) seznam pogovorov | pogovor; na ozkem zaslonu je seznam zložen */
.t-ai-chat-page.k-splitter {
    height: 100%;
    min-height: 0;
    border: none;
}

.t-ai-chat-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    min-height: 0;
    padding-right: 0.5rem;
}

.t-ai-chat-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.t-ai-chat-group {
    padding: 0.5rem 0.5rem 0.25rem;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--kendo-color-subtle, #6c757d);
}

.t-ai-chat-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2rem;
    padding: 0.15rem 0.25rem 0.15rem 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
}

.t-ai-chat-item:hover {
    background: var(--kendo-color-base-subtle);
}

.t-ai-chat-item-active {
    background: var(--kendo-color-primary-subtle);
}

.t-ai-chat-item-title {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.t-ai-chat-item-icon {
    color: var(--kendo-color-subtle, #6c757d);
}

.t-ai-chat-item-actions {
    display: none;
    flex: 0 0 auto;
}

.t-ai-chat-item:hover .t-ai-chat-item-actions,
.t-ai-chat-item-active .t-ai-chat-item-actions {
    display: inline-flex;
}

.t-ai-chat-main {
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-left: 0.5rem;
}

.t-ai-chat-main-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2rem;
}

.t-ai-chat-main-title {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
}

/* dotik: gumbi pogovora vedno vidni */
@media (pointer: coarse) {
    .t-ai-chat-item-actions {
        display: inline-flex;
    }
}

/* Priloge (AttachmentList): kartice s sličico, nazivom, povezavo in izbiro »Na izpisu«; sličica v okvirju brez popačenja */
.t-attachment-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.t-attachment-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.t-attachment-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .75rem;
}

.t-attachment-card {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    padding: .5rem;
    border: 1px solid var(--kendo-color-border, #dee2e6);
    border-radius: .375rem;
    min-width: 0;
}

.t-attachment-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    background: var(--kendo-color-base-subtle, #f8f9fa);
    border-radius: .25rem;
    overflow: hidden;
}

.t-attachment-thumbnail img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: zoom-in;
}

/* datoteka (ne slika): ikona vrste in ime, klik odpre predogled (FileViewer) */
.t-attachment-file {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    height: 100%;
    padding: .5rem;
    min-width: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.t-attachment-file span {
    max-width: 100%;
}

.t-attachment-preview {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Priloge - ena slika (AttachmentList SingleImage, npr. fotografija zaposlenega): okvir s sliko brez popačenja in brisanje */
.t-attachment-single {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.t-attachment-single-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    max-width: 100%;
    height: 300px;
    background: var(--kendo-color-base-subtle, #f8f9fa);
    border: 1px solid var(--kendo-color-border, #dee2e6);
    border-radius: .375rem;
    overflow: hidden;
}

.t-attachment-single-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: zoom-in;
}

/* Stranski prikaz stolpcev (GridFactBox, TraceGrid FactBox): mreža in panel drug ob drugem. Ovoj je vedno enak, panel
   (.t-factbox) se pokaže z razredom .t-factbox-open - odpiranje ne izriše mreže. */
.t-factbox-grid {
    display: flex;
    gap: .5rem;
    height: 100%;
    min-height: 0;
}

.t-factbox-main {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
}

.t-factbox {
    display: none;
}

.t-factbox-open {
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
    border: 1px solid var(--kendo-color-border);
    border-radius: .375rem;
    background: var(--kendo-color-surface);
    overflow: hidden;
}

.edit-overlay .t-factbox-open {
    flex-basis: 280px;
}

.t-factbox-header {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .25rem .25rem .5rem;
    border-bottom: 1px solid var(--kendo-color-border);
}

.t-factbox-title {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.t-factbox-caption {
    font-size: .75em;
    color: var(--kendo-color-subtle);
}

.t-factbox-subtitle {
    font-weight: 600;
}

.t-factbox-back {
    display: none !important;
}

.t-factbox-switches {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    padding: .375rem .5rem;
    border-bottom: 1px solid var(--kendo-color-border);
}

.t-factbox-switch {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .875em;
    margin: 0;
}

.t-factbox-search {
    flex: 0 0 auto;
    padding: .25rem .5rem;
}

.t-factbox-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.t-factbox-empty {
    padding: .5rem;
    color: var(--kendo-color-subtle);
    font-style: italic;
}

.t-factbox-section {
    display: flex;
    align-items: center;
    padding: .375rem .5rem;
    font-weight: 600;
    background: var(--kendo-color-base-subtle);
    border-bottom: 1px solid var(--kendo-color-border);
    cursor: pointer;
    user-select: none;
}

.t-factbox-row {
    display: flex;
    align-items: center;
    gap: .25rem;
    min-height: 2rem;
    padding: .125rem .25rem .125rem .5rem;
    border-bottom: 1px solid var(--kendo-color-border);
}

.t-factbox-label {
    flex: 0 0 40%;
    min-width: 0;
    color: var(--kendo-color-subtle);
    font-size: .875em;
}

.t-factbox-value {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.t-factbox-action {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--kendo-color-subtle);
    padding: 0 .25rem;
    line-height: 1;
    cursor: pointer;
}

.t-factbox-action:hover {
    color: var(--kendo-color-primary);
}

.t-factbox-copy {
    visibility: hidden;
}

.t-factbox-row:hover .t-factbox-copy {
    visibility: visible;
}

/* aktiven filter polja: opozorilna (oranžna) barva, da izstopa */
.t-factbox-action.t-factbox-filtered,
.t-factbox-action.t-factbox-filtered:hover {
    color: var(--kendo-color-warning);
}

.t-factbox-filter {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0 .5rem .5rem;
    padding: .5rem;
    border: 1px solid var(--kendo-color-border);
    border-radius: .375rem;
    background: var(--kendo-color-base-subtle);
}

.t-factbox-filter .filter-values-container {
    max-height: 240px;
    overflow: auto;
}

.t-factbox-filter-editor,
.t-factbox-filter-inputs {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.t-factbox-filter-buttons,
.t-factbox-edit-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.t-factbox-edit {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .5rem;
}

.t-factbox-edit .k-listbox {
    flex: 1 1 auto;
    min-height: 0;
}

.t-factbox-edit-add {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.t-factbox-edit-section {
    font-weight: 600;
}

@media (pointer: coarse) {
    .t-factbox-copy {
        visibility: visible;
    }
}

/* ozek zaslon: panel namesto mreže, Nazaj vrne na mrežo (izbrana vrstica ostane) */
@media (max-width: 767.98px) {
    .t-factbox-grid:has(> .t-factbox-open) > .t-factbox-main {
        display: none;
    }

    .t-factbox-open {
        flex: 1 1 auto;
    }

    .t-factbox-back {
        display: inline-flex !important;
    }

    .t-factbox-close {
        display: none !important;
    }
}