html {
    font-size: 14px;
    height: 100%;
}

@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 {
    min-height: 100vh; /* fill the viewport */
    display: flex;
    flex-direction: column;
    margin: 0;
}

footer {
    flex-shrink: 0; /* footer stays sized */
    margin-top: auto; /* and sits at the bottom */
}

main {
    flex: 1 0 auto; /* content grows, pushes footer down */
}

.btn-group-toggle .btn {
    min-width: 200px;
    text-align: left;
}

.conv-item {
    cursor: pointer;
}

    .conv-item:hover {
        background-color: #f8f9fa;
    }

.conv-avatar {
    width: 46px;
    height: 46px;
    object-fit: cover;
}

.last-msg {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==== Prevent index jump: make live duration text stable width ==== */
.live-duration {
    display: inline-block;
    min-width: 8ch; /* enough for 000h 00m */
    text-align: left;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

/* Small positioned box for the icon so the badge has a stable anchor */
.icon-wrap {
    position: relative;
    width: 1.6em;
    height: 1.6em;
    line-height: 1;
    display: inline-block;
}

/* ===== Mobile (≤575.98px) — consolidated ===== */
@media (max-width: 575.98px) {
    /* Typography / base scale */
    html {
        font-size: 17px;
    }

    body {
        line-height: 1.45;
    }

    h1 {
        font-size: 1.7rem;
    }

    h2 {
        font-size: 1.4rem;
    }

    /* ----- Header (brand + icon row) ----- */
    header .navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    header .navbar-brand {
        margin-bottom: .25rem;
    }

    header .top-shortcuts {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: nowrap;
        padding-bottom: .25rem;
    }

    .top-shortcuts .nav-link {
        padding: .55rem .7rem;
        font-size: 1.1rem;
    }

        .top-shortcuts .nav-link i {
            font-size: 1.6rem;
            line-height: 1;
        }

        /* Hide link text on phones… */
        .top-shortcuts .nav-link span {
            display: none;
        }
        /* …but ALWAYS show the numeric unread badge */
        .top-shortcuts .nav-link .badge-counter {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
        }

    .navbar .dropdown-menu {
        min-width: 12rem;
        font-size: 1rem;
    }

    .dropdown-menu .dropdown-item {
        padding: .6rem 1rem;
    }

    /* ----- Toolbar / CTAs ----- */
    .page-toolbar {
        flex-direction: column !important;
    }

        .page-toolbar .btn {
            width: 100%;
            margin: 0;
        }

            .page-toolbar .btn + .btn {
                margin-top: .5rem;
                margin-left: 0 !important;
            }

        .page-toolbar .btn-wide-block {
            margin-bottom: 0;
        }

    .btn-lg-mobile {
        font-size: 1.05rem;
        padding: .7rem 1rem;
    }

    /* ----- KPI tiles ----- */
    .kpi-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: .5rem;
    }

        .kpi-grid .alert h5 {
            font-size: 1.05rem;
        }

    /* ----- Filters ----- */
    .filters .form-row,
    .filters .form-group {
        display: block;
        width: 100%;
        margin-bottom: .5rem;
    }

    .filters label {
        margin-bottom: .25rem;
        font-size: 1rem;
    }

    .form-control {
        font-size: 1rem;
        height: 42px;
    }

    select, input, textarea {
        font-size: 16px;
    }
    /* iOS zoom fix */

    /* ----- Charts ----- */
    .chart-wrapper {
        max-height: 260px;
    }

        .chart-wrapper canvas {
            height: 240px !important;
        }

    /* ===== Tables: only the table scrolls, not the page ===== */
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }
    /* Keep the page from sliding sideways */

    .table-responsive {
        position: relative;
        display: block;
        max-width: 100%;
        overflow-x: auto !important; /* horizontal swipe */
        overflow-y: hidden; /* no vertical bleed */
        -webkit-overflow-scrolling: touch; /* momentum scroll */
        overscroll-behavior-x: contain; /* stop page from chaining */
        touch-action: pan-x; /* hint: horizontal */
        scroll-behavior: auto;
    }

        .table-responsive > .table {
            width: max-content;
            min-width: 700px;
        }

    .table-mobile {
        position: relative;
        display: block;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
        width: max-content;
        min-width: 700px;
        font-size: 1rem;
    }

        .table-responsive .table th,
        .table-responsive .table td,
        .table-mobile th,
        .table-mobile td {
            white-space: nowrap !important;
            word-break: normal !important;
            overflow: hidden;
            text-overflow: ellipsis;
        }
            /* Allow wrapping only in the "Opis" column (5th col on Index) */
            .table-responsive .table th:nth-child(5),
            .table-responsive .table td:nth-child(5),
            .table-mobile th:nth-child(5),
            .table-mobile td:nth-child(5) {
                white-space: normal !important;
                text-overflow: clip;
            }

    /* Optional: reserve some width for the Duration column (3rd) on mobile */
    .table-responsive > .table td:nth-child(3),
    .table-responsive > .table th:nth-child(3),
    .table-hscroll > .table td:nth-child(3),
    .table-hscroll > .table th:nth-child(3) {
        min-width: 100px;
    }

    .table.table-sm td, .table.table-sm th {
        padding: .55rem .6rem;
    }

    .table-mobile {
        font-size: 1rem;
    }

    /* Optional col hiding helpers */
    .hide-xs-col-4 td:nth-child(4), .hide-xs-col-4 th:nth-child(4),
    .hide-xs-col-5 td:nth-child(5), .hide-xs-col-5 th:nth-child(5),
    .hide-xs-col-6 td:nth-child(6), .hide-xs-col-6 th:nth-child(6) {
        display: none;
    }

    /* ----- Chat list density ----- */
    .chat-list .list-group-item {
        padding: .6rem .7rem;
    }

    .chat-list .name {
        font-size: .95rem;
    }

    .chat-list .snippet {
        font-size: .85rem;
    }

    /* Media safety */
    img, svg, canvas, iframe {
        max-width: 100%;
        height: auto;
    }

    /* === Holidays: stop page-wide overflow from flex headers === */
    .d-flex.align-items-center.justify-content-between {
        flex-wrap: wrap;
        gap: .5rem;
    }

        .d-flex.align-items-center.justify-content-between > * {
            min-width: 0;
        }

        .d-flex.align-items-center.justify-content-between h2,
        .d-flex.align-items-center.justify-content-between h5 {
            flex: 1 1 auto;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    .card .d-flex.align-items-center.justify-content-between {
        flex-wrap: wrap;
        gap: .5rem .75rem;
    }

        .card .d-flex.align-items-center.justify-content-between > * {
            min-width: 0;
        }

    .card .badge {
        white-space: normal;
        margin-bottom: .25rem;
    }

    /* Calendar grid: ensure it never widens the page */
    .alc-month-calendar {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        width: 100%;
        overflow-x: clip;
    }

        .alc-month-calendar > * {
            min-width: 0 !important;
        }

    /* --- FIX: force navbar horizontal row on mobile --- */
    #messageIcon {
        padding-right: 0.9rem;
    }
    /* extra room so badge doesn't clip */

    nav.navbar .navbar-nav.top-shortcuts {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-around !important;
        align-items: center !important;
        width: 100% !important;
    }

        nav.navbar .navbar-nav.top-shortcuts > li.nav-item {
            display: inline-flex !important;
            flex: 0 0 auto !important;
            margin: 0 .25rem;
        }

        nav.navbar .navbar-nav.top-shortcuts .nav-link {
            display: inline-flex !important;
            align-items: center;
            padding: .55rem .7rem;
        }

            nav.navbar .navbar-nav.top-shortcuts .nav-link i {
                font-size: 1.6rem;
                line-height: 1;
            }

    .top-shortcuts .dropdown-menu {
        left: auto;
        right: .5rem;
    }

    /* PATCH: keep d-none d-sm-block items hidden on phones */
    nav.navbar .navbar-nav.top-shortcuts > li.nav-item.d-none {
        display: none !important;
    }
}

