@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

/*a, .btn-link {
    color: #0071c1;
    text-decoration: none;
}*/

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

    .btn-primary.edok {
        color: #fff;
        background-color: #00A2E5;
        border-color: #00A2E5;
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.nav-link:hover > span {
    /*color: #CC0000;*/
    box-shadow: 0px 0px 80px 15px #CC0000;
    background-color: rgba(204, 0, 0, 0.40)
}

/*.content {
    padding-top: 1.1rem;
}*/

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

/*
    Start Google Material Icons
    URL: https://developers.google.com/fonts/docs/material_icons
*/
.material-icons.md-mid {
    font-size: 64px;
}

.material-icons.md-big {
    font-size: 96px;
}

.material-icons.app_campaign-base-color {
    color: #376ddd;
}

.material-icons.app_iracun-base-color {
    color: #7a9630;
}

.material-icons.app_b2b-base-color {
    color: #C0392B;
}

.material-icons.app_composition-base-color {
    color: #CC0000;
}

.material-icons.app_print-base-color {
    color: green;
}

.material-icons.app_e-documents-base-color {
    color: red;
}

.material-icons.app_blicpay-base-color {
    color: #ef02fd;
}
/* End Google Material Icons */


/*.page-header-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

    .page-header-container > div:first-child {
        display: flex;
        flex-grow: 1;
        gap: 10px;
    }

        .page-header-container > div:first-child > * {
            width: 30%;
        }

    .page-header-container > *:last-child {
        height: 35px;
    }*/

.page-header-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

    /* Desktop styles */
    .page-header-container > div:first-child {
        display: flex;
        flex-grow: 1;
        gap: 10px;
    }

        .page-header-container > div:first-child > * {
            width: 30%;
        }

    .page-header-container > *:last-child {
        height: 35px;
    }

/* Mobile styles */
@media (max-width: 768px) {
    .page-header-container {
        flex-direction: column;
        align-items: stretch;
    }

        /* Stack the first-child items vertically */
        .page-header-container > div:first-child {
            flex-direction: column;
        }

            .page-header-container > div:first-child > * {
                width: 100%;
            }

        /* For the last element (button), prevent stretching and align right */
        .page-header-container > *:last-child {
            align-self: flex-end;
            width: auto;
            margin-top: 10px;
        }
}

/* Desktop styles */
@media (min-width: 768px) {
    .rz-sidebar {
        position: relative !important;
        transform: none !important;
    }
}

/* Mobile styles */
@media (max-width: 767.98px) {
    .rz-sidebar {
        position: fixed;
    }
}

/* Smooth transition for sidebar */
.rz-sidebar {
    transition: transform 0.3s ease;
}

/* Add these new styles after existing CSS */
.chart-row {
    display: flex;
    gap: 5px;
    width: 100%;
}

    .chart-row > * {
        flex: 1;
        min-width: 0; /* Prevents flex items from overflowing */
    }

@media (max-width: 768px) {
    .chart-row {
        flex-direction: column;
    }

        .chart-row > * {
            width: 100%;
        }
}

/* Add these new styles for RadzenTabs mobile responsiveness */
@media (max-width: 768px) {
    .rz-tabview-panels {
        padding: 0.5rem !important;
    }

    .rz-tabview-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        padding-bottom: 2px; /* Prevent scrollbar from cutting off tab bottom border */
    }

        .rz-tabview-nav::-webkit-scrollbar {
            height: 4px;
        }

        .rz-tabview-nav::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        .rz-tabview-nav::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 2px;
        }

        .rz-tabview-nav .rz-tabview-selected {
            border-bottom: 2px solid var(--rz-primary) !important;
        }
}

.step-wizard {
    width: 100%;
}

.step-wizard-list {
    --dot-size: clamp(28px, 6vw, 40px);
    --line-y: calc(var(--dot-size) / 2 - 1px);
    --font-label: clamp(10px, 2.8vw, 14px);
    --pad-x: clamp(8px, 2vw, 20px);
    background: #fff;
    color: #333;
    list-style: none;
    display: flex;
    gap: clamp(8px, 2vw, 16px);
    padding: 16px var(--pad-x);
    position: relative;
    z-index: 10;
    /* keep in one row, allow shrink then scroll if needed */
    flex-wrap: nowrap;
    /*overflow-x: auto;*/
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}

.step-wizard-item {
    padding: 0 var(--pad-x);
    flex: 1 1 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    position: relative;
    scroll-snap-align: center;
    min-width: 120px;
}

    .step-wizard-item + .step-wizard-item:after {
        content: "";
        position: absolute;
        left: -5px;
        top: var(--line-y);
        background: #21d4fd;
        width: 110%;
        height: 2px;
        transform: translateX(-50%);
        z-index: -10;
    }

.progress-count {
    height: var(--dot-size);
    width: var(--dot-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 600;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    color: transparent;
}

    .progress-count:after {
        content: "";
        height: var(--dot-size);
        width: var(--dot-size);
        background: #21d4fd;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        z-index: -10;
    }

    .progress-count:before {
        content: "";
        height: 10px;
        width: 20px;
        border-left: 3px solid #fff;
        border-bottom: 3px solid #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -60%) rotate(-45deg);
        transform-origin: center center;
    }

.progress-label {
    font-size: var(--font-label);
    font-weight: 600;
    margin-top: 10px;
    line-height: 1.2;
    word-break: break-word;
}

/* state */
.current-item .progress-count:before,
.current-item ~ .step-wizard-item .progress-count:before {
    display: none;
}

.current-item ~ .step-wizard-item .progress-count:after {
    height: 10px;
    width: 10px;
}

.current-item ~ .step-wizard-item .progress-label {
    opacity: 0.5;
}

.current-item .progress-count:after {
    background: #fff;
    border: 2px solid #21d4fd;
}

.current-item .progress-count {
    color: #21d4fd;
}

/* small screens: tighten spacing, optionally hide labels */
@media (max-width: 768px) {
    .step-wizard-item {
        min-width: 10px;
        padding: 0 8px;
    }

    .step-wizard-list {
        padding: 12px 8px;
        gap: 8px;
    }
}

/* very small screens: shrink dots further */
@media (max-width: 340px) {
    .step-wizard-list {
        --dot-size: 24px;
    }
}