html {
    font-size: 14px;
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
}

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

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

table {
    width: 100%;
}

a {
    text-underline-offset: 2px;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(37, 140, 251, 0.35);
}

/* GLOBALNI SADRŽAJ */

main,
.content-custom {
    min-width: 0;
}

    .content-custom > *:last-child {
        margin-bottom: 0;
    }

/* Naslovi i tekst */
h1, .h1 {
    font-size: clamp(1.55rem, 2vw, 2.1rem);
    line-height: 1.2;
    margin-bottom: 1rem;
}

h2, .h2 {
    font-size: clamp(1.35rem, 1.8vw, 1.75rem);
    line-height: 1.25;
    margin-bottom: 0.9rem;
}

h3, .h3 {
    font-size: clamp(1.15rem, 1.4vw, 1.35rem);
    line-height: 1.3;
}

h4, .h4, h5, .h5, h6, .h6 {
    line-height: 1.3;
}

p,
label,
.form-label,
.form-check-label,
.small,
.text-muted {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Kartice i sekcije */
.card,
.accordion-item,
.modal-content,
.dropdown-menu,
.alert {
    border-radius: 0.9rem;
}

.card-body {
    min-width: 0;
}

/* Dugmad */
.btn {
    border-radius: 0.7rem;
    min-height: 42px;
}

.btn-group > .btn {
    min-height: 42px;
}

.btn-sm {
    min-height: 34px;
}

.btn-lg {
    min-height: 48px;
}

/* Forme */
.form-control,
.form-select {
    min-height: 42px;
    border-radius: 0.7rem;
}

textarea.form-control {
    min-height: 110px;
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .btn {
    min-height: 42px;
}

.form-check-input {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.2rem;
}

.form-floating > .form-control,
.form-floating > .form-select {
    min-height: 56px;
    height: calc(3.5rem + 2px);
}

.form-floating > label {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
}

/* Validacije */
.validation-summary-errors ul,
.validation-summary-valid ul {
    margin-bottom: 0;
    padding-left: 1.2rem;
}

.field-validation-error {
    display: block;
    margin-top: 0.25rem;
}

/* Tabele */
.table {
    vertical-align: middle;
}

    .table th,
    .table td {
        white-space: nowrap;
    }

.table-responsive {
    border-radius: 0.85rem;
    -webkit-overflow-scrolling: touch;
}

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

/* Opšti wrapper za sve što može da štrči */
pre,
code,
.text-break {
    word-break: break-word;
}

pre {
    white-space: pre-wrap;
}

/* Modali */
.modal-header,
.modal-footer {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

/* Utility za male ekrane */
.mobile-stack > * + * {
    margin-top: 0.75rem;
}

/* ===== TABLET ===== */
@media (max-width: 991.98px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .card-body,
    .accordion-body,
    .modal-body {
        padding: 1rem;
    }

    .table th,
    .table td {
        padding: 0.65rem 0.7rem;
    }
}

/* ===== MOBILNI ===== */
@media (max-width: 767.98px) {
    html {
        font-size: 15px;
    }

    h1, .h1 {
        font-size: 1.45rem;
    }

    h2, .h2 {
        font-size: 1.25rem;
    }

    h3, .h3 {
        font-size: 1.08rem;
    }

    .content-custom {
        overflow-x: hidden;
    }

    .row {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 0.85rem;
    }

    .container,
    .container-fluid,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .card,
    .accordion-item,
    .alert,
    .modal-content {
        border-radius: 0.8rem;
    }

    .card-body,
    .accordion-body,
    .modal-body,
    .modal-header,
    .modal-footer {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .btn,
    .form-control,
    .form-select,
    .input-group > .btn,
    .input-group > .form-control,
    .input-group > .form-select {
        min-height: 44px;
    }

    .btn {
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }

    .btn-sm {
        min-height: 36px;
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
    }

    .table-responsive {
        margin-left: -0.2rem;
        margin-right: -0.2rem;
    }

    .table {
        font-size: 0.95rem;
    }

        .table th,
        .table td {
            padding: 0.6rem 0.65rem;
        }

    .pagination {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .page-link {
        border-radius: 0.6rem !important;
        min-width: 2.35rem;
        text-align: center;
    }

    /* Klasičan header sa desnim dugmadima često puca na telefonu */
    .d-flex.justify-content-between.align-items-center.mb-4,
    .d-flex.justify-content-between.align-items-center.mb-3,
    .d-flex.justify-content-between.align-items-center {
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    /* Sve kolone u formama neka ne guraju širinu */
    .col,
    [class*="col-"] {
        min-width: 0;
    }

    /* Input group često pravi overflow */
    .input-group {
        flex-wrap: wrap;
    }

        .input-group > .form-control,
        .input-group > .form-select,
        .input-group > .btn {
            width: 100%;
            flex: 1 0 100%;
            border-radius: 0.7rem !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

    /* Tabele i grid alati u toolbarima */
    .table-toolbar,
    .list-toolbar,
    .page-toolbar {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Ako imate akcije uz formu u jednom redu */
    .form-actions,
    .page-actions {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }

        .form-actions .btn,
        .page-actions .btn {
            width: 100%;
        }
}

/* ===== VRLO USKI TELEFONI ===== */
@media (max-width: 575.98px) {
    html {
        font-size: 14px;
    }

    .table {
        font-size: 0.92rem;
    }

    .btn,
    .form-control,
    .form-select {
        font-size: 1rem;
    }

    .card-body,
    .accordion-body {
        padding: 0.85rem;
    }

    .breadcrumb {
        flex-wrap: wrap;
    }
}