/* ==========================================================================
   Srednji i manji desktop ekrani (<= 1250px) - Topbar rano sažimanje
   ========================================================================== */
@media (max-width: 1250px) {
    .btn-topbar-upgrade span {
        display: none !important;
    }
    .btn-topbar-upgrade {
        padding: 5px 9px !important;
        margin-right: 4px !important;
        gap: 0 !important;
    }
    .topbar-search-wrapper {
        max-width: 260px !important;
        min-width: 110px !important;
        margin: 0 10px !important;
    }
}

/* Srednji ekrani i manji laptopovi (<= 1080px) */
@media (max-width: 1080px) {
    .user-name,
    .user-chevron {
        display: none !important;
    }
    .user-badge {
        padding: 2px 4px !important;
        gap: 0 !important;
    }
    .topbar-right {
        gap: 8px !important;
    }
    .topbar-search-wrapper {
        max-width: 200px !important;
        min-width: 80px !important;
        margin: 0 8px !important;
    }
}

/* Tableti i manji ekrani (<= 950px) */
@media (max-width: 950px) {
    .sync-status-badge .sync-text {
        display: none !important;
    }
    .sync-status-badge {
        padding: 4px 6px !important;
    }
    .topbar-search-wrapper {
        max-width: 150px !important;
        min-width: 70px !important;
        margin: 0 6px !important;
    }
    .search-kbd {
        display: none !important;
    }
}

