/* Tablet */
@media (max-width: 960px) {
    .skp-dashboard { max-width: 100% !important; margin: 20px 16px 32px !important; border-radius: 14px !important; }
    .skp-overview-cards { grid-template-columns: repeat(2, 1fr) !important; }
    .skp-settings-grid { grid-template-columns: 1fr !important; }
    .skp-main { padding: 24px !important; }
    .skp-sidebar { width: 200px !important; }
    .skp-ov-row { grid-template-columns: repeat(3, 1fr) !important; }
    .skp-pv-grid { grid-template-columns: 1fr !important; }
    .skp-ct-cards { grid-template-columns: repeat(2, 1fr) !important; }
    .skp-ov-cards-new { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Mobile */
@media (max-width: 680px) {
    .skp-dashboard { flex-direction: column !important; margin: 10px 10px 24px !important; border-radius: 12px !important; min-height: auto !important; }
    .skp-sidebar { width: 100% !important; border-right: none !important; border-bottom: 1px solid var(--skp-border) !important; }
    .skp-sidebar-user { padding: 16px !important; }
    .skp-sidebar-footer { display: none !important; }
    .skp-nav { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; padding: 12px !important; }
    .skp-nav-item { padding: 10px 6px !important; font-size: 10px !important; text-align: center !important; background: #F4F3F2 !important; border-radius: 8px !important; border: 1px solid var(--skp-border) !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 2px !important; min-height: 52px !important; justify-content: center !important; line-height: 1.2 !important; position: relative !important; overflow: hidden !important; }
    .skp-nav-item.skp-nav-active { background: #fff !important; border-color: var(--skp-accent) !important; }
    .skp-nav-active::before { display: none !important; }
    .skp-nav-icon { margin-right: 0 !important; }
    .skp-nav-icon svg { width: 15px !important; height: 15px !important; }
    .skp-nav-label { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; }
    .skp-nav .skp-badge { position: absolute !important; top: 3px !important; right: 3px !important; margin: 0 !important; font-size: 8px !important; padding: 1px 4px !important; min-width: 14px !important; line-height: 1.2 !important; }
    .skp-main { padding: 14px !important; border-radius: 0 0 12px 12px !important; overflow-x: hidden !important; }
    .skp-page-title { font-size: 18px !important; }
    .skp-field-row { flex-direction: column !important; gap: 0 !important; }
    .skp-field-half { flex: unset !important; }
    .skp-settings-grid { grid-template-columns: 1fr !important; }
    .skp-social-row { flex-wrap: wrap !important; }
    .skp-social-row select, .skp-social-row input { width: 100% !important; }
    .skp-auth-container { max-width: 100% !important; }
    .skp-auth-panel { padding: 22px !important; }

    /* Overview boxes */
    .skp-ov-row { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .skp-ov-box { padding: 12px !important; }
    .skp-ov-box-num { font-size: 16px !important; }
    .skp-ov-box-label { font-size: 10px !important; }

    /* Preview cards - force everything inside bounds */
    .skp-pv-card { overflow: hidden !important; }
    .skp-pv-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

    /* Document items - stack on mobile */
    .skp-pv-doc-item { flex-wrap: wrap !important; gap: 8px !important; align-items: center !important; }
    .skp-pv-doc-info { flex: 1 !important; min-width: 0 !important; overflow: hidden !important; }
    .skp-pv-doc-title { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; }
    .skp-pv-doc-meta { font-size: 11px !important; }
    .skp-btn-download, .skp-btn-sm { flex-shrink: 0 !important; font-size: 11px !important; padding: 6px 10px !important; white-space: nowrap !important; }
    .skp-doc-icon { flex-shrink: 0 !important; width: 36px !important; height: 36px !important; font-size: 9px !important; }

    /* Invoice items on Pregled tab */
    .skp-pv-inv-item { flex-wrap: wrap !important; gap: 6px !important; align-items: center !important; }
    .skp-pv-inv-info { flex: 1 !important; min-width: 0 !important; overflow: hidden !important; }
    .skp-pv-inv-title { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; max-width: 100% !important; }
    .skp-pv-inv-amount { font-size: 12px !important; }

    /* Status/priority badges - never overflow */
    .skp-ct-badge, .skp-wp-status { font-size: 10px !important; padding: 2px 8px !important; white-space: nowrap !important; flex-shrink: 0 !important; }

    /* Task items in preview */
    .skp-pv-item { flex-wrap: wrap !important; gap: 4px !important; }
    .skp-pv-item-title { flex: 1 !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

    /* Full page document list */
    .skp-doc-item { flex-wrap: wrap !important; }
    .skp-doc-actions { width: 100% !important; justify-content: flex-end !important; margin-top: 6px !important; }

    /* Client task cards + invoice stat cards — 2x2 grid on mobile */
    .skp-ct-cards { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .skp-ct-card-stat { padding: 10px 12px !important; gap: 9px !important; }
    .skp-ct-card-stat-icon { width: 32px !important; height: 32px !important; }
    .skp-ct-card-stat-num { font-size: 17px !important; }
    .skp-ct-card-stat-label { font-size: 10px !important; }
    .skp-ct-card { flex-direction: column !important; align-items: flex-start !important; }
    .skp-ct-card-actions { width: 100% !important; margin-top: 8px !important; padding-top: 8px !important; border-top: 1px solid var(--skp-border) !important; }

    /* Invoice cards (full page) */
    .skp-inv-card { padding: 14px !important; }
    .skp-inv-card-header { flex-wrap: wrap !important; gap: 6px !important; }
    .skp-inv-amount { font-size: 16px !important; }

    /* Conversation/reply area */
    .skp-reply-form textarea { min-height: 60px !important; }
    .skp-reply-actions { flex-wrap: wrap !important; gap: 8px !important; }

    /* Toast */
    .skp-toast { right: 12px !important; left: 12px !important; width: auto !important; }

    /* Project progress */
    .skp-project-progress { padding: 14px !important; }
    .skp-pp-header { flex-wrap: wrap !important; gap: 6px !important; }

    /* Notification alert bar */
    .skp-pv-alert { flex-wrap: wrap !important; gap: 8px !important; padding: 12px !important; }
    .skp-pv-alert-text { font-size: 13px !important; }

    /* SST tiketing responsive */
    .sst-app { padding: 0 !important; max-width: 100% !important; overflow-x: hidden !important; }
}

@media (max-width: 400px) {
    .skp-ov-row { grid-template-columns: 1fr !important; }
    .skp-ov-cards-new { grid-template-columns: 1fr !important; }
    .skp-overview-cards { grid-template-columns: 1fr !important; }
    /* Stack document items vertically */
    .skp-pv-doc-item { flex-direction: column !important; align-items: flex-start !important; }
    .skp-btn-download, .skp-btn-sm { align-self: stretch !important; text-align: center !important; }
}