html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.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;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.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;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* === CUSTOM DARK THEME - Svjetlija nijansa === */
[data-bs-theme="dark"] body {
    background-color: #3a3a3a !important;
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .offcanvas {
    background-color: #363636 !important;
    border-color: #444444;
}

[data-bs-theme="dark"] table {
    --bs-table-bg: #2b2b2b;
    --bs-table-striped-bg: #323232;
    --bs-table-hover-bg: #383838;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #323232;
    border-color: #444444;
    color: #e0e0e0;
}

[data-bs-theme="dark"] .navbar,
[data-bs-theme="dark"] .sidebar {
    background-color: #2d2d2d !important;
}

/* Header/Navbar tekst */
[data-bs-theme="dark"] .navbar,
[data-bs-theme="dark"] .navbar-brand,
[data-bs-theme="dark"] .nav-link {
    color: #e0e0e0 !important;
}

    [data-bs-theme="dark"] .nav-link:hover {
        color: #ffffff !important;
    }

/* Ako ima  dropdown menu */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: #363636;
}

[data-bs-theme="dark"] .dropdown-item {
    color: #e0e0e0;
}

    [data-bs-theme="dark"] .dropdown-item:hover {
        background-color: #444444;
        color: #ffffff;
    }

.btn-hover-skype {
    transition: all 0.3s ease;
}

    .btn-hover-skype:hover {
        background-color: #00aff0;
        border-color: #00aff0;
        color: white;
        box-shadow: 0 4px 8px rgba(0, 175, 240, 0.3);
        transform: translateY(-2px);
    }

.btn-outline-custom {
    border-color: #6c757d;
    color: #adb5bd;
    background-color: transparent;
}

    .btn-outline-custom:hover {
        background-color: #00aff0;
        border-color: #00aff0;
        color: white;
    }

/* ===================================================================
   DATAGRID STILOVI
   =================================================================== */

#gridContainer .dx-datagrid-headers .dx-header-row td {
    color: #1ca8dd !important;
    font-weight: 600 !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    vertical-align: middle !important;
}

#gridContainer .dx-datagrid-headers {
    background-color: #2d3748 !important;
}

#gridContainer .dx-datagrid-rowsview .dx-row td {
    color: #adb5bd !important;
    padding: 5px 10px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    border-color: #6c757d !important;
    vertical-align: middle !important;
}

#gridContainer .dx-datagrid-rowsview .dx-row {
    height: 34px !important;
    border-color: #6c757d !important;
}

#gridContainer .dx-datagrid {
    border-color: #6c757d !important;
}

/* ===================================================================
   SIGNALR HIGHLIGHT ANIMACIJA - 10 sekundi
   =================================================================== */

@keyframes highlightEffect {
    0% {
        background-color: #1ca8dd;
        box-shadow: inset 0 0 20px 8px #1ca8dd;
    }

    60% {
        background-color: #1ca8dd;
        box-shadow: inset 0 0 20px 8px #1ca8dd;
    }

    100% {
        background-color: transparent;
        box-shadow: none;
    }
}

/* Maksimalna specifi nost - overridea DevExtreme */
#gridContainer .dx-datagrid .dx-datagrid-rowsview .dx-datagrid-content .dx-datagrid-table tbody tr td.highlight-animate,
#gridContainer .dx-data-row td.highlight-animate,
#gridContainer td.highlight-animate {
    animation: highlightEffect 1s forwards !important;
    animation-timing-function: ease-in-out !important;
    animation-fill-mode: forwards !important;
}

    /* Ukloni sve konflikte sa DevExtreme */
    #gridContainer td.highlight-animate.dx-cell-modified,
    #gridContainer td.highlight-animate.dx-editor-cell,
    #gridContainer td.highlight-animate.dx-focused {
        border: none !important;
        background-color: #1ca8dd !important;
    }