/* ============================================================
   EGRITOS COLOR PALETTE – Single Source of Truth
   Αλλάξτε εδώ για να αλλάξουν τα χρώματα παντού
   (Bootstrap, Telerik kendo-theme-bootstrap, custom styles)
   ============================================================ */
:root {
    /* --- Primary brand colors --- */
    --eg-primary:        #1e3548;
    --eg-primary-hover:  #335c7d;
    --eg-secondary:      #3d6d94;

    /* --- Semantic state colors --- */
    --eg-success:        #2d7577;
    --eg-success-hover:  #235a5c;
    --eg-info:           #b4b7b7;
    --eg-info-hover:     #777777;
    --eg-warning:        #ff9f43;
    --eg-danger:         #ea5455;

    /* --- Neutral / utility colors --- */
    --eg-orange:         #fd7e14;
    --eg-disabled:       #e8e8e8;
    --eg-gray:           rgba(75, 70, 92, 0.6);
    --eg-gray-light:     #dbdade;
    --eg-light:          #dfdfe3;
    --eg-white:          #ffffff;
    --eg-dark:           #4b4b4b;

    /* --- Bootstrap overrides – defined here, re-applied with higher specificity below --- */

    /* --- Shorthand aliases (χρησιμοποιούνται ήδη σε egritos.css) --- */
    --primary:           var(--eg-primary);
    --secondary:         var(--eg-secondary);
    --success:           var(--eg-success);
    --success-hover:     var(--eg-success-hover);
    --info:              var(--eg-info);
    --info-hover:        var(--eg-info-hover);
    --warning:           var(--eg-warning);
    --danger:            var(--eg-danger);
    --orange:            var(--eg-orange);
    --disabled:          var(--eg-disabled);
    --gray:              var(--eg-gray);
    --gray-light:        var(--eg-gray-light);
    --light:             var(--eg-light);
    --white:             var(--eg-white);
    --dark:              var(--eg-dark);
}

/* Bootstrap vars override – html:root έχει specificity (0,1,1) > :root (0,0,0)
   ώστε να κερδίζουν τα Telerik/Bootstrap vars που ορίζονται στο all.css */
html {
    --bs-primary:        var(--eg-primary);
    --bs-primary-hover:  var(--eg-primary-hover);
    --bs-secondary:      var(--eg-secondary);
    --bs-success:        var(--eg-success);
    --bs-info:           var(--eg-info);
    --bs-warning:        var(--eg-warning);
    --bs-danger:         var(--eg-danger);
    --bs-light:          var(--eg-light);
    --bs-dark:           var(--eg-dark);
    --bs-border-color:   var(--eg-gray-light);
    font-size: 16px;
}

body {
    font-family: 'Ubuntu', sans-serif;
    color: #000000 !important;
}

.status-icon-legend{
    font-size: 17px;
    padding-right: 5px; 
}

/* Telerick Override Start */
.dropdown-item .k-menu-link {
    box-shadow: none !important;
}

/* Grid Command Column Centering */
.k-grid .k-command-cell {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px;
}

.k-grid .k-command-cell .k-button {
    margin: 0;
}

.k-tabstrip > .k-tabstrip-content {
    color: #000000;
    font-size: 1.2em;
}

.k-tabstrip-items .k-link {
    color: #000000;
    font-size: 1em;
} 

.k-tabstrip-top > .k-tabstrip-items-wrapper .k-tabstrip-item {
    margin: 0 2px;
    border-bottom: 2px solid var(--primary);
    font-weight: 500;
}

.k-pager-numbers .k-link, .k-pager-nav.k-link, .k-pager-refresh {
    color: var(--primary) !important;
}

    .k-pager-numbers .k-link.k-state-selected, .k-pager-numbers .k-link.k-selected {
        border-color: var(--primary) !important;
        color: #ffffff !important;
        background-color: var(--primary) !important;
    }

.k-pager-nav, .k-pager-refresh {
    color: var(--info);
}

    .k-pager-numbers .k-link:hover, .k-pager-numbers .k-link.k-state-hover,
    .k-pager-nav.k-link:hover, .k-pager-refresh:hover, .k-state-hover.k-pager-nav.k-link,
    .k-state-hover.k-pager-refresh, .k-hover.k-pager-nav.k-link, .k-hover.k-pager-refresh {
        color: #ffffff !important;
        background-color: var(--primary) !important;
    }

.k-tabstrip-top > .k-tabstrip-items {
    border-bottom: 1px solid var(--gray-light);
}

    .k-tabstrip-top > .k-tabstrip-items .k-tabstrip-item {
        margin-bottom: 0 !important;
    }
/*.k-item .k-active >.kitem.k-active {*/
/*    color: white;*/
/*}*/
.k-tabstrip-items .k-tabstrip-item {
    color: #656565;
    background-color: var(--light);
    border-right: 1px solid var(--gray-light);
}

    .k-tabstrip-items .k-tabstrip-item:last-of-type {
        border-right: 0 none;
    }

    .k-tabstrip-content.k-active, .k-tabstrip > .k-tabstrip-content.k-active  {
        border: 0 none !important;
        padding: 0;
        box-shadow: 0 0.25rem 1.125rem rgba(75, 70, 92, 0.1);
    }
    
    .k-tabstrip-items .k-tabstrip-item.k-active, .k-tabstrip-items .k-tabstrip-item:hover,
    .k-list-item.k-selected, .k-selected.k-list-optionlabel,
    .k-tabstrip-items-wrapper .k-tabstrip-item.k-active {
        background-color: var(--bs-primary);
        color: #ffffff !important;
    }

        .k-list-item.k-selected:hover, .k-selected.k-list-optionlabel:hover, .k-list-item.k-selected.k-hover, .k-selected.k-hover.k-list-optionlabel {
            background-color: var(--bs-secondary);
            color: #ffffff !important;
        }

        .k-tabstrip-items .k-tabstrip-item.k-active .k-link,
        .k-tabstrip-items .k-tabstrip-item:hover .k-link {
            color: var(--light) !important;
        }

.k-button {
    font-weight: 400;
    font-size: 1rem;
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
}

    .k-button.btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        line-height: 1.5;
        border-radius: 0.2rem;
    }

.k-input-button {
    background-color: var(--info);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    color: #ffffff;
    height: 100%;
    width: 40px;
}

    .k-input-button:hover, .k-input-button:focus, .k-input-button:active {
        background-color: var(--info-hover);
        color: #ffffff;
    }

.k-datepicker .k-dateinput, .k-dropdown-wrap .k-input /*, .k-multiselect .k-multiselect-wrap .k-input*/ {
    width: calc(100% - 40px);
}

.k-datepicker {
    display: flex;
    justify-content: space-between;
}

    .k-datepicker .k-dateinput,
    .k-datepicker .k-dateinput .k-dateinput-wrap,
    .k-picker-wrap,
    .k-dropdown-wrap,
    .k-dateinput-wrap,
    .k-numeric-wrap,
    .k-combobox .k-dropdown-wrap,
    .k-datepicker .k-picker-wrap,
    .k-input-inner {
        height: auto;
    }

.k-numerictextbox,
.k-textbox,
.k-dateinput,
.k-datepicker,
.k-textarea,
.k-datepicker,
.k-combobox,
.k-multiselect,
.k-dropdownlist,
.k-dropdown {
    padding: 0;
}

.k-input-inner {
    padding: 0.375rem 0.75rem;
}

.k-multiselect.form-control, .k-multiselect-wrap {
    padding: 0px;
    height: auto;
    min-height: calc(1.5em + 0.75rem + 2px);
}

.k-multiselect {
    position: relative;
}

    .k-multiselect .k-clear-value {
        position: absolute;
        top: 3px;
        right: 0;
        z-index: 1000;
    }

.k-dateinput .k-input, .k-dropdown-wrap .k-input, .k-numerictextbox.form-control .k-input {
    border: 0 none;
}

.k-datepicker .k-select, .k-dropdown-wrap .k-select {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    color: #ffffff;
}

.k-grid-header .k-header {
    vertical-align: middle;
    font-weight: 700;
}

.k-grid-toolbar {
    justify-content: flex-end;
}

.k-column-title {
    white-space: initial;
}

.k-tabstrip > .k-tabstrip-content {
    overflow: hidden;
}

.k-combobox .k-dropdown-wrap .k-input {
    color: #000000 !important;
    width: 100%;
}

.k-numerictextbox .k-select {
    height: calc(1.5em + 0.75rem + 2px);
}

.k-numerictextbox .k-link-increase .k-icon {
    top: -5px;
}

.k-numerictextbox .k-link-decrease .k-icon {
    bottom: 8px;
}

