/* ═══════════════════════════════════════════════════════════════
   SEOSAJT KLIJENT PANEL v1.0.2 — Contained Layout
   Dashboard lives INSIDE the page, header/footer of site stay.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Variables ─── */
:root {
    --skp-bg: #F4F3F2;
    --skp-surface: #FFFFFF;
    --skp-surface-2: #F9F8F7;
    --skp-border: #E5E4E2;
    --skp-border-focus: #D65438;
    --skp-text: #26272C;
    --skp-text-2: #5A5B63;
    --skp-text-3: #8C8D94;
    --skp-accent: #D65438;
    --skp-accent-hover: #C04A30;
    --skp-accent-light: rgba(214,84,56,0.06);
    --skp-blue: #1D8DB8;
    --skp-blue-light: rgba(29,141,184,0.06);
    --skp-green: #008A7C;
    --skp-green-light: rgba(0,138,124,0.06);
    --skp-red: #D65438;
    --skp-yellow: #E5A100;
    --skp-shadow: 0 1px 3px rgba(0,0,0,0.05);
    --skp-shadow-md: 0 4px 16px rgba(0,0,0,0.07);
    --skp-radius: 10px;
    --skp-radius-sm: 7px;
    --skp-font: 'Albert Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --skp-transition: 0.18s ease;
}
.skp-dark {
    --skp-bg: #18191D;
    --skp-surface: #1E1F24;
    --skp-surface-2: #26272C;
    --skp-border: #35363C;
    --skp-text: #E6E6E8;
    --skp-text-2: #9FA0A7;
    --skp-text-3: #6B6C73;
    --skp-accent-light: rgba(214,84,56,0.1);
    --skp-blue-light: rgba(29,141,184,0.1);
    --skp-green-light: rgba(0,138,124,0.1);
    --skp-shadow: 0 1px 3px rgba(0,0,0,0.15);
    --skp-shadow-md: 0 4px 16px rgba(0,0,0,0.25);
}

/* ─── Scoped Reset — only SKP elements, not embedded SST ─── */
.skp-sidebar *, .skp-sidebar *::before, .skp-sidebar *::after,
.skp-main > .skp-tab-content:not(#skp-tab-zadaci) *, 
.skp-main > .skp-tab-content:not(#skp-tab-zadaci) *::before, 
.skp-main > .skp-tab-content:not(#skp-tab-zadaci) *::after,
.skp-main > .skp-page-header *, .skp-main > .skp-page-header *::before, .skp-main > .skp-page-header *::after,
.skp-auth-wrapper *, .skp-auth-wrapper *::before, .skp-auth-wrapper *::after {
    margin: 0; padding: 0; box-sizing: border-box;
}
.skp-dashboard, .skp-auth-wrapper {
    font-family: var(--skp-font) !important;
    font-size: 14px;
    line-height: 1.55;
    color: var(--skp-text);
    -webkit-font-smoothing: antialiased;
}

/* Override theme input defaults — only in non-SST tabs */
.skp-tab-content:not(#skp-tab-zadaci) input,
.skp-tab-content:not(#skp-tab-zadaci) select,
.skp-tab-content:not(#skp-tab-zadaci) textarea,
.skp-tab-content:not(#skp-tab-zadaci) button,
.skp-sidebar input, .skp-sidebar select, .skp-sidebar textarea, .skp-sidebar button,
.skp-auth-wrapper input, .skp-auth-wrapper select, .skp-auth-wrapper textarea, .skp-auth-wrapper button {
    font-family: var(--skp-font) !important;
    font-size: 14px !important;
    color: var(--skp-text) !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    margin: 0 !important;
    padding: 0 !important;
    outline: none !important;
    line-height: 1.55 !important;
}

/* ─── Typography ─── */
.skp-page-title { font-size: 21px !important; font-weight: 700 !important; color: var(--skp-text) !important; }
.skp-section-title { font-size: 10px !important; font-weight: 700 !important; color: var(--skp-text-3) !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; margin-bottom: 14px !important; }
.skp-card-title { font-size: 14px !important; font-weight: 700 !important; margin-bottom: 18px !important; color: var(--skp-text) !important; }

/* ─── Card ─── */
.skp-card {
    background: var(--skp-surface) !important;
    border: 1px solid var(--skp-border) !important;
    border-radius: var(--skp-radius) !important;
    padding: 22px !important;
    box-shadow: var(--skp-shadow) !important;
}

/* ─── Buttons ─── */
.skp-btn {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    gap: 7px !important; font-family: var(--skp-font) !important; font-weight: 600 !important;
    font-size: 13px !important; padding: 9px 18px !important; border-radius: var(--skp-radius-sm) !important;
    cursor: pointer !important; transition: all var(--skp-transition) !important;
    text-decoration: none !important; white-space: nowrap !important; position: relative !important;
}
.skp-btn svg { width: 15px !important; height: 15px !important; flex-shrink: 0 !important; }
.skp-btn-primary { background: var(--skp-accent) !important; color: #fff !important; }
.skp-btn-primary:hover { background: var(--skp-accent-hover) !important; }
.skp-btn-ghost { background: transparent !important; color: var(--skp-text-2) !important; border: 1px solid var(--skp-border) !important; }
.skp-btn-ghost:hover { background: var(--skp-surface-2) !important; color: var(--skp-text) !important; }
.skp-btn-full { width: 100% !important; }
.skp-btn-sm { padding: 6px 12px !important; font-size: 12px !important; }
.skp-btn-lg { padding: 12px 26px !important; font-size: 15px !important; }
.skp-btn-icon { background: none !important; border: none !important; cursor: pointer !important; padding: 5px !important; color: var(--skp-text-3) !important; }
.skp-btn-icon:hover { color: var(--skp-accent) !important; }
.skp-btn-google { background: var(--skp-surface) !important; color: var(--skp-text) !important; border: 1px solid var(--skp-border) !important; }
.skp-btn-google:hover { background: var(--skp-surface-2) !important; }
.skp-btn-loader { display: none !important; width: 15px !important; height: 15px !important; border: 2px solid rgba(255,255,255,0.3) !important; border-top-color: #fff !important; border-radius: 50% !important; animation: skp-spin .6s linear infinite !important; }
.skp-btn.skp-loading .skp-btn-text { visibility: hidden !important; }
.skp-btn.skp-loading .skp-btn-loader { display: inline-block !important; position: absolute !important; }

/* ─── Form Fields ─── */
.skp-field { margin-bottom: 14px !important; }
.skp-field > label { display: block !important; font-size: 12px !important; font-weight: 600 !important; color: var(--skp-text-2) !important; margin-bottom: 5px !important; }
.skp-input-wrap {
    display: flex !important; align-items: center !important;
    background: var(--skp-surface) !important; border: 1px solid var(--skp-border) !important;
    border-radius: var(--skp-radius-sm) !important; transition: all var(--skp-transition) !important; overflow: hidden !important;
}
.skp-input-wrap:focus-within { border-color: var(--skp-accent) !important; box-shadow: 0 0 0 3px var(--skp-accent-light) !important; }
.skp-input-icon { width: 16px !important; height: 16px !important; margin-left: 12px !important; color: var(--skp-text-3) !important; flex-shrink: 0 !important; }
.skp-input-wrap input { flex: 1 !important; padding: 10px 12px !important; background: transparent !important; min-width: 0 !important; }
.skp-input-wrap input::placeholder { color: var(--skp-text-3) !important; }
.skp-field > input:not([type="file"]):not([type="checkbox"]):not([type="hidden"]),
.skp-field > textarea, .skp-field > select {
    width: 100% !important; border: 1px solid var(--skp-border) !important; border-radius: var(--skp-radius-sm) !important;
    padding: 10px 12px !important; background: var(--skp-surface) !important; transition: all var(--skp-transition) !important;
}
.skp-field > input:focus, .skp-field > textarea:focus, .skp-field > select:focus {
    border-color: var(--skp-accent) !important; box-shadow: 0 0 0 3px var(--skp-accent-light) !important;
}
.skp-field > select {
    cursor: pointer !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235A5B63' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 12px center !important; padding-right: 30px !important;
}
.skp-select-sm { padding: 7px 28px 7px 10px !important; font-size: 12px !important; border: 1px solid var(--skp-border) !important; border-radius: var(--skp-radius-sm) !important; background: var(--skp-surface) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235A5B63' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 8px center !important; }
.skp-field-row { display: flex !important; gap: 12px !important; }
.skp-field-half { flex: 1 !important; }
.skp-field-actions { display: flex !important; gap: 10px !important; justify-content: flex-end !important; margin-top: 8px !important; }
.skp-input-disabled { opacity: 0.5 !important; }
.skp-toggle-pw { padding: 7px 10px !important; color: var(--skp-text-3) !important; cursor: pointer !important; }
.skp-toggle-pw:hover { color: var(--skp-text) !important; }
.skp-toggle-pw svg { width: 16px !important; height: 16px !important; }

/* Checkbox */
.skp-checkbox-wrap { display: flex !important; align-items: center !important; gap: 7px !important; cursor: pointer !important; font-size: 13px !important; color: var(--skp-text-2) !important; }
.skp-checkbox-wrap input[type="checkbox"] { display: none !important; }
.skp-checkbox-mark { width: 16px !important; height: 16px !important; border: 1.5px solid var(--skp-border) !important; border-radius: 4px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; background: var(--skp-surface) !important; }
.skp-checkbox-wrap input:checked + .skp-checkbox-mark { background: var(--skp-accent) !important; border-color: var(--skp-accent) !important; }
.skp-checkbox-wrap input:checked + .skp-checkbox-mark::after { content: '' !important; display: block !important; width: 4px !important; height: 8px !important; border: solid #fff !important; border-width: 0 2px 2px 0 !important; transform: rotate(45deg) !important; margin-top: -2px !important; }

/* Password rules */
.skp-pwd-rules { list-style: none !important; padding: 0 !important; margin: 6px 0 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 3px 12px !important; }
.skp-pwd-rules li { font-size: 11px !important; color: var(--skp-text-3) !important; display: flex !important; align-items: center !important; gap: 3px !important; }
.skp-pwd-rules li::before { content: '○' !important; font-size: 7px !important; }
.skp-pwd-rules li.skp-rule-pass { color: var(--skp-green) !important; }
.skp-pwd-rules li.skp-rule-pass::before { content: '●' !important; }
.skp-pwd-rules li.skp-rule-fail { color: var(--skp-red) !important; }
.skp-pwd-rules li.skp-rule-fail::before { content: '●' !important; }

/* Captcha */
.skp-captcha-row { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 6px !important; }
.skp-captcha-q { font-size: 15px !important; font-weight: 700 !important; color: var(--skp-text) !important; background: var(--skp-surface-2) !important; padding: 7px 14px !important; border-radius: var(--skp-radius-sm) !important; }
.skp-captcha-refresh { cursor: pointer !important; color: var(--skp-text-3) !important; padding: 5px !important; background: var(--skp-surface-2) !important; border-radius: var(--skp-radius-sm) !important; }
.skp-captcha-refresh:hover { color: var(--skp-accent) !important; }

/* Notice */
.skp-notice { display: flex !important; align-items: flex-start !important; gap: 8px !important; padding: 10px 14px !important; border-radius: var(--skp-radius-sm) !important; font-size: 12px !important; margin-bottom: 14px !important; }
.skp-notice svg { flex-shrink: 0 !important; width: 16px !important; height: 16px !important; margin-top: 1px !important; }
.skp-notice-warn { background: rgba(229,161,0,0.06) !important; color: #9A7200 !important; border: 1px solid rgba(229,161,0,0.12) !important; }
.skp-dark .skp-notice-warn { color: #E5A100 !important; }

/* Messages */
.skp-auth-message { padding: 10px 14px !important; border-radius: var(--skp-radius-sm) !important; font-size: 13px !important; margin-bottom: 16px !important; text-align: center !important; }
.skp-msg-success { background: var(--skp-green-light) !important; color: var(--skp-green) !important; border: 1px solid rgba(0,138,124,0.12) !important; }
.skp-msg-info { background: var(--skp-blue-light) !important; color: var(--skp-blue) !important; border: 1px solid rgba(29,141,184,0.12) !important; }

/* Badge */
.skp-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 18px !important; height: 18px !important; padding: 0 5px !important; border-radius: 9px !important; font-size: 10px !important; font-weight: 700 !important; background: var(--skp-accent) !important; color: #fff !important; }
.skp-badge-accent { background: var(--skp-blue) !important; }
.skp-badge-dot { position: absolute !important; top: 4px !important; right: 10px !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; background: var(--skp-accent) !important; }

/* Status pill */
.skp-status-pill { display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 3px 10px !important; border-radius: 16px !important; font-size: 11px !important; font-weight: 600 !important; color: var(--pill-color) !important; background: color-mix(in srgb, var(--pill-color) 7%, transparent) !important; }
.skp-status-pill::before { content: '' !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; background: var(--pill-color) !important; }

/* Loading */
.skp-loading { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 36px !important; color: var(--skp-text-3) !important; font-size: 13px !important; }
.skp-spinner { width: 18px !important; height: 18px !important; border: 2px solid var(--skp-border) !important; border-top-color: var(--skp-accent) !important; border-radius: 50% !important; animation: skp-spin .6s linear infinite !important; }
@keyframes skp-spin { to { transform: rotate(360deg); } }

/* Empty state */
.skp-empty-state { text-align: center !important; padding: 40px 20px !important; color: var(--skp-text-3) !important; }
.skp-empty-icon { margin-bottom: 12px !important; }
.skp-empty-icon svg { width: 40px !important; height: 40px !important; opacity: 0.25 !important; }
.skp-empty-state p { font-size: 14px !important; font-weight: 500 !important; color: var(--skp-text-2) !important; }

/* Pagination */
.skp-pagination { display: flex !important; justify-content: center !important; gap: 4px !important; margin-top: 16px !important; }
.skp-page-btn { min-width: 32px !important; height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 1px solid var(--skp-border) !important; border-radius: var(--skp-radius-sm) !important; background: var(--skp-surface) !important; color: var(--skp-text-2) !important; font-size: 12px !important; cursor: pointer !important; }
.skp-page-btn.skp-page-active { background: var(--skp-accent) !important; color: #fff !important; border-color: var(--skp-accent) !important; }

/* Toast */
.skp-toast-container { position: fixed !important; bottom: 20px !important; right: 20px !important; z-index: 999999 !important; display: flex !important; flex-direction: column !important; gap: 6px !important; }
.skp-toast { padding: 12px 18px !important; border-radius: var(--skp-radius-sm) !important; font-size: 13px !important; font-weight: 500 !important; box-shadow: var(--skp-shadow-md) !important; animation: skp-toast-in .3s ease !important; max-width: 360px !important; font-family: var(--skp-font) !important; }
.skp-toast-success { background: var(--skp-green) !important; color: #fff !important; }
.skp-toast-error { background: var(--skp-red) !important; color: #fff !important; }
.skp-toast-info { background: var(--skp-blue) !important; color: #fff !important; }
@keyframes skp-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Misc */
.skp-hint { font-size: 11px !important; color: var(--skp-text-3) !important; margin-top: 4px !important; }
.skp-hint-inline { font-weight: 400 !important; font-size: 11px !important; color: var(--skp-text-3) !important; }
.skp-link { color: var(--skp-blue) !important; text-decoration: none !important; font-weight: 500 !important; font-size: 13px !important; }
.skp-link:hover { color: var(--skp-accent) !important; }
.skp-social-row { display: flex !important; gap: 8px !important; align-items: center !important; margin-bottom: 8px !important; }
.skp-social-row select { min-width: 130px !important; border: 1px solid var(--skp-border) !important; border-radius: var(--skp-radius-sm) !important; padding: 8px 10px !important; background: var(--skp-surface) !important; }
.skp-social-row input { flex: 1 !important; border: 1px solid var(--skp-border) !important; border-radius: var(--skp-radius-sm) !important; padding: 8px 10px !important; background: var(--skp-surface) !important; }
.skp-upload-label { cursor: pointer !important; }
.skp-filter-bar { display: flex !important; gap: 8px !important; align-items: center !important; }

/* Ensure anchor buttons are fully styled */
.skp-dashboard a.skp-btn,
.skp-auth-wrapper a.skp-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    font-family: var(--skp-font) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 7px 14px !important;
    border-radius: var(--skp-radius-sm) !important;
    cursor: pointer !important;
    gap: 6px !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    transition: all var(--skp-transition) !important;
}
.skp-dashboard a.skp-btn-primary,
.skp-dashboard .skp-doc-actions a.skp-btn-primary {
    color: #fff !important;
    background: var(--skp-accent) !important;
    border: none !important;
}
.skp-dashboard a.skp-btn-primary:hover { background: var(--skp-accent-hover) !important; }
.skp-dashboard a.skp-btn-ghost,
.skp-dashboard .skp-doc-actions a.skp-btn-ghost {
    color: var(--skp-text-2) !important;
    background: transparent !important;
    border: 1px solid var(--skp-border) !important;
}
.skp-dashboard a.skp-btn-ghost:hover { background: var(--skp-surface-2) !important; }
/* Doc item text overflow */
.skp-dashboard .skp-doc-item { overflow: hidden !important; }
.skp-dashboard .skp-doc-body { overflow: hidden !important; }