/* Tableti i manji ekrani (<= 1024px) */
@media (max-width: 1024px) {
    .reports-charts-container {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .t2b-content {
        padding: 16px 20px;
    }

    /* Traka za tajmer (Tracker card) - sprečava preklapanje teksta i tajmera na manjim ekranima */
    .t2b-tracker-card {
        height: auto !important;
        min-height: 48px !important;
        padding: 8px 12px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }

    .tracker-inputs-group {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        height: auto !important;
        min-width: 0 !important;
    }

    .tracker-desc-box {
        flex: 1 1 180px !important;
        min-width: 0 !important;
        height: auto !important;
    }

    .input-t2b-desc {
        width: 100% !important;
        font-size: 0.88rem !important;
        padding: 4px 6px !important;
    }

    .project-picker-container {
        flex-shrink: 0 !important;
    }

    .btn-project-pill {
        max-width: 180px !important;
    }

    .task-picker-container {
        flex-shrink: 0 !important;
    }

    .tracker-controls-group {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding-top: 6px !important;
        border-top: 1px solid var(--border-subtle) !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        height: auto !important;
    }

    .manual-inputs-bar {
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .manual-inputs-bar[style*="display: none"],
    .manual-inputs-bar[style*="display:none"],
    .manual-inputs-bar.d-none {
        display: none !important;
    }

    .manual-inputs-bar input[type="date"],
    .manual-inputs-bar input[type="time"],
    .manual-inputs-bar .manual-time-group {
        flex: 1 1 95px !important;
        min-width: 0 !important;
    }

    /* Dnevnik unosa (Time entry rows) - 2 linije: puna širina za opis gore, meta i akcije dole */
    .t2b-entry-row {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 9px 14px !important;
        gap: 6px !important;
        min-height: auto !important;
    }

    .entry-desc-col {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
        word-break: break-word !important;
        font-size: 0.9rem !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
        padding: 2px 4px !important;
    }

    .entry-meta-group {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        gap: 6px 12px !important;
    }

    .entry-tags-col {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        min-width: 0 !important;
    }

    .entry-time-actions-group {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }

    .entry-actions-col {
        opacity: 0.85 !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    /* Fakture & Ponude sheet na tabletima (<= 1024px) */
    .invoice-sheet-wrapper {
        padding: 8px 0 24px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .t2b-invoice-sheet {
        padding: 28px 24px !important;
        box-sizing: border-box !important;
    }

    .clk-inv-bottom {
        gap: 20px !important;
    }

    .clk-inv-notes-block {
        flex: 1 1 auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .clk-inv-summary-block {
        width: 300px !important;
        flex-shrink: 0 !important;
    }

    .clk-inv-table-wrapper {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ==========================================================================
   Mobilni uređaji i manji ekrani (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* Bočni meni */
    .t2b-sidebar {
        position: fixed;
        left: -270px;
        top: 0;
        bottom: 0;
        width: 260px !important;
        z-index: 999;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.55);
        transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
    }

    .t2b-sidebar.mobile-open {
        left: 0 !important;
    }

    /* Gornja traka (Topbar) */
    .t2b-topbar {
        padding: 0 12px !important;
        height: 52px !important;
    }

    .topbar-left {
        gap: 8px !important;
        flex-shrink: 0 !important;
        margin-right: 4px !important;
    }

    .btn-mobile-menu {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: var(--radius-xs);
        background: transparent;
        border: none;
        color: var(--text-primary);
        cursor: pointer;
        padding: 0;
        margin-right: 8px !important;
        flex-shrink: 0 !important;
    }

    .btn-mobile-menu:hover {
        background: var(--bg-input);
    }

    .page-title {
        font-size: 0.9rem !important;
        max-width: 140px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .topbar-right {
        gap: 6px !important;
    }

    .user-name,
    .user-chevron {
        display: none !important;
    }

    .user-badge {
        padding: 2px 4px !important;
    }

    /* Topbar search & Pro badge responsive adjustments */
    .topbar-search-wrapper {
        min-width: 0 !important;
        margin: 0 8px 0 6px !important;
        flex: 1 1 auto !important;
    }

    .search-kbd {
        display: none !important;
    }

    .btn-topbar-upgrade span {
        display: none !important;
    }

    .btn-topbar-upgrade {
        padding: 4px 8px !important;
    }

    /* Radna površina */
    .t2b-content {
        padding: 12px 10px !important;
    }

    /* Traka za praćenje vremena (Tracker card) */
    .t2b-tracker-card {
        height: auto !important;
        min-height: 48px !important;
        padding: 10px 12px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }

    .tracker-inputs-group {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        height: auto !important;
    }

    .tracker-desc-box {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
    }

    .input-t2b-desc {
        width: 100% !important;
        font-size: 0.9rem !important;
        padding: 4px 6px !important;
    }

    .project-picker-container {
        flex-shrink: 0 !important;
    }

    .btn-project-pill {
        max-width: 160px !important;
    }

    .task-picker-container {
        flex-shrink: 0 !important;
    }

    .tracker-controls-group {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding-top: 6px !important;
        border-top: 1px solid var(--border-subtle) !important;
        height: auto !important;
    }

    .manual-inputs-bar {
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .manual-inputs-bar[style*="display: none"],
    .manual-inputs-bar[style*="display:none"],
    .manual-inputs-bar.d-none {
        display: none !important;
    }

    .manual-inputs-bar input[type="date"],
    .manual-inputs-bar input[type="time"],
    .manual-inputs-bar .manual-time-group {
        flex: 1 1 90px !important;
        min-width: 0 !important;
    }

    #btn-quick-manual-modal {
        margin-left: 0 !important;
        flex-shrink: 0;
    }

    /* Dnevnik unosa (Time entry rows) - 2 linije: opis taska gore, projekat, vreme i akcije dole */
    .t2b-entry-row {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 10px 12px !important;
        gap: 6px !important;
        min-height: auto !important;
    }

    .entry-desc-col {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
        word-break: break-word !important;
        font-size: 0.9rem !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
        padding: 2px 4px !important;
    }

    .entry-meta-group {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        gap: 6px 10px !important;
    }

    .entry-tags-col {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        min-width: 0 !important;
    }

    .entry-time-actions-group {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }

    .entry-actions-col {
        opacity: 1 !important;
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
    }

    /* Tabele (Projects, Clients, Tasks, Invoices, Payments) */
    .table-card,
    .t2b-table-card,
    .table-responsive {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 12px !important;
    }

    .data-table,
    .t2b-data-table {
        min-width: 680px !important;
    }

    .t2b-data-table-projects {
        min-width: 760px !important;
    }

    .t2b-data-table-invoices {
        min-width: 820px !important;
    }

    .t2b-data-table-quotes {
        min-width: 800px !important;
    }

    .t2b-data-table-payments {
        min-width: 860px !important;
    }

    /* Analitičke kartice izveštaja (Poređenje Procene vs. Stvarno & Profitabilnost) */
    .reports-analytics-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .reports-analytics-grid > .t2b-table-card {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Tabovi i akcije upravljanja (Manage top strip, tabs & action buttons) */
    .manage-top-strip {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 8px 10px !important;
        gap: 8px !important;
    }

    .manage-tabs-group {
        display: flex !important;
        align-items: center !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 4px !important;
        width: 100% !important;
        padding-bottom: 4px !important;
        max-width: 100% !important;
    }

    .manage-tabs-group::-webkit-scrollbar {
        display: none !important;
    }

    .manage-tab-btn {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        padding: 5px 10px !important;
        font-size: 0.82rem !important;
    }

    #manage-top-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: 100% !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        padding-top: 6px !important;
        border-top: 1px solid var(--border-subtle) !important;
    }

    #manage-top-actions .btn {
        font-size: 0.82rem !important;
        white-space: nowrap !important;
    }

    .projects-filter-bar {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        padding-bottom: 4px !important;
        margin-bottom: 10px !important;
    }

    .filter-controls-strip {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px 12px !important;
        align-items: center !important;
    }

    .filter-controls-strip .filter-item {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex: 1 1 auto !important;
        min-width: 130px !important;
        margin-left: 0 !important;
    }

    .filter-controls-strip .filter-item select,
    .filter-controls-strip .filter-item input {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .filter-controls-strip .filter-item input[type="date"] {
        flex: 1 1 95px !important;
        min-width: 0 !important;
        width: auto !important;
    }

    .filter-actions-group {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        justify-content: flex-end !important;
    }

    .filter-actions-group .btn {
        flex: 1 1 auto !important;
        justify-content: center !important;
    }

    /* Modali na mobilnom i tabletima: jednaki gornji i donji razmaci, centrirano uz uvažavanje safe-area */
    .modal-backdrop {
        height: 100vh !important;
        height: 100dvh !important;
        padding-top: max(12px, env(safe-area-inset-top, 12px)) !important;
        padding-bottom: max(12px, env(safe-area-inset-bottom, 12px)) !important;
        padding-left: max(10px, env(safe-area-inset-left, 10px)) !important;
        padding-right: max(10px, env(safe-area-inset-right, 10px)) !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .modal-card {
        width: 95vw !important;
        max-width: 540px !important;
        margin: auto !important;
        max-height: calc(100dvh - 2 * max(12px, env(safe-area-inset-bottom, 12px))) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        border-radius: var(--radius-xs) !important;
    }

    .modal-card form {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .modal-header {
        padding: 10px 14px !important;
        flex-shrink: 0 !important;
    }

    .modal-body {
        padding: 12px 14px !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .modal-footer {
        padding: 10px 14px !important;
        background: var(--bg-header-strip) !important;
        border-top: 1px solid var(--border-color) !important;
        flex-shrink: 0 !important;
        gap: 8px !important;
    }

    /* Gridi formi */
    .form-grid-4,
    .form-grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Izveštaji i KPI kartice */
    .reports-charts-container {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .kpi-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .settings-actions-grid {
        grid-template-columns: 1fr !important;
    }

    .project-tasks-top-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .project-header-divider {
        display: none !important;
    }

    .project-tasks-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .project-tasks-actions .btn {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 120px !important;
        justify-content: center !important;
        font-size: 0.8rem !important;
        padding: 6px 10px !important;
        white-space: nowrap !important;
    }

    /* ==========================================================================
       FAKTURE I PONUDE - MOBILNI PRIKAZ (<= 768px)
       ========================================================================== */
    .invoice-sheet-wrapper {
        padding: 0 0 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .t2b-invoice-sheet {
        padding: 18px 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border-radius: var(--radius-xs) !important;
        overflow: hidden !important;
    }

    /* Zaglavlje: Logo i podaci izdavaoca, pa naslov i meta podaci vertikalno */
    .clk-inv-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
        padding-bottom: 16px !important;
        margin-bottom: 16px !important;
    }

    .clk-inv-brand {
        width: 100% !important;
    }

    .clk-inv-logo {
        margin-bottom: 6px !important;
    }

    .clk-inv-brand-name {
        font-size: 1.15rem !important;
    }

    .clk-inv-title-meta {
        text-align: left !important;
        width: 100% !important;
        border-top: 1px dashed var(--border-subtle) !important;
        padding-top: 12px !important;
    }

    .clk-inv-title {
        font-size: 1.5rem !important;
        text-align: left !important;
        margin-bottom: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .clk-inv-meta-grid {
        width: 100% !important;
        gap: 6px !important;
    }

    .clk-inv-meta-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        font-size: 0.82rem !important;
        gap: 8px !important;
    }

    .clk-inv-meta-label {
        text-align: left !important;
        min-width: unset !important;
        flex: 1 1 auto !important;
    }

    .clk-inv-meta-val {
        text-align: right !important;
        min-width: unset !important;
        flex-shrink: 0 !important;
    }

    /* Adrese: Kupac i Izdavalac složeni jedno ispod drugog */
    .clk-inv-addresses {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin-bottom: 18px !important;
        border-bottom: 1px solid var(--border-subtle) !important;
        padding-bottom: 16px !important;
    }

    .clk-inv-addr-block {
        width: 100% !important;
    }

    .clk-inv-addr-name {
        font-size: 1.05rem !important;
    }

    .clk-inv-addr-sub {
        font-size: 0.82rem !important;
    }

    /* Tabela stavki sa sigurnim horizontalnim skrolom */
    .clk-inv-table-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 16px !important;
        border: 1px solid var(--border-subtle) !important;
        border-radius: var(--radius-xs) !important;
    }

    .clk-inv-table {
        min-width: 520px !important;
        width: 100% !important;
    }

    .clk-inv-table th,
    .clk-inv-table td {
        padding: 8px 10px !important;
        font-size: 0.82rem !important;
    }

    .clk-inv-table th.th-project,
    .clk-inv-table td.td-project {
        min-width: 170px !important;
    }

    /* Donji deo fakture: Napomene i Total blok složeni jedan ispod drugog */
    .clk-inv-bottom {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
        margin-top: 14px !important;
        margin-bottom: 18px !important;
    }

    .clk-inv-notes-block {
        width: 100% !important;
        max-width: 100% !important;
    }

    .clk-inv-notes-textarea {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 0.82rem !important;
    }

    .clk-inv-summary-block {
        width: 100% !important;
        max-width: 100% !important;
        border-top: 1px solid var(--border-subtle) !important;
        padding-top: 10px !important;
        box-sizing: border-box !important;
    }

    .clk-inv-summary-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        font-size: 0.88rem !important;
        padding: 5px 0 !important;
    }

    .clk-total-due-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        font-size: 1.1rem !important;
        margin-top: 8px !important;
        padding-top: 8px !important;
        border-top: 2px solid var(--primary) !important;
    }

    .clk-total-due-row span:first-child {
        white-space: nowrap !important;
        flex: 1 1 auto !important;
    }

    .clk-total-val {
        font-size: 1.2rem !important;
        white-space: nowrap !important;
        text-align: right !important;
        flex-shrink: 0 !important;
    }

    .clk-toggle-all-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .clk-toggle-all-wrap .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    .inv-locked-strip {
        font-size: 0.82rem !important;
        padding: 8px 10px !important;
        gap: 6px !important;
    }

    /* Podešavanja na mobilnom (<= 768px) */
    .settings-container {
        padding: 0 !important;
        max-width: 100% !important;
    }

    .settings-form-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        margin-bottom: 12px !important;
    }

    .settings-form-row label {
        min-width: unset !important;
        width: 100% !important;
        font-size: 0.82rem !important;
    }

    .settings-form-row select,
    .settings-form-row input {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .settings-buttons-row {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .settings-buttons-row .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* Vrlo mali ekrani (telefoni <= 480px) */
@media (max-width: 480px) {
    .kpi-cards-grid {
        grid-template-columns: 1fr !important;
    }

    .form-grid-2,
    .form-grid-3,
    .form-grid-4 {
        grid-template-columns: 1fr !important;
    }

    .modal-backdrop {
        padding-top: max(10px, env(safe-area-inset-top, 10px)) !important;
        padding-bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important;
        padding-left: max(6px, env(safe-area-inset-left, 6px)) !important;
        padding-right: max(6px, env(safe-area-inset-right, 6px)) !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .modal-card {
        width: 98vw !important;
        max-width: 98vw !important;
        margin: auto !important;
        max-height: calc(100dvh - 2 * max(10px, env(safe-area-inset-bottom, 10px))) !important;
    }

    .modal-body .form-row {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .modal-footer {
        padding: 10px 14px !important;
    }

    .modal-footer .btn {
        padding: 8px 14px !important;
        font-size: 0.86rem !important;
    }

    .entry-mode-switch {
        flex-direction: column !important;
        gap: 4px !important;
    }

    .entry-mode-switch .btn-subtab {
        width: 100% !important;
    }

    /* Ultra-mali ekrani: sakrij naslov stranice i tekst sinhronizacije radi očuvanja prostora u topbaru */
    .page-title {
        display: none !important;
    }

    .topbar-search-wrapper {
        margin: 0 4px 0 10px !important;
    }

    .topbar-search-bar {
        padding: 3px 8px !important;
    }

    .sync-status-badge .sync-text {
        display: none !important;
    }

    .sync-status-badge {
        width: 28px !important;
        height: 28px !important;
        padding: 0 !important;
        min-width: unset !important;
    }

    .lang-picker-wrapper select {
        max-width: 72px !important;
        padding: 2px 4px !important;
        font-size: 11px !important;
    }
}

/* ==========================================================================
   Mali mobilni telefoni (<= 480px)
   ========================================================================== */
@media (max-width: 480px) {
    .entry-meta-group {
        gap: 6px 8px !important;
    }

    .tag-project-pill {
        max-width: 140px !important;
    }

    .tag-project-pill span:not(.project-dot) {
        max-width: 95px !important;
    }

    .tag-client-name {
        max-width: 65px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .entry-time-actions-group {
        gap: 6px !important;
    }

    .entry-time-col {
        font-size: 0.73rem !important;
        padding: 2px 3px !important;
    }

    .entry-duration-col {
        font-size: 0.82rem !important;
        min-width: 58px !important;
        padding: 2px 3px !important;
    }

    .entry-actions-col {
        gap: 2px !important;
    }

    .btn-action-icon {
        padding: 3px !important;
    }

    .topbar-plan-badge {
        display: none !important;
    }

    .topbar-search-wrapper {
        min-width: 70px !important;
    }

    .filter-controls-strip .filter-item {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    .project-tasks-actions .btn {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    .clk-inv-title {
        font-size: 1.3rem !important;
    }

    .clk-inv-table th,
    .clk-inv-table td {
        padding: 6px 8px !important;
        font-size: 0.78rem !important;
    }

    #manage-top-actions {
        justify-content: stretch !important;
    }

    #manage-top-actions .btn {
        flex: 1 1 auto !important;
        justify-content: center !important;
        padding: 7px 12px !important;
    }
}

/* Štampa (Print / PDF) */
@media print {
    @page {
        size: A4 portrait;
        margin: 8mm 10mm;
    }

    .invoice-sheet-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .clk-inv-table tr,
    .clk-row-project,
    .clk-row-task,
    .clk-inv-bottom,
    .clk-inv-notes-block,
    .clk-inv-summary-block {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .t2b-invoice-sheet,
    .invoice-sheet {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }
    /* Sakrij sve skrolbarove pri štampi */
    *,
    *::before,
    *::after {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    *::-webkit-scrollbar,
    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
    }

    .t2b-sidebar,
    .t2b-topbar,
    .t2b-tracker-card,
    .manage-top-strip,
    .projects-filter-bar,
    .invoice-control-panel,
    .quote-control-panel,
    .filter-actions-group,
    .entry-actions-col,
    .no-print,
    .toast-container,
    .modal-backdrop,
    .reports-filter-bar,
    .filter-presets-strip,
    .filter-controls-strip,
    #report-presets-strip,
    #cr-presets-strip,
    button,
    .clk-inv-notes-textarea,
    .clk-btn-task-toggle,
    .clk-task-indent,
    .invoice-project-badge-dot,
    .invoice-task-bullet,
    .invoice-item-task-toggle {
        display: none !important;
    }

    .print-only {
        display: inline-block !important;
    }

    div.print-only,
    p.print-only {
        display: block !important;
    }

    html,
    body {
        background: #ffffff !important;
        color: #000000 !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        height: auto !important;
    }

    .t2b-app, .t2b-main, .t2b-content {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    .view-section:not(.active),
    .view-section[style*="display: none"],
    .view-section[style*="display:none"] {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .view-section.active,
    .view-section:not([style*="display: none"]):not([style*="display:none"]) {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .table-responsive {
        display: block !important;
        width: 100% !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .t2b-card, .t2b-table-card, .t2b-kpi-card, .t2b-day-card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        break-inside: auto;
    }

    .chart-wrapper {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 130px !important;
        max-height: 175px !important;
        aspect-ratio: 16 / 9 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .chart-wrapper canvas {
        display: block !important;
        max-width: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }

    @media (orientation: landscape) {
        @page {
            size: auto;
            margin: 6mm 8mm;
        }

        #reports-view .reports-charts-container {
            grid-template-columns: 1fr 1fr 1.3fr !important;
            gap: 8px !important;
            margin-bottom: 8px !important;
        }

        #reports-view .t2b-chart-card.full-width {
            grid-column: auto !important;
        }

        #client-report-view .reports-charts-container {
            grid-template-columns: 1fr 1fr !important;
            gap: 10px !important;
            margin-bottom: 8px !important;
        }

        .chart-wrapper {
            min-height: 110px !important;
            max-height: 140px !important;
            aspect-ratio: 16 / 9 !important;
        }
    }
}