.k-textarea.form-control .k-input {
    padding: 4px 8px;
}

.textarea-full-height {
    height: 100%;
}

.k-dialog-titlebar {
    background-color: var(--primary);
    color: #ffffff;
}

.k-window-titlebar.k-dialog-titlebar.k-header .k-bare.k-button {
    color: #ffffff;
}

.k-window-titlebar{
    background-color: var(--bs-primary);
    color: white;
}
.k-window-titlebar-action span {
    color: white!important;
}

.k-dialog-buttongroup .k-button.k-primary {
    background-color: var(--orange);
    color: #ffffff;
}

.k-window-content, .k-prompt-container {
    padding: 15px;
}

.k-dropdown-wrap .k-input /*, .k-multiselect .k-multiselect-wrap .k-input*/ {
    align-items: center;
    padding: 0 10px;
}

.k-dropdownlist {
    display: flex;
    border: 1px solid #ccc;
}

.k-window {
    max-height: calc(100vh - 40px);
    overflow: auto;
}

.k-card-header {
    padding: 10px 15px;
}

.k-tilelayout-item-header.k-card-header {
    background-color: var(--primary);
    color: #ffffff;
}

.k-tilelayout {
    grid-auto-rows: auto !important;
}

.k-card-title {
    line-height: 1;
    color: white;
}

.k-input.k-disabled, .k-dropdownlist.k-disabled {
    background-color: var(--disabled) !important;
}

.k-disabled .k-dateinput-wrap .k-input {
    background-color: transparent;
}

.k-checkbox,
.k-checkbox.k-checkbox {
    width: 30px;
    height: 30px;
    border: 1px solid var(--bs-primary);
}

.k-grid-content .k-checkbox, .k-grid-header .k-checkbox, .table .k-checkbox, .k-grid-header .k-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 0.25rem;
    border: 1px solid #000;
}


.k-radio:checked, .k-radio.k-checked {
    border-color: var(--info);
    background-color: var(--info);
}

.k-animation-container.k-animation-container-shown .container-box-shadow {
    box-shadow: 5px 5px 10px #333;
}

.k-grid a {
    color: #4d6cdc;
    border-bottom: 2px solid transparent;
}

    .k-grid a:hover, .k-grid a:focus, .k-grid a:active {
        color: var(--primary);
        border-bottom: 2px solid var(--primary);
    }

.k-grid th, .k-grid td {
    font-weight: 400;
}
/* Telerick Override End*/

/* overriden styles*/
form .form-group {
    margin-bottom: 0.5rem !important;
}

.k-numerictextbox.k-input.form-control {
    padding: 0;
}

form .form-control {
    color: #000000;
    border: 1px solid #ccc;
    display: flex;
}

    form .form-control[type="checkbox"] {
        width: 30px;
        height: 30px;
        border: 1px solid #ccc;
    }

        form .form-control[type="checkbox"]:checked {
            background-color: var(--info);
            border-color: var(--info);
        }

/*.input-group {
    margin-bottom: 0.5rem !important;
}*/

form label {
    color: #000000;
    letter-spacing: 0;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

form .form-section {
    font-size: 1.1rem;
    font-weight: 500;
    background-color: var(--disabled);
    letter-spacing: 0;
}

form .validation-message {
    color: var(--danger);
    font-size: 0.75em;
    margin: 0;
    padding: 0;
}

form ul.validation-errors li {
    line-height: 1;
}

.img-caption {
    position: absolute;
    bottom: 0;
    background-color: rgba(0,0,0,.7);
    color: white;
}

.caption-text {
    max-height: 65px;
    overflow-y: auto;
}

    .caption-text::-webkit-scrollbar {
        width: 3px;
    }

    .caption-text::-webkit-scrollbar-thumb {
        background: #00777a;
    }

    .caption-text::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

.carousel-image {
    max-height: 800px;
    margin: auto;
}

.carousel-control-prev:hover, .carousel-control-next:hover {
    background: rgba(241, 241, 241, .3);
}

.carousel-control-prev i, .carousel-control-next i {
    color: #ff682d;
}

.hover-pointer:hover {
    cursor: pointer;
}

.border-light-right {
    padding: 0;
    border-right: 1px solid var(--gray);
    padding-right: 10px;
}

.row-item {
    box-shadow: 0px 3px 6px var(--gray-light);
    border-radius: 3px;
    padding: 5px;
    margin: 5px;
}

.enter-app-button {
    min-width: 160px;
    box-shadow: 0 2px 3px #eaeaea;
}

    .enter-app-button:hover {
        box-shadow: 0 1px 2px #2f5785;
    }

.card-header {
    padding: 0.5rem !important;
}

.MonacoEditor {
    width: 100%;
    height: 500px;
}

@media (max-width: 992px) {
    .fa-toggle-off::before {
        content: none;
    }

    .fa-toggle-on::before {
        content: none;
    }
}
/* overriden styles end */

.btn-save {
    color: var(--white);
    background-color: var(--success);
    border-color: var(--success);
}

    .btn-save:hover, .btn-save:active, .btn-save:focus {
        background-color: var(--success-hover) !important;
        border-color: var(--success-hover) !important;
    }

.display-on-top,
.k-animation-container:has(.display-on-top) {
    z-index: 987654 !important;
}

/*  grid */
.k-master-row .k-table-alt-row .k-grid-content-sticky {
    background-color: #fff;
}

.k-grid .k-table-row {
    background-color: #fff;
}


.k-grid .k-table-alt-row {
    background-color: #fff;
}

.k-grid-header .k-grid-header-sticky {
    border-left: rgb(166 166 166 / 50%);
    border-right: rgb(166 166 166 / 50%);
    border-width: 1px;
    border-style: solid;
    background-color: #fff;
}

.k-table-td {
    border: 1px solid !important;
    border-color: var(--bs-border-color) !important;
}

.k-picker {
    min-width: 6em !important;
}

.k-grid .k-master-row .k-table-td.k-grid-content-sticky,
.k-grid .k-master-row.k-table-alt-row .k-table-td.k-grid-content-sticky {
    background-color: #fff !important;
}

.k-grid-content {
    overflow-y: unset;
}

.k-grid-header, .k-grid-footer {
    padding-inline-end: 0;
}
/* custom components */
.eg-page-header {
    align-self: center;
}

.eg-page-header-text {
    margin: 0px !important;
    color: var(--bs-primary);
}

.k-picker {
    background: 0;
}

.k-checkbox:checked, .k-checkbox.k-checked, .k-checkbox:indeterminate, .k-checkbox.k-indeterminate {
    background-color: var(--bs-primary);
    border-color: var(--bs-dark);
}



.k-grid .k-cell-inner > .k-link {
    justify-content: center;
}

#template-customizer .template-customizer-open-btn {
    top: 170px !important;
}

    #template-customizer .template-customizer-open-btn::before {
        background-image: none !important;
    }

.k-grid-header .k-header {
    font-weight: 500;
}

.k-grid td, .k-grid .k-table-td {
    font-weight: 400;
}


.k-i-sort-asc-small::before {
    color: var(--bs-black);
    content: "\e127";
}

.k-i-sort-desc-small::before {
    color: var(--bs-black);
    content: "\e128";
}

.ofiletis-navbar {
    background-color: #fff;
    padding: 5px;
}

.k-tabstrip-top > .k-tabstrip-items-wrapper .k-tabstrip-item.k-active {
    background-color: var(--bs-primary);
    color: white !important;
    margin-bottom: 0px;
}

.k-tabstrip-top > .k-tabstrip-items-wrapper .k-tabstrip-item:hover {
    background-color: var(--bs-primary);
    border: 1px solid var(--bs-primary);
    color: white !important;
}

.k-tabstrip-top > .k-tabstrip-items-wrapper {
    padding: 0px;
}

.k-tabstrip-items-wrapper {
    margin-bottom: -1px;
}

.stoixeia-xreosis-tab-content {
    padding: 0.75rem;
}

.stoixeia-xreosis-close {
    margin-left: 0.5rem;
    padding: 0 0.25rem;
    border-radius: 0.25rem;
    opacity: 0.7;
    cursor: pointer;
}

    .stoixeia-xreosis-close:hover {
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.15);
    }

