/* 1) Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    font-family: "Mulish", Helvetica, Arial, sans-serif;
}


/* 2) CSS variables */
:root {
    /* Brand colors */
    --primary: #6D8FC2;
    --primaryHover: #4B6DA0;
    --btn-primary: #3D71C6;
    --btn-primary-hover: #1B50A4;
    --success: #D1E7DD;
    --secondary: #A5D5EC;
    --secondaryHover: #A4C4DB;
    --white: #ffffff;
    --black: #000000;
    --danger: #EC221F;
    --light: #f8f9fa;
    --outlineMain: #02542D;
    --outlineSecondary: #63AD13;
    --outlineSecondaryHover: #63AD13;
    --kt-navPill: #ffffff;
    --kt-navPillActive: #fff;
    --kt-layout-grad-start: #C3DCF4;
    --kt-layout-grad-end: #E7F1F8;
    --kt-hamburger: #29354D;
    /* Sidebar */
    --kt-sidebar-bg: var(--primary);
    --kt-sidebar-fg: #ffffff;
    --kt-radius: 14px;
    --kt-shadow: 0 10px 30px rgba(2,6,23,.35);
    --kt-layout-identity-image: url("/_content/KTDesk.Shared/images/tloLogin.jpg");
    --kt-layout-identity-background: transparent;
    --menuActive: #4B6DA0;
    --menuActiveText: #000000;
    /* Font sizes */
    --largeText: 3.75rem;
    --bigText: 2.8rem;
    --regularText: 1.75rem;
    --mediumText: 1.4rem;
    --smallText: 1.2rem;
    --extraSmallText: 1rem;
    --tinyText: 0.8125rem;
    /* Top bar (TopMenu) height */
    --header-h: 65px;
}

.ktHighContrast {
    --light: #fff;
    --secondary: #000;
    --primary: #000;
    --success: #000;
    --black: #FFFF00;
    --white: #FFFF00;
    --eyeColor: #FFFF00;
    --warning: #000;
    --menuActive: #FFFF00;
    --menuActiveText: #000;
    --danger: #000;
    --outlineMain: #FFFF00;
    --outlineSecondary: #000;
    --outlineSecondaryHover: #000;
    --alertDanger: #fff;
    --alertWarning: #fff;
    --alertSuccess: #fff;
    --lightHover: #FFFF00;
    --successHover: #000;
    --primaryHover: #000;
    --secondaryHover: #000;
    --hoverLinkDark: #000;
    --kt-layout-identity-image: none;
    --kt-layout-identity-background: #fff;
    --kt-navPill: #fff;
    --kt-navPillActive: #000;
    --kt-layout-grad-start: #fff;
    --kt-layout-grad-end: #fff;
    --kt-hamburger: #000;
}

/* 3) Typography */
h1 {
    font-size: var(--largeText);
}

h2 {
    font-size: var(--regularText);
}

h3 {
    font-size: var(--mediumText);
}

p {
    font-size: var(--smallText);
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
/* 3) texts */

.text-primary {
    color: var(--primary) !important;
}

/* 4) Buttons */
.btn {
    border-radius: 15px;
}

.btn-xl {
    --bs-btn-padding-y: 1rem;
    --bs-btn-padding-x: 3rem;
    --bs-btn-font-size: var(--extraSmallText) !important;
}

.btn-lg {
    --bs-btn-padding-y: 0.75rem;
    --bs-btn-padding-x: 2rem;
    --bs-btn-font-size: var(--extraSmallText) !important;
}

.btn-md {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: var(--extraSmallText) !important;
}

.btn-sm {
    --bs-btn-padding-y: 0.15rem !important;
    --bs-btn-padding-x: 0.60rem !important;
    --bs-btn-font-size: var(--tinyText) !important;
}


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

    .btn-primary:hover {
        color: var(--white);
        background-color: var(--btn-primary-hover);
        border-color: var(--btn-primary-hover);
    }

    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .btn-primary:focus:active {
        color: var(--white);
        background-color: var(--btn-primary-hover);
        border-color: var(--btn-primary-hover);
        outline: 0;
        box-shadow: 0 0 0 0.2rem var(--btn-primary);
    }

.btn-secondary {
    color: var(--black);
    background-color: var(--secondary);
    border-color: var(--secondary);
}

    .btn-secondary:hover {
        color: var(--black);
        background-color: var(--secondaryHover);
        border-color: var(--secondaryHover);
    }

    .btn-secondary:focus,
    .btn-secondary:active,
    .btn-secondary.active,
    .btn-secondary:focus:active {
        color: var(--white);
        background-color: var(--secondaryHover);
        border-color: var(--secondaryHover);
        outline: 0;
        box-shadow: 0 0 0 0.2rem var(--secondary);
    }

.btn-outline-primary, .btn-outline-primary:hover, .btn-outline-primary:active {
    border-color: transparent !important;
    color: var(--primary) !important;
    font-weight: 700;
    padding: 5px;
}

    .btn-outline-primary:hover, .btn-outline-primary:active {
        background-color: transparent !important;
        text-decoration: underline !important;
    }

.btn-outline-info, .btn-outline-info:hover, .btn-outline-info:active {
    border-color: transparent !important;
    color: var(--info) !important;
}

    .btn-outline-info:hover, .btn-outline-info:active {
        background-color: transparent !important;
    }

.btn-outline-danger, .btn-outline-danger:active, .btn-outline-danger:hover {
    border-color: transparent !important;
    color: var(--danger) !important;
}

    .btn-outline-danger:active, .btn-outline-danger:hover {
        background-color: transparent !important;
    }

.btn-outline-secondary,
.btn-outline-secondary i {
    background-color: transparent !important;
    color: var(--outlineSecondaryText) !important;
}

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus,
    .btn-outline-secondary:active,
    .btn-outline-secondary:focus:active {
        background-color: transparent !important;
        color: var(--outlineSecondaryText) !important;
    }

.dropdown-item {
    font-size: var(--tinyText);
}

/* 5) Validation */
h1:focus {
    outline: none;
}

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

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* =========================================================
   PAGINATION
========================================================= */
.page-link {
    font-size: 12px;
    color: black;
}

    .active > .page-link, .page-link.active {
        z-index: 3;
        color: var(--white);
        background-color: var(--primary);
        border-color: var(--primary);
    }

.pagination {
    margin-bottom: 0;
}

.bb-grid-pagination-text {
    font-size: var(--extraSmallText) !important;
}

/* =========================================================
   FILE UPLOAD
========================================================= */
.dropArea {
    position: relative;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    font-size: var(--mediumText);
    cursor: pointer;
    border-radius: 16px;
    transition: background-color .25s, border-color .25s, box-shadow .25s, color .25s;
    background-color: var(--white);
    border: 2px dashed var(--primary);
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
    outline: none;
}

    .dropArea:hover,
    .dropArea:focus-visible {
        border-color: var(--primaryHover);
        box-shadow: 0 4px 14.5px 0 rgba(0,0,0,0.15);
    }

.dropAreaDrag {
    background-color: var(--white);
    border-color: var(--primaryHover);
}

.dropArea--ok {
    border-style: solid;
    border-color: var(--success);
}

.dropArea--error {
    border-style: solid;
    border-color: var(--danger);
}

.dropArea input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.0001; /* zachowuje fokus dla klawiatury */
    cursor: pointer;
}

/* 6) Blazor error UI */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }


.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDE5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.status-bar-safe-area {
    display: none;
}

.badge {
    --bs-badge-padding-x: 1rem !important;
    --bs-badge-padding-y: 0.6em !important;
}

/* 7) Forms */
.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > label {
    color: rgba(var(--bs-body-color-rgb), .6);
    padding: 1rem .75rem;
    font-size: var(--extraSmallText) !important;
    margin: 0;
}

.form-floating, .form-check {
    margin-bottom: 1rem;
}

.input-group > .form-floating {
    margin-bottom: 0;
}

.form-check-input, .form-select, .form-control {
    border-radius: 15px;
    border: 1px solid var(--primary);
    background-color: transparent;
    font-size: var(--extraSmallText) !important;
}

    .form-check-input:checked {
        background-color: var(--primary);
    }

.form-control, .form-select {
    width: 100%;
    border-radius: 15px;
}

    .form-control:focus,
    .form-control:active,
    .form-select:focus,
    .form-check-input:focus {
        border: 1px solid var(--primary);
        box-shadow: 0 0 0 0rem white, 0 0 0 0.1rem var(--primary);
    }


/* 8) Switch */
.form-switch .form-check-input,
.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2363AD13'/%3e%3c/svg%3e");
}

    .form-switch .form-check-input:checked {
        --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFF'/%3e%3c/svg%3e");
    }

.floating-context-menu {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 16px;
    min-width: 280px;
    z-index: 1040;
}

.modal {
    z-index: 1050;
}

.modal-backdrop {
    z-index: 1049;
}

.accordion-body {
    padding: 0 !important;
}

@media (max-width: 768px) {

    .table-responsive-grid thead {
        display: none;
    }

    .table-responsive-grid {
        margin-bottom: 0;
    }

        .table-responsive-grid tbody tr {
            display: block;
            border: 1px solid #dee2e6;
            border-radius: .75rem;
            margin-bottom: 1.25rem;
            background: #fff;
        }

        .table-responsive-grid tbody td {
            border: 0 !important;
            padding: .10rem 0 !important;
            display: block;
            width: 100%;
        }

            .table-responsive-grid tbody td .cell {
                display: grid;
                grid-template-columns: 1fr auto;
                align-items: center;
                gap: .75rem;
                padding: .25rem 0;
                font-size: 13px;
                margin: 0px 10px;
                text-align: right;
            }

                .table-responsive-grid tbody td .cell::before {
                    content: attr(data-label);
                    font-weight: 600;
                    width: 50%;
                    color: #6c757d;
                    text-align: left;
                }

            .table-responsive-grid tbody td .btn {
                width: auto;
            }

            .table-responsive-grid tbody td .badge {
                justify-self: end;
            }
}

/* 9) Responsive */
@media (max-width: 576px) {
    :root {
        --largeText: 2.6rem;
        --bigText: 2.2rem;
        --regularText: 1.5rem;
        --mediumText: 1.25rem;
        --smallText: 1rem;
        --extraSmallText: 0.8rem;
    }

    /* compact floating controls */
    .form-floating > .form-control,
    .form-floating > .form-control-plaintext,
    .form-floating > .form-select {
        height: 2.8rem !important;
        min-height: 2.8rem !important;
        line-height: 1.4 !important;
        font-size: .9rem !important;
        padding: .9rem .65rem .25rem !important;
    }

    .form-floating > label {
        padding: .8rem .65rem !important;
        font-size: var(--tinyText);
    }
}