/* ═══════════════════════════════════════════════════════════════
   DASHBOARD — One white rounded container matching mockup
   Site header/footer remain. Dashboard is a page content block.
   ═══════════════════════════════════════════════════════════════ */

/* Container — one big white rounded box */
.skp-dashboard {
    display: flex !important;
    max-width: 1140px !important;
    margin: 32px auto 48px !important;
    background: var(--skp-surface) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    min-height: 600px !important;
    position: relative !important;
    border: 1px solid #E6E5E0 !important;
}

/* ─── SIDEBAR — part of the white container, subtle separator ─── */
.skp-sidebar {
    width: 230px !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border-right: 1px solid var(--skp-border) !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    padding: 0 !important;
}

/* No brand logo in sidebar — site header already shows it */
.skp-sidebar-brand { display: none !important; }

/* User section at top of sidebar */
.skp-sidebar-user {
    padding: 24px 20px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border-bottom: 1px solid var(--skp-border) !important;
}
.skp-avatar-sm {
    width: 38px !important; height: 38px !important; border-radius: 50% !important;
    background: var(--skp-accent-light) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    overflow: hidden !important; flex-shrink: 0 !important;
}
.skp-avatar-sm img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.skp-avatar-sm span { font-size: 15px !important; font-weight: 700 !important; color: var(--skp-accent) !important; }
.skp-sidebar-user-info { overflow: hidden !important; }
.skp-sidebar-name {
    display: block !important; font-size: 14px !important; font-weight: 600 !important;
    color: var(--skp-text) !important; white-space: nowrap !important;
    overflow: hidden !important; text-overflow: ellipsis !important;
}
.skp-sidebar-email {
    display: block !important; font-size: 11px !important; color: var(--skp-text-3) !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}

/* ─── NAV ─── */
.skp-nav {
    flex: 1 !important; overflow-y: auto !important; padding: 14px 12px !important;
}
.skp-nav-item {
    display: flex !important; align-items: center !important; gap: 10px !important;
    padding: 9px 14px !important; border-radius: 9px !important;
    color: var(--skp-text-2) !important; text-decoration: none !important;
    font-size: 14px !important; font-weight: 500 !important;
    transition: all var(--skp-transition) !important;
    margin-bottom: 2px !important; position: relative !important;
    border: none !important; background: transparent !important;
}
.skp-nav-item:hover {
    background: var(--skp-surface-2) !important;
    color: var(--skp-text) !important;
}
.skp-nav-active {
    background: var(--skp-surface-2) !important;
    color: var(--skp-text) !important;
    font-weight: 600 !important;
}
/* Accent bar on active tab */
.skp-nav-active::before {
    content: '' !important; position: absolute !important;
    left: 0 !important; top: 8px !important; bottom: 8px !important;
    width: 3px !important; background: var(--skp-accent) !important;
    border-radius: 0 3px 3px 0 !important;
}
.skp-nav-icon {
    width: 18px !important; height: 18px !important; flex-shrink: 0 !important; opacity: 0.45 !important;
}
.skp-nav-icon svg { width: 18px !important; height: 18px !important; }
.skp-nav-active .skp-nav-icon { opacity: 1 !important; color: var(--skp-accent) !important; }
.skp-nav-item .skp-badge { margin-left: auto !important; }

/* Sidebar footer — theme toggle + logout */
.skp-sidebar-footer {
    padding: 14px 16px !important; border-top: 1px solid var(--skp-border) !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
}
.skp-theme-toggle {
    cursor: pointer !important; padding: 7px !important; border-radius: 7px !important;
    color: var(--skp-text-3) !important; background: transparent !important; border: none !important;
}
.skp-theme-toggle:hover { background: var(--skp-surface-2) !important; color: var(--skp-text) !important; }
.skp-theme-toggle svg { width: 17px !important; height: 17px !important; }
.skp-icon-moon { display: none !important; }
.skp-dark .skp-icon-sun { display: none !important; }
.skp-dark .skp-icon-moon { display: block !important; }
.skp-logout-btn {
    display: flex !important; align-items: center !important; gap: 6px !important;
    color: var(--skp-text-3) !important; text-decoration: none !important;
    font-size: 12px !important; font-weight: 500 !important;
    padding: 6px 10px !important; border-radius: 7px !important;
}
.skp-logout-btn:hover { color: var(--skp-accent) !important; background: var(--skp-accent-light) !important; }

/* ─── MAIN CONTENT — right side, light gray bg ─── */
.skp-main {
    flex: 1 !important;
    padding: 32px !important;
    background: var(--skp-bg) !important;
    border-radius: 0 18px 18px 0 !important;
    min-width: 0 !important;
    margin-left: 0 !important;
}

/* Tabs */
.skp-tab-content { display: none !important; }
.skp-tab-active { display: block !important; animation: skp-fade-up .25s ease !important; }
@keyframes skp-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.skp-page-header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 24px !important; flex-wrap: wrap !important; }

/* ─── OVERVIEW CARDS ─── */
.skp-overview-cards { display: none !important; } /* legacy — hidden */