.k-tabstrip-items .k-tabstrip-item.stoixeia-xreosis-add-tab {
    background-color: var(--light);
    color: var(--primary);
    font-weight: 600;
    margin-left: auto;
    border-right: 0 none;
}

    .k-tabstrip-items .k-tabstrip-item.stoixeia-xreosis-add-tab:hover,
    .k-tabstrip-items .k-tabstrip-item.stoixeia-xreosis-add-tab.k-active {
        background-color: var(--primary);
        color: #ffffff !important;
    }

        .k-tabstrip-items .k-tabstrip-item.stoixeia-xreosis-add-tab .k-link {
            color: var(--primary);
        }

        .k-tabstrip-items .k-tabstrip-item.stoixeia-xreosis-add-tab:hover .k-link,
        .k-tabstrip-items .k-tabstrip-item.stoixeia-xreosis-add-tab.k-active .k-link {
            color: #ffffff !important;
        }

.eg-gridToolBarDiv {
    width: calc(100vw - (100vw - 100%) - 1rem * 2) !important;
    margin: 1rem auto 0;
    border-radius: 0.375rem;
}

.divider .divider-text {
    font-size: 1.2rem !important;
}

    .divider .divider-text i {
        font-size: 1rem !important;
    }

.dropdown-item.bg-primary {
    color: #fff;
}

.grid-footer {
    text-align: right;
    font-weight: 500;
}

.k-table {
    color: #000 !important;
}


.validation-message {
    color: var(--bs-danger)!important;
    font-size: 0.75rem;
    margin: 0;
    padding: 0;
}

.k-window{
    overflow: unset;
}

.k-item-list {
     white-space: pre;
}

.k-window-content, .k-prompt-container {
    position: unset;
}

.ofeiletis-formrow .form-group {
    margin : 0px!important;
}

.k-switch-on .k-switch-thumb {
    background-color: white!important;
}

.k-list-item {
    height: auto!important;
}


.k-switch-on .k-switch-track {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
}

.k-switch-on:disabled .k-switch-track, .k-switch-on.k-disabled .k-switch-track {
    border-color: var(--bs-secondary);
    background-color: var(--bs-secondary);
}


/*spinner*/
.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

    .lds-ellipsis div {
        position: absolute;
        top: 33px;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: var(--bs-primary);
        animation-timing-function: cubic-bezier(0, 1, 1, 0);
    }

        .lds-ellipsis div:nth-child(1) {
            left: 8px;
            animation: lds-ellipsis1 0.6s infinite;
        }

        .lds-ellipsis div:nth-child(2) {
            left: 8px;
            animation: lds-ellipsis2 0.6s infinite;
        }

        .lds-ellipsis div:nth-child(3) {
            left: 32px;
            animation: lds-ellipsis2 0.6s infinite;
        }

        .lds-ellipsis div:nth-child(4) {
            left: 56px;
            animation: lds-ellipsis3 0.6s infinite;
        }

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(24px, 0);
    }
}

.k-window-actions {
    justify-content: end;
}

.text-right {
    text-align: right !important;
}

.printing-modal .k-window-content {
    padding: 0;
}

.vertical-text {
    writing-mode: vertical-lr; /* Set text to vertical */
    transform: rotate(180deg); /* Rotate text 180 degrees */
    white-space: nowrap; /* Prevent text from wrapping */
}

/* Embedded mode: stretch grid columns to fill available width */
.k-grid-embedded .k-grid-header-table,
.k-grid-embedded .k-grid-table {
    width: 100% !important;
}

/* Status icon colors — χρησιμοποιούνται σε legend & status indicators (παραστατικά, αποδείξεις, κλπ) */
.eg-status-pending     { color: #F44337; } /* Εκκρεμή */
.eg-status-locked      { color: #673AB7; } /* Δεσμευμένα */
.eg-status-partial     { color: #FFB300; } /* Μερικώς ενταλματοποιημένα */
.eg-status-issued      { color: #01A9F4; } /* Ενταλματοποιημένα */
.eg-status-partial-pay { color: #9E9E9E; } /* Μερικώς εξοφλημένα */
.eg-status-paid        { color: #4CAF50; } /* Εξοφλημένα */

/* === Auth portal link στη λίστα χρηστών (XristesList) === */
.auth-user-link {
    color: var(--bs-link-color, #0d6efd);
    text-decoration: none;
    max-width: 100%;
    overflow: hidden;
}

.auth-user-link:hover,
.auth-user-link:focus {
    text-decoration: underline;
    color: var(--bs-link-hover-color, #0a58ca);
}

.auth-user-link i {
    font-size: 0.85em;
    flex-shrink: 0;
}

/* === Bulk link auth users dialog (BulkLinkAuthUsersDialog) === */
.bulk-link-candidate {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.2;
}

.bulk-link-candidate .bulk-link-candidate-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex-grow: 1;
}

.bulk-link-candidate .bulk-link-candidate-info small {
    color: #6c757d;
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bulk-link-portal-link {
    color: #0d6efd;
    flex-shrink: 0;
}

.bulk-link-portal-link:hover { color: #0a58ca; }

.bulk-link-warning-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0.25rem;
}

.warning-chip {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    line-height: 1.4;
    font-weight: 500;
    white-space: nowrap;
}

.warning-chip.info {
    background-color: #cfe2ff;
    color: #052c65;
    border: 1px solid #9ec5fe;
}

.warning-chip.warn {
    background-color: #fff3cd;
    color: #664d03;
    border: 1px solid #ffe69c;
}

.bulk-link-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.4rem;
}

.bulk-link-toolbar .field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.bulk-link-toolbar label {
    font-size: 0.8rem;
    color: #495057;
    margin: 0;
}

.bulk-link-toolbar .spacer { flex-grow: 1; }

/* === Single-link Auth user ComboBox στο XristisDetail dialog === */
.auth-candidate-item {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.auth-candidate-item small {
    color: #6c757d;
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-candidate-hint {
    font-size: 0.85rem;
    color: #6c757d;
    padding: 0.25rem 0;
}

.auth-candidate-empty {
    margin-bottom: 0;
}

/* ===== EgFin reusable detail skin (global egfin-* classes + opt-in Telerik containers) ===== */

/* --- 1. Global token block (aliases to --eg-* όπου ταιριάζει το hue· literals για greys χωρίς --eg- αντίστοιχο) --- */
:root {
    --egfin-primary:          var(--eg-primary);          /* #1e3548 ≈ mockup navy #1f3a5f */
    --egfin-primary-soft:     #eef2f8;                     /* literal — no --eg- equivalent */
    --egfin-accent:           #d97706;                     /* dark amber — literal (mockup accent) */
    --egfin-accent-soft:      #fff7ed;                     /* literal — no --eg- equivalent */
    --egfin-accent-hover:     #b8620a;                     /* darker amber for button hover */
    --egfin-ink:              #1b2433;                     /* literal — primary text */
    --egfin-ink-2:            #4a5568;                     /* literal — secondary text */
    --egfin-ink-3:            #6b7280;                     /* literal — muted text */
    --egfin-ink-4:            #9aa3b2;                     /* literal — faint text */
    --egfin-border:           #e4e7eb;                     /* literal — hairline border */
    --egfin-border-strong:    #d2d6dc;                     /* literal — stronger border */
    --egfin-surface:          var(--eg-white);            /* #ffffff */
    --egfin-surface-alt:      #fafbfc;                     /* literal — subtle card-head bg */
    --egfin-field-readonly:   #f6f7f9;                     /* literal — readonly field bg */
    --egfin-success:          var(--eg-success);          /* #2d7577 ≈ mockup green #15803d */
    --egfin-success-soft:     #ecfdf5;                     /* literal — no --eg- equivalent */
    --egfin-danger:           var(--eg-danger);           /* #ea5455 ≈ mockup #b91c1c */
    --egfin-radius:           8px;
    --egfin-radius-sm:        6px;
    --egfin-shadow-lg:        0 12px 32px rgba(15, 23, 42, 0.10);
    --egfin-mono:             'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
}

/* --- 2. Card-head chrome για Telerik TileLayout item header (.card-head look· opt-in via .egfin-card) --- */
/* Telerik v7.x renders the tile header as .k-tilelayout-item-header with .k-card-title (matches proven egritos.css selectors). */
.egfin-card .k-tilelayout-item-header,
.egfin-card .k-tilelayout-item-header.k-card-header {
    padding: 8px 12px;
    background: var(--egfin-surface-alt);
    background-color: var(--egfin-surface-alt);
    border-bottom: 1px solid var(--egfin-border);
    color: var(--egfin-ink);
}

/* Header content (icon + title + count chip + optional charge switcher) lays out as a flex
   row so a trailing .chg-switch can push right via margin-left:auto. icon/title/chip were
   already inline, so flex is visually equivalent for existing egfin cards. */
.egfin-card .k-tilelayout-item-header .k-card-title {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--egfin-ink);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}

.egfin-head-icon {
    margin-right: 0.5rem;
    color: var(--egfin-ink-3);
    font-size: 12px;
}

/* --- 2.0 Refined grid skin (opt-in via .egfin-grid on TelerikGrid) --- */
.egfin-grid.k-grid {
    border: 1px solid var(--egfin-border, #e4e7eb);
    border-radius: var(--egfin-radius, 8px);
    font-size: 12.5px;
}

.egfin-grid .k-grid-header {
    background: var(--egfin-surface-alt, #fafbfc);
    border-bottom: 1px solid var(--egfin-border, #e4e7eb);
}

/* Locked (frozen) columns: opaque background so scrolling cells don't bleed behind */
.egfin-grid .k-grid-header-locked,
.egfin-grid .k-grid-content-locked,
.egfin-grid .k-grid-footer-locked {
    background: var(--egfin-surface, #fff);
}

.egfin-grid .k-grid-header-locked,
.egfin-grid .k-grid-header-locked th {
    background: var(--egfin-surface-alt, #fafbfc);
}

.egfin-grid .k-grid-content-locked,
.egfin-grid .k-grid-content-locked td {
    background: var(--egfin-surface, #fff);
}

.egfin-grid .k-grid-content-locked tr:hover td {
    background: var(--egfin-surface-alt, #fafbfc);
}

.egfin-grid .k-grid-footer-locked,
.egfin-grid .k-grid-footer-locked td {
    background: var(--egfin-surface-alt, #fafbfc);
}

/* Subtle divider between locked area and scrollable area */
.egfin-grid .k-grid-header-locked,
.egfin-grid .k-grid-content-locked,
.egfin-grid .k-grid-footer-locked {
    border-right: 1px solid var(--egfin-border, #e4e7eb);
    box-shadow: 2px 0 4px -2px rgba(15, 23, 42, .06);
}

/* Telerik 7.x: locked cells use position: sticky on individual th/td.
   Without an opaque background, scrolling content bleeds through. */
.egfin-grid th.k-grid-content-sticky,
.egfin-grid th.k-grid-header-sticky {
    background: var(--egfin-surface-alt, #fafbfc) !important;
    z-index: 2;
}

.egfin-grid td.k-grid-content-sticky {
    background: var(--egfin-surface, #fff) !important;
    z-index: 1;
}

.egfin-grid tbody tr:hover td.k-grid-content-sticky {
    background: var(--egfin-surface-alt, #fafbfc) !important;
}

.egfin-grid .k-grid-footer td.k-grid-footer-sticky {
    background: var(--egfin-surface-alt, #fafbfc) !important;
    z-index: 1;
}

/* Right-side shadow on the leftmost sticky column when content scrolls under it */
.egfin-grid .k-grid-content-sticky {
    box-shadow: -2px 0 4px -2px rgba(15, 23, 42, .06);
}

.egfin-grid .k-grid-header .k-header,
.egfin-grid .k-grid-header th.k-header {
    padding: 6px 8px;
    background: transparent;
    border-bottom-color: var(--egfin-border, #e4e7eb);
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--egfin-ink-3, #6b7280);
    white-space: nowrap;
}

.egfin-grid .k-grid-header .k-header .k-cell-inner > .k-link {
    color: inherit;
    font-weight: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    font-size: inherit;
}

/* Plain hand-rolled <table> headers (μη-Telerik grids που τυλίγονται σε .egfin-grid) —
   ίδιο header styling με τα Telerik grids ώστε όλα τα egfin-grid headers να είναι UPPERCASE. */
.egfin-grid thead th {
    padding: 6px 8px;
    background: transparent;
    border-bottom-color: var(--egfin-border, #e4e7eb);
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--egfin-ink-3, #6b7280);
    white-space: nowrap;
}

.egfin-grid .k-grid-header th.egfin-group-head {
    text-align: center;
    font-size: 11px;
    color: var(--egfin-ink-2, #4a5568);
    letter-spacing: 0.02em;
}

.egfin-grid .k-grid-header th.egfin-group-head .k-cell-inner {
    justify-content: center;
}

.egfin-grid .k-grid-header th.egfin-group-start,
.egfin-grid .k-grid-content td.egfin-group-start {
    border-left: 1px solid var(--egfin-border, #e4e7eb);
}

.egfin-grid .k-grid-content td,
.egfin-grid tbody td {
    padding: 6px 8px;
    border-color: var(--egfin-border, #e4e7eb);
    color: var(--egfin-ink, #1b2433);
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Single-line ellipsis for any direct text child (template-rendered content like spans/anchors) */
.egfin-grid tbody td > span:not(.spinner-border):not([class*="k-"]),
.egfin-grid tbody td > a,
.egfin-grid tbody td > div:not([class*="k-"]) {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Allow row-action wrapper, icon buttons and Telerik inputs/comboboxes to render normally */
.egfin-grid tbody td > .egfin-row-actions,
.egfin-grid tbody td > .egfin-icon-btn,
.egfin-grid tbody td > .k-input,
.egfin-grid tbody td > .k-picker,
.egfin-grid tbody td > .k-combobox,
.egfin-grid tbody td > .k-numerictextbox,
.egfin-grid tbody td > button {
    overflow: visible;
    text-overflow: clip;
    max-width: none;
}

.egfin-grid tbody tr:hover td {
    background: var(--egfin-surface-alt, #fafbfc);
}

.egfin-grid .k-grid-footer {
    background: var(--egfin-surface-alt, #fafbfc);
    border-top: 1px solid var(--egfin-border, #e4e7eb);
}

.egfin-grid .k-grid-footer .k-footer-template td,
.egfin-grid .k-grid-footer-wrap td {
    padding: 6px 8px;
    font-weight: 600;
    color: var(--egfin-ink, #1b2433);
    background: var(--egfin-surface-alt, #fafbfc);
    border-color: var(--egfin-border, #e4e7eb);
}

.egfin-grid-total-label {
    display: inline-block;
    width: 100%;
    text-align: right;
    color: var(--egfin-ink-3, #6b7280);
    font-weight: 600;
}

.egfin-mono {
    font-family: ui-monospace, 'JetBrains Mono', Consolas, monospace;
    font-size: 11.5px;
    color: var(--egfin-ink-2, #4a5568);
}

.egfin-num {
    font-variant-numeric: tabular-nums;
}

.egfin-muted {
    color: var(--egfin-ink-4, #9aa3b2);
}

/* ===== egfin read-only fields & ΣΤΟΙΧΕΙΑ ΧΡΕΩΣΗΣ charge presentations (from design kit) ===== */

/* shared value/key atoms */
.rf .rk{color:var(--egfin-ink-4)}
.rf .rv{color:var(--egfin-ink)}
.rf .rv.egfin-num{font-family:var(--egfin-mono);font-variant-numeric:tabular-nums}
.rf .rv.muted{color:var(--egfin-ink-4)}

/* read-only value shown inside a .form-group (view mode keeps the edit grid layout —
   same col, the <label> stays, the input is swapped for this value text) */
.egfin-card .form-group .fv,
.egfin-tabs .k-tabstrip-content .form-group .fv{display:block;font-size:13px;line-height:1.5;color:var(--egfin-ink);min-height:1.5em;word-break:break-word}
.egfin-card .form-group .fv.egfin-num,
.egfin-tabs .k-tabstrip-content .form-group .fv.egfin-num{font-family:var(--egfin-mono);font-variant-numeric:tabular-nums}
.egfin-card .form-group .fv.muted,
.egfin-tabs .k-tabstrip-content .form-group .fv.muted{color:var(--egfin-ink-4)}

/* V1 — Στοίβα (stacked, packs horizontally) */
.rf-wrap.l-stacked{display:flex;flex-wrap:wrap;gap:12px 22px}
.l-stacked .rf{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 160px;max-width:100%}
.l-stacked .rf .rk{font-size:10px;text-transform:uppercase;letter-spacing:.04em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l-stacked .rf .rv{font-size:13px;line-height:1.35;word-break:break-word}
.l-stacked .rf.full{flex-basis:100%}

/* ===== ΣΤΟΙΧΕΙΑ ΧΡΕΩΣΗΣ — multi-charge read-only presentations ===== */
.chg-pager{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--egfin-ink-3)}
.chg-pager .pg{min-width:28px;height:28px;padding:0 6px;border:1px solid var(--egfin-border);background:#fff;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px}
.chg-pager .pg:hover{background:#f1f3f6}
.chg-pager .pg.active{background:var(--egfin-primary);color:#fff;border-color:var(--egfin-primary)}
.chg-pager .pg[disabled]{opacity:.4;cursor:not-allowed}

/* Mode A — cards */
.chg-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (max-width:900px){.chg-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.chg-cards{grid-template-columns:1fr}}
.chg-card{border:1px solid var(--egfin-border);border-radius:var(--egfin-radius-sm);background:#fff;overflow:hidden;display:flex;flex-direction:column}
.chg-card-top{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--egfin-surface-alt);border-bottom:1px solid var(--egfin-border)}
.chg-grp{width:22px;height:22px;border-radius:5px;background:var(--egfin-primary);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--egfin-mono)}
.chg-ka{font-family:var(--egfin-mono);font-weight:600;font-size:12.5px;color:var(--egfin-primary)}
.chg-card-amt{margin-left:auto;font-family:var(--egfin-mono);font-variant-numeric:tabular-nums;font-weight:700;font-size:13px;color:var(--egfin-ink)}
.chg-card-body{padding:8px 10px;display:flex;flex-direction:column;gap:5px}
.chg-desc{font-size:12.5px;color:var(--egfin-ink);line-height:1.3;font-weight:500}
.chg-meta{display:flex;flex-wrap:wrap;gap:3px 14px}
.chg-mi{display:flex;flex-direction:column;gap:0;min-width:0}
.chg-mi .k{font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--egfin-ink-4);font-weight:600}
.chg-mi .v{font-size:11.5px;color:var(--egfin-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chg-mi .v.mono{font-family:var(--egfin-mono)}

/* Mode C — list (touch-friendly, built for non-technical users on small screens) */
.chg-list{border:1px solid var(--egfin-border);border-radius:var(--egfin-radius-sm);overflow:hidden}
.chg-list-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;background:var(--egfin-surface-alt);border-bottom:1px solid var(--egfin-border);flex-wrap:wrap}
.chg-list-bar .lbl{font-size:13px;color:var(--egfin-ink-2);font-weight:600}
.chg-expand-all{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--egfin-primary);background:#fff;border:1px solid var(--egfin-border-strong);border-radius:6px;padding:8px 12px;cursor:pointer;min-height:40px}
.chg-expand-all:hover{background:var(--egfin-primary-soft)}
.cl-row{border-bottom:1px solid #eceef1}
.cl-row:last-child{border-bottom:none}
.cl-head{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:none;background:#fff;cursor:pointer;padding:12px 14px;min-height:60px}
.cl-head:hover{background:var(--egfin-surface-alt)}
.cl-row.open .cl-head{background:var(--egfin-primary-soft)}
.cl-num{width:30px;height:30px;flex-shrink:0;border-radius:7px;background:var(--egfin-primary);color:#fff;font-family:var(--egfin-mono);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.cl-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cl-ka{font-family:var(--egfin-mono);font-weight:700;font-size:13.5px;color:var(--egfin-primary)}
.cl-desc{font-size:14px;color:var(--egfin-ink);line-height:1.35;text-wrap:pretty}
.cl-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.cl-amt{font-family:var(--egfin-mono);font-variant-numeric:tabular-nums;font-weight:700;font-size:16px;color:var(--egfin-ink);white-space:nowrap}
.cl-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--egfin-primary);white-space:nowrap}
.cl-toggle .chev{transition:transform .15s;font-size:11px}
.cl-row.open .cl-toggle .chev{transform:rotate(180deg)}
/* expanded body — big, readable, single/double column */
.cl-body{padding:6px 14px 16px 56px;background:#fcfcfd}
@media (max-width:640px){.cl-body{padding-left:14px}}
.cl-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px 24px}
.cl-f{display:flex;flex-direction:column;gap:2px;min-width:0}
.cl-f.full{grid-column:1/-1}
.cl-f .k{font-size:11px;color:var(--egfin-ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.cl-f .v{font-size:14px;color:var(--egfin-ink);line-height:1.35;text-wrap:pretty}
.cl-f .v.mono{font-family:var(--egfin-mono);font-variant-numeric:tabular-nums}

.chg-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:8px 10px;margin-top:8px;border-top:1px dashed var(--egfin-border);font-size:12.5px;color:var(--egfin-ink-3)}
.chg-foot strong{font-family:var(--egfin-mono);font-variant-numeric:tabular-nums;color:var(--egfin-ink);font-size:14px}
.chg-list + .chg-foot{font-size:13.5px;padding:12px 14px;background:var(--egfin-success-soft);border:1px solid #cdeae0;border-radius:var(--egfin-radius-sm);margin-top:8px}
.chg-list + .chg-foot strong{font-size:16px;color:var(--egfin-success)}

/* charge view/layout switcher (segmented control in card head) */
/* charge-view picker centered in the card header regardless of title width */
.egfin-card .k-tilelayout-item-header .k-card-title{position:relative}
.chg-switch{display:inline-flex;align-items:center;gap:8px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-transform:none;letter-spacing:0}
.chg-seg{display:inline-flex;border:1px solid var(--egfin-border-strong);border-radius:6px;overflow:hidden;background:#fff}
.chg-seg-btn{width:28px;height:24px;display:inline-flex;align-items:center;justify-content:center;border:none;background:#fff;color:var(--egfin-ink-3);cursor:pointer;font-size:11.5px;padding:0;border-right:1px solid var(--egfin-border)}
.chg-seg-btn:last-child{border-right:none}
.chg-seg-btn:hover{background:var(--egfin-surface-alt);color:var(--egfin-ink)}
.chg-seg-btn.active{background:var(--egfin-primary);color:#fff}

/* --- Κάρτα Ηλεκτρονικού Τιμολογίου (ParastatikoDapanonDetail) — header layout --- */
/* Δικό μας flex wrapper: δεν βασιζόμαστε στο flex του Telerik .k-card-title (δεν εφαρμόζεται αξιόπιστα). */
.egfin-einv-head{display:flex;align-items:center;gap:8px;width:100%;flex-wrap:wrap}
.egfin-einv-head .badge{text-transform:none;letter-spacing:normal;font-weight:600}
.egfin-einv-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.egfin-einv-num{font-family:var(--egfin-mono);font-size:12px;font-weight:600;color:var(--egfin-primary);background:var(--egfin-primary-soft);border-radius:4px;padding:3px 9px;text-transform:none;letter-spacing:normal;white-space:nowrap}
.egfin-einv-num .lbl{font-family:'Segoe UI',Roboto,sans-serif;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--egfin-ink-4);margin-right:5px}

/* --- Παραστατικό Δαπανών: dense READ-mode layout (genstrip / packed fields / flags / sub-group) --- */
.genstrip{display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap;background:var(--egfin-surface);border:1px solid var(--egfin-border);border-radius:var(--egfin-radius);padding:8px 12px}
.genstrip .ttl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--egfin-ink-3);display:flex;align-items:center;gap:6px}
.genstrip .ttl i{color:var(--egfin-ink-4)}
.tb-kv{display:flex;flex-direction:column;line-height:1.2}
.tb-kv .k{font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:600;color:var(--egfin-ink-4)}
.tb-kv .v{font-size:13px;color:var(--egfin-ink);font-weight:500}
.tb-kv .v.egfin-num{font-family:var(--egfin-mono)}
.tb-div{width:1px;align-self:stretch;background:var(--egfin-border)}
/* content-width, left-packed fields (όχι τέντωμα — σταθερό κενό μεταξύ τους) */
.rf-pack{display:flex;flex-wrap:wrap;gap:12px 28px}
.rf-pack .rf{display:flex;flex-direction:column;gap:2px;min-width:0;flex:0 0 auto;max-width:320px}
.rf-pack .rf .rk{font-size:10px;text-transform:uppercase;letter-spacing:.04em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rf-pack .rf .rv{font-size:13px;line-height:1.35;word-break:break-word}
.rf .rv.strong{font-weight:600}
/* boolean flags ως chips */
.flags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:9px;border-top:1px dashed var(--egfin-border)}
.flag{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:2px 9px;border-radius:14px;border:1px solid var(--egfin-border);color:var(--egfin-ink-3);background:var(--egfin-surface)}
.flag.on{color:var(--egfin-success);border-color:#cdeae0;background:var(--egfin-success-soft)}
.flag i{font-size:9px}
/* ενσωματωμένο sub-group (Σύμβαση) μέσα στην κάρτα */
.subgroup{margin-top:10px;padding-top:9px;border-top:1px dashed var(--egfin-border)}
.subgroup-h{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--egfin-ink-4);display:flex;align-items:center;gap:6px;margin-bottom:8px}
.subgroup-h i{color:var(--egfin-ink-4)}
/* Συναλλασσόμενος compact (flat icon-lines, χωρίς boxed labels· Καρτέλα link στο card header) */
.egfin-contact-line{font-size:12px;color:var(--egfin-ink-2);margin-top:4px;display:flex;gap:7px;align-items:baseline}
.egfin-contact-line i{color:var(--egfin-ink-4);width:13px;text-align:center;flex-shrink:0;font-size:11px}

/* --- 2.0a Icon-only row action buttons με severity-aware hover --- */
.egfin-icon-btn,
button.egfin-icon-btn {
    --egfin-icon-btn-color: var(--egfin-ink-3, #6b7280);
    --egfin-icon-btn-hover-bg: #f1f3f6;
    --egfin-icon-btn-hover-color: var(--egfin-ink, #1b2433);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--egfin-icon-btn-color);
    cursor: pointer;
    line-height: 1;
    transition: background-color .12s, color .12s, border-color .12s;
}

.egfin-icon-btn > i,
.egfin-icon-btn .fa-solid,
.egfin-icon-btn .fa-regular {
    font-size: 13px;
    line-height: 1;
}

.egfin-icon-btn:hover:not(:disabled),
.egfin-icon-btn:focus-visible:not(:disabled) {
    background: var(--egfin-icon-btn-hover-bg);
    color: var(--egfin-icon-btn-hover-color);
}

.egfin-icon-btn:disabled,
.egfin-icon-btn.disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* When EgAsyncButton injects a spinner into an icon-only button, hide the icon
   and center the spinner in place of it (no horizontal stacking). */
.egfin-icon-btn:has(> .spinner-border) > i,
.egfin-icon-btn:has(> .spinner-border) > .fa-solid,
.egfin-icon-btn:has(> .spinner-border) > .fa-regular {
    display: none;
}

.egfin-icon-btn > .spinner-border {
    width: 13px;
    height: 13px;
    border-width: 1.5px;
    margin: 0 !important;
    color: currentColor;
}

/* severity variants — color/bg kick in only on hover */
.egfin-icon-btn.egfin-danger {
    --egfin-icon-btn-hover-bg: #fef2f2;
    --egfin-icon-btn-hover-color: var(--egfin-danger, #b91c1c);
}

.egfin-icon-btn.egfin-edit,
.egfin-icon-btn.egfin-warning {
    --egfin-icon-btn-hover-bg: #fffbeb;
    --egfin-icon-btn-hover-color: var(--egfin-warning, #b45309);
}

.egfin-icon-btn.egfin-success {
    --egfin-icon-btn-hover-bg: #ecfdf5;
    --egfin-icon-btn-hover-color: var(--egfin-success, #15803d);
}

.egfin-icon-btn.egfin-primary,
.egfin-icon-btn.egfin-info {
    --egfin-icon-btn-hover-bg: var(--egfin-primary-soft, #eef2f8);
    --egfin-icon-btn-hover-color: var(--egfin-primary, #1f3a5f);
}

/* Row-action wrapper για multi-button cells */
.egfin-row-actions {
    display: inline-flex;
    gap: 2px;
    justify-content: flex-end;
    align-items: center;
}

/* When inside an egfin-grid row, dim row-actions by default and reveal on row hover */
.egfin-grid tbody td .egfin-row-actions .egfin-icon-btn,
.egfin-grid tbody td > .egfin-icon-btn {
    opacity: .55;
    transition: opacity .12s, background-color .12s, color .12s;
}

.egfin-grid tbody tr:hover td .egfin-row-actions .egfin-icon-btn,
.egfin-grid tbody tr:hover td > .egfin-icon-btn,
.egfin-grid tbody td .egfin-icon-btn:hover,
.egfin-grid tbody td .egfin-icon-btn:focus-visible {
    opacity: 1;
}

/* --- 2.1 Compact Telerik checkbox + native label inside egfin-check row --- */
.egfin-check .k-checkbox,
.egfin-check .k-checkbox.k-checkbox {
    width: 16px;
    height: 16px;
    min-width: 16px;
    border-width: 1px;
    border-radius: 3px;
}

.egfin-check > label {
    font-size: 12.5px;
    color: var(--egfin-ink-2, #4a5568);
    margin: 0;
    cursor: pointer;
    user-select: none;
}

/* --- 3. Tabs skin για Telerik TabStrip (.tabs/.tab look· opt-in via .egfin-tabs) — serves transaction + detail (Είδη/…) strips --- */
.egfin-tabs .k-tabstrip-items {
    border-bottom: 1px solid var(--egfin-border);
    background: var(--egfin-surface);
    padding: 0 12px;
}

.egfin-tabs .k-tabstrip-items .k-tabstrip-item,
.egfin-tabs .k-tabstrip-items .k-tabstrip-item.k-active:not(.stoixeia-xreosis-add-tab),
.egfin-tabs .k-tabstrip-items .k-tabstrip-item:hover:not(.stoixeia-xreosis-add-tab),
.egfin-tabs .k-tabstrip-items .k-link {
    /* active/hover selectors included to beat global blue-bg rules
       (egritos.css ~line 159 & ~line 672) on the redesigned page;
       :not(.stoixeia-xreosis-add-tab) preserves the "+ Προσθήκη" tab skin */
    border: none;
    background: transparent;
}

.egfin-tabs .k-tabstrip-items .k-link {
    padding: 10px 10px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--egfin-ink-3);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.egfin-tabs .k-tabstrip-items .k-tabstrip-item:hover .k-link {
    /* !important needed to beat global rule (egritos.css ~line 169) which sets
       .k-tabstrip-item:hover .k-link { color: var(--light) !important } */
    color: var(--egfin-ink) !important;
}

.egfin-tabs .k-tabstrip-items .k-tabstrip-item.k-active .k-link {
    /* !important needed to beat global rule (egritos.css ~line 168) which sets
       .k-tabstrip-item.k-active .k-link { color: var(--light) !important } */
    color: var(--egfin-primary) !important;
    border-bottom-color: var(--egfin-accent);
    font-weight: 600;
}

.egfin-tab-cnt {
    font-size: 10.5px;
    background: var(--egfin-primary-soft);
    color: var(--egfin-ink-3);
    padding: 0 6px;
    border-radius: 10px;
    font-weight: 600;
}

.egfin-tabs .k-tabstrip-item.k-active .egfin-tab-cnt {
    background: var(--egfin-accent);
    color: var(--egfin-surface);
}

/* --- 4. Totals strip (horizontal 6-cell summary) --- */
.egfin-totals {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background: var(--egfin-surface);
    border: 1px solid var(--egfin-border);
    border-radius: var(--egfin-radius);
    overflow: hidden;
    /* 8px κενό πάνω από το totals strip — ίσο με τα υπόλοιπα section gaps */
    margin-top: 8px;
}

.egfin-totals .cell {
    padding: 12px 14px;
    border-right: 1px solid var(--egfin-border);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.egfin-totals .cell:last-child {
    border-right: none;
}

.egfin-totals .cell .k {
    font-size: 10.5px;
    color: var(--egfin-ink-4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.egfin-totals .cell .v {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 15px;
    color: var(--egfin-ink);
}

.egfin-totals .cell .sub {
    font-size: 11px;
    color: var(--egfin-ink-4);
    font-variant-numeric: tabular-nums;
}

.egfin-totals .cell.grand {
    background: var(--egfin-primary-soft);
}

.egfin-totals .cell.grand .k {
    color: var(--egfin-primary);
}

.egfin-totals .cell.grand .v {
    color: var(--egfin-primary);
    font-size: 18px;
    font-weight: 700;
}

.egfin-totals .cell.net {
    background: var(--egfin-success-soft);
}

.egfin-totals .cell.net .k {
    color: var(--egfin-success);
}

.egfin-totals .cell.net .v {
    color: var(--egfin-success);
    font-size: 16px;
    font-weight: 700;
}

@media (max-width: 1100px) {
    .egfin-totals {
        grid-template-columns: repeat(3, 1fr);
    }

    .egfin-totals .cell:nth-child(3n) {
        border-right: none;
    }
}

@media (max-width: 640px) {
    .egfin-totals {
        grid-template-columns: repeat(2, 1fr);
    }

    .egfin-totals .cell:nth-child(3n) {
        border-right: 1px solid var(--egfin-border);
    }

    .egfin-totals .cell:nth-child(2n) {
        border-right: none;
    }
}

/* Page-specific override: totals strip με 5 metrics (π.χ. καρτέλα Προμηθευτή).
   Το base grid είναι σταθερό 6-column· με 5 cells έμενε κενό 6ο κουτί.
   Desktop = ακριβώς 5 ίσες στήλες· κάτω από 1100px auto-fit ώστε να μη μένει
   ποτέ κενή trailing στήλη σε καμία ανάλυση. */
.egfin-totals.egfin-totals-5 {
    grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1100px) {
    .egfin-totals.egfin-totals-5 {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

/* --- 5. Contact card (Συναλλασσόμενος) --- */
.egfin-pill {
    font-size: 10.5px;
    color: var(--egfin-ink-3);
    background: #f1f3f6;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: 4px;
    text-transform: none;
    letter-spacing: 0;
}

.egfin-contact {
    border: 1px solid var(--egfin-border);
    border-radius: var(--egfin-radius-sm);
    overflow: hidden;
    background: var(--egfin-surface);
}

.egfin-contact-search {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 10px;
}

.egfin-contact-search .form-control {
    flex: 1;
}

.egfin-contact-head {
    padding: 10px 12px;
    border-bottom: 1px solid var(--egfin-border);
    background: var(--egfin-surface-alt);
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
}

.egfin-contact-head-body {
    flex: 1;
    min-width: 0;
}

.egfin-contact-name {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--egfin-ink);
    line-height: 1.3;
}

.egfin-contact-sub {
    font-size: 11px;
    color: var(--egfin-ink-3);
    margin-top: 2px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.egfin-contact-sub .id {
    font-family: var(--egfin-mono);
    font-weight: 600;
    color: var(--egfin-primary);
    background: var(--egfin-primary-soft);
    padding: 1px 6px;
    border-radius: 3px;
}

.egfin-contact-sub .afm {
    font-family: var(--egfin-mono);
}

.egfin-contact-link {
    margin-left: auto;
    font-size: 11px;
    color: var(--egfin-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.egfin-contact-link:hover {
    text-decoration: underline;
}

.egfin-contact-grid {
    padding: 10px 12px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 14px;
}

.egfin-meta-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 12px;
    min-width: 0;
}

.egfin-meta-item.full {
    grid-column: span 2;
}

.egfin-meta-item .k {
    font-size: 10.5px;
    color: var(--egfin-ink-4);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.egfin-meta-item .v {
    color: var(--egfin-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
}

.egfin-meta-item .v.muted {
    color: var(--egfin-ink-4);
}

/* --- 6. Dirty banner (fixed bottom-center) --- */
.egfin-dirty-banner {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--egfin-ink);
    color: var(--egfin-surface);
    padding: 9px 14px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--egfin-shadow-lg);
    z-index: 1050; /* above content, below Telerik window overlays (≥10000) */
    font-size: 12.5px;
}

.egfin-dirty-banner .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--egfin-accent);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.22);
    animation: egfin-dirty-pulse 2s ease-in-out infinite;
}

.egfin-dirty-banner .actions {
    display: flex;
    gap: 6px;
    margin-left: 4px;
}

@keyframes egfin-dirty-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.22); }
    50%      { box-shadow: 0 0 0 5px rgba(217, 119, 6, 0.10); }
}

/* --- 7. Mono utility --- */
.egfin-code {
    font-family: var(--egfin-mono);
}

/* ═══════════════════════════════════════════════════════════════
   Phase P — Paddings + Input/Label sizing
   All rules scoped under .egfin-card (tile content) or .egfin-tabs
   (tab strip) so other pages are completely unaffected.
   ═══════════════════════════════════════════════════════════════ */

/* P-1. Card body padding: 16px → 12px */
.egfin-card .k-tilelayout-item-body {
    padding: 12px;
}

/* P-2. Tab content padding — uniform 12px gutter, never stacked, never zero.

   Two TabStrip placements exist on the page:
   (a) TRANSACTION tabs: the TabStrip sits OUTSIDE any tile body. Its content
       must supply the 12px inset itself. The global Telerik rule
       `.k-tabstrip > .k-tabstrip-content.k-active { padding: 0 }` (this file,
       ~line 150) has specificity (0,3,0) and wins on the VISIBLE (active) panel,
       which is why it previously measured 0px. We use `!important` here so the
       12px gutter beats that global zero on the active panel.
   (b) CHARGE tabs (Στοιχεία Χρέωσης): the TabStrip is a descendant of a
       `.egfin-card .k-tilelayout-item-body` which already provides 12px. The
       tab content must NOT add its own horizontal padding or it stacks to 24px —
       see the override rule right below. */
.egfin-tabs .k-tabstrip-content {
    padding: 12px !important;
}
/* The tab content wraps fields in an inner `.p-2` (Bootstrap 8px); with the
   outer 12px that would double up. Zero the inner padding so the tab body has a
   single, consistent 12px gutter matching the card body. */
.egfin-tabs .k-tabstrip-content > .p-2 {
    padding: 0 !important;
}
/* P-2b. CHARGE TabStrip nested inside a tile body: the tile already gives 12px
   horizontally, so the tab content must contribute 0 horizontal padding
   (keep the 12px vertical for rhythm). Net horizontal inset stays a single 12px. */
.egfin-card .k-tilelayout-item-body .egfin-tabs .k-tabstrip-content,
.egfin-card .k-tilelayout-item-body .k-tabstrip-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* The per-ΚΑ charge tab wraps fields in `.stoixeia-xreosis-tab-content` (its own
   0.75rem/12px padding). Inside a tile body that already provides 12px, this stacks
   to 24px. Zero its HORIZONTAL padding so the charge fields align at the same 12px
   inset as every other section (vertical 12px kept for breathing room). */
.egfin-card .k-tilelayout-item-body .stoixeia-xreosis-tab-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* P-3. Field labels — 11px / 500 / ink-3 / small gap */
.egfin-card .form-group,
.egfin-tabs .k-tabstrip-content .form-group {
    margin-bottom: 8px;
}
/* Normalize vertical rhythm: the field gap comes ONLY from .form-group (8px).
   Bootstrap `.row.mb-2` wrappers add an EXTRA 8px, which stacks unevenly against
   rows that use `.row.gx-2` (0 margin) — producing the inconsistent line spacing.
   Zero the row margin inside the card so every field row sits on the same 8px rhythm. */
.egfin-card .row,
.egfin-tabs .k-tabstrip-content .row {
    margin-bottom: 0 !important;
}
.egfin-card .row > [class*="col-"],
.egfin-tabs .k-tabstrip-content .row > [class*="col-"] {
    margin-bottom: 0;
}
.egfin-card .form-group > label,
.egfin-card .form-group label:first-child,
.egfin-tabs .k-tabstrip-content .form-group > label,
.egfin-tabs .k-tabstrip-content .form-group label:first-child {
    font-size: 11px;
    font-weight: 500;
    color: var(--egfin-ink-3);
    text-transform: none;
    margin-bottom: 4px;
}

/* P-4a. Telerik inputs & pickers — border / radius / size
   Excludes .k-textarea from min-height: multiline textarea keeps
   its natural multi-row height; only single-line inputs get 31px. */
.egfin-card .k-input:not(.k-textarea),
.egfin-card .k-picker,
.egfin-tabs .k-tabstrip-content .k-input:not(.k-textarea),
.egfin-tabs .k-tabstrip-content .k-picker {
    border-color: var(--egfin-border-strong);
    border-radius: var(--egfin-radius-sm);
    font-size: 13px;
    min-height: 31px;
}
/* Textarea shares typography + border/radius but NOT the fixed height */
.egfin-card .k-textarea,
.egfin-tabs .k-tabstrip-content .k-textarea {
    border-color: var(--egfin-border-strong);
    border-radius: var(--egfin-radius-sm);
    font-size: 13px;
}
/* Inner padding for all Telerik text inputs (incl. textarea inner) */
.egfin-card .k-input-inner,
.egfin-tabs .k-tabstrip-content .k-input-inner {
    padding: 5px 8px;
    font-size: 13px;
}
/* Focus ring for Telerik inputs/pickers */
.egfin-card .k-input:not(.k-textarea):focus-within,
.egfin-card .k-textarea:focus-within,
.egfin-card .k-picker:focus-within,
.egfin-tabs .k-tabstrip-content .k-input:not(.k-textarea):focus-within,
.egfin-tabs .k-tabstrip-content .k-textarea:focus-within,
.egfin-tabs .k-tabstrip-content .k-picker:focus-within {
    border-color: var(--egfin-primary);
    box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.12);
}
/* Uniform 31px height for single-line inputs/pickers (ComboBox/DatePicker carry a
   side button whose global .k-button padding otherwise forces them to ~38px — taller
   than border-only TextBoxes). Pin the height and neutralize the inner/button padding
   so ComboBox, DatePicker and TextBox all render at the same 31px. */
.egfin-card .k-input:not(.k-textarea),
.egfin-card .k-picker,
.egfin-tabs .k-tabstrip-content .k-input:not(.k-textarea),
.egfin-tabs .k-tabstrip-content .k-picker {
    height: 31px;
}
.egfin-card .k-input:not(.k-textarea) .k-input-button,
.egfin-card .k-picker .k-input-button,
.egfin-card .k-input:not(.k-textarea) .k-select,
.egfin-card .k-picker .k-select,
.egfin-tabs .k-tabstrip-content .k-input:not(.k-textarea) .k-input-button,
.egfin-tabs .k-tabstrip-content .k-picker .k-input-button,
.egfin-tabs .k-tabstrip-content .k-input:not(.k-textarea) .k-select,
.egfin-tabs .k-tabstrip-content .k-picker .k-select {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0;
    height: auto;
}

/* P-4b. Bootstrap .form-control */
.egfin-card .form-control,
.egfin-tabs .k-tabstrip-content .form-control {
    font-size: 13px;
    padding: 5px 8px;
    border-color: var(--egfin-border-strong);
    border-radius: var(--egfin-radius-sm);
    min-height: 31px;
}
/* Textarea: keep natural multi-row height */
.egfin-card textarea.form-control,
.egfin-tabs .k-tabstrip-content textarea.form-control {
    min-height: unset;
}
.egfin-card .form-control:focus,
.egfin-tabs .k-tabstrip-content .form-control:focus {
    border-color: var(--egfin-primary);
    box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.12);
}

/* ─── End Phase P ─────────────────────────────────────────────── */

/* --- 8. Modals / Popups (opt-in via .egfin-modal on TelerikWindow + native HTML modal pieces) --- */

/*  ROOT (apply to TelerikWindow via Class="egfin-modal" — Telerik renders
    .k-window with .k-window-content. We style the outer shell + inner pieces.) */
.egfin-modal.k-window,
.k-window.egfin-modal {
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22), 0 2px 6px rgba(15, 23, 42, 0.08);
    border: none;
    overflow: hidden;
    background: var(--egfin-surface);
    animation: egfin-modal-pop 0.18s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.egfin-modal.k-window-titlebar,
.egfin-modal .k-window-titlebar {
    padding: 12px 16px;
    border-bottom: 1px solid var(--egfin-border);
    background: var(--egfin-surface);
    color: var(--egfin-ink);
    font-size: 14px;
    font-weight: 600;
}

.egfin-modal .k-window-content {
    padding: 16px;
    font-size: 13px;
    color: var(--egfin-ink-2);
    line-height: 1.55;
    background: var(--egfin-surface);
}

.egfin-modal .k-window-actions .k-button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--egfin-ink-3);
    border-radius: 5px;
}

.egfin-modal .k-window-actions .k-button:hover {
    background: #f1f3f6;
    color: var(--egfin-ink);
}

/* egfin modals have a light (white) titlebar, so the close-× must be dark to stay visible
   — overrides the global white !important rule used by the default navy titlebars. */
.egfin-modal .k-window-titlebar-action span,
.egfin-modal .k-window-actions .k-button span {
    color: var(--egfin-ink-3) !important;
}

.egfin-modal .k-window-actions .k-button:hover span {
    color: var(--egfin-ink) !important;
}

@keyframes egfin-modal-pop {
    from { opacity: 0; transform: translateY(6px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes egfin-modal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/*  Telerik's backdrop class is .k-overlay — give it the soft blur. */
.k-overlay.egfin-modal-backdrop,
.egfin-modal-backdrop {
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(2px);
    animation: egfin-modal-fade 0.15s ease;
}

/*  Building blocks for custom modal bodies (use inside WindowContent or any modal body). */
.egfin-modal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--egfin-border);
    margin: -16px -16px 12px;   /* cancel WindowContent padding when used inside */
    background: var(--egfin-surface);
}

.egfin-modal-head .egfin-modal-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    font-size: 14px;
    flex-shrink: 0;
}

.egfin-modal-head .egfin-modal-icon.egfin-danger {
    background: #fef2f2;
    color: var(--egfin-danger, #b91c1c);
}

.egfin-modal-head .egfin-modal-icon.egfin-warning {
    background: #fffbeb;
    color: var(--egfin-warning, #b45309);
}

.egfin-modal-head .egfin-modal-icon.egfin-success {
    background: #ecfdf5;
    color: var(--egfin-success, #15803d);
}

.egfin-modal-head .egfin-modal-icon.egfin-primary,
.egfin-modal-head .egfin-modal-icon.egfin-info {
    background: var(--egfin-primary-soft);
    color: var(--egfin-primary);
}

.egfin-modal-head h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--egfin-ink);
    line-height: 1.3;
}

.egfin-modal-head .egfin-modal-sub {
    font-size: 11.5px;
    color: var(--egfin-ink-3);
    margin-top: 2px;
}

.egfin-modal-body {
    font-size: 13px;
    color: var(--egfin-ink-2);
    line-height: 1.55;
}

.egfin-modal-body p {
    margin: 0 0 8px;
}

.egfin-modal-body p:last-child {
    margin-bottom: 0;
}

.egfin-modal-body strong {
    color: var(--egfin-ink);
    font-weight: 600;
}

.egfin-modal-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--egfin-border);
    background: var(--egfin-surface-alt);
    margin: 12px -16px -16px;   /* cancel WindowContent padding when used inside */
}

.egfin-modal-foot .egfin-modal-spacer {
    flex: 1;
}

/*  Summary boxes inside a modal body (rich confirmation, warning, info, danger). */
.egfin-summary-card {
    border: 1px solid var(--egfin-border);
    border-radius: 6px;
    padding: 10px 12px;
    background: var(--egfin-surface-alt);
    margin-bottom: 10px;
}

.egfin-summary-card .egfin-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    padding: 2px 0;
}

.egfin-summary-card .egfin-summary-row .egfin-summary-k {
    color: var(--egfin-ink-3);
}

.egfin-summary-card .egfin-summary-row .egfin-summary-v {
    color: var(--egfin-ink);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/*  Inline severity-flavoured info banners inside a modal. */
.egfin-modal-alert {
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 12.5px;
    margin-bottom: 10px;
}

.egfin-modal-alert > i {
    margin-top: 2px;
    flex-shrink: 0;
}

.egfin-modal-alert.egfin-danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #7f1d1d;
}

.egfin-modal-alert.egfin-danger > i {
    color: var(--egfin-danger, #b91c1c);
}

.egfin-modal-alert.egfin-warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #78350f;
}

.egfin-modal-alert.egfin-warning > i {
    color: var(--egfin-warning, #b45309);
}

.egfin-modal-alert.egfin-info {
    background: #eef6fd;
    border: 1px solid #bae0fd;
    color: #0c4a6e;
}

.egfin-modal-alert.egfin-info > i {
    color: #1e6fb8;
}

.egfin-modal-alert.egfin-success {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #064e3b;
}

.egfin-modal-alert.egfin-success > i {
    color: var(--egfin-success, #15803d);
}

/*  Sizing hooks (apply on TelerikWindow Width, or as utility on .k-window). */
.egfin-modal-sm.k-window { max-width: 520px; }
.egfin-modal-lg.k-window { max-width: 760px; }
.egfin-modal-xl.k-window { max-width: 980px; }

/*  Keyboard hint chip used inside picker/confirm footers. */
.egfin-kbd {
    display: inline-block;
    font-family: var(--egfin-mono);
    font-size: 10.5px;
    padding: 1px 5px;
    background: var(--egfin-surface);
    border: 1px solid var(--egfin-border-strong);
    border-radius: 3px;
    color: var(--egfin-ink-2);
    box-shadow: 0 1px 0 var(--egfin-border-strong);
}

/* --- 8a. Solid action buttons used inside modal footers (danger/dark) --- */
.egfin-btn-danger {
    background: var(--egfin-danger, #b91c1c);
    border-color: var(--egfin-danger, #b91c1c);
    color: #fff;
}

.egfin-btn-danger:hover:not(:disabled) {
    background: #991b1b;
    border-color: #991b1b;
    color: #fff;
}

.egfin-btn-dark {
    background: var(--egfin-primary);
    border-color: var(--egfin-primary);
    color: #fff;
}

.egfin-btn-dark:hover:not(:disabled) {
    background: #162d4a;
    border-color: #162d4a;
    color: #fff;
}

/* ── Boolean toggle button-groups (Ναι/Όχι) — align Bootstrap btn-primary to egfin navy (§4.2) ── */
.egfin-toggle .btn-primary {
    background: var(--egfin-primary);
    border-color: var(--egfin-primary);
    color: #fff;
}

.egfin-toggle .btn-outline-primary {
    color: var(--egfin-primary);
    border-color: var(--egfin-border-strong);
}

.egfin-toggle .btn-outline-primary:hover {
    background: var(--egfin-primary-soft);
    border-color: var(--egfin-primary);
    color: var(--egfin-primary);
}