/* ===== Visibility helpers ===== */
@media (max-width: 575.98px) {
    .hide-xs {
        display: none !important;
    }

    .show-xs {
        display: inline-flex !important;
    }
}

@media (min-width: 576px) {
    .hide-sm-up {
        display: none !important;
    }

    .show-sm-up {
        display: inline-flex !important;
    }
}

/* ===== Desktop spacing for toolbar buttons (side-by-side) ===== */
@media (min-width: 576px) {
    .page-toolbar .btn + .btn {
        margin-left: .5rem;
    }
}

/* ===== Unread counter styling (stable on all sizes) ===== */
.badge-counter {
    position: absolute; /* anchored to .icon-wrap */
    top: -0.25em; /* sit nicely on the corner */
    right: -0.35em;
    min-width: 1.05rem;
    height: 1.05rem;
    line-height: 1.05rem;
    font-size: .75rem;
    padding: 0 .25rem;
    border-radius: 9999px;
    z-index: 10;
    display: inline-flex; /* ensures it's visible and centered */
    align-items: center;
    justify-content: center;
}

/* === Top bar desktop: unify icon metrics & alignment === */
@media (min-width: 576px) {
    /* keep the whole row vertically centered */
    .top-shortcuts {
        align-items: center;
    }

        /* every link is a flex row */
        .top-shortcuts .nav-link {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            line-height: 1;
            padding-top: .5rem;
            padding-bottom: .5rem;
        }

            /* give ALL icons the same square box */
            .top-shortcuts .nav-link i {
                display: inline-flex; /* so we can center glyphs */
                align-items: center;
                justify-content: center;
                width: 1.6em; /* matches your .icon-wrap size */
                height: 1.6em;
                line-height: 1; /* kill font baseline wiggle */
                vertical-align: middle;
            }

        /* make the chat .icon-wrap use the exact same box */
        .top-shortcuts .icon-wrap {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.6em;
            height: 1.6em;
            line-height: 1;
        }

        /* badge stays in the corner without shifting baseline */
        .top-shortcuts .badge-counter {
            top: -0.25em;
            right: -0.25em;
        }
}



/* Add to wwwroot/css/crm.css */
.status-project-pending {
    background: rgba(59, 130, 246, .14);
    color: #1d4ed8;
    border: 1px solid rgba(59, 130, 246, .28);
}

    .status-project-pending i {
        color: #2563eb;
    }