/* New overview cards — icon on top, number, label */
.skp-ov-cards-new { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 10px !important; margin-bottom: 24px !important; }
.skp-ov-card-new {
    background: var(--skp-surface) !important; border: 1px solid var(--skp-border) !important;
    border-radius: var(--skp-radius) !important; padding: 18px 10px 14px !important;
    display: flex !important; flex-direction: column !important; align-items: center !important;
    text-align: center !important; text-decoration: none !important; color: inherit !important;
    transition: all var(--skp-transition) !important; cursor: pointer !important;
}
.skp-ov-card-new:hover { box-shadow: var(--skp-shadow-md) !important; transform: translateY(-1px) !important; }
.skp-ov-card-icon {
    width: 36px !important; height: 36px !important; border-radius: 9px !important;
    background: #F1F0EE !important; color: #161616 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    margin-bottom: 8px !important;
}
.skp-ov-card-icon svg { width: 16px !important; height: 16px !important; }
.skp-ov-card-num { font-size: 20px !important; font-weight: 700 !important; color: var(--skp-text) !important; line-height: 1.1 !important; }
.skp-ov-card-label { font-size: 10px !important; color: var(--skp-text-3) !important; margin-top: 3px !important; }
.skp-ov-card {
    background: var(--skp-surface) !important; border: 1px solid var(--skp-border) !important;
    border-radius: var(--skp-radius) !important; padding: 18px !important;
    display: flex !important; align-items: center !important; gap: 14px !important;
    transition: all var(--skp-transition) !important;
}
.skp-ov-card:hover { box-shadow: var(--skp-shadow-md) !important; transform: translateY(-1px) !important; }
.skp-ov-icon {
    width: 40px !important; height: 40px !important; border-radius: 9px !important;
    display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important;
}
.skp-ov-icon svg { width: 19px !important; height: 19px !important; }
.skp-ov-icon-tickets { background: #F1F0EE !important; color: #161616 !important; }
.skp-ov-icon-docs { background: #F1F0EE !important; color: #161616 !important; }
.skp-ov-icon-notif { background: #F1F0EE !important; color: #161616 !important; }
.skp-ov-icon-total { background: #F1F0EE !important; color: #161616 !important; }
.skp-ov-num { display: block !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.1 !important; color: var(--skp-text) !important; }
.skp-ov-label { font-size: 11px !important; color: var(--skp-text-3) !important; font-weight: 500 !important; }

/* ─── ACTIVITY LIST ─── */
.skp-activity-list { background: var(--skp-surface) !important; border: 1px solid var(--skp-border) !important; border-radius: var(--skp-radius) !important; overflow: hidden !important; }
.skp-activity-item { display: flex !important; align-items: center !important; gap: 12px !important; padding: 14px 18px !important; border-bottom: 1px solid var(--skp-border) !important; }
.skp-activity-item:last-child { border-bottom: none !important; }
.skp-activity-item.skp-unread { background: var(--skp-accent-light) !important; }
.skp-activity-icon { width: 32px !important; height: 32px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; background: #F1F0EE !important; color: #161616 !important; }
.skp-activity-icon svg { width: 15px !important; height: 15px !important; }
.skp-activity-body { flex: 1 !important; min-width: 0 !important; }
.skp-activity-title { display: block !important; font-size: 13px !important; font-weight: 600 !important; color: var(--skp-text) !important; }
.skp-activity-msg { display: block !important; font-size: 12px !important; color: var(--skp-text-3) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.skp-activity-time { font-size: 11px !important; color: var(--skp-text-3) !important; flex-shrink: 0 !important; }

/* ─── TICKETS (Zadaci) ─── */
.skp-new-ticket-form { margin-bottom: 18px !important; }
.skp-ticket-item { background: var(--skp-surface) !important; border: 1px solid var(--skp-border) !important; border-radius: var(--skp-radius-sm) !important; padding: 15px 18px !important; margin-bottom: 7px !important; cursor: pointer !important; display: flex !important; align-items: center !important; gap: 12px !important; transition: all var(--skp-transition) !important; }
.skp-ticket-item:hover { border-color: var(--skp-text-3) !important; box-shadow: var(--skp-shadow) !important; }
.skp-ticket-priority { width: 3px !important; height: 30px !important; border-radius: 2px !important; flex-shrink: 0 !important; }
.skp-priority-low { background: #8E8F96 !important; } .skp-priority-normal { background: var(--skp-blue) !important; }
.skp-priority-high { background: var(--skp-yellow) !important; } .skp-priority-urgent { background: var(--skp-red) !important; }
.skp-ticket-body { flex: 1 !important; min-width: 0 !important; }
.skp-ticket-title { font-weight: 600 !important; font-size: 14px !important; color: var(--skp-text) !important; display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.skp-ticket-meta { font-size: 11px !important; color: var(--skp-text-3) !important; }
.skp-ticket-status { padding: 3px 9px !important; border-radius: 10px !important; font-size: 10px !important; font-weight: 600 !important; text-transform: uppercase !important; }

/* ─── DOCUMENTS ─── */
.skp-documents-grid { display: grid !important; gap: 8px !important; }
.skp-doc-item { background: var(--skp-surface) !important; border: 1px solid var(--skp-border) !important; border-radius: var(--skp-radius-sm) !important; padding: 15px 18px !important; display: flex !important; align-items: center !important; gap: 14px !important; }
.skp-doc-icon { width: 40px !important; height: 40px !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; }
.skp-doc-icon-pdf { background: #FEE8E5 !important; color: #D65438 !important; } .skp-doc-icon-doc { background: #E8F0FE !important; color: #1A73E8 !important; }
.skp-doc-icon-xls { background: #E6F4EA !important; color: #188038 !important; } .skp-doc-icon-img { background: #FFF3E0 !important; color: #E37400 !important; }
.skp-doc-icon-zip { background: #F3E8FD !important; color: #8430CE !important; } .skp-doc-icon-file { background: var(--skp-surface-2) !important; color: var(--skp-text-3) !important; }
.skp-doc-body { flex: 1 !important; min-width: 0 !important; }
.skp-doc-title { font-weight: 600 !important; font-size: 13px !important; color: var(--skp-text) !important; display: block !important; }
.skp-doc-desc { font-size: 12px !important; color: var(--skp-text-3) !important; display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.skp-doc-meta { font-size: 11px !important; color: var(--skp-text-3) !important; display: flex !important; gap: 10px !important; }
.skp-doc-actions { display: flex !important; gap: 6px !important; flex-shrink: 0 !important; }

/* ─── COLLABORATION — compact list, dark icons ─── */
.skp-collab-grid { display: grid !important; gap: 0 !important; background: var(--skp-surface) !important; border: 1px solid var(--skp-border) !important; border-radius: var(--skp-radius) !important; overflow: hidden !important; }
.skp-collab-card { padding: 16px 20px !important; display: flex !important; gap: 14px !important; align-items: flex-start !important; border-bottom: 1px solid var(--skp-border) !important; background: transparent !important; border-radius: 0 !important; border-left: none !important; border-right: none !important; border-top: none !important; box-shadow: none !important; }
.skp-collab-card:last-child { border-bottom: none !important; }
.skp-collab-icon { width: 34px !important; height: 34px !important; border-radius: 8px !important; background: #F1F0EE !important; color: #161616 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
.skp-collab-icon svg { width: 15px !important; height: 15px !important; stroke: #161616 !important; }
.skp-collab-label { display: block !important; font-size: 10px !important; font-weight: 700 !important; color: var(--skp-text-3) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; margin-bottom: 2px !important; }
.skp-collab-value { font-size: 14px !important; line-height: 1.5 !important; color: var(--skp-text) !important; }

/* ─── REVIEW ─── */
.skp-review-cta, .skp-review-thanks { text-align: center !important; background: var(--skp-surface) !important; border: 1px solid var(--skp-border) !important; border-radius: var(--skp-radius) !important; padding: 44px 28px !important; }
.skp-review-stars { margin-bottom: 18px !important; display: flex !important; justify-content: center !important; gap: 3px !important; }
.skp-review-cta h2, .skp-review-thanks h2 { font-size: 19px !important; font-weight: 700 !important; margin-bottom: 8px !important; color: var(--skp-text) !important; }
.skp-review-cta p, .skp-review-thanks p { font-size: 14px !important; color: var(--skp-text-2) !important; max-width: 400px !important; margin: 0 auto 22px !important; line-height: 1.6 !important; }
.skp-review-thanks-icon { margin-bottom: 14px !important; }
.skp-review-thanks-icon svg { stroke: var(--skp-green) !important; }

/* ─── NOTIFICATIONS ─── */
.skp-notifications-list { display: grid !important; gap: 6px !important; }
.skp-notif-item { background: var(--skp-surface) !important; border: 1px solid var(--skp-border) !important; border-radius: var(--skp-radius-sm) !important; padding: 12px 16px !important; display: flex !important; align-items: center !important; gap: 11px !important; cursor: pointer !important; }
.skp-notif-item:hover { background: var(--skp-surface-2) !important; }
.skp-notif-item.skp-unread { background: var(--skp-accent-light) !important; }
.skp-notif-dot { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: var(--skp-accent) !important; flex-shrink: 0 !important; opacity: 0 !important; }
.skp-unread .skp-notif-dot { opacity: 1 !important; }
.skp-notif-icon { width: 30px !important; height: 30px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
.skp-notif-icon svg { width: 14px !important; height: 14px !important; }
.skp-notif-body { flex: 1 !important; min-width: 0 !important; }
.skp-notif-title { font-size: 13px !important; font-weight: 600 !important; display: block !important; color: var(--skp-text) !important; }
.skp-notif-msg { font-size: 12px !important; color: var(--skp-text-3) !important; display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.skp-notif-time { font-size: 10px !important; color: var(--skp-text-3) !important; flex-shrink: 0 !important; }

/* ─── SETTINGS ─── */
.skp-settings-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
.skp-settings-avatar-card { grid-column: 1 / -1 !important; display: flex !important; align-items: center !important; gap: 18px !important; }
.skp-avatar-lg { width: 68px !important; height: 68px !important; border-radius: 50% !important; background: var(--skp-accent-light) !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; flex-shrink: 0 !important; border: 2px solid var(--skp-border) !important; }
.skp-avatar-lg img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.skp-avatar-lg span { font-size: 24px !important; font-weight: 700 !important; color: var(--skp-accent) !important; }

/* ─── MOBILE NAV — show on mobile only ─── */
@media(min-width:961px){
  .skp-mobile-nav { display: none !important; }
  .skp-mob-overlay { display: none !important; }
}

/* ─── EMBEDDED SST TIKETING — exclude from our resets ─── */
.skp-dashboard .sst-app { margin: 0 !important; padding: 0 !important; }

/* ─── PREGLED — Enhanced Dashboard ─── */
.skp-ov-clickable { text-decoration: none !important; cursor: pointer !important; color: inherit !important; }
.skp-ov-clickable:hover { box-shadow: var(--skp-shadow-md) !important; transform: translateY(-2px) !important; }

.skp-overview-section { margin-bottom: 24px !important; }
.skp-section-header { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 12px !important; }
.skp-section-link { font-size: 12px !important; font-weight: 600 !important; color: #26272C !important; text-decoration: none !important; }
.skp-section-link:hover { text-decoration: underline !important; }

/* Workplan preview */
.skp-wp-preview { background: var(--skp-surface) !important; border: 1px solid var(--skp-border) !important; border-radius: var(--skp-radius) !important; overflow: hidden !important; }
.skp-wp-row { display: flex !important; align-items: center !important; padding: 12px 18px !important; border-bottom: 1px solid var(--skp-border) !important; gap: 12px !important; }
.skp-wp-row:last-child { border-bottom: none !important; }
.skp-wp-title { flex: 1 !important; font-size: 13px !important; font-weight: 500 !important; color: var(--skp-text) !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.skp-wp-due { font-size: 12px !important; color: var(--skp-text-3) !important; flex-shrink: 0 !important; }
.skp-wp-status { font-size: 11px !important; font-weight: 600 !important; padding: 3px 10px !important; border-radius: 10px !important; flex-shrink: 0 !important; text-transform: none !important; }
.skp-wp-pending .skp-wp-status { background: #F5E6CC !important; color: #8B6914 !important; }
.skp-wp-progress .skp-wp-status { background: #CCE5EF !important; color: #16718E !important; }
.skp-wp-done .skp-wp-status { background: #C8E6E0 !important; color: #0A6B5E !important; }
.skp-wp-done .skp-wp-title { text-decoration: line-through !important; color: var(--skp-text-3) !important; }

/* Download button */
.skp-btn-download { background: #26272C !important; color: #fff !important; }
.skp-btn-download:hover { background: #3a3b42 !important; color: #fff !important; }

/* Recent documents preview */
.skp-recent-docs { background: var(--skp-surface) !important; border: 1px solid var(--skp-border) !important; border-radius: var(--skp-radius) !important; overflow: hidden !important; }
.skp-rdoc-item { display: flex !important; align-items: center !important; padding: 12px 18px !important; border-bottom: 1px solid var(--skp-border) !important; gap: 12px !important; }
.skp-rdoc-item:last-child { border-bottom: none !important; }
.skp-rdoc-body { flex: 1 !important; min-width: 0 !important; }
.skp-rdoc-title { display: block !important; font-size: 13px !important; font-weight: 600 !important; color: var(--skp-text) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.skp-rdoc-meta { display: block !important; font-size: 11px !important; color: var(--skp-text-3) !important; }

/* Activity items as links */
a.skp-activity-item { text-decoration: none !important; color: inherit !important; cursor: pointer !important; }
a.skp-activity-item:hover { background: var(--skp-surface-2) !important; }

/* ─── CLIENT TASKS — Moji zadaci ─── */
.skp-ct-cards { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; margin-bottom: 16px !important; }
.skp-ct-card-stat { background: var(--skp-surface) !important; border: 1px solid var(--skp-border) !important; border-radius: var(--skp-radius) !important; padding: 14px 16px !important; display: flex !important; align-items: center !important; gap: 12px !important; }
.skp-ct-card-stat-icon { width: 36px !important; height: 36px !important; border-radius: 9px !important; background: #F1F0EE !important; color: #161616 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
.skp-ct-card-stat-icon svg { width: 16px !important; height: 16px !important; }
.skp-ct-card-stat-num { display: block !important; font-size: 20px !important; font-weight: 700 !important; color: var(--skp-text) !important; line-height: 1.1 !important; }
.skp-ct-card-stat-label { display: block !important; font-size: 10px !important; color: var(--skp-text-3) !important; }

.skp-ct-progress-wrap { background: var(--skp-surface) !important; border: 1px solid var(--skp-border) !important; border-radius: var(--skp-radius) !important; padding: 14px 18px !important; margin-bottom: 16px !important; }
.skp-ct-progress-bar { height: 10px !important; background: #F1F0EE !important; border-radius: 5px !important; overflow: hidden !important; margin-bottom: 8px !important; }
.skp-ct-progress-fill { height: 100% !important; background: #008A7C !important; border-radius: 5px !important; transition: width 0.5s ease !important; min-width: 2px !important; }
.skp-ct-progress-info { display: flex !important; justify-content: space-between !important; font-size: 12px !important; color: var(--skp-text-3) !important; }
.skp-ct-progress-pct { font-weight: 700 !important; color: #008A7C !important; }

.skp-ct-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
.skp-ct-card { background: var(--skp-surface) !important; border: 1px solid var(--skp-border) !important; border-radius: var(--skp-radius) !important; padding: 16px 20px !important; cursor: pointer !important; transition: all var(--skp-transition) !important; }
.skp-ct-card:hover { box-shadow: var(--skp-shadow-md) !important; transform: translateY(-1px) !important; }
.skp-ct-overdue { border-left: 3px solid #D65438 !important; }
.skp-ct-card-top { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 6px !important; }
.skp-ct-badge { font-size: 10px !important; font-weight: 700 !important; padding: 3px 10px !important; border-radius: 6px !important; }
.skp-ct-priority-tag { font-size: 10px !important; font-weight: 600 !important; color: #D65438 !important; text-transform: uppercase !important; }
.skp-ct-card-title { font-size: 14px !important; font-weight: 600 !important; color: var(--skp-text) !important; margin: 0 0 6px !important; }
.skp-ct-card-meta { display: flex !important; gap: 14px !important; font-size: 11px !important; color: var(--skp-text-3) !important; }

/* Task Detail */
.skp-ct-detail-header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 12px !important; }
.skp-ct-detail-meta { display: flex !important; gap: 10px !important; align-items: center !important; }
.skp-ct-detail-title { font-size: 20px !important; font-weight: 700 !important; color: var(--skp-text) !important; margin: 0 0 8px !important; }
.skp-ct-detail-info { font-size: 12px !important; color: var(--skp-text-3) !important; margin-bottom: 14px !important; }
.skp-ct-desc-box { background: var(--skp-surface) !important; border: 1px solid var(--skp-border) !important; border-radius: var(--skp-radius) !important; padding: 16px 20px !important; font-size: 13px !important; line-height: 1.65 !important; margin-bottom: 16px !important; color: var(--skp-text) !important; }
.skp-ct-actions { margin-bottom: 20px !important; }

/* Conversation */
.skp-ct-conversation { margin-bottom: 20px !important; }
.skp-ct-msg { padding: 14px 18px !important; border-radius: var(--skp-radius) !important; margin-bottom: 8px !important; }
.skp-ct-msg-admin { background: #F0F6FA !important; border-left: 3px solid #1D8DB8 !important; }
.skp-ct-msg-client { background: var(--skp-surface) !important; border: 1px solid var(--skp-border) !important; }
.skp-ct-msg-header { display: flex !important; justify-content: space-between !important; margin-bottom: 6px !important; font-size: 12px !important; }
.skp-ct-msg-header strong { color: var(--skp-text) !important; }
.skp-ct-msg-header span { color: var(--skp-text-3) !important; }
.skp-ct-msg-text { font-size: 13px !important; line-height: 1.6 !important; color: var(--skp-text) !important; }
.skp-ct-msg-files { margin-top: 8px !important; display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
.skp-ct-file-link { display: inline-flex !important; align-items: center !important; gap: 4px !important; background: var(--skp-surface) !important; border: 1px solid var(--skp-border) !important; padding: 4px 10px !important; border-radius: 6px !important; font-size: 11px !important; text-decoration: none !important; color: var(--skp-text-2) !important; }
.skp-ct-file-link:hover { background: var(--skp-surface-2) !important; }

/* Reply form */
.skp-ct-reply-form { background: var(--skp-surface) !important; border: 1px solid var(--skp-border) !important; border-radius: var(--skp-radius) !important; padding: 18px 20px !important; }
.skp-ct-reply-form h3 { font-size: 13px !important; font-weight: 700 !important; margin: 0 0 10px !important; color: var(--skp-text) !important; }
.skp-ct-reply-form textarea { width: 100% !important; padding: 10px 14px !important; border: 1px solid var(--skp-border) !important; border-radius: 8px !important; font-size: 13px !important; font-family: var(--skp-font) !important; resize: vertical !important; background: #fff !important; color: var(--skp-text) !important; }
.skp-ct-reply-bottom { display: flex !important; align-items: center !important; gap: 10px !important; margin-top: 10px !important; flex-wrap: wrap !important; }
.skp-ct-file-input { display: none !important; }
.skp-ct-file-label { cursor: pointer !important; }
.skp-ct-file-names { font-size: 11px !important; color: var(--skp-text-3) !important; flex: 1 !important; }


/* ─── POMOĆ TAB ─── */
.skp-help-container { }
.skp-help-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; background: var(--skp-surface) !important; border: 1px solid var(--skp-border) !important; border-radius: var(--skp-radius) !important; overflow: hidden !important; }
.skp-help-item { display: flex !important; gap: 14px !important; padding: 16px 20px !important; border-bottom: 1px solid var(--skp-border) !important; align-items: flex-start !important; }
.skp-help-item:last-child { border-bottom: none !important; }
.skp-help-icon { width: 34px !important; height: 34px !important; border-radius: 8px !important; background: #F1F0EE !important; color: #161616 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
.skp-help-icon svg { width: 15px !important; height: 15px !important; }
.skp-help-item strong { display: block !important; font-size: 13px !important; font-weight: 600 !important; color: var(--skp-text) !important; margin-bottom: 2px !important; }
.skp-help-item p { font-size: 12px !important; line-height: 1.55 !important; color: var(--skp-text-3) !important; margin: 0 !important; }
.skp-help-contact { margin-top: 16px !important; font-size: 13px !important; color: var(--skp-text-3) !important; text-align: center !important; padding: 16px !important; background: var(--skp-surface) !important; border: 1px solid var(--skp-border) !important; border-radius: var(--skp-radius) !important; }
.skp-help-contact strong { color: var(--skp-text) !important; }

/* ─── FAKTURE ─── */
.skp-inv-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
.skp-inv-card { background: var(--skp-surface) !important; border: 1px solid var(--skp-border) !important; border-radius: var(--skp-radius) !important; padding: 16px 20px !important; }
.skp-inv-card-top { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; margin-bottom: 10px !important; }
.skp-inv-card-info { display: flex !important; flex-direction: column !important; }
.skp-inv-card-title { font-size: 14px !important; font-weight: 600 !important; color: var(--skp-text) !important; }
.skp-inv-card-num { font-size: 11px !important; color: var(--skp-text-3) !important; margin-top: 2px !important; }
.skp-inv-card-details { display: flex !important; align-items: center !important; gap: 20px !important; margin-bottom: 12px !important; }
.skp-inv-card-amount { font-size: 18px !important; font-weight: 700 !important; color: var(--skp-text) !important; }
.skp-inv-card-dates { display: flex !important; gap: 14px !important; font-size: 11px !important; color: var(--skp-text-3) !important; }
.skp-inv-card-action { display: flex !important; justify-content: flex-end !important; }

/* Invoice line graph */
.skp-inv-graph-wrap { background: var(--skp-surface) !important; border: 1px solid var(--skp-border) !important; border-radius: var(--skp-radius) !important; padding: 18px 20px !important; margin-bottom: 16px !important; }
.skp-inv-graph-title { font-size: 13px !important; font-weight: 700 !important; color: var(--skp-text) !important; margin: 0 0 4px 0 !important; }
.skp-inv-graph-sub { font-size: 11px !important; color: var(--skp-text-3) !important; margin: 0 0 14px 0 !important; }
.skp-inv-graph-svg { width: 100% !important; height: 140px !important; display: block !important; }
.skp-inv-graph-empty { text-align: center !important; font-size: 12px !important; color: var(--skp-text-3) !important; padding: 30px 0 !important; }

/* Activity line graph (Moji zadaci — 2 series) */
.skp-act-graph-wrap { background: var(--skp-surface) !important; border: 1px solid var(--skp-border) !important; border-radius: var(--skp-radius) !important; padding: 18px 20px 14px !important; margin-bottom: 14px !important; }
.skp-act-graph-header { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; margin-bottom: 12px !important; gap: 16px !important; flex-wrap: wrap !important; }
.skp-act-graph-titles { display: flex !important; flex-direction: column !important; gap: 3px !important; }
.skp-act-graph-title { font-size: 13px !important; font-weight: 700 !important; color: var(--skp-text) !important; margin: 0 !important; }
.skp-act-graph-streak { font-size: 11px !important; color: var(--skp-text-3) !important; font-weight: 500 !important; }
.skp-act-graph-streak strong { color: var(--skp-text) !important; font-weight: 700 !important; }
.skp-act-graph-legend { display: flex !important; gap: 14px !important; align-items: center !important; flex-wrap: wrap !important; }
.skp-act-legend-item { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 11px !important; color: var(--skp-text-3) !important; font-weight: 500 !important; white-space: nowrap !important; }
.skp-act-legend-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; display: inline-block !important; flex-shrink: 0 !important; }
.skp-act-legend-item strong { color: var(--skp-text) !important; font-weight: 700 !important; margin-left: 2px !important; }
.skp-act-graph-svg-box { position: relative !important; width: 100% !important; }
.skp-act-graph-svg { width: 100% !important; height: 170px !important; display: block !important; overflow: visible !important; }
.skp-act-graph-svg .skp-g-dot { transition: r 0.15s ease !important; }
.skp-act-graph-svg .skp-g-hov:hover ~ .skp-g-dot, .skp-act-graph-svg .skp-g-hov:hover + .skp-g-dot { r: 4.5 !important; }

/* Shared crosshair tooltip */
.skp-act-graph-tooltip { position: absolute !important; background: #26272C !important; color: #fff !important; padding: 8px 11px !important; border-radius: 7px !important; font-size: 11px !important; line-height: 1.5 !important; pointer-events: none !important; z-index: 100 !important; box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important; min-width: 130px !important; }
.skp-act-graph-tooltip .skp-tt-day { font-weight: 700 !important; margin-bottom: 4px !important; font-size: 11.5px !important; border-bottom: 1px solid rgba(255,255,255,0.15) !important; padding-bottom: 4px !important; }
.skp-act-graph-tooltip .skp-tt-row { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 11px !important; color: #D8D7D2 !important; padding: 1px 0 !important; }
.skp-act-graph-tooltip .skp-tt-row strong { color: #FFF !important; margin-left: auto !important; padding-left: 8px !important; }
.skp-act-graph-tooltip .skp-tt-dot { width: 7px !important; height: 7px !important; border-radius: 50% !important; display: inline-block !important; flex-shrink: 0 !important; }

@media(max-width:680px){
    .skp-act-graph-wrap { padding: 14px 14px 10px !important; }
    .skp-act-graph-header { gap: 8px !important; }
    .skp-act-graph-legend { gap: 10px !important; }
    .skp-act-legend-item { font-size: 10px !important; }
    .skp-act-graph-svg { height: 140px !important; }
}

/* ─── PREGLED REDESIGN ─── */
/* Overview row — icon left, data right */
.skp-ov-row { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 10px !important; margin-bottom: 20px !important; }
.skp-ov-box { background: var(--skp-surface) !important; border: 1px solid var(--skp-border) !important; border-radius: var(--skp-radius) !important; padding: 14px 14px !important; display: flex !important; align-items: center !important; gap: 10px !important; text-decoration: none !important; color: inherit !important; transition: all var(--skp-transition) !important; }
.skp-ov-box:hover { box-shadow: var(--skp-shadow-md) !important; transform: translateY(-1px) !important; }
.skp-ov-box-icon { width: 32px !important; height: 32px !important; border-radius: 8px !important; background: #F1F0EE !important; color: #161616 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
.skp-ov-box-icon svg { width: 14px !important; height: 14px !important; }
.skp-ov-box-data { display: flex !important; flex-direction: column !important; }
.skp-ov-box-num { font-size: 18px !important; font-weight: 700 !important; color: var(--skp-text) !important; line-height: 1.1 !important; }
.skp-ov-box-label { font-size: 10px !important; color: var(--skp-text-3) !important; margin-top: 1px !important; }

/* Preview grid — 2 columns */
.skp-pv-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin-bottom: 12px !important; }
.skp-pv-card { background: var(--skp-surface) !important; border: 1px solid var(--skp-border) !important; border-radius: var(--skp-radius) !important; padding: 16px 18px !important; }
.skp-pv-card-header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 10px !important; }
.skp-pv-card-header h3 { font-size: 13px !important; font-weight: 700 !important; color: var(--skp-text) !important; margin: 0 !important; }
.skp-pv-progress { margin-bottom: 10px !important; }
.skp-pv-bar { height: 6px !important; background: #F1F0EE !important; border-radius: 3px !important; overflow: hidden !important; margin-bottom: 4px !important; }
.skp-pv-fill { height: 100% !important; background: #008A7C !important; border-radius: 3px !important; transition: width 0.5s ease !important; min-width: 2px !important; }
.skp-pv-pct { font-size: 10px !important; color: var(--skp-text-3) !important; }
.skp-pv-item { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 8px 0 !important; border-bottom: 1px solid var(--skp-border) !important; }
.skp-pv-item:last-child { border-bottom: none !important; }
.skp-pv-item-title { font-size: 12px !important; color: var(--skp-text) !important; flex: 1 !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin-right: 10px !important; }
.skp-pv-empty { font-size: 12px !important; color: var(--skp-text-3) !important; margin: 4px 0 !important; }

/* Preview docs */
.skp-pv-doc-item { display: flex !important; align-items: center !important; gap: 10px !important; padding: 8px 0 !important; border-bottom: 1px solid var(--skp-border) !important; }
.skp-pv-doc-item:last-child { border-bottom: none !important; }
.skp-pv-doc-info { flex: 1 !important; min-width: 0 !important; }
.skp-pv-doc-title { display: block !important; font-size: 12px !important; font-weight: 600 !important; color: var(--skp-text) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.skp-pv-doc-meta { display: block !important; font-size: 10px !important; color: var(--skp-text-3) !important; }

/* Preview invoices */
.skp-pv-inv-item { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 8px 0 !important; border-bottom: 1px solid var(--skp-border) !important; }
.skp-pv-inv-item:last-child { border-bottom: none !important; }
.skp-pv-inv-info { flex: 1 !important; min-width: 0 !important; }
.skp-pv-inv-title { display: block !important; font-size: 12px !important; font-weight: 600 !important; color: var(--skp-text) !important; }
.skp-pv-inv-amount { display: block !important; font-size: 11px !important; color: var(--skp-text-3) !important; }

/* Saradnja duration */
.skp-collab-duration { display: flex !important; align-items: center !important; gap: 14px !important; background: var(--skp-surface) !important; border: 1px solid var(--skp-border) !important; border-radius: var(--skp-radius) !important; padding: 16px 20px !important; margin-bottom: 14px !important; }
.skp-collab-duration-icon { width: 40px !important; height: 40px !important; border-radius: 10px !important; background: #D5E8E5 !important; color: #0A6B5E !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
.skp-collab-duration-icon svg { width: 18px !important; height: 18px !important; }
.skp-collab-duration-info { display: flex !important; flex-direction: column !important; }
.skp-collab-duration-label { font-size: 10px !important; color: var(--skp-text-3) !important; }
.skp-collab-duration-value { font-size: 18px !important; font-weight: 700 !important; color: var(--skp-text) !important; line-height: 1.2 !important; }
.skp-collab-duration-date { font-size: 11px !important; color: var(--skp-text-3) !important; margin-top: 2px !important; }

/* Client task card actions */
.skp-ct-card { display: flex !important; align-items: center !important; gap: 12px !important; }
.skp-ct-card-body { flex: 1 !important; min-width: 0 !important; }
.skp-ct-card-actions { display: flex !important; gap: 6px !important; flex-shrink: 0 !important; }
#skp-tab-moji_zadaci .skp-ct-card-actions button.skp-ct-action-btn,
.skp-ct-card-actions button.skp-ct-action-btn {
    padding: 7px 16px !important; border-radius: 7px !important; font-size: 11px !important;
    font-weight: 600 !important; font-family: var(--skp-font) !important; cursor: pointer !important;
    transition: all 0.15s !important; white-space: nowrap !important; line-height: 1.3 !important;
    display: inline-block !important; text-decoration: none !important;
    -webkit-appearance: none !important; appearance: none !important; box-shadow: none !important;
}
#skp-tab-moji_zadaci button.skp-ct-action-reply,
button.skp-ct-action-reply {
    background: #fff !important; color: #26272C !important; border: 1.5px solid #26272C !important;
}
#skp-tab-moji_zadaci button.skp-ct-action-reply:hover,
button.skp-ct-action-reply:hover { background: #26272C !important; color: #fff !important; }
#skp-tab-moji_zadaci button.skp-ct-action-done,
button.skp-ct-action-done {
    background: #fff !important; color: #008A7C !important; border: 1.5px solid #008A7C !important;
}
#skp-tab-moji_zadaci button.skp-ct-action-done:hover,
button.skp-ct-action-done:hover { background: #008A7C !important; color: #fff !important; }
.skp-ct-card.skp-ct-done { opacity: 0.55 !important; }
.skp-ct-card.skp-ct-done .skp-ct-card-title { text-decoration: line-through !important; }
.skp-ct-meta-overdue { color: #D65438 !important; font-weight: 600 !important; }
.skp-ct-card-title { cursor: pointer !important; }
.skp-ct-card-title:hover { color: var(--skp-accent) !important; }

/* FAQ accordion */
.skp-help-faq { margin-top: 20px !important; }
.skp-faq-item { background: var(--skp-surface) !important; border: 1px solid var(--skp-border) !important; border-radius: var(--skp-radius) !important; margin-bottom: 6px !important; overflow: hidden !important; }
.skp-faq-q { padding: 14px 18px !important; font-size: 13px !important; font-weight: 600 !important; color: var(--skp-text) !important; cursor: pointer !important; display: flex !important; justify-content: space-between !important; align-items: center !important; }
.skp-faq-q::after { content: '+' !important; font-size: 18px !important; color: var(--skp-text-3) !important; transition: transform 0.2s !important; }
.skp-faq-item.open .skp-faq-q::after { content: '−' !important; }
.skp-faq-a { display: none !important; padding: 0 18px 14px !important; font-size: 13px !important; color: #666 !important; line-height: 1.6 !important; }
.skp-faq-item.open .skp-faq-a { display: block !important; }

/* Pregled notification alert */
.skp-pv-alert { display: flex !important; align-items: center !important; gap: 12px !important; background: #FFF5E6 !important; border: 1px solid #F5E6CC !important; border-radius: var(--skp-radius) !important; padding: 12px 18px !important; margin-top: 12px !important; }
.skp-pv-alert-icon { width: 32px !important; height: 32px !important; border-radius: 8px !important; background: #F5E6CC !important; color: #8B6914 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
.skp-pv-alert-icon svg { width: 14px !important; height: 14px !important; }
.skp-pv-alert-text { flex: 1 !important; font-size: 13px !important; color: #26272C !important; }
.skp-pv-alert-link { font-size: 12px !important; font-weight: 600 !important; color: #8B6914 !important; text-decoration: none !important; white-space: nowrap !important; }

/* Project progress indicator */
.skp-project-progress { background: var(--skp-surface) !important; border: 1px solid var(--skp-border) !important; border-radius: var(--skp-radius) !important; padding: 16px 20px !important; margin-bottom: 14px !important; }
.skp-pp-header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 10px !important; }
.skp-pp-title { font-size: 12px !important; font-weight: 700 !important; color: var(--skp-text) !important; }
.skp-pp-phase { font-size: 11px !important; font-weight: 600 !important; color: #fff !important; background: #008A7C !important; padding: 3px 10px !important; border-radius: 20px !important; }
.skp-pp-bar { height: 10px !important; background: #F1F0EE !important; border-radius: 5px !important; overflow: hidden !important; }
.skp-pp-fill { height: 100% !important; border-radius: 5px !important; background: linear-gradient(90deg, #008A7C, #00B89C) !important; transition: width 0.8s ease !important; min-width: 2px !important; }
.skp-pp-footer { display: flex !important; justify-content: space-between !important; margin-top: 6px !important; }
.skp-pp-pct { font-size: 14px !important; font-weight: 700 !important; color: #008A7C !important; }
.skp-pp-remaining { font-size: 11px !important; color: var(--skp-text-3) !important; }
.skp-pp-complete { font-size: 11px !important; font-weight: 600 !important; color: #008A7C !important; }


/* Notification badge pulse on nav */
.skp-nav-badge{display:inline-flex;align-items:center;justify-content:center;background:#D65438;color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:9px;padding:0 5px;margin-left:6px;animation:skp-badge-pulse 2s infinite}
@keyframes skp-badge-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

/* Toast notification */
.skp-toast{position:fixed;bottom:20px;right:20px;background:#26272C;color:#fff;padding:12px 20px;border-radius:9px;font-size:13px;font-weight:500;z-index:9999;opacity:0;transform:translateY(10px);transition:all 0.3s ease;box-shadow:0 4px 12px rgba(0,0,0,0.15);font-family:'Albert Sans',Arial,sans-serif}
.skp-toast-show{opacity:1;transform:translateY(0)}
.skp-toast-info{border-left:3px solid #1D8DB8}
.skp-toast-success{border-left:3px solid #008A7C}
.skp-toast-error{border-left:3px solid #D65438}


/* ══════════════════════════════════════════════
   v5.5.2 — REKONSTRUKCIJA (high specificity)
   Sve klase prefiksirane sa .skp-dashboard zbog
   overrida postojećih !important stilova
   ══════════════════════════════════════════════ */

/* ═══ HERO PROGRESS BAR ═══ */
.skp-dashboard .skp-hero-progress{
  background:#fff !important;
  border:1px solid #F0EFEE !important;
  border-radius:11px !important;
  padding:24px 28px !important;
  margin-bottom:16px !important;
  display:block !important;
}
.skp-dashboard .skp-hp-main{
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:24px !important;
  margin-bottom:16px !important;
}
.skp-dashboard .skp-hp-info{flex:1 1 auto !important;min-width:0 !important}
.skp-dashboard .skp-hp-title{
  font-size:16px !important;
  font-weight:700 !important;
  color:#26272C !important;
  margin:0 0 5px 0 !important;
  line-height:1.3 !important;
}
.skp-dashboard .skp-hp-sub{
  font-size:12.5px !important;
  color:#888 !important;
  line-height:1.5 !important;
  margin:0 !important;
}
.skp-dashboard .skp-hp-sub strong{color:#888 !important;font-weight:600 !important}
.skp-dashboard .skp-hp-pct-wrap{
  text-align:right !important;
  flex-shrink:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
}
.skp-dashboard .skp-hp-pct{
  font-size:32px !important;
  font-weight:700 !important;
  color:#26272C !important;
  line-height:1 !important;
  margin:0 !important;
}
.skp-dashboard .skp-hp-pct-label{
  font-size:10px !important;
  color:#888 !important;
  margin-top:4px !important;
  text-transform:uppercase !important;
  letter-spacing:0.5px !important;
  font-weight:600 !important;
}
/* ═══════════════════════════════════════════════
   HERO PROGRESS BAR — Magic tapered shape
   ═══════════════════════════════════════════════ */
.skp-dashboard .skp-hp-bar{
  height:14px !important;
  background:transparent !important;
  border-radius:0 !important;
  overflow:visible !important;
  margin:6px 0 22px 0 !important;
  position:relative !important;
}

/* Tapered track: thin on left, thick on right using clip-path */
.skp-dashboard .skp-hp-bar-track{
  position:absolute !important;
  inset:0 !important;
  background:#EFEEEA !important;
  /* Trapezoid clip: starts at 4px height on left, ends at 14px on right */
  clip-path:polygon(0 35%, 100% 0, 100% 100%, 0 65%) !important;
}

/* Tapered fill with clean blue→orange gradient (static, pinned to bar edge) */
.skp-dashboard .skp-hp-bar-fill{
  position:absolute !important;
  top:0 !important; left:0 !important;
  height:100% !important;
  background:linear-gradient(
    90deg,
    #1D8DB8 0%,
    #3E94B8 18%,
    #7890A8 42%,
    #C87858 72%,
    #D65438 100%
  ) !important;
  background-repeat:no-repeat !important;
  background-position:left center !important;
  /* background-size is set inline via PHP so gradient always spans full fill (plava→narandžasta) */
  border-radius:0 !important;
  transition:width 1.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
  clip-path:polygon(0 35%, 100% 0, 100% 100%, 0 65%) !important;
  box-shadow:0 0 14px rgba(214,84,56,0.35) !important;
}

/* Shimmer sweep — bright white streak moves left-to-right through bar */
.skp-dashboard .skp-hp-bar-shimmer{
  position:absolute !important;
  top:0 !important; left:0 !important; height:100% !important;
  width:100% !important;
  background:linear-gradient(
    90deg,
    transparent 0%,
    transparent 40%,
    rgba(255,255,255,0.55) 50%,
    transparent 60%,
    transparent 100%
  ) !important;
  background-size:250% 100% !important;
  animation:skp-hp-shimmer 3.5s ease-in-out infinite !important;
  pointer-events:none !important;
}
@keyframes skp-hp-shimmer{
  0%{background-position:150% 0}
  60%,100%{background-position:-150% 0}
}

/* Energy spark streak — periodic light surge racing to the edge */
.skp-dashboard .skp-hp-streak{
  position:absolute !important;
  top:50% !important; left:0 !important;
  width:14px !important; height:3px !important;
  background:linear-gradient(90deg, transparent 0%, rgba(255,240,210,0.95) 40%, #FFFFFF 70%, rgba(255,200,150,0.9) 100%) !important;
  border-radius:2px !important;
  transform:translate(-120%, -50%) !important;
  opacity:0 !important;
  box-shadow:0 0 6px 2px rgba(255,220,180,0.85), 0 0 12px 3px rgba(214,84,56,0.3) !important;
  filter:blur(0.3px) !important;
  animation:skp-hp-streak-go 4.5s ease-in infinite !important;
  pointer-events:none !important;
}
@keyframes skp-hp-streak-go{
  0%{transform:translate(-120%, -50%);opacity:0}
  10%{opacity:0}
  30%{opacity:1}
  88%{transform:translate(calc(100% + 120%), -50%);opacity:1}
  92%{transform:translate(calc(100% + 120%), -50%);opacity:0}
  100%{transform:translate(calc(100% + 120%), -50%);opacity:0}
}

/* ═══════════════════════════════════════════════
   MAGIC MOMENT — at the edge where fill ends
   Positioned by inline style="left:<progress>%"
   ═══════════════════════════════════════════════ */
.skp-dashboard .skp-hp-magic{
  position:absolute !important;
  top:50% !important;
  width:0 !important;
  height:0 !important;
  pointer-events:none !important;
  z-index:5 !important;
  transform:translate(0, -50%) !important;
  transition:left 1.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Two-layer warm aura — soft outer + bright inner */
.skp-dashboard .skp-hp-aura{
  position:absolute !important;
  top:50% !important; left:50% !important;
  border-radius:50% !important;
  transform:translate(-50%,-50%) !important;
  pointer-events:none !important;
}
.skp-dashboard .skp-hp-aura-outer{
  width:56px !important; height:56px !important;
  background:radial-gradient(circle, rgba(255,170,110,0.32) 0%, rgba(214,84,56,0.16) 35%, rgba(214,84,56,0) 70%) !important;
  animation:skp-hp-aura-breathe 2.6s ease-in-out infinite !important;
}
.skp-dashboard .skp-hp-aura-inner{
  width:22px !important; height:22px !important;
  background:radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,215,175,0.8) 35%, rgba(255,140,80,0.35) 70%, rgba(214,84,56,0) 100%) !important;
  animation:skp-hp-aura-breathe 1.6s ease-in-out infinite !important;
  animation-delay:-0.4s !important;
}
@keyframes skp-hp-aura-breathe{
  0%,100%{transform:translate(-50%,-50%) scale(0.85);opacity:0.75}
  50%{transform:translate(-50%,-50%) scale(1.25);opacity:1}
}

/* Expanding rings — warm orange ripple */
.skp-dashboard .skp-hp-ring{
  position:absolute !important;
  top:50% !important; left:50% !important;
  width:14px !important; height:14px !important;
  border-radius:50% !important;
  border:1.5px solid rgba(255,180,120,0.8) !important;
  transform:translate(-50%,-50%) scale(0) !important;
  opacity:0 !important;
}
.skp-dashboard .skp-hp-ring-1{
  animation:skp-hp-ring-expand 3s ease-out infinite !important;
}
.skp-dashboard .skp-hp-ring-2{
  animation:skp-hp-ring-expand 3s ease-out 1.5s infinite !important;
  border-color:rgba(214,84,56,0.75) !important;
}
@keyframes skp-hp-ring-expand{
  0%{transform:translate(-50%,-50%) scale(0.5);opacity:0}
  15%{opacity:1}
  100%{transform:translate(-50%,-50%) scale(4.5);opacity:0;border-width:0.5px}
}

/* Diamond halo — slow-rotating 4-faceted ring (the signature detail) */
.skp-dashboard .skp-hp-diamond{
  position:absolute !important;
  top:50% !important; left:50% !important;
  width:46px !important; height:46px !important;
  transform:translate(-50%,-50%) !important;
  pointer-events:none !important;
  mix-blend-mode:screen !important;
}
.skp-dashboard .skp-hp-dia-group{
  animation:skp-hp-dia-spin 10s linear infinite, skp-hp-dia-pulse 3s ease-in-out infinite !important;
  transform-origin:center !important;
  transform-box:fill-box !important;
}
@keyframes skp-hp-dia-spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes skp-hp-dia-pulse{
  0%,100%{opacity:0.55}
  50%{opacity:1}
}

/* Bright core — the heart of the magic */
.skp-dashboard .skp-hp-core{
  position:absolute !important;
  top:50% !important; left:50% !important;
  width:9px !important; height:9px !important;
  border-radius:50% !important;
  background:radial-gradient(circle, #FFFFFF 0%, #FFF2D9 35%, #FFC89A 70%, #FF9466 100%) !important;
  transform:translate(-50%,-50%) !important;
  box-shadow:
    0 0 8px 2px rgba(255,255,255,0.9),
    0 0 16px 4px rgba(255,200,150,0.7),
    0 0 24px 6px rgba(214,84,56,0.35) !important;
  animation:skp-hp-core-pulse 1.6s ease-in-out infinite !important;
}
@keyframes skp-hp-core-pulse{
  0%,100%{transform:translate(-50%,-50%) scale(0.9);filter:brightness(1)}
  50%{transform:translate(-50%,-50%) scale(1.15);filter:brightness(1.25)}
}

/* Sparkle particles — 8 star-shaped, each with unique path */
.skp-dashboard .skp-hp-sparkle{
  position:absolute !important;
  top:50% !important; left:50% !important;
  width:10px !important; height:10px !important;
  transform:translate(-50%,-50%) scale(0) rotate(0deg) !important;
  opacity:0 !important;
  pointer-events:none !important;
  filter:drop-shadow(0 0 3px rgba(255,220,180,0.9)) drop-shadow(0 0 1px #FFF) !important;
}

.skp-dashboard .skp-hp-spk-1{
  animation:skp-hp-spk-1 2.4s ease-out infinite !important;
}
.skp-dashboard .skp-hp-spk-2{
  width:7px !important; height:7px !important;
  animation:skp-hp-spk-2 2.8s ease-out 0.2s infinite !important;
}
.skp-dashboard .skp-hp-spk-3{
  width:12px !important; height:12px !important;
  animation:skp-hp-spk-3 2.6s ease-out 0.5s infinite !important;
}
.skp-dashboard .skp-hp-spk-4{
  width:8px !important; height:8px !important;
  animation:skp-hp-spk-4 3.0s ease-out 0.9s infinite !important;
}
.skp-dashboard .skp-hp-spk-5{
  width:6px !important; height:6px !important;
  animation:skp-hp-spk-5 2.3s ease-out 1.2s infinite !important;
}
.skp-dashboard .skp-hp-spk-6{
  width:10px !important; height:10px !important;
  animation:skp-hp-spk-6 2.7s ease-out 0.3s infinite !important;
}
.skp-dashboard .skp-hp-spk-7{
  width:5px !important; height:5px !important;
  animation:skp-hp-spk-7 2.5s ease-out 1.5s infinite !important;
}
.skp-dashboard .skp-hp-spk-8{
  width:7px !important; height:7px !important;
  animation:skp-hp-spk-8 2.9s ease-out 0.7s infinite !important;
}

/* Each sparkle: birth at center → fly out in unique direction while rotating → fade & shrink */
@keyframes skp-hp-spk-1{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0) rotate(0deg)}
  15%{opacity:1;transform:translate(calc(-50% + 8px), calc(-50% - 10px)) scale(1.1) rotate(90deg)}
  70%{opacity:0.6;transform:translate(calc(-50% + 18px), calc(-50% - 22px)) scale(0.7) rotate(270deg)}
  100%{opacity:0;transform:translate(calc(-50% + 26px), calc(-50% - 32px)) scale(0.2) rotate(360deg)}
}
@keyframes skp-hp-spk-2{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0) rotate(0deg)}
  18%{opacity:1;transform:translate(calc(-50% - 9px), calc(-50% - 8px)) scale(1) rotate(-80deg)}
  70%{opacity:0.5;transform:translate(calc(-50% - 20px), calc(-50% - 20px)) scale(0.6) rotate(-230deg)}
  100%{opacity:0;transform:translate(calc(-50% - 30px), calc(-50% - 28px)) scale(0.2) rotate(-360deg)}
}
@keyframes skp-hp-spk-3{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0) rotate(0deg)}
  12%{opacity:1;transform:translate(calc(-50% + 12px), calc(-50% + 4px)) scale(1.2) rotate(120deg)}
  70%{opacity:0.5;transform:translate(calc(-50% + 26px), calc(-50% + 12px)) scale(0.7) rotate(300deg)}
  100%{opacity:0;transform:translate(calc(-50% + 38px), calc(-50% + 18px)) scale(0.15) rotate(420deg)}
}
@keyframes skp-hp-spk-4{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0) rotate(0deg)}
  15%{opacity:1;transform:translate(calc(-50% + 2px), calc(-50% + 11px)) scale(1) rotate(-100deg)}
  70%{opacity:0.5;transform:translate(calc(-50% + 6px), calc(-50% + 24px)) scale(0.6) rotate(-270deg)}
  100%{opacity:0;transform:translate(calc(-50% + 10px), calc(-50% + 34px)) scale(0.2) rotate(-400deg)}
}
@keyframes skp-hp-spk-5{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0) rotate(0deg)}
  20%{opacity:1;transform:translate(calc(-50% - 7px), calc(-50% + 9px)) scale(1) rotate(110deg)}
  75%{opacity:0.4;transform:translate(calc(-50% - 16px), calc(-50% + 22px)) scale(0.6) rotate(280deg)}
  100%{opacity:0;transform:translate(calc(-50% - 22px), calc(-50% + 32px)) scale(0.2) rotate(380deg)}
}
@keyframes skp-hp-spk-6{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0) rotate(0deg)}
  14%{opacity:1;transform:translate(calc(-50% + 16px), calc(-50% - 2px)) scale(1.1) rotate(-130deg)}
  70%{opacity:0.6;transform:translate(calc(-50% + 30px), calc(-50% - 4px)) scale(0.7) rotate(-290deg)}
  100%{opacity:0;transform:translate(calc(-50% + 42px), calc(-50% - 6px)) scale(0.2) rotate(-400deg)}
}
@keyframes skp-hp-spk-7{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0) rotate(0deg)}
  22%{opacity:1;transform:translate(calc(-50% + 4px), calc(-50% - 13px)) scale(1) rotate(160deg)}
  75%{opacity:0.4;transform:translate(calc(-50% + 10px), calc(-50% - 26px)) scale(0.5) rotate(310deg)}
  100%{opacity:0;transform:translate(calc(-50% + 14px), calc(-50% - 36px)) scale(0.15) rotate(420deg)}
}
@keyframes skp-hp-spk-8{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0) rotate(0deg)}
  18%{opacity:1;transform:translate(calc(-50% - 5px), calc(-50% + 2px)) scale(1.1) rotate(-90deg)}
  70%{opacity:0.6;transform:translate(calc(-50% - 14px), calc(-50% + 6px)) scale(0.7) rotate(-250deg)}
  100%{opacity:0;transform:translate(calc(-50% - 22px), calc(-50% + 10px)) scale(0.2) rotate(-380deg)}
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .skp-dashboard .skp-hp-bar-shimmer,
  .skp-dashboard .skp-hp-streak,
  .skp-dashboard .skp-hp-aura,
  .skp-dashboard .skp-hp-ring,
  .skp-dashboard .skp-hp-dia-group,
  .skp-dashboard .skp-hp-core,
  .skp-dashboard .skp-hp-sparkle{
    animation:none !important;
  }
  .skp-dashboard .skp-hp-core{opacity:1 !important}
  .skp-dashboard .skp-hp-aura-inner{opacity:0.8 !important}
}

.skp-dashboard .skp-hp-phases{
  display:grid !important;
  grid-template-columns:repeat(var(--phase-count, 6), 1fr) !important;
  gap:6px !important;
  margin:0 !important;
}
.skp-dashboard .skp-hp-phase{
  padding:10px 8px !important;
  text-align:center !important;
  border-radius:8px !important;
  font-size:11px !important;
  font-weight:600 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  min-height:56px !important;
}
.skp-dashboard .skp-hp-phase-done{background:#D6ECF5 !important;color:#1D8DB8 !important}
.skp-dashboard .skp-hp-phase-active{
  background:#D65438 !important;
  color:#fff !important;
  box-shadow:0 4px 12px rgba(214,84,56,0.28) !important;
}
.skp-dashboard .skp-hp-phase-pending{background:#F7F6F3 !important;color:#A0A0A0 !important}
.skp-dashboard .skp-hp-phase-num{
  font-weight:700 !important;
  font-size:12px !important;
  line-height:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:14px !important;
}
.skp-dashboard .skp-hp-phase-name{
  font-size:11px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
}

@media(max-width:720px){
  .skp-dashboard .skp-hero-progress{padding:18px 14px !important}
  .skp-dashboard .skp-hp-pct{font-size:26px !important}
  /* Phases: ALWAYS one row on mobile, compact sizing scaled to count */
  .skp-dashboard .skp-hp-phases{
    grid-template-columns:repeat(var(--phase-count, 6), 1fr) !important;
    gap:3px !important;
  }
  .skp-dashboard .skp-hp-phase{
    padding:6px 3px !important;
    min-height:46px !important;
    gap:2px !important;
    border-radius:6px !important;
  }
  .skp-dashboard .skp-hp-phase-num{
    font-size:11px !important;
    height:12px !important;
  }
  .skp-dashboard .skp-hp-phase-num svg{
    width:10px !important;
    height:10px !important;
  }
  .skp-dashboard .skp-hp-phase-name{
    font-size:9px !important;
    font-weight:600 !important;
    line-height:1.1 !important;
    hyphens:auto !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
    text-align:center !important;
    -webkit-hyphens:auto !important;
  }
}
@media(max-width:480px){
  .skp-dashboard .skp-hp-phase{padding:5px 2px !important; min-height:42px !important}
  .skp-dashboard .skp-hp-phase-name{font-size:8.5px !important}
}

/* ═══ ALJOŠA ONLINE + DANAS DIGEST ═══ */
.skp-dashboard .skp-client-status-row{
  display:grid !important;
  grid-template-columns:260px 1fr !important;
  gap:12px !important;
  margin-bottom:14px !important;
  align-items:stretch !important;
}
.skp-dashboard .skp-client-status-row > *:only-child{grid-column:1 / -1 !important}

.skp-dashboard .skp-pulse-card{
  background:#F1FBF8 !important;
  border:1px solid #CCE8E1 !important;
  border-left:3px solid #008A7C !important;
  border-radius:9px !important;
  padding:14px 16px !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  margin:0 !important;
}
.skp-dashboard .skp-pulse-dot{
  width:10px !important;
  height:10px !important;
  background:#008A7C !important;
  border-radius:50% !important;
  flex-shrink:0 !important;
  position:relative !important;
  animation:skp-pulse-fade 2s infinite !important;
}
.skp-dashboard .skp-pulse-dot::before{
  content:'' !important;
  position:absolute !important;
  top:-4px !important;
  left:-4px !important;
  right:-4px !important;
  bottom:-4px !important;
  border-radius:50% !important;
  background:rgba(0,138,124,0.3) !important;
  animation:skp-pulse-expand 2s infinite !important;
}
@keyframes skp-pulse-expand{
  0%{transform:scale(0.7);opacity:0.8}
  70%{transform:scale(1.8);opacity:0}
  100%{transform:scale(1.8);opacity:0}
}
@keyframes skp-pulse-fade{
  0%,100%{opacity:1}
  50%{opacity:0.6}
}
.skp-dashboard .skp-pulse-text{line-height:1.3 !important;min-width:0 !important}
.skp-dashboard .skp-pulse-text strong{
  display:block !important;
  font-size:13px !important;
  color:#008A7C !important;
  font-weight:700 !important;
  margin:0 0 2px 0 !important;
}

/* "Aljoša odmara" variant — muted gray tone, no animation */
.skp-dashboard .skp-pulse-card-rest{
  background:#F5F4F1 !important;
  border:1px solid #E0DED8 !important;
  border-left:3px solid #A0A0A0 !important;
}
.skp-dashboard .skp-pulse-dot-rest{
  background:#A0A0A0 !important;
  animation:none !important;
}
.skp-dashboard .skp-pulse-dot-rest::before{
  display:none !important;
}
.skp-dashboard .skp-pulse-card-rest .skp-pulse-text strong{
  color:#666 !important;
}
.skp-dashboard .skp-pulse-text span{
  display:block !important;
  font-size:11.5px !important;
  color:#5F7875 !important;
}

.skp-dashboard .skp-today-digest{
  background:#FAFAF7 !important;
  border:1px solid #E6E5E0 !important;
  border-radius:9px !important;
  padding:14px 18px !important;
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  flex-wrap:wrap !important;
  margin:0 !important;
}
.skp-dashboard .skp-today-head{
  display:flex !important;
  align-items:baseline !important;
  gap:8px !important;
  flex-shrink:0 !important;
}
.skp-dashboard .skp-today-title{
  font-size:12px !important;
  font-weight:700 !important;
  color:#26272C !important;
  text-transform:uppercase !important;
  letter-spacing:0.8px !important;
}
.skp-dashboard .skp-today-date{
  font-size:11px !important;
  color:#888 !important;
  font-weight:500 !important;
}
.skp-dashboard .skp-today-items{
  display:flex !important;
  gap:20px !important;
  flex-wrap:wrap !important;
  font-size:12.5px !important;
  flex:1 !important;
}
.skp-dashboard .skp-today-item{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  color:#26272C !important;
  white-space:nowrap !important;
}
.skp-dashboard .skp-today-item svg{flex-shrink:0 !important;width:14px !important;height:14px !important}
.skp-dashboard .skp-today-primary{color:#1D8DB8 !important}
.skp-dashboard .skp-today-success{color:#008A7C !important}
.skp-dashboard .skp-today-warning{color:#8B6914 !important}
.skp-dashboard .skp-today-item strong{font-weight:700 !important}

@media(max-width:720px){
  .skp-dashboard .skp-client-status-row{grid-template-columns:1fr !important}
  .skp-dashboard .skp-today-digest{padding:12px 14px !important;flex-direction:column !important;align-items:flex-start !important;gap:10px !important}
}

/* ═══ OVERVIEW STAT CARDS (4 kolone) ═══ */
.skp-dashboard .skp-ov-row{
  display:grid !important;
  grid-template-columns:repeat(4, 1fr) !important;
  gap:10px !important;
  margin-bottom:16px !important;
}
@media(max-width:900px){.skp-dashboard .skp-ov-row{grid-template-columns:repeat(2, 1fr) !important}}

/* ═══ CIRCULAR RINGS U PV CARDS ═══ */
.skp-dashboard .skp-pv-ring-wrap{
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  padding:6px 0 14px 0 !important;
  border-bottom:1px solid #F5F4F0 !important;
  margin:0 0 12px 0 !important;
}
.skp-dashboard .skp-pv-ring{
  position:relative !important;
  width:68px !important;
  height:68px !important;
  flex-shrink:0 !important;
}
.skp-dashboard .skp-pv-ring svg{display:block !important;width:68px !important;height:68px !important}
.skp-dashboard .skp-pv-ring-text{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;
  text-align:center !important;
}
.skp-dashboard .skp-pv-ring-num{
  font-size:14px !important;
  font-weight:700 !important;
  color:#26272C !important;
}
.skp-dashboard .skp-pv-ring-info{flex:1 !important;min-width:0 !important}
.skp-dashboard .skp-pv-ring-big{
  font-size:22px !important;
  font-weight:700 !important;
  color:#26272C !important;
  line-height:1 !important;
  margin:0 0 4px 0 !important;
}
.skp-dashboard .skp-pv-ring-big span{
  font-size:14px !important;
  color:#888 !important;
  font-weight:500 !important;
}
.skp-dashboard .skp-pv-ring-label{
  font-size:11px !important;
  color:#888 !important;
  line-height:1.3 !important;
}

/* ═══ DARK PAKET KARTICA (FIKSIRAN LAYOUT) ═══ */
.skp-dashboard .skp-pkg-card{
  position:relative !important;
  background:linear-gradient(135deg, #26272C 0%, #1a1b1f 100%) !important;
  border-radius:12px !important;
  padding:0 !important;
  color:#fff !important;
  overflow:hidden !important;
  margin:0 0 16px 0 !important;
  border:none !important;
  box-sizing:border-box !important;
}
.skp-dashboard .skp-pkg-bg{
  position:absolute !important;
  top:-70px !important;
  right:-70px !important;
  width:240px !important;
  height:240px !important;
  background:#D65438 !important;
  border-radius:50% !important;
  opacity:0.14 !important;
  pointer-events:none !important;
  z-index:0 !important;
}
.skp-dashboard .skp-pkg-content{
  position:relative !important;
  z-index:1 !important;
  padding:28px 32px !important;
  display:block !important;
}
.skp-dashboard .skp-pkg-header{
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:20px !important;
  margin:0 0 22px 0 !important;
  flex-wrap:wrap !important;
}
.skp-dashboard .skp-pkg-label{
  font-size:10.5px !important;
  text-transform:uppercase !important;
  letter-spacing:1.5px !important;
  color:rgba(255,255,255,0.55) !important;
  margin:0 0 6px 0 !important;
  font-weight:700 !important;
}
.skp-dashboard .skp-pkg-name{
  font-size:24px !important;
  font-weight:700 !important;
  color:#fff !important;
  line-height:1.15 !important;
  margin:0 !important;
}
.skp-dashboard .skp-pkg-price-box{
  text-align:right !important;
  flex-shrink:0 !important;
  padding-top:4px !important;
}
.skp-dashboard .skp-pkg-price-amount{
  font-size:26px !important;
  font-weight:700 !important;
  color:#F5C4B3 !important;
  line-height:1 !important;
  margin:0 !important;
}
.skp-dashboard .skp-pkg-price-label{
  font-size:10.5px !important;
  color:rgba(255,255,255,0.55) !important;
  text-transform:uppercase !important;
  letter-spacing:0.8px !important;
  margin-top:5px !important;
  font-weight:600 !important;
}
.skp-dashboard .skp-pkg-meta{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap:24px !important;
  padding:18px 0 !important;
  border-top:1px solid rgba(255,255,255,0.1) !important;
  border-bottom:1px solid rgba(255,255,255,0.1) !important;
  margin:0 0 20px 0 !important;
}
.skp-dashboard .skp-pkg-meta-item{min-width:0 !important}
.skp-dashboard .skp-pkg-meta-label{
  font-size:10.5px !important;
  text-transform:uppercase !important;
  letter-spacing:0.8px !important;
  color:rgba(255,255,255,0.45) !important;
  margin:0 0 5px 0 !important;
  font-weight:700 !important;
}
.skp-dashboard .skp-pkg-meta-value{
  font-size:15px !important;
  font-weight:600 !important;
  color:#fff !important;
  line-height:1.2 !important;
}
.skp-dashboard .skp-pkg-meta-sub{
  font-size:11px !important;
  color:rgba(255,255,255,0.5) !important;
  margin-top:4px !important;
}
.skp-dashboard .skp-pkg-features-section{padding-top:6px !important;margin:0 !important}
.skp-dashboard .skp-pkg-features-label{
  font-size:10.5px !important;
  text-transform:uppercase !important;
  letter-spacing:0.8px !important;
  color:rgba(255,255,255,0.45) !important;
  margin:0 0 14px 0 !important;
  font-weight:700 !important;
}
.skp-dashboard .skp-pkg-features{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap:10px 20px !important;
}
.skp-dashboard .skp-pkg-feat{
  display:flex !important;
  gap:10px !important;
  align-items:center !important;
  font-size:13px !important;
  color:#fff !important;
  line-height:1.4 !important;
  min-width:0 !important;
}
.skp-dashboard .skp-pkg-feat span{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
.skp-dashboard .skp-pkg-check{
  width:18px !important;
  height:18px !important;
  background:#008A7C !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-shrink:0 !important;
  color:#fff !important;
}

@media(max-width:640px){
  .skp-dashboard .skp-pkg-content{padding:22px 20px !important}
  .skp-dashboard .skp-pkg-header{flex-direction:column !important;gap:12px !important}
  .skp-dashboard .skp-pkg-price-box{text-align:left !important}
  .skp-dashboard .skp-pkg-price-amount{font-size:24px !important}
  .skp-dashboard .skp-pkg-name{font-size:20px !important}
  .skp-dashboard .skp-pkg-features{grid-template-columns:1fr !important}
  .skp-dashboard .skp-pkg-meta{gap:16px !important;padding:14px 0 !important}
}

/* ═══ TIMELINE NOTIFIKACIJE (pravilna vertikalna linija) ═══ */
.skp-dashboard .skp-timeline{
  position:relative !important;
  padding:8px 0 0 0 !important;
  margin:0 !important;
}
/* Jedna linija koja ide kroz ceo timeline */
.skp-dashboard .skp-timeline::before{
  content:'' !important;
  position:absolute !important;
  left:8px !important;
  top:20px !important;
  bottom:20px !important;
  width:2px !important;
  background:#E0DED8 !important;
  z-index:0 !important;
}
.skp-dashboard .skp-tl-group{
  margin:0 0 20px 0 !important;
  position:relative !important;
}
.skp-dashboard .skp-tl-group:last-child{margin-bottom:0 !important}
.skp-dashboard .skp-tl-date{
  font-size:12px !important;
  font-weight:700 !important;
  color:#26272C !important;
  text-transform:uppercase !important;
  letter-spacing:0.5px !important;
  padding:0 0 12px 0 !important;
  margin:0 0 0 30px !important;
  position:relative !important;
  background:transparent !important;
  z-index:2 !important;
  display:inline-block !important;
}
.skp-dashboard .skp-tl-group:first-child .skp-tl-date{padding-top:0 !important}
.skp-dashboard .skp-tl-item{
  display:grid !important;
  grid-template-columns:18px 1fr !important;
  gap:14px !important;
  padding:0 0 12px 0 !important;
  position:relative !important;
  cursor:pointer !important;
  transition:transform 0.15s !important;
  align-items:center !important;
}
.skp-dashboard .skp-tl-item:last-child{padding-bottom:0 !important}
.skp-dashboard .skp-tl-item:hover{transform:translateX(2px)}

.skp-dashboard .skp-tl-dot{
  width:14px !important;
  height:14px !important;
  border-radius:50% !important;
  background:#fff !important;
  border:2px solid #D3D1CC !important;
  flex-shrink:0 !important;
  margin-top:0 !important;
  margin-left:0 !important;
  position:relative !important;
  z-index:3 !important;
  padding:0 !important;
  box-sizing:border-box !important;
}
.skp-dashboard .skp-tl-dot-active{
  border-color:#D65438 !important;
  background:#D65438 !important;
  box-shadow:0 0 0 3px rgba(214,84,56,0.1) !important;
}

.skp-dashboard .skp-tl-card{
  background:#fff !important;
  border:1px solid #EDEBE5 !important;
  border-radius:9px !important;
  padding:13px 16px !important;
  transition:all 0.15s !important;
  min-width:0 !important;
}
.skp-dashboard .skp-tl-item.skp-unread .skp-tl-card{
  background:#FEFAF8 !important;
  border-color:#EBD9D0 !important;
}
.skp-dashboard .skp-tl-item:hover .skp-tl-card{
  border-color:#D65438 !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.04) !important;
}
.skp-dashboard .skp-tl-title{
  font-size:13px !important;
  font-weight:700 !important;
  color:#26272C !important;
  margin:0 0 4px 0 !important;
  line-height:1.35 !important;
}
.skp-dashboard .skp-tl-msg{
  font-size:12.5px !important;
  color:#666 !important;
  margin:0 0 6px 0 !important;
  line-height:1.5 !important;
}
.skp-dashboard .skp-tl-time{
  font-size:11px !important;
  color:#9A9A9A !important;
  font-weight:500 !important;
}

/* ═══ CHAT BUBBLE (jednostavan flex) ═══ */
.skp-dashboard .sst-reply-item{
  display:flex !important;
  gap:12px !important;
  margin-bottom:20px !important;
  padding:0 !important;
  align-items:flex-start !important;
  background:transparent !important;
  border:none !important;
  border-left:none !important;
}
.skp-dashboard .sst-reply-item.sst-reply-admin{
  flex-direction:row-reverse !important;
}
.skp-dashboard .sst-reply-item .sst-avatar,
.skp-dashboard .sst-reply-item .sst-avatar-fallback{
  position:static !important;
  width:38px !important;
  height:38px !important;
  border-radius:50% !important;
  flex-shrink:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#fff !important;
  font-weight:700 !important;
  font-size:13px !important;
  overflow:hidden !important;
  border:none !important;
  margin:0 !important;
  left:auto !important;
  top:auto !important;
}
.skp-dashboard .sst-reply-item .sst-avatar img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
.skp-dashboard .sst-reply-item .sst-avatar-client{background:#1D8DB8 !important}
.skp-dashboard .sst-reply-item .sst-avatar-admin{background:#D65438 !important}

.skp-dashboard .sst-reply-bubble-wrap{
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  max-width:calc(100% - 50px) !important;
}
.skp-dashboard .sst-reply-item.sst-reply-admin .sst-reply-bubble-wrap{
  align-items:flex-end !important;
}
.skp-dashboard .sst-reply-item .sst-reply-sender{
  font-size:11px !important;
  color:#888 !important;
  margin:0 0 5px 0 !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  padding:0 !important;
}
.skp-dashboard .sst-reply-item.sst-reply-admin .sst-reply-sender{
  justify-content:flex-end !important;
}
.skp-dashboard .sst-reply-item .sst-reply-sender strong{
  color:#26272C !important;
  font-weight:700 !important;
}
.skp-dashboard .sst-reply-item .sst-admin-tag{
  background:#D65438 !important;
  color:#fff !important;
  font-size:9px !important;
  padding:2px 7px !important;
  border-radius:3px !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:0.3px !important;
}
.skp-dashboard .sst-reply-item .sst-reply-time{
  color:#aaa !important;
  font-size:10.5px !important;
  margin:0 !important;
}
.skp-dashboard .sst-reply-item .sst-reply-body{
  background:#F3F2EE !important;
  padding:12px 16px !important;
  border-radius:14px 14px 14px 4px !important;
  font-size:13px !important;
  color:#26272C !important;
  line-height:1.5 !important;
  word-wrap:break-word !important;
  overflow-wrap:break-word !important;
  margin:0 !important;
  border:none !important;
}
.skp-dashboard .sst-reply-item.sst-reply-admin .sst-reply-body{
  background:#FBE5DD !important;
  border-radius:14px 14px 4px 14px !important;
}
.skp-dashboard .sst-reply-item .sst-att-list{
  margin:8px 0 0 0 !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
}
.skp-dashboard .sst-reply-item.sst-reply-admin .sst-att-list{
  justify-content:flex-end !important;
}
.skp-dashboard .sst-reply-item .sst-att-link{
  background:#fff !important;
  border:1px solid #E8E6DE !important;
  padding:5px 10px !important;
  border-radius:6px !important;
  font-size:11px !important;
  color:#26272C !important;
  display:inline-flex !important;
  gap:5px !important;
  align-items:center !important;
  text-decoration:none !important;
  font-weight:500 !important;
  transition:border-color 0.15s !important;
}
.skp-dashboard .sst-reply-item .sst-att-link:hover{
  border-color:#D65438 !important;
  color:#26272C !important;
  background:#fff !important;
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE TABS BAR (v5.5.4) — horizontalna skrolujuca traka
   Pokazuje sve tabove, uvek vidljiv na vrhu na mobile-u
   ═══════════════════════════════════════════════════════════════ */

/* DESKTOP: sakrij mobile tabs */
@media(min-width:961px){
  body .skp-mobile-tabs{
    display:none !important;
    visibility:hidden !important;
  }
}

/* MOBILE: pokazi horizontalnu skrolujucu traku */
@media(max-width:960px){
  body .skp-mobile-tabs{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    position:sticky !important;
    top:0 !important;
    z-index:50 !important;
    background:#fff !important;
    border-bottom:1px solid #E8E6DE !important;
    padding:10px 12px !important;
    margin:0 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
    width:100% !important;
    max-width:100vw !important;
  }
  body .skp-mobile-tabs::-webkit-scrollbar{
    display:none !important;
    height:0 !important;
    width:0 !important;
  }
  
  body .skp-mobile-tabs .skp-mtab{
    display:inline-flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    padding:9px 14px !important;
    border-radius:9px !important;
    background:#F5F4F0 !important;
    color:#26272C !important;
    font-size:13px !important;
    font-weight:600 !important;
    text-decoration:none !important;
    white-space:nowrap !important;
    flex-shrink:0 !important;
    border:none !important;
    transition:all 0.15s !important;
    position:relative !important;
    cursor:pointer !important;
    line-height:1 !important;
    box-sizing:border-box !important;
  }
  
  body .skp-mobile-tabs .skp-mtab:hover,
  body .skp-mobile-tabs .skp-mtab:active{
    background:#EAE8E2 !important;
    color:#26272C !important;
  }
  
  body .skp-mobile-tabs .skp-mtab-active{
    background:#D65438 !important;
    color:#fff !important;
  }
  body .skp-mobile-tabs .skp-mtab-active:hover,
  body .skp-mobile-tabs .skp-mtab-active:active{
    background:#C04A30 !important;
    color:#fff !important;
  }
  
  body .skp-mobile-tabs .skp-mtab-icon{
    width:16px !important;
    height:16px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-shrink:0 !important;
  }
  body .skp-mobile-tabs .skp-mtab-icon svg{
    width:15px !important;
    height:15px !important;
    display:block !important;
  }
  
  body .skp-mobile-tabs .skp-mtab-label{
    font-size:13px !important;
    font-weight:600 !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }
  
  body .skp-mobile-tabs .skp-mtab-badge{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:18px !important;
    height:18px !important;
    padding:0 5px !important;
    background:#1D8DB8 !important;
    color:#fff !important;
    font-size:10px !important;
    font-weight:700 !important;
    border-radius:9px !important;
    margin-left:2px !important;
    line-height:1 !important;
  }
  body .skp-mobile-tabs .skp-mtab-badge-accent{
    background:#FEBC2E !important;
    color:#26272C !important;
  }
  body .skp-mobile-tabs .skp-mtab-active .skp-mtab-badge{
    background:#fff !important;
    color:#D65438 !important;
  }
  body .skp-mobile-tabs .skp-mtab-active .skp-mtab-badge-accent{
    background:#26272C !important;
    color:#fff !important;
  }
  
  /* ─── PODESI MAIN CONTENT za mobile ─── */
  body .skp-dashboard{
    display:block !important;
    padding-top:0 !important;
  }
  body .skp-dashboard .skp-sidebar{
    display:none !important;
  }
  body .skp-dashboard .skp-main{
    padding:18px !important;
    padding-bottom:24px !important;
    border-radius:0 !important;
    width:100% !important;
    margin:0 !important;
  }
}

@media(max-width:420px){
  body .skp-mobile-tabs{
    padding:10px 10px !important;
  }
  body .skp-mobile-tabs .skp-mtab{
    padding:9px 12px !important;
    font-size:12.5px !important;
  }
  body .skp-dashboard .skp-main{
    padding:14px !important;
  }
}