/* ===== BC Base styles (extracted from index.html) ===== */
:root {
--accent-blue: #7c3aed;
--accent-blue-hover: #6d28d9;
--accent-green: #10b981;
--accent-yellow: #fbbf24;
--accent-red: #ef4444;
--accent-purple: #a855f7;
--accent-cyan: #00F5D4;
--accent-mint: #00F5D4;
--accent-orange: #f97316;
--bg-primary: #08080e;
--bg-secondary: #0b0b14;
--bg-tertiary: #0f0f1a;
--bg-card: #0d0d17;
--bg-hover: #16161f;
--bg-elevated: #191922;
--border-primary: rgba(255,255,255,0.03);
--border-secondary: rgba(255,255,255,0.06);
--border-accent: rgba(124, 58, 237, 0.25);
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--text-muted: #5b6b86;
--gradient-premium: linear-gradient(145deg, #060609 0%, #0d0d17 50%, #0b0b14 100%);
--gradient-card: linear-gradient(165deg, rgba(20, 16, 34, 0.5) 0%, rgba(11, 11, 20, 0.8) 100%);
--gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
--gradient-border: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);
--shadow-glow: 0 0 60px rgba(124, 58, 237, 0.10);
--shadow-glow-accent: 0 4px 20px rgba(124, 58, 237, 0.22);
--shadow-glow-mint: 0 0 40px rgba(0, 245, 212, 0.12);
--shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255,255,255,0.03);
--radius-sm: 10px;
--radius-md: 14px;
--radius-lg: 18px;
--radius-xl: 22px;
--radius-2xl: 26px;
--glass-bg: rgba(13, 13, 23, 0.7);
--glass-border: rgba(255, 255, 255, 0.05);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Plus Jakarta Sans', 'Inter', 'Outfit', sans-serif; background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; font-weight: 400; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInScale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 30px rgba(124, 58, 237, 0.15); } 50% { box-shadow: 0 0 60px rgba(124, 58, 237, 0.3); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.page { display: none; min-height: 100vh; }
.page.active { display: flex; }
#landingPage { background: var(--bg-primary); justify-content: center; align-items: center; position: relative; overflow: hidden; }
.landing-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 80%, rgba(99, 102, 241, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(168, 85, 247, 0.06) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(34, 211, 238, 0.04) 0%, transparent 70%); }
.landing-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); background-size: 80px 80px; }
.landing-content { text-align: center; z-index: 1; animation: fadeInUp 1s ease-out; }
.landing-logo { font-size: 4.5rem; font-weight: 800; letter-spacing: -3px; margin-bottom: 12px; background: linear-gradient(135deg, #fff 0%, #71717a 50%, #fff 100%); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: gradientShift 5s ease infinite; }
.landing-tagline { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 64px; letter-spacing: 6px; text-transform: uppercase; font-weight: 300; }
.enter-portal-btn { padding: 18px 56px; font-family: inherit; font-size: 0.95rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: white; background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%); border: none; border-radius: 60px; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); animation: glow 3s ease-in-out infinite; }
.enter-portal-btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 25px 50px rgba(99, 102, 241, 0.35); }
.landing-footer { position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%); color: var(--text-muted); font-size: 0.8rem; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.landing-footer span { color: var(--accent-blue); font-weight: 500; }
.landing-links { display: flex; gap: 24px; }
.landing-links a { color: var(--text-muted); text-decoration: none; font-size: 0.75rem; transition: color 0.2s; }
.landing-links a:hover { color: var(--text-secondary); }
#loginPage { background: var(--bg-primary); justify-content: center; align-items: center; position: relative; }
#loginPage::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% -20%, rgba(124, 58, 237, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.08) 0%, transparent 40%); }
.login-container { width: 100%; max-width: 420px; padding: 24px; animation: fadeIn 0.6s ease-out; position: relative; z-index: 1; }
.login-card { background: linear-gradient(165deg, rgba(12, 18, 34, 0.85) 0%, rgba(6, 10, 18, 0.95) 100%); border: 1px solid rgba(255,255,255,0.04); border-radius: var(--radius-2xl); padding: 44px 36px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.03); backdrop-filter: blur(24px); position: relative; }
.login-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; }
.login-back { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 0.82rem; cursor: pointer; margin-bottom: 28px; transition: color 0.2s; }
.login-back:hover { color: var(--text-secondary); }
.login-logo { text-align: center; margin-bottom: 36px; }
.login-logo h1 { font-size: 1.6rem; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; letter-spacing: -0.5px; }
.login-logo p { color: var(--text-muted); font-size: 0.88rem; font-weight: 400; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 0.82rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 8px; }
.form-input { width: 100%; padding: 14px 16px; background: rgba(8, 12, 20, 0.6); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--radius-md); color: var(--text-primary); font-family: inherit; font-size: 0.875rem; transition: all 0.25s; }
.form-input:focus { border-color: rgba(124, 58, 237, 0.4); background: rgba(8, 12, 20, 0.8); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1); }
.form-input:focus { outline: none; border-color: var(--accent-blue); background: rgba(30, 41, 59, 0.5); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1); }
.form-input::placeholder { color: var(--text-muted); }
.form-select { width: 100%; padding: 14px 16px; background: rgba(17, 24, 39, 0.5); border: 1px solid var(--border-primary); border-radius: var(--radius-md); color: var(--text-primary); font-family: inherit; font-size: 0.9rem; cursor: pointer; }
.form-select:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1); }
.form-textarea { width: 100%; padding: 14px 16px; background: rgba(17, 24, 39, 0.5); border: 1px solid var(--border-primary); border-radius: var(--radius-md); color: var(--text-primary); font-family: inherit; font-size: 0.9rem; resize: vertical; min-height: 100px; }
.form-textarea:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; font-family: inherit; font-size: 0.875rem; font-weight: 500; border: none; border-radius: var(--radius-md); cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); letter-spacing: 0; position: relative; overflow: hidden; }
.btn-primary { background: linear-gradient(135deg, var(--accent-blue) 0%, #6d28d9 100%); color: white; width: 100%; box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(124, 58, 237, 0.35); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-secondary { background: var(--gradient-glass); color: var(--text-primary); border: 1px solid var(--border-secondary); backdrop-filter: blur(8px); }
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--accent-blue); }
.btn-success { background: linear-gradient(135deg, var(--accent-green) 0%, #059669 100%); color: white; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25); }
.btn-success:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3); }
.btn-danger { background: rgba(239, 68, 68, 0.1); color: var(--accent-red); border: 1px solid rgba(239, 68, 68, 0.15); }
.btn-danger:hover { background: rgba(239, 68, 68, 0.18); border-color: rgba(239, 68, 68, 0.3); }
.btn-warning { background: rgba(251, 191, 36, 0.1); color: var(--accent-yellow); border: 1px solid rgba(251, 191, 36, 0.15); }
.btn-purple { background: linear-gradient(135deg, var(--accent-purple) 0%, #7c3aed 100%); color: white; box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25); }
.btn-purple:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(139, 92, 246, 0.3); }
.btn-cyan { background: linear-gradient(135deg, var(--accent-cyan) 0%, #0891b2 100%); color: #030712; box-shadow: 0 2px 8px rgba(6, 182, 212, 0.25); }
.btn-cyan:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(6, 182, 212, 0.3); }
.btn-ghost { background: transparent; color: var(--text-secondary); padding: 8px 12px; }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-sm { padding: 9px 16px; font-size: 0.82rem; }
.btn-xs { padding: 6px 12px; font-size: 0.78rem; }
.btn-icon { width: 42px; height: 42px; padding: 0; border-radius: var(--radius-md); }
.btn-icon-sm { width: 34px; height: 34px; padding: 0; border-radius: var(--radius-sm); font-size: 0.9rem; }
.alert { padding: 14px 18px; border-radius: var(--radius-md); font-size: 0.88rem; margin-bottom: 24px; display: none; align-items: center; gap: 12px; backdrop-filter: blur(8px); }
.alert.show { display: flex; }
.alert-error { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.15); color: var(--accent-red); }
.alert-success { background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.15); color: var(--accent-green); }
/* Professional Proposal Document */
.proposal-document { background: #ffffff !important; color: #1a1a2e !important; }
.proposal-doc { font-family: 'Georgia', serif; line-height: 1.7; color: #1a1a2e; }
.proposal-header { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color: white; padding: 40px; display: flex; justify-content: space-between; align-items: flex-start; }
.proposal-header-left h1 { font-size: 1.8rem; margin-bottom: 8px; font-weight: 700; }
.proposal-header-left p { opacity: 0.8; font-size: 0.95rem; }
.proposal-header-right { text-align: right; font-size: 0.9rem; }
.proposal-header-right .proposal-number { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
.proposal-status { display: inline-block; padding: 6px 16px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; }
.proposal-status.draft { background: rgba(255,255,255,0.2); }
.proposal-status.sent { background: #7c3aed; }
.proposal-status.accepted { background: #22c55e; }
.proposal-status.declined { background: #ef4444; }
.proposal-body { padding: 40px; background: #ffffff; }
.proposal-meta { display: flex; justify-content: space-between; margin-bottom: 40px; padding-bottom: 30px; border-bottom: 2px solid #e5e7eb; }
.proposal-meta-section h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: #6b7280; margin-bottom: 8px; }
.proposal-meta-section p { font-size: 1rem; color: #1a1a2e; margin: 4px 0; }
.proposal-section { margin-bottom: 35px; }
.proposal-section-title { font-size: 1.1rem; font-weight: 700; color: #1a1a2e; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid #7c3aed; display: inline-block; }
.proposal-section-content { color: #374151; white-space: pre-wrap; }
.proposal-investment { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border: 2px solid #e2e8f0; border-radius: 12px; padding: 30px; margin: 40px 0; text-align: center; }
.proposal-investment-label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: #6b7280; margin-bottom: 8px; }
.proposal-investment-amount { font-size: 3rem; font-weight: 700; color: #1a1a2e; }
.proposal-investment-valid { font-size: 0.9rem; color: #6b7280; margin-top: 12px; }
.proposal-terms { background: #f9fafb; border-radius: 8px; padding: 25px; margin-top: 40px; font-size: 0.85rem; color: #6b7280; }
.proposal-terms h4 { color: #374151; margin-bottom: 12px; font-size: 0.9rem; }
.proposal-signature { margin-top: 50px; padding-top: 40px; border-top: 2px solid #e5e7eb; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.proposal-signature-block h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: #6b7280; margin-bottom: 20px; }
.proposal-signature-line { border-bottom: 1px solid #1a1a2e; height: 50px; margin-bottom: 8px; }
.proposal-signature-name { font-size: 0.9rem; color: #6b7280; }
.proposal-footer { background: #f8fafc; padding: 25px 40px; text-align: center; font-size: 0.85rem; color: #6b7280; border-top: 1px solid #e5e7eb; }
.proposal-cta { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color: white; padding: 20px 40px; border-radius: 8px; display: inline-block; font-weight: 600; font-size: 1.1rem; margin-top: 30px; cursor: pointer; border: none; }
.proposal-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(34, 197, 94, 0.3); }
@media print { .proposal-document .modal-header { display: none !important; } .proposal-doc { padding: 0; } }
/* Onboarding Funnel */
.funnel-container { min-height: 100vh; background: linear-gradient(180deg, #080c14 0%, #0a1628 100%); display: flex; flex-direction: column; }
.funnel-progress { padding: 30px 40px; background: rgba(0,0,0,0.3); border-bottom: 1px solid rgba(255,255,255,0.05); }
.funnel-progress-bar { height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; margin-bottom: 20px; overflow: hidden; }
.funnel-progress-fill { height: 100%; background: linear-gradient(90deg, #7c3aed, #8b5cf6); border-radius: 2px; transition: width 0.5s ease; }
.funnel-steps { display: flex; justify-content: space-between; max-width: 700px; margin: 0 auto; }
.funnel-step { display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0.4; transition: all 0.3s; }
.funnel-step.active { opacity: 1; }
.funnel-step.completed { opacity: 0.7; }
.funnel-step.completed .funnel-step-icon { background: var(--accent-green); }
.funnel-step-icon { width: 45px; height: 45px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.funnel-step.active .funnel-step-icon { background: linear-gradient(135deg, #7c3aed, #8b5cf6); box-shadow: 0 0 20px rgba(124, 58, 237, 0.4); }
.funnel-step-label { font-size: 0.8rem; color: var(--text-secondary); }
.funnel-content { flex: 1; display: flex; justify-content: center; align-items: flex-start; padding: 40px 20px; overflow-y: auto; }
.funnel-card { background: linear-gradient(165deg, rgba(15, 23, 42, 0.9) 0%, rgba(10, 15, 28, 0.95) 100%); border: 1px solid rgba(255,255,255,0.06); border-radius: 20px; width: 100%; max-width: 800px; overflow: hidden; box-shadow: 0 25px 80px rgba(0,0,0,0.5); }
.funnel-card-header { padding: 40px; background: linear-gradient(135deg, rgba(124, 58, 237,0.1) 0%, rgba(139,92,246,0.05) 100%); border-bottom: 1px solid rgba(255,255,255,0.05); text-align: center; }
.funnel-card-header h1 { font-size: 1.8rem; margin-bottom: 8px; }
.funnel-card-header p { color: var(--text-secondary); }
.funnel-card-body { padding: 40px; }
.funnel-card-footer { padding: 24px 40px; background: rgba(0,0,0,0.2); border-top: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: space-between; align-items: center; }
/* Proposal in Funnel */
.funnel-proposal { background: #ffffff; color: #1a1a2e; border-radius: 12px; overflow: hidden; }
.funnel-proposal-header { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color: white; padding: 30px; }
.funnel-proposal-body { padding: 30px; }
.funnel-proposal-section { margin-bottom: 25px; }
.funnel-proposal-section h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: #6b7280; margin-bottom: 10px; }
.funnel-proposal-section p { color: #374151; white-space: pre-wrap; }
.funnel-proposal-amount { background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 12px; padding: 25px; text-align: center; margin: 30px 0; }
.funnel-proposal-amount .label { font-size: 0.85rem; color: #6b7280; text-transform: uppercase; margin-bottom: 5px; }
.funnel-proposal-amount .value { font-size: 2.5rem; font-weight: 700; color: #1a1a2e; }
/* Agreement in Funnel */
.funnel-agreement { background: #ffffff; color: #1a1a2e; border-radius: 12px; max-height: 400px; overflow-y: auto; padding: 30px; font-size: 0.95rem; line-height: 1.8; }
.funnel-agreement h3 { margin: 20px 0 10px; color: #1a1a2e; }
.funnel-agreement p { margin-bottom: 15px; color: #374151; }
.funnel-signature-box { background: rgba(124, 58, 237,0.05); border: 2px dashed rgba(124, 58, 237,0.3); border-radius: 12px; padding: 25px; margin-top: 20px; }
.funnel-signature-box label { display: block; font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 8px; }
.funnel-signature-input { width: 100%; padding: 15px; font-size: 1.5rem; font-family: 'Brush Script MT', cursive; text-align: center; background: white; border: 2px solid #e2e8f0; border-radius: 8px; color: #1a1a2e; }
.funnel-signature-input:focus { border-color: #7c3aed; outline: none; }
/* Payment in Funnel */
.funnel-invoice { background: #ffffff; color: #1a1a2e; border-radius: 12px; overflow: hidden; }
.funnel-invoice-header { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color: white; padding: 25px; text-align: center; }
.funnel-invoice-body { padding: 30px; }
.funnel-invoice-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #e5e7eb; }
.funnel-invoice-row:last-child { border-bottom: none; font-weight: 700; font-size: 1.2rem; }
.funnel-pay-btn { display: block; width: 100%; padding: 18px; background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color: white; border: none; border-radius: 10px; font-size: 1.1rem; font-weight: 600; cursor: pointer; margin-top: 20px; transition: all 0.3s; }
.funnel-pay-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(34, 197, 94, 0.3); }
/* Video in Funnel */
.funnel-video-container { background: #000; border-radius: 12px; overflow: hidden; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; }
.funnel-video-placeholder { text-align: center; color: white; padding: 40px; }
.funnel-video-placeholder .icon { font-size: 4rem; margin-bottom: 20px; }
/* Password in Funnel */
.funnel-password-form { max-width: 400px; margin: 0 auto; }
/* Funnel Buttons */
.funnel-btn { padding: 16px 40px; border-radius: 10px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s; border: none; }
.funnel-btn-primary { background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%); color: white; }
.funnel-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(124, 58, 237, 0.3); }
.funnel-btn-secondary { background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.2); }
.funnel-btn-success { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color: white; }
.funnel-btn-success:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(34, 197, 94, 0.3); }
.funnel-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }
@media (max-width: 768px) {
.funnel-steps { gap: 5px; }
.funnel-step-label { display: none; }
.funnel-step-icon { width: 40px; height: 40px; font-size: 1rem; }
.funnel-card-header, .funnel-card-body, .funnel-card-footer { padding: 25px; }
}
.alert-warning { background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.15); color: var(--accent-yellow); }
.login-footer { text-align: center; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border-primary); }
.login-footer-links { display: flex; justify-content: center; gap: 20px; }
.login-footer-links a { color: var(--text-muted); text-decoration: none; font-size: 0.8rem; }
.login-footer-links a:hover { color: var(--text-secondary); }
.dashboard-layout { display: flex; width: 100%; min-height: 100vh; }
.sidebar { width: 280px; background: linear-gradient(180deg, var(--bg-secondary) 0%, #050810 100%); border-right: 1px solid var(--border-primary); display: flex; flex-direction: column; position: fixed; height: 100vh; z-index: 100; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(24px); box-shadow: 4px 0 40px rgba(0,0,0,0.3); }
.sidebar-header { padding: 32px 24px 28px; border-bottom: 1px solid var(--border-primary); }
.sidebar-logo { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.5px; display: flex; align-items: center; gap: 8px; }
.sidebar-logo span { background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.sidebar-user { margin-top: 24px; padding: 14px 16px; background: var(--gradient-glass); border-radius: var(--radius-lg); display: flex; align-items: center; gap: 14px; border: 1px solid var(--glass-border); backdrop-filter: blur(10px); }
.user-avatar { width: 44px; height: 44px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.95rem; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25); }
.user-avatar.client { background: linear-gradient(135deg, var(--accent-cyan), var(--accent-green)); box-shadow: 0 4px 12px rgba(6, 182, 212, 0.25); }
.user-info { flex: 1; min-width: 0; }
.user-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 0.68rem; color: var(--accent-blue); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 3px; font-weight: 500; }
.user-role.client { color: var(--accent-cyan); }
.sidebar-nav { flex: 1; padding: 24px 14px; overflow-y: auto; }
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--border-secondary); border-radius: 4px; }
.nav-section { margin-bottom: 28px; }
.nav-section-title { font-size: 0.65rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.2px; padding: 0 14px; margin-bottom: 10px; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--radius-md); color: var(--text-secondary); cursor: pointer; transition: all 0.25s ease; margin-bottom: 4px; font-weight: 450; font-size: 0.875rem; position: relative; border: 1px solid transparent; }
.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-item.active { background: linear-gradient(135deg, rgba(124, 58, 237, 0.15) 0%, rgba(124, 58, 237, 0.08) 100%); color: var(--accent-blue); }
.nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: var(--accent-blue); border-radius: 0 3px 3px 0; }
.nav-icon { font-size: 1.05rem; width: 22px; text-align: center; }
.nav-badge { margin-left: auto; background: var(--accent-blue); color: white; font-size: 0.65rem; font-weight: 600; padding: 3px 8px; border-radius: 10px; min-width: 22px; text-align: center; }
.nav-badge.warning { background: var(--accent-yellow); color: #030712; }
.nav-badge.danger { background: var(--accent-red); }
.nav-badge.success { background: var(--accent-green); }
.sidebar-footer { padding: 20px 16px; border-top: 1px solid var(--border-primary); }
.sidebar-footer-links { display: flex; justify-content: center; gap: 20px; margin-bottom: 14px; }
.sidebar-footer-links a { color: var(--text-muted); text-decoration: none; font-size: 0.72rem; transition: color 0.2s; }
.sidebar-footer-links a:hover { color: var(--text-secondary); }
.logout-btn { width: 100%; padding: 11px; background: rgba(239, 68, 68, 0.06); border: 1px solid rgba(239, 68, 68, 0.12); border-radius: var(--radius-md); color: var(--accent-red); font-family: inherit; font-size: 0.82rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s; }
.logout-btn:hover { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.2); }
.main-content { flex: 1; margin-left: 280px; min-height: 100vh; background: var(--bg-primary); }
.content-header { padding: 28px 40px; border-bottom: 1px solid var(--border-primary); background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.content-header-left h1 { font-size: 1.5rem; font-weight: 600; margin-bottom: 6px; letter-spacing: -0.4px; }
.content-header-left p { color: var(--text-muted); font-size: 0.88rem; }
.content-header-right { display: flex; align-items: center; gap: 12px; }
.content-body { padding: 36px 40px; }
/* Notification Bell */
.notification-wrapper { position: relative; }
.notification-btn { width: 44px; height: 44px; border-radius: 12px; background: var(--bg-tertiary); border: 1px solid var(--border-primary); color: var(--text-secondary); font-size: 1.25rem; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; transition: all 0.2s; }
.notification-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.notification-btn.has-new { animation: shake 0.5s ease-in-out; }
.notification-dot { position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; background: var(--accent-red); border-radius: 50%; border: 2px solid var(--bg-secondary); }
.notification-dropdown { position: absolute; top: 54px; right: 0; width: 380px; background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); display: none; z-index: 1000; animation: slideDown 0.2s ease-out; }
.notification-dropdown.show { display: block; }
.notification-header { padding: 18px 24px; border-bottom: 1px solid var(--border-primary); display: flex; align-items: center; justify-content: space-between; }
.notification-header h3 { font-size: 0.95rem; font-weight: 600; }
.notification-list { max-height: 420px; overflow-y: auto; }
.notification-item { padding: 18px 24px; border-bottom: 1px solid var(--border-primary); display: flex; gap: 14px; cursor: pointer; transition: all 0.15s ease; }
.notification-item:hover { background: var(--bg-hover); }
.notification-item:last-child { border-bottom: none; }
.notification-item.unread { background: rgba(99, 102, 241, 0.04); }
.notification-icon { width: 42px; height: 42px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.notification-icon.message { background: rgba(99, 102, 241, 0.1); }
.notification-icon.payment { background: rgba(16, 185, 129, 0.1); }
.notification-icon.warning { background: rgba(245, 158, 11, 0.1); }
.notification-icon.client { background: rgba(168, 85, 247, 0.1); }
.notification-content { flex: 1; }
.notification-text { font-size: 0.9rem; margin-bottom: 4px; }
.notification-time { font-size: 0.75rem; color: var(--text-muted); }
.notification-empty { padding: 48px 24px; text-align: center; color: var(--text-muted); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 32px; }
.stat-card { background: linear-gradient(165deg, rgba(12, 18, 34, 0.5) 0%, rgba(8, 12, 20, 0.85) 100%); border: 1px solid rgba(255,255,255,0.04); border-radius: var(--radius-xl); padding: 24px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; backdrop-filter: blur(16px); box-shadow: var(--shadow-card); }
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent); }
.stat-card:hover { border-color: rgba(255,255,255,0.08); transform: translateY(-1px); }
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); opacity: 0; transition: opacity 0.3s; }
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg), var(--shadow-glow); border-color: var(--border-secondary); }
.stat-card:hover::before { opacity: 1; }
.stat-card.blue { border-left: 3px solid var(--accent-blue); }
.stat-card.green { border-left: 3px solid var(--accent-green); }
.stat-card.yellow { border-left: 3px solid var(--accent-yellow); }
.stat-card.purple { border-left: 3px solid var(--accent-purple); }
.stat-card.cyan { border-left: 3px solid var(--accent-cyan); }
.stat-card.orange { border-left: 3px solid var(--accent-orange); }
.stat-card.red { border-left: 3px solid var(--accent-red); }
.stat-card.overdue { border-color: rgba(239, 68, 68, 0.3); }
.stat-icon { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 16px; }
.stat-icon.blue { background: rgba(124, 58, 237, 0.12); }
.stat-icon.green { background: rgba(16, 185, 129, 0.12); }
.stat-icon.yellow { background: rgba(251, 191, 36, 0.12); }
.stat-icon.purple { background: rgba(139, 92, 246, 0.12); }
.stat-icon.cyan { background: rgba(6, 182, 212, 0.12); }
.stat-icon.orange { background: rgba(249, 115, 22, 0.12); }
.stat-icon.red { background: rgba(239, 68, 68, 0.12); }
.stat-value { font-size: 1.75rem; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.5px; }
.stat-label { color: var(--text-muted); font-size: 0.82rem; font-weight: 500; }
.section-card { background: linear-gradient(165deg, rgba(12, 18, 34, 0.5) 0%, rgba(8, 12, 20, 0.85) 100%); border: 1px solid rgba(255,255,255,0.04); border-radius: var(--radius-xl); overflow: hidden; margin-bottom: 24px; backdrop-filter: blur(16px); box-shadow: var(--shadow-card); position: relative; }
.section-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent); }
.section-header { padding: 20px 24px; border-bottom: 1px solid var(--border-primary); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.section-title { font-size: 0.95rem; font-weight: 600; }
.section-body { padding: 24px; }
.badge { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 6px; font-size: 0.7rem; font-weight: 550; text-transform: uppercase; letter-spacing: 0.3px; }
.badge-active, .badge-completed, .badge-delivered, .badge-paid { background: rgba(16, 185, 129, 0.1); color: var(--accent-green); }
.badge-pending, .badge-review, .badge-unpaid { background: rgba(245, 158, 11, 0.12); color: var(--accent-yellow); }
.badge-in-progress, .badge-working { background: rgba(99, 102, 241, 0.12); color: var(--accent-blue); }
.badge-review { background: rgba(168, 85, 247, 0.12); color: var(--accent-purple); }
.badge-overdue, .badge-cancelled { background: rgba(239, 68, 68, 0.12); color: var(--accent-red); }
.badge-admin { background: rgba(168, 85, 247, 0.12); color: var(--accent-purple); }
.badge-client { background: rgba(34, 211, 238, 0.12); color: var(--accent-cyan); }
.badge-invited { background: rgba(168, 85, 247, 0.12); color: var(--accent-purple); }
.badge-not-invited { background: rgba(82, 82, 91, 0.2); color: var(--text-muted); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 24px; }
.item-card { background: linear-gradient(165deg, rgba(12, 18, 34, 0.6) 0%, rgba(8, 12, 20, 0.9) 100%); border: 1px solid rgba(255,255,255,0.04); border-radius: var(--radius-xl); padding: 24px; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(16px); box-shadow: var(--shadow-card); position: relative; overflow: hidden; }
.item-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); }
.item-card:hover { border-color: rgba(124, 58, 237, 0.15); transform: translateY(-2px); box-shadow: var(--shadow-card), 0 8px 32px rgba(124, 58, 237, 0.08); }
.item-card:hover { border-color: rgba(124, 58, 237, 0.25); transform: translateY(-4px); box-shadow: var(--shadow-lg), 0 0 40px rgba(124, 58, 237, 0.08); }
.item-card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.item-avatar { width: 48px; height: 48px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1rem; margin-right: 14px; flex-shrink: 0; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2); }
.item-info h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 4px; }
.item-info p { font-size: 0.82rem; color: var(--text-muted); }
.item-meta { display: flex; flex-direction: column; gap: 10px; padding: 16px 0; border-top: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary); margin: 16px 0; }
.meta-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; }
.meta-label { color: var(--text-muted); }
.meta-value { font-weight: 500; }
.item-notes { padding: 12px 14px; background: var(--bg-tertiary); border-radius: var(--radius-md); margin-bottom: 16px; border: 1px solid var(--border-primary); }
.item-notes-label { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.item-notes-text { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; }
.item-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.item-actions .btn { flex: 1; min-width: 70px; }
.empty-state { text-align: center; padding: 70px 24px; }
.empty-state-icon { font-size: 3rem; margin-bottom: 18px; opacity: 0.3; }
.empty-state h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
.empty-state p { color: var(--text-muted); margin-bottom: 24px; font-size: 0.88rem; }
.loading-spinner { width: 40px; height: 40px; border: 3px solid var(--border-primary); border-top-color: var(--accent-blue); border-radius: 50%; animation: spin 1s linear infinite; }
/* Chat Styles */
.chat-container { display: flex; height: calc(100vh - 180px); background: var(--gradient-card); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); overflow: hidden; backdrop-filter: blur(12px); }
.chat-sidebar { width: 320px; border-right: 1px solid var(--border-primary); display: flex; flex-direction: column; background: rgba(10, 15, 26, 0.5); }
.chat-sidebar-header { padding: 22px; border-bottom: 1px solid var(--border-primary); }
.chat-sidebar-header h3 { font-size: 0.95rem; font-weight: 600; }
.chat-list { flex: 1; overflow-y: auto; }
.chat-list-item { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-primary); cursor: pointer; transition: all 0.2s ease; }
.chat-list-item:hover { background: var(--bg-hover); }
.chat-list-item.active { background: rgba(124, 58, 237, 0.1); border-left: 3px solid var(--accent-blue); }
.chat-list-item.unread { background: rgba(124, 58, 237, 0.05); }
.chat-list-avatar { width: 44px; height: 44px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.9rem; box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2); }
.chat-list-info { flex: 1; min-width: 0; }
.chat-list-name { font-weight: 600; font-size: 0.88rem; margin-bottom: 3px; }
.chat-list-preview { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-list-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.chat-list-badge { width: 20px; height: 20px; background: var(--accent-blue); color: white; font-size: 0.65rem; font-weight: 600; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.chat-main { flex: 1; display: flex; flex-direction: column; background: var(--bg-primary); position: relative; box-shadow: inset 1px 0 0 rgba(255,255,255,.03); }
.chat-main-header { padding: 18px 24px; border-bottom: 1px solid var(--border-primary); display: flex; align-items: center; gap: 14px; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(8px); }
.chat-main-avatar { width: 44px; height: 44px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); display: flex; align-items: center; justify-content: center; font-weight: 600; box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2); }
.chat-main-info h3 { font-size: 0.95rem; font-weight: 600; }
.chat-main-info p { font-size: 0.8rem; color: var(--text-muted); }
.chat-messages { flex: 1; overflow-y: auto; padding: 20px 30px 26px; display: flex; flex-direction: column; gap: 14px; background-color: var(--bg-primary); background-image: radial-gradient(130% 90% at 50% -8%, rgba(124,58,237,0.06) 0%, transparent 52%), radial-gradient(rgba(255,255,255,0.022) 1px, transparent 1px); background-size: auto, 22px 22px; background-attachment: local; }
.chat-message { display: flex; gap: 0; width: fit-content; max-width: 60%; margin-right: auto; }
.chat-message.sent { margin-left: auto; margin-right: 0; }
.chat-message-avatar { display: none !important; }
.chat-message.sent .chat-message-avatar { background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); }
.chat-message-content { background: rgba(255,255,255,0.055); border: .5px solid rgba(255,255,255,0.06); border-radius: 22px 22px 22px 7px; padding: 11px 16px 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.22); max-width: 100%; -webkit-font-smoothing: antialiased; }
.chat-message.sent .chat-message-content { background: linear-gradient(158deg, #7d5cf0 0%, #6b41d6 100%); border: .5px solid rgba(255,255,255,0.08); border-radius: 22px 22px 7px 22px; box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 6px 18px rgba(124,58,237,0.2); }
.chat-message-text { font-size: 0.9375rem; line-height: 1.5; letter-spacing: 0.08px; white-space: pre-wrap; word-break: break-word; -webkit-font-smoothing: antialiased; }
.chat-message-time { font-size: 0.64rem; color: var(--text-muted); margin-top: 5px; opacity: 0.68; font-variant-numeric: tabular-nums; }
.chat-message.sent .chat-message-time { color: rgba(255,255,255,0.7); }
/* ===== WhatsApp+ chat (2026-10-19) ===== */
/* Grupisanje: tesno unutar iste strane, vazduh kad se strana promeni */
.chat-messages { gap: 0 !important; }
.chat-message { margin-top: 2px; }
.chat-message.sent + .chat-message:not(.sent), .chat-message:not(.sent) + .chat-message.sent { margin-top: 14px; }
/* Receipts */
.msg-receipt { display: inline-flex; align-items: center; }
.msg-receipt.read { color: var(--accent-mint, #00F5D4); } /* mint = procitano */
.msg-receipt.delivered, .msg-receipt.sent { color: rgba(255,255,255,0.65); }
/* Reply/quote unutar mehurica */
.msg-reply-quote { border-left: 3px solid rgba(255,255,255,0.45); background: rgba(0,0,0,0.18); border-radius: 7px; padding: 5px 9px; margin-bottom: 6px; cursor: pointer; }
.chat-message:not(.sent) .msg-reply-quote { border-left-color: #a78bfa; background: rgba(124,58,237,0.1); }
.msg-reply-quote .rq-name { font-size: 0.72rem; font-weight: 600; opacity: 0.9; margin-bottom: 1px; }
.msg-reply-quote .rq-text { font-size: 0.78rem; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.msg-edited { font-size: 0.64rem; opacity: 0.6; font-style: italic; }
.msg-deleted { font-style: italic; opacity: 0.6; font-size: 0.9rem; }
/* Hover akcije na mehuricu (reply / react / menu) */
.chat-message { position: relative; }
.msg-actions { position: absolute; top: -10px; display: none; gap: 2px; background: var(--bg-card, #11121a); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 3px 5px; box-shadow: 0 4px 14px rgba(0,0,0,0.4); z-index: 3; }
.chat-message.sent .msg-actions { right: 6px; }
.chat-message:not(.sent) .msg-actions { left: 6px; }
.chat-message:hover .msg-actions { display: inline-flex; }
.msg-actions button { background: none; border: none; color: var(--text-secondary, #cbd5e1); cursor: pointer; font-size: 15px; padding: 3px 6px; border-radius: 50%; line-height: 1; }
.msg-actions button:hover { background: rgba(255,255,255,0.08); color: #fff; }
/* Reakcije ispod mehurica */
.msg-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: -4px; margin-bottom: -12px; position: relative; z-index: 2; }
.msg-reactions .rx { background: var(--bg-card, #15161f); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 2px 8px; font-size: 0.78rem; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; box-shadow: 0 2px 6px rgba(0,0,0,0.35); }
.msg-reactions .rx.mine { border-color: #7c3aed; background: rgba(124,58,237,0.18); }
/* Reply bar iznad inputa */
.chat-reply-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; margin: 0 0 0 0; background: rgba(124,58,237,0.08); border-left: 3px solid #7c3aed; border-radius: 8px; }
.chat-reply-bar .crb-body { flex: 1; min-width: 0; }
.chat-reply-bar .crb-name { font-size: 0.72rem; font-weight: 600; color: #a78bfa; }
.chat-reply-bar .crb-text { font-size: 0.78rem; color: var(--text-secondary, #cbd5e1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-reply-bar .crb-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 18px; }
/* Jump-to-bottom dugme */
.chat-jump-btn { position: absolute; right: 22px; bottom: 96px; width: 42px; height: 42px; border-radius: 50%; background: var(--bg-card, #1a1b26); border: 1px solid rgba(124,58,237,0.3); color: #c4b5fd; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,0.5); z-index: 5; }
.chat-jump-btn.show { display: flex; }
.chat-jump-btn .jb-badge { position: absolute; top: -6px; right: -4px; background: #7c3aed; color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
/* Unread razdelnik */
.chat-unread-sep { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; }
.chat-unread-sep .us-line { flex: 1; height: 1px; background: rgba(124,58,237,0.3); }
.chat-unread-sep .us-label { font-size: 0.7rem; font-weight: 600; color: #a78bfa; text-transform: uppercase; letter-spacing: 0.04em; }
.chat-message.search-hit .chat-message-content { outline: 2px solid #fbbf24; outline-offset: 1px; }
.msg-linkcard { display:flex; gap:10px; margin:8px 0 6px; background:rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.08); border-radius:10px; overflow:hidden; text-decoration:none; color:inherit; max-width:320px; }
.chat-message.sent .msg-linkcard { background:rgba(0,0,0,.16); border-color:rgba(255,255,255,.12); }
.msg-linkcard .lc-img { width:62px; min-width:62px; background-size:cover; background-position:center; background-color:rgba(255,255,255,.04); }
.msg-linkcard .lc-body { padding:8px 10px; min-width:0; }
.msg-linkcard .lc-title { font-size:.8rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-linkcard .lc-desc { font-size:.72rem; opacity:.75; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:2px; }
.msg-linkcard .lc-host { font-size:.66rem; opacity:.6; margin-top:3px; }
.typing-dots { display:inline-flex; gap:3px; align-items:center; }
.typing-dots i { width:6px; height:6px; border-radius:50%; background:var(--text-muted); display:inline-block; animation:typingBlink 1.2s infinite both; }
.typing-dots i:nth-child(2){ animation-delay:.2s; } .typing-dots i:nth-child(3){ animation-delay:.4s; }
@keyframes typingBlink { 0%,60%,100%{ opacity:.25; transform:translateY(0);} 30%{ opacity:1; transform:translateY(-2px);} }
.ai-suggest-bar { display:flex; align-items:center; gap:8px; padding:8px 14px; overflow-x:auto; border-top:.5px solid rgba(124,58,237,.1); }
.ai-suggest-bar .ai-sg-label { font-size:.68rem; font-weight:700; color:#a78bfa; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
.ai-suggest-bar .ai-sg { background:rgba(124,58,237,.1); border:1px solid rgba(124,58,237,.28); color:#ddd6fe; border-radius:16px; padding:6px 12px; font-size:12.5px; cursor:pointer; white-space:nowrap; max-width:280px; overflow:hidden; text-overflow:ellipsis; }
.ai-suggest-bar .ai-sg:hover { background:rgba(124,58,237,.2); }
.chat-plus-menu { position:absolute; bottom:72px; left:18px; background:#15161f; border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:6px; display:flex; flex-direction:column; gap:1px; box-shadow:0 14px 40px rgba(0,0,0,.6); z-index:9999; min-width:258px; animation:cpmIn .16s cubic-bezier(.16,1,.3,1); transform-origin:bottom left; }
@keyframes cpmIn { from{ opacity:0; transform:translateY(8px) scale(.97);} to{ opacity:1; transform:none; } }
.chat-plus-menu .cpm-item { display:flex; align-items:center; gap:12px; background:none; border:none; color:#e2e8f0; text-align:left; padding:10px 12px; border-radius:10px; cursor:pointer; font-size:13.5px; width:100%; }
.chat-plus-menu .cpm-item:hover { background:rgba(124,58,237,.14); }
.chat-plus-menu .cpm-ic { display:inline-flex; width:22px; justify-content:center; color:#a78bfa; flex:0 0 auto; }
.msg-objcard { display:flex; align-items:center; gap:10px; margin:2px 0 6px; background:rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:10px 12px; cursor:pointer; min-width:220px; }
.chat-message.sent .msg-objcard { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.18); }
.msg-objcard .oc-icon { font-size:22px; } .msg-objcard .oc-body { flex:1; min-width:0; }
.msg-objcard .oc-type { font-size:.6rem; font-weight:700; letter-spacing:.06em; opacity:.7; }
.msg-objcard .oc-title { font-size:.85rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-objcard .oc-meta { font-size:.72rem; opacity:.8; margin-top:1px; }
.msg-objcard .oc-arrow { font-size:20px; opacity:.5; }
.chat-input-area { padding: 24px 28px; border-top: 1px solid var(--border-primary); display: flex; gap: 14px; align-items: flex-end; background: var(--bg-card); position: relative; }
.chat-input-wrapper { flex: 1; background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); padding: 14px 18px; }
.chat-input { width: 100%; background: transparent; border: none; color: var(--text-primary); font-family: inherit; font-size: 0.9rem; resize: none; min-height: 22px; max-height: 140px; line-height: 1.45; overflow-y: auto; display: block; white-space: pre-wrap; overflow-wrap: break-word; box-sizing: border-box; }
.chat-input:focus { outline: none; }
.chat-input::placeholder { color: var(--text-muted); }
.chat-send-btn { background: var(--accent-blue); border: none; color: white; width: 46px; height: 46px; border-radius: var(--radius-md); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; }
.chat-send-btn:hover { background: var(--accent-blue-hover); transform: scale(1.02); }
.chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); }
.chat-empty-icon { font-size: 3.5rem; margin-bottom: 16px; opacity: 0.3; }
/* Media Chat Styles */
.chat-media-btns { display: flex; gap: 10px; }
.chat-media-btn { width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--bg-tertiary); border: 1px solid var(--border-primary); color: var(--text-muted); font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; }
.chat-media-btn:hover { background: var(--bg-hover); color: var(--text-secondary); border-color: var(--border-secondary); }
.chat-media-btn.recording { background: var(--accent-red); color: white; border-color: var(--accent-red); animation: pulse 1s infinite; }
.chat-file-input { display: none; }
.chat-attachment-preview { display: flex; gap: 8px; padding: 12px; background: var(--bg-tertiary); border-radius: 12px 12px 0 0; border: 1px solid var(--border-primary); border-bottom: none; flex-wrap: wrap; }
.attachment-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-hover); border-radius: 8px; font-size: 0.85rem; }
.attachment-item .remove-attachment { cursor: pointer; color: var(--accent-red); margin-left: 4px; }
.recording-indicator { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 12px; color: var(--accent-red); }
.recording-dot { width: 12px; height: 12px; background: var(--accent-red); border-radius: 50%; animation: pulse 1s infinite; }
.recording-time { font-weight: 600; font-variant-numeric: tabular-nums; }
/* Message Media Display */
.message-media { margin-top: 8px; max-width: 100%; }
.message-media img { max-width: 280px; max-height: 200px; border-radius: 12px; cursor: pointer; transition: transform 0.2s; }
.message-media img:hover { transform: scale(1.02); }
.message-media video { max-width: 280px; max-height: 200px; border-radius: 12px; background: #000; }
.message-media audio { width: 220px; height: 40px; }
.message-file { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--bg-hover); border-radius: 10px; margin-top: 8px; cursor: pointer; transition: background 0.2s; }
.message-file:hover { background: var(--bg-tertiary); }
.message-file-icon { font-size: 1.5rem; }
.message-file-info { flex: 1; }
.message-file-name { font-size: 0.85rem; font-weight: 500; word-break: break-all; }
.message-file-size { font-size: 0.75rem; color: var(--text-muted); }
.message-file-download { color: var(--accent-blue); font-size: 1.1rem; }
/* Voice Message */
.voice-message { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-hover); border-radius: 20px; min-width: 180px; }
.voice-message-btn { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-blue); border: none; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.voice-message-wave { flex: 1; height: 24px; display: flex; align-items: center; gap: 2px; }
.voice-message-wave span { width: 3px; background: var(--accent-blue); border-radius: 2px; animation: none; }
.voice-message.playing .voice-message-wave span { animation: waveAnimation 0.5s ease-in-out infinite; }
.voice-message-wave span:nth-child(1) { height: 8px; animation-delay: 0s; }
.voice-message-wave span:nth-child(2) { height: 16px; animation-delay: 0.1s; }
.voice-message-wave span:nth-child(3) { height: 12px; animation-delay: 0.2s; }
.voice-message-wave span:nth-child(4) { height: 20px; animation-delay: 0.3s; }
.voice-message-wave span:nth-child(5) { height: 14px; animation-delay: 0.4s; }
.voice-message-wave span:nth-child(6) { height: 10px; animation-delay: 0.5s; }
.voice-message-wave span:nth-child(7) { height: 18px; animation-delay: 0.6s; }
.voice-message-wave span:nth-child(8) { height: 8px; animation-delay: 0.7s; }
.voice-message-duration { font-size: 0.75rem; color: var(--text-muted); min-width: 35px; }
@keyframes waveAnimation { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.5); } }
/* Image Preview Modal */
.image-preview-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.95); display: none; align-items: center; justify-content: center; z-index: 2000; cursor: zoom-out; }
.image-preview-modal.show { display: flex; }
.image-preview-modal img { max-width: 90vw; max-height: 90vh; border-radius: 8px; }
/* Charts */
.chart-container { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 16px; padding: 24px; margin-bottom: 24px; }
.chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.chart-title { font-size: 1.1rem; font-weight: 600; }
.chart-wrapper { position: relative; height: 280px; }
/* Search Bar */
.search-container { position: relative; }
.search-input { width: 260px; padding: 12px 16px 12px 44px; background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: 12px; color: var(--text-primary); font-family: inherit; font-size: 0.9rem; transition: all 0.2s; }
.search-input:focus { outline: none; border-color: var(--accent-blue); width: 320px; }
.search-input::placeholder { color: var(--text-muted); }
.search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.search-results { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 12px; margin-top: 8px; max-height: 400px; overflow-y: auto; display: none; z-index: 1000; box-shadow: var(--shadow-lg); }
.search-results.show { display: block; animation: slideDown 0.2s ease-out; }
.search-result-item { padding: 12px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; border-bottom: 1px solid var(--border-primary); }
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--bg-hover); }
.search-result-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; background: rgba(124, 58, 237, 0.15); }
.search-result-info h4 { font-size: 0.9rem; font-weight: 500; }
.search-result-info p { font-size: 0.75rem; color: var(--text-muted); }
/* Client Tags */
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: all 0.2s; }
.tag-vip { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #000; }
.tag-active { background: var(--accent-green); color: white; }
.tag-lead { background: var(--accent-blue); color: white; }
.tag-paused { background: var(--accent-orange); color: white; }
.tag-new { background: var(--accent-purple); color: white; }
.tags-container { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* Contracts */
.contract-card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 16px; padding: 24px; margin-bottom: 16px; }
.contract-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.contract-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 4px; }
.contract-client { font-size: 0.85rem; color: var(--text-secondary); }
.contract-meta { display: flex; gap: 20px; padding: 16px 0; border-top: 1px solid var(--border-primary); margin-top: 12px; flex-wrap: wrap; }
.contract-actions { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.badge-draft { background: rgba(113, 113, 122, 0.15); color: var(--text-muted); }
.badge-sent { background: rgba(124, 58, 237, 0.15); color: var(--accent-blue); }
.badge-signed { background: rgba(34, 197, 94, 0.15); color: var(--accent-green); }
.badge-recurring { background: rgba(236, 72, 153, 0.15); color: #ec4899; }
/* Announcements */
.announcement-banner { background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%); border-radius: 16px; padding: 20px 24px; margin-bottom: 24px; display: flex; align-items: center; gap: 16px; }
.announcement-banner-icon { font-size: 2rem; }
.announcement-banner-content { flex: 1; }
.announcement-banner-content h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 4px; }
.announcement-banner-content p { font-size: 0.9rem; opacity: 0.9; }
/* Progress Tracker */
.progress-tracker { margin-top: 16px; }
.progress-bar-container { background: var(--bg-tertiary); border-radius: 10px; height: 8px; overflow: hidden; margin-bottom: 8px; }
.progress-bar { height: 100%; border-radius: 10px; transition: width 0.5s ease; }
.progress-bar.low { background: linear-gradient(90deg, var(--accent-red), var(--accent-orange)); }
.progress-bar.medium { background: linear-gradient(90deg, var(--accent-orange), var(--accent-yellow)); }
.progress-bar.high { background: linear-gradient(90deg, var(--accent-yellow), var(--accent-green)); }
.progress-bar.complete { background: linear-gradient(90deg, var(--accent-green), var(--accent-cyan)); }
.progress-info { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }
.progress-percent { font-weight: 600; color: var(--accent-blue); }
.progress-stages { display: flex; gap: 8px; margin-top: 12px; }
.progress-stage { flex: 1; text-align: center; padding: 8px 4px; background: var(--bg-tertiary); border-radius: 8px; font-size: 0.7rem; color: var(--text-muted); transition: all 0.2s; }
.progress-stage.active { background: rgba(124, 58, 237, 0.15); color: var(--accent-blue); }
.progress-stage.completed { background: rgba(34, 197, 94, 0.15); color: var(--accent-green); }
.progress-stage-icon { font-size: 1rem; margin-bottom: 4px; display: block; }
/* Activity Feed */
.activity-feed { max-height: 400px; overflow-y: auto; }
.activity-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border-primary); }
.activity-item:last-child { border-bottom: none; }
.activity-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.activity-icon.message { background: rgba(124, 58, 237, 0.15); }
.activity-icon.invoice { background: rgba(34, 197, 94, 0.15); }
.activity-icon.deliverable { background: rgba(139, 92, 246, 0.15); }
.activity-icon.file { background: rgba(249, 115, 22, 0.15); }
.activity-icon.contract { background: rgba(236, 72, 153, 0.15); }
.activity-content { flex: 1; }
.activity-text { font-size: 0.9rem; margin-bottom: 4px; }
.activity-text strong { color: var(--text-primary); }
.activity-time { font-size: 0.75rem; color: var(--text-muted); }
.activity-empty { text-align: center; padding: 40px 20px; color: var(--text-muted); }
/* Floating Support Button */
.floating-support-btn { position: fixed; bottom: 24px; right: 24px; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); border: none; color: white; font-size: 1.5rem; cursor: pointer; box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4); z-index: 1000; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; }
.floating-support-btn:hover { transform: scale(1.1); box-shadow: 0 6px 30px rgba(124, 58, 237, 0.5); }
.floating-support-btn .unread-dot { position: absolute; top: 0; right: 0; width: 20px; height: 20px; background: var(--accent-red); border-radius: 50%; font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 3px solid var(--bg-primary); animation: pulse 2s infinite; }
.floating-support-tooltip { position: absolute; bottom: 70px; right: 0; background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 12px; padding: 12px 16px; white-space: nowrap; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(10px); transition: all 0.3s ease; pointer-events: none; }
.floating-support-btn:hover .floating-support-tooltip { opacity: 1; transform: translateY(0); }
/* Scheduling */
.call-type-card { background: linear-gradient(165deg, rgba(12, 18, 34, 0.6) 0%, rgba(8, 12, 20, 0.9) 100%); border: 1px solid rgba(255,255,255,0.04); border-radius: var(--radius-xl); padding: 28px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; box-shadow: var(--shadow-card); }
.call-type-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); }
.call-type-card:hover { border-color: rgba(124, 58, 237, 0.3); transform: translateY(-4px); box-shadow: var(--shadow-card), 0 12px 40px rgba(124, 58, 237, 0.1); }
.call-type-card.strategy:hover { border-color: rgba(139, 92, 246, 0.3); box-shadow: var(--shadow-card), 0 12px 40px rgba(139, 92, 246, 0.1); }
.call-type-header { display: flex; align-items: flex-start; margin-bottom: 20px; }
.call-type-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0; }
.call-type-icon.strategy { background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%); border: 1px solid rgba(139, 92, 246, 0.2); }
.call-type-icon.ai { background: linear-gradient(135deg, rgba(34, 211, 238, 0.2) 0%, rgba(124, 58, 237, 0.1) 100%); border: 1px solid rgba(34, 211, 238, 0.2); }
.call-type-info { flex: 1; margin-left: 16px; }
.call-type-name { font-size: 1.15rem; font-weight: 600; margin-bottom: 6px; }
.call-type-desc { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5; }
.call-type-features { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.call-type-feature { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(255,255,255,0.03); border-radius: 20px; font-size: 0.8rem; color: var(--text-secondary); }
.call-type-meta { display: flex; gap: 20px; margin-bottom: 20px; color: var(--text-muted); font-size: 0.85rem; }
.call-type-limit { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.call-limit-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.call-limit-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.call-limit-fill.green { background: linear-gradient(90deg, var(--accent-green), #4ade80); }
.call-limit-fill.yellow { background: linear-gradient(90deg, var(--accent-yellow), #fbbf24); }
.call-limit-fill.red { background: linear-gradient(90deg, var(--accent-red), #f87171); }
.call-type-btn { width: 100%; padding: 14px 24px; border-radius: var(--radius-md); font-weight: 500; font-size: 0.95rem; transition: all 0.25s; }
.call-type-btn.ai { background: linear-gradient(135deg, #22d3ee 0%, #7c3aed 100%); color: white; border: none; cursor: pointer; }
.call-type-btn.ai:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(34, 211, 238, 0.3); }
.call-type-btn.strategy { background: linear-gradient(135deg, #a855f7 0%, #8b5cf6 100%); color: white; border: none; cursor: pointer; }
.call-type-btn.strategy:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3); }
.appointment-card { background: linear-gradient(165deg, rgba(12, 18, 34, 0.5) 0%, rgba(8, 12, 20, 0.8) 100%); border: 1px solid rgba(255,255,255,0.04); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 12px; display: flex; align-items: center; gap: 16px; }
.appointment-date { text-align: center; padding: 14px 18px; background: linear-gradient(135deg, rgba(124, 58, 237, 0.15) 0%, rgba(124, 58, 237, 0.05) 100%); border-radius: 12px; min-width: 75px; border: 1px solid rgba(124, 58, 237, 0.1); }
.appointment-date .day { font-size: 1.6rem; font-weight: 700; color: var(--accent-blue); }
.appointment-date .month { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.appointment-info { flex: 1; }
.appointment-title { font-weight: 600; margin-bottom: 6px; font-size: 1.05rem; }
.appointment-time { color: var(--text-secondary); font-size: 0.9rem; }
.appointment-host { color: var(--text-muted); font-size: 0.85rem; margin-top: 4px; }
.appointment-status { padding: 6px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
.appointment-status.scheduled { background: rgba(124, 58, 237, 0.15); color: var(--accent-blue); }
.appointment-status.completed { background: rgba(34, 197, 94, 0.15); color: var(--accent-green); }
.appointment-status.cancelled { background: rgba(239, 68, 68, 0.15); color: var(--accent-red); }
.appointment-status.missed { background: rgba(234, 179, 8, 0.15); color: var(--accent-yellow); }
.appointment-link { font-size: 0.85rem; margin-top: 4px; }
.appointment-link a { text-decoration: none; }
.appointment-link a:hover { text-decoration: underline; }
.availability-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 16px; }
.availability-day { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 12px; padding: 12px; text-align: center; }
.availability-day.active { border-color: var(--accent-green); background: rgba(34, 197, 94, 0.05); }
.availability-day-name { font-weight: 600; font-size: 0.85rem; margin-bottom: 8px; }
.availability-day-times { font-size: 0.8rem; color: var(--text-secondary); }
.host-card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 16px; padding: 20px; margin-bottom: 16px; }
.host-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.host-avatar { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue)); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: white; font-weight: 600; }
.host-info h3 { margin-bottom: 4px; }
.host-info p { color: var(--text-secondary); font-size: 0.9rem; }
/* Billing Combined */
.billing-tabs { display: flex; gap: 8px; margin-bottom: 24px; background: rgba(8, 12, 20, 0.5); padding: 6px; border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,0.03); }
.billing-tab { padding: 10px 20px; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); cursor: pointer; transition: all 0.25s; border: none; font-size: 0.875rem; font-weight: 450; }
.billing-tab.active { background: linear-gradient(135deg, var(--accent-blue) 0%, #6d28d9 100%); color: white; box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3); }
.billing-tab:hover:not(.active) { background: rgba(255,255,255,0.04); color: var(--text-primary); }
/* Comments */
.comments-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-primary); }
.comments-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.comments-title { font-weight: 600; font-size: 0.9rem; color: var(--text-secondary); }
.comments-list { max-height: 300px; overflow-y: auto; }
.comment-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-primary); }
.comment-item:last-child { border-bottom: none; }
.comment-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-purple); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: white; flex-shrink: 0; }
.comment-avatar.admin { background: var(--accent-blue); }
.comment-content { flex: 1; }
.comment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.comment-author { font-weight: 600; font-size: 0.85rem; }
.comment-time { font-size: 0.75rem; color: var(--text-muted); }
.comment-text { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; }
.comment-input-wrapper { display: flex; gap: 8px; margin-top: 12px; }
.comment-input { flex: 1; padding: 10px 14px; border: 1px solid var(--border-primary); border-radius: 20px; background: var(--bg-tertiary); color: var(--text-primary); font-size: 0.9rem; resize:none; max-height:120px; overflow-y:auto; line-height:1.5; font-family:inherit; }
.comment-input:focus { outline: none; border-color: var(--accent-blue); }
.comment-send-btn { padding: 10px 16px; border-radius: 20px; background: var(--accent-blue); border: none; color: white; cursor: pointer; }
/* Star Rating */
.star-rating { display: flex; gap: 4px; }
.star { font-size: 1.5rem; cursor: pointer; color: var(--text-muted); transition: all 0.2s; }
.star:hover, .star.active { color: var(--accent-yellow); transform: scale(1.1); }
.star.filled { color: var(--accent-yellow); }
.feedback-card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.feedback-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.feedback-stars { display: flex; gap: 2px; }
.feedback-text { color: var(--text-secondary); font-size: 0.9rem; font-style: italic; }
.feedback-meta { font-size: 0.8rem; color: var(--text-muted); margin-top: 8px; }
.avg-rating { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: rgba(234, 179, 8, 0.1); border-radius: 10px; margin-bottom: 16px; }
.avg-rating-value { font-size: 1.5rem; font-weight: 700; color: var(--accent-yellow); }
.avg-rating-stars { display: flex; gap: 2px; }
.avg-rating-count { color: var(--text-muted); font-size: 0.85rem; }
/* Project Templates */
.template-card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 16px; padding: 20px; margin-bottom: 16px; transition: all 0.2s; }
.template-card:hover { border-color: var(--accent-blue); }
.template-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.template-name { font-size: 1.1rem; font-weight: 600; }
.template-desc { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 16px; }
.template-items { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.template-item-badge { padding: 6px 12px; background: var(--bg-tertiary); border-radius: 20px; font-size: 0.8rem; color: var(--text-secondary); }
.template-actions { display: flex; gap: 8px; }
/* Analytics */
.analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 24px; }
.analytics-card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 16px; padding: 20px; }
.analytics-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.analytics-card-title { font-size: 0.9rem; color: var(--text-secondary); font-weight: 500; }
.analytics-card-value { font-size: 2rem; font-weight: 700; }
.analytics-card-change { font-size: 0.85rem; padding: 4px 8px; border-radius: 20px; }
.analytics-card-change.positive { background: rgba(34, 197, 94, 0.1); color: var(--accent-green); }
.analytics-card-change.negative { background: rgba(239, 68, 68, 0.1); color: var(--accent-red); }
.analytics-chart-container { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 16px; padding: 20px; margin-bottom: 20px; }
.analytics-chart-title { font-size: 1rem; font-weight: 600; margin-bottom: 16px; }
.chart-wrapper { position: relative; height: 300px; }
/* Client Health */
.health-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border-primary); }
.health-stat { text-align: center; }
.health-stat-value { font-size: 1.8rem; font-weight: 700; }
.health-stat-label { font-size: 0.85rem; color: var(--text-muted); }
.health-list { display: flex; flex-direction: column; gap: 8px; max-height: 400px; overflow-y: auto; }
.health-item { display: grid; grid-template-columns: 1fr auto auto auto; gap: 16px; align-items: center; padding: 12px 16px; background: var(--bg-tertiary); border-radius: 10px; border-left: 3px solid transparent; }
.health-item.healthy { border-left-color: #22c55e; }
.health-item.at-risk { border-left-color: #f59e0b; }
.health-item.inactive { border-left-color: #ef4444; }
.health-item-name { font-weight: 600; }
.health-item-company { font-size: 0.85rem; color: var(--text-muted); }
.health-item-metrics { display: flex; gap: 12px; font-size: 0.85rem; color: var(--text-secondary); }
.health-item-score { display: flex; align-items: center; gap: 8px; min-width: 100px; }
.health-score-bar { flex: 1; height: 8px; background: var(--bg-secondary); border-radius: 4px; overflow: hidden; }
.health-score-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }
.health-score-fill.healthy { background: #22c55e; }
.health-score-fill.at-risk { background: #f59e0b; }
.health-score-fill.inactive { background: #ef4444; }
.health-score-value { font-weight: 600; font-size: 0.9rem; min-width: 30px; }
@media (max-width: 768px) { .health-summary { grid-template-columns: repeat(2, 1fr); } .health-item { grid-template-columns: 1fr; gap: 8px; } }
/* Goals */
.goal-card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 16px; padding: 20px; margin-bottom: 16px; }
.goal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.goal-title { font-size: 1.1rem; font-weight: 600; }
.goal-type { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
.goal-progress-container { margin-bottom: 12px; }
.goal-progress-bar { height: 12px; background: var(--bg-tertiary); border-radius: 6px; overflow: hidden; }
.goal-progress-fill { height: 100%; border-radius: 6px; transition: width 0.5s ease; }
.goal-progress-fill.low { background: var(--accent-red); }
.goal-progress-fill.medium { background: var(--accent-yellow); }
.goal-progress-fill.high { background: var(--accent-green); }
.goal-progress-text { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.85rem; color: var(--text-secondary); }
.goal-meta { display: flex; gap: 16px; font-size: 0.85rem; color: var(--text-muted); }
.goal-actions { display: flex; gap: 8px; margin-top: 12px; }
/* Milestones */
.milestone-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-tertiary); border-radius: 10px; margin-bottom: 8px; }
.milestone-checkbox { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.milestone-checkbox.completed { background: var(--accent-green); border-color: var(--accent-green); }
.milestone-checkbox.completed::after { content: '✓'; color: white; font-size: 0.8rem; }
.milestone-content { flex: 1; }
.milestone-title { font-weight: 500; }
.milestone-title.completed { text-decoration: line-through; color: var(--text-muted); }
.milestone-due { font-size: 0.8rem; color: var(--text-muted); }
/* Sales Pipeline */
.pipeline-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 24px; }
.pipeline-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; min-height: 500px; overflow-x: auto; }
.pipeline-column { background: var(--bg-tertiary); border-radius: 12px; padding: 12px; min-width: 220px; }
.pipeline-column-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; margin-bottom: 12px; font-weight: 600; font-size: 0.9rem; }
.pipeline-column-count { background: var(--bg-secondary); padding: 2px 8px; border-radius: 12px; font-size: 0.8rem; }
.pipeline-column-value { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 12px; }
.pipeline-cards { display: flex; flex-direction: column; gap: 10px; min-height: 200px; }
.pipeline-card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 10px; padding: 14px; cursor: pointer; transition: all 0.2s; }
.pipeline-card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.pipeline-card.needs-followup { border-left: 3px solid var(--accent-yellow); }
.pipeline-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.pipeline-card-name { font-weight: 600; font-size: 0.95rem; }
.pipeline-card-value { color: var(--gold); font-weight: 600; font-size: 0.9rem; }
.pipeline-card-company { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 8px; }
.pipeline-card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }
.pipeline-card-followup { font-size: 0.8rem; color: var(--accent-yellow); margin-top: 8px; }
.tag-small { font-size: 0.7rem; padding: 2px 6px; background: var(--bg-secondary); border-radius: 4px; color: var(--text-secondary); }
.lead-detail-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--border-primary); margin-bottom: 16px; }
.lead-detail-info { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.lead-detail-info .info-row { display: flex; align-items: center; gap: 10px; }
.lead-detail-info .info-row a { color: var(--gold); }
.lead-detail-notes { background: var(--bg-tertiary); padding: 14px; border-radius: 10px; margin-bottom: 16px; }
.lead-detail-notes h4 { margin: 0 0 8px; font-size: 0.9rem; color: var(--text-secondary); }
.lead-detail-notes p { margin: 0; white-space: pre-wrap; }
.lead-detail-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.lead-contact-buttons { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.lead-contact-buttons .btn { flex: 1; min-width: 80px; justify-content: center; }
@media (max-width: 1200px) { .pipeline-board { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .pipeline-board { grid-template-columns: 1fr; } .pipeline-column { min-width: 100%; } }
@media (max-width: 768px) { #companyProfileForm div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; } }
/* Forecast */
.forecast-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
.forecast-item { background: var(--bg-tertiary); border-radius: 12px; padding: 16px; text-align: center; }
.forecast-label { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 4px; }
.forecast-value { font-size: 1.5rem; font-weight: 700; }
.forecast-value.projected { color: var(--accent-cyan); }
/* Tier System */
.tier-display { background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-tertiary) 100%); border: 1px solid var(--border-primary); border-radius: 16px; padding: 24px; margin-bottom: 24px; }
.tier-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.tier-level { font-size: 1.5rem; font-weight: 700; }
.tier-progress { margin: 16px 0; }
.tier-progress-bar { height: 8px; background: var(--bg-tertiary); border-radius: 4px; overflow: hidden; }
.tier-progress-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #22c55e, #7c3aed, #8b5cf6, #eab308); }
.tier-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 16px; }
.tier-benefit { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; padding: 12px; background: var(--bg-tertiary); border-radius: 10px; }
.tier-benefit.locked { opacity: 0.5; }
.tier-benefit .check { color: var(--accent-green); }
.tier-benefit .lock { color: var(--text-muted); }
/* Timeline */
.timeline-container { position: relative; padding-left: 30px; }
.timeline-line { position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: var(--border-primary); }
.timeline-item { position: relative; padding-bottom: 24px; }
.timeline-dot { position: absolute; left: -26px; width: 14px; height: 14px; border-radius: 50%; background: var(--border-secondary); border: 2px solid var(--bg-primary); }
.timeline-dot.completed { background: var(--accent-green); }
.timeline-dot.current { background: var(--accent-blue); box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.2); }
.timeline-dot.upcoming { background: var(--bg-tertiary); }
.timeline-content { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 12px; padding: 16px; }
.timeline-date { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 4px; }
.timeline-title { font-weight: 600; margin-bottom: 4px; }
.timeline-desc { font-size: 0.9rem; color: var(--text-secondary); }
/* Vault/Prompts/Templates Cards */
.resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.resource-card { background: linear-gradient(165deg, rgba(12, 18, 34, 0.5) 0%, rgba(8, 12, 20, 0.85) 100%); border: 1px solid rgba(255,255,255,0.04); border-radius: var(--radius-lg); overflow: hidden; transition: all 0.3s; box-shadow: var(--shadow-card); position: relative; }
.resource-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent); }
.resource-card:hover { border-color: var(--accent-blue); transform: translateY(-2px); }
.resource-card.locked { opacity: 0.6; }
.resource-card.locked:hover { transform: none; border-color: var(--border-primary); }
.resource-card-header { padding: 20px; border-bottom: 1px solid var(--border-primary); }
.resource-card-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 12px; }
.resource-card-icon.vault { background: linear-gradient(135deg, #22c55e20, #22c55e40); }
.resource-card-icon.prompt { background: linear-gradient(135deg, #7c3aed20, #7c3aed40); }
.resource-card-icon.template { background: linear-gradient(135deg, #8b5cf620, #8b5cf640); }
.resource-card-title { font-weight: 600; font-size: 1.1rem; margin-bottom: 4px; }
.resource-card-desc { font-size: 0.85rem; color: var(--text-secondary); }
.resource-card-body { padding: 16px 20px; }
.resource-card-meta { display: flex; gap: 12px; font-size: 0.8rem; color: var(--text-muted); }
.resource-card-footer { padding: 16px 20px; border-top: 1px solid var(--border-primary); display: flex; justify-content: space-between; align-items: center; }
.resource-tier-badge { font-size: 0.75rem; padding: 4px 10px; border-radius: 20px; font-weight: 600; }
/* Referral Card */
.referral-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.referral-stat { background: var(--bg-tertiary); border-radius: 12px; padding: 20px; text-align: center; }
.referral-stat-value { font-size: 2rem; font-weight: 700; }
.referral-stat-label { font-size: 0.85rem; color: var(--text-muted); margin-top: 4px; }
.referral-link-box { background: var(--bg-tertiary); border: 1px dashed var(--border-secondary); border-radius: 12px; padding: 20px; text-align: center; }
.referral-code { font-size: 1.5rem; font-weight: 700; letter-spacing: 2px; margin: 12px 0; color: var(--accent-blue); }
/* Service Request */
.request-card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.request-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.request-title { font-weight: 600; }
.request-type { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
.request-body { color: var(--text-secondary); font-size: 0.9rem; }
/* Meeting Notes */
.note-card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.note-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.note-title { font-weight: 600; font-size: 1.1rem; }
.note-date { font-size: 0.8rem; color: var(--text-muted); }
.note-content { color: var(--text-secondary); margin-bottom: 16px; white-space: pre-wrap; }
.note-actions { background: var(--bg-tertiary); border-radius: 8px; padding: 12px; }
.note-actions-title { font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; color: var(--accent-blue); }
/* Review Stars */
.star-rating { display: flex; gap: 8px; }
.star-rating .star { font-size: 2rem; cursor: pointer; transition: all 0.2s; color: var(--border-secondary); }
.star-rating .star.active { color: #eab308; }
.star-rating .star:hover { transform: scale(1.1); }
/* Quick Actions */
.quick-action-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 16px; background: linear-gradient(165deg, rgba(12, 18, 34, 0.5) 0%, rgba(8, 12, 20, 0.85) 100%); border: 1px solid rgba(255,255,255,0.04); border-radius: var(--radius-lg); cursor: pointer; transition: all 0.25s; color: var(--text-secondary); font-size: 0.85rem; font-weight: 500; }
.quick-action-btn:hover { background: rgba(124, 58, 237, 0.1); border-color: rgba(124, 58, 237, 0.2); color: var(--text-primary); transform: translateY(-2px); }
.quick-action-icon { font-size: 1.5rem; }
/* Status Indicator */
.status-indicator { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--text-muted); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; }
.status-dot.online { background: var(--accent-green); box-shadow: 0 0 8px var(--accent-green); }
.status-dot.away { background: var(--accent-yellow); }
.status-dot.offline { background: var(--text-muted); }
/* Message Templates */
.template-picker { position: absolute; bottom: 100%; left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border-secondary); border-radius: var(--radius-md); margin-bottom: 8px; max-height: 200px; overflow-y: auto; display: none; box-shadow: var(--shadow-md); z-index: 10; }
.template-picker.show { display: block; }
.template-item { padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--border-primary); transition: background 0.15s; }
.template-item:hover { background: var(--bg-hover); }
.template-item:last-child { border-bottom: none; }
.template-item-title { font-weight: 500; font-size: 0.9rem; margin-bottom: 4px; }
.template-item-preview { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Pinned Message */
.pinned-message { background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%); border: 1px solid rgba(124, 58, 237, 0.2); border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 16px; position: relative; }
.pinned-message::before { content: '📌'; position: absolute; top: -8px; left: 12px; background: var(--bg-card); padding: 0 4px; font-size: 0.9rem; }
.pinned-message-content { font-size: 0.9rem; color: var(--text-secondary); }
.pinned-message-meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 8px; }
/* Welcome Banner */
.welcome-banner { background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(124, 58, 237, 0.1) 100%); border: 1px solid rgba(34, 197, 94, 0.2); border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 24px; display: flex; align-items: center; gap: 16px; }
.welcome-banner-icon { font-size: 2.5rem; }
.welcome-banner-content h3 { font-size: 1.1rem; margin-bottom: 4px; }
.welcome-banner-content p { color: var(--text-secondary); font-size: 0.9rem; }
/* File Styles */
.file-upload-zone { border: 2px dashed var(--border-secondary); border-radius: 16px; padding: 40px; text-align: center; transition: all 0.3s; cursor: pointer; }
.file-upload-zone:hover { border-color: var(--accent-blue); background: rgba(124, 58, 237, 0.05); }
.file-upload-icon { font-size: 3rem; margin-bottom: 16px; }
.file-upload-text { font-size: 1rem; margin-bottom: 8px; }
.file-upload-hint { font-size: 0.85rem; color: var(--text-muted); }
.file-list { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.file-item { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: 12px; }
.file-icon { width: 48px; height: 48px; border-radius: 10px; background: var(--bg-hover); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.file-info { flex: 1; min-width: 0; }
.file-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-meta { font-size: 0.8rem; color: var(--text-secondary); margin-top: 4px; }
.file-actions { display: flex; gap: 8px; }
/* Deliverable & Invoice Cards */
.deliverable-card, .invoice-card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 16px; padding: 24px; margin-bottom: 16px; transition: all 0.2s; }
.deliverable-card:hover, .invoice-card:hover { border-color: var(--border-secondary); }
.deliverable-card.overdue, .invoice-card.overdue { border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.02); }
.deliverable-header, .invoice-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; gap: 16px; }
.deliverable-title, .invoice-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 4px; }
.deliverable-desc { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; }
.invoice-number { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 4px; }
.invoice-amount { font-size: 1.5rem; font-weight: 700; color: var(--accent-green); }
.invoice-amount.unpaid { color: var(--accent-yellow); }
.invoice-amount.overdue { color: var(--accent-red); }
.deliverable-meta, .invoice-meta { display: flex; gap: 20px; padding: 16px 0; border-top: 1px solid var(--border-primary); margin-top: 12px; flex-wrap: wrap; }
.deliverable-meta-item { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-secondary); }
.deliverable-actions, .invoice-actions { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
/* Book Call Card for Clients */
.book-call-card { background: linear-gradient(135deg, rgba(124, 58, 237, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%); border: 1px solid rgba(124, 58, 237, 0.2); border-radius: var(--radius-xl); padding: 28px 32px; margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; position: relative; overflow: hidden; }
.book-call-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.3), transparent); }
.book-call-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.book-call-card p { color: var(--text-secondary); font-size: 0.9rem; }
.book-call-btn { padding: 14px 28px; background: linear-gradient(135deg, var(--accent-blue) 0%, #6d28d9 100%); color: white; border: none; border-radius: var(--radius-md); font-weight: 500; cursor: pointer; transition: all 0.25s; font-size: 0.95rem; }
.book-call-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(124, 58, 237, 0.35); }
.book-call-content h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; }
.book-call-content p { opacity: 0.9; font-size: 0.95rem; }
.book-call-btn { background: white; color: var(--accent-purple); padding: 14px 28px; border-radius: 12px; font-weight: 700; cursor: pointer; border: none; font-family: inherit; font-size: 1rem; transition: all 0.2s; }
.book-call-btn:hover { transform: scale(1.05); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
/* Email Preview */
.email-preview { background: #fff; color: #333; border-radius: 12px; padding: 24px; margin-top: 16px; font-family: Arial, sans-serif; }
.email-preview h3 { color: #1a1a2e; margin-bottom: 16px; }
.email-preview p { margin-bottom: 12px; line-height: 1.6; }
.email-preview .email-button { display: inline-block; background: #7c3aed; color: #fff !important; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.email-preview .email-footer { margin-top: 24px; padding-top: 16px; border-top: 1px solid #eee; font-size: 0.85rem; color: #666; }
/* Modal Styles */
.modal-overlay { position: fixed; inset: 0; background: rgba(3, 7, 18, 0.85); backdrop-filter: blur(12px); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 24px; }
.modal-overlay.show { display: flex; }
.modal { background: linear-gradient(165deg, rgba(12, 18, 34, 0.95) 0%, rgba(6, 10, 18, 0.98) 100%); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--radius-2xl); width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; animation: fadeInScale 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.03); backdrop-filter: blur(24px); position: relative; }
.modal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); }
.modal-header { padding: 24px 28px; border-bottom: 1px solid var(--border-primary); display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-size: 1.1rem; font-weight: 600; }
.modal-close { width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--gradient-glass); border: 1px solid var(--border-primary); color: var(--text-muted); font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; }
.modal-close:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--accent-blue); }
.modal-body { padding: 24px 28px; }
.modal-footer { padding: 18px 28px; border-top: 1px solid var(--border-primary); display: flex; gap: 12px; justify-content: flex-end; background: rgba(15, 23, 42, 0.4); }
.dashboard-view { display: none; }
.dashboard-view.active { display: block; animation: fadeIn 0.3s ease-out; }
.toast-container { position: fixed; top: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 12px; }
.toast { padding: 14px 18px; background: linear-gradient(145deg, var(--bg-card) 0%, rgba(15, 23, 42, 0.95) 100%); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 12px; animation: slideInRight 0.3s ease-out; min-width: 280px; backdrop-filter: blur(12px); }
.toast.success { border-color: rgba(16, 185, 129, 0.25); }
.toast.error { border-color: rgba(239, 68, 68, 0.25); }
.toast-icon { font-size: 1.15rem; }
.toast-message { flex: 1; font-size: 0.88rem; }
.mobile-menu-btn { display: none; position: fixed; top: 20px; left: 20px; z-index: 200; width: 44px; height: 44px; background: var(--gradient-card); border: 1px solid var(--glass-border); border-radius: var(--radius-md); cursor: pointer; align-items: center; justify-content: center; font-size: 1.2rem; backdrop-filter: blur(8px); }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(3, 7, 18, 0.6); z-index: 99; backdrop-filter: blur(4px); }
.sidebar-overlay.show { display: block; }
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: linear-gradient(180deg, var(--bg-card) 0%, rgba(15, 23, 42, 0.98) 100%); border-top: 1px solid var(--glass-border); padding: 18px 32px; display: none; align-items: center; justify-content: space-between; gap: 20px; z-index: 1001; animation: slideUp 0.4s ease-out; flex-wrap: wrap; backdrop-filter: blur(20px); }
.cookie-banner.show { display: flex; }
.cookie-banner-text { flex: 1; font-size: 0.88rem; color: var(--text-secondary); min-width: 300px; }
.cookie-banner-text a { color: var(--accent-blue); text-decoration: none; }
.cookie-banner-actions { display: flex; gap: 12px; }
.legal-content { max-width: 800px; }
.legal-content h2 { font-size: 1.2rem; margin: 32px 0 16px; color: var(--text-primary); }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { color: var(--text-secondary); line-height: 1.7; margin-bottom: 16px; }
.data-item { background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.data-item-label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.data-item-value { font-size: 1rem; color: var(--text-primary); }
@media (max-width: 1024px) {
.sidebar { transform: translateX(-100%); }
.sidebar.open { transform: translateX(0); }
.main-content { margin-left: 0; }
.mobile-menu-btn { display: flex; }
.card-grid { grid-template-columns: 1fr; }
.content-body { padding: 20px; }
.chat-sidebar { width: 100%; position: absolute; left: 0; top: 0; bottom: 0; z-index: 10; background: var(--bg-card); }
.notification-dropdown { width: 300px; right: -100px; }
}
@media (max-width: 768px) {
.form-row { grid-template-columns: 1fr; }
.stats-grid { grid-template-columns: 1fr 1fr; }
.landing-logo { font-size: 2.5rem; }
.cookie-banner { flex-direction: column; text-align: center; }
.book-call-card { flex-direction: column; text-align: center; }
.analytics-grid { grid-template-columns: 1fr 1fr; }
.analytics-chart-container > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
.forecast-summary { grid-template-columns: 1fr 1fr; }
.chart-wrapper { height: 250px; }
}
/* ========== MOBILE SPEED OPTIMIZATIONS ========== */
/* NOTE: previously forced animation-duration:0.1s on ALL elements at <768px,
which made spinners/loaders spin frantically and broke timed animations.
Removed — animations now run at their intended speed on mobile too. */
/* Larger touch targets (min 44px) */
@media (max-width: 1024px) {
.btn, button { min-height: 44px; min-width: 44px; }
.nav-item { padding: 14px 16px; min-height: 48px; }
.form-input, .form-select, .form-textarea { min-height: 48px; font-size: 16px !important; }
.notification-btn { width: 48px; height: 48px; }
}
/* Mobile bottom navigation */
.mobile-bottom-nav {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--bg-secondary);
border-top: 1px solid var(--border-primary);
padding: 8px 0;
padding-bottom: max(8px, env(safe-area-inset-bottom));
z-index: 1000;
justify-content: space-around;
backdrop-filter: blur(20px);
}
@media (max-width: 768px) {
.mobile-bottom-nav { display: flex; }
.mobile-menu-btn { display: none !important; } /* na mobilnom koristimo donji Menu, plutajuci hamburger se ruzno preklapao */
.main-content { padding-bottom: 80px; }
.sidebar { display: none !important; }
.sidebar.open { display: flex !important; }
}
.mobile-nav-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 8px 16px;
color: var(--text-muted);
text-decoration: none;
font-size: 0.7rem;
border-radius: 12px;
transition: all 0.15s ease;
cursor: pointer;
border: none;
background: none;
}
/* No color change on tap — icons stay consistent (per preference) */
.mobile-nav-item.active {
color: var(--text-muted);
}
.mobile-nav-item .nav-icon {
font-size: 1.4rem;
}
/* Fast scroll on mobile */
@media (max-width: 768px) {
.main-content, .sidebar-nav, .chat-messages, .section-body {
-webkit-overflow-scrolling: touch;
scroll-behavior: auto;
}
}
/* Pull to refresh indicator */
.pull-to-refresh {
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%) translateY(-100%);
background: var(--accent-blue);
color: white;
padding: 12px 24px;
border-radius: 0 0 16px 16px;
font-size: 0.85rem;
z-index: 9999;
transition: transform 0.2s ease;
}
.pull-to-refresh.visible {
transform: translateX(-50%) translateY(0);
}
/* Mobile-optimized cards */
@media (max-width: 768px) {
.section-card { border-radius: 16px; margin-bottom: 16px; }
.content-header { padding: 16px 20px; }
.content-header-left h1 { font-size: 1.25rem; }
.stat-card { padding: 16px; }
.deliverable-card, .invoice-card, .client-card { padding: 16px; }
.modal { margin: 16px; max-height: calc(100vh - 32px); }
.modal-content { padding: 20px; }
}
/* Sticky mobile header */
@media (max-width: 768px) {
.content-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--bg-primary);
}
}
/* ===== MOBILE RESPONSIVE HARDENING — no horizontal overflow, wrapping toolbars, scrollable tab rows ===== */
@media (max-width: 768px) {
html, body { max-width: 100%; overflow-x: hidden; }
.main-content { max-width: 100vw; overflow-x: hidden; }
/* header: title row [hamburger | title | bell], actions wrap below */
.content-header { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; position: sticky; }
.content-header-left { padding-left: 50px; padding-right: 50px; } /* room for hamburger (left) + bell (right) */
/* pin the notification bell to the top-right, inline with the title */
.content-header .notification-wrapper { position: absolute; top: 12px; right: 14px; margin: 0 !important; }
.content-header-right { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.content-header-right > .btn, .content-header-right button.btn { flex: 1 1 auto; }
/* if the bell is the only action, header-right collapses (no empty row) */
.content-header-right:empty { display: none; }
/* notification dropdown fits the phone width */
.content-header .notification-dropdown { width: calc(100vw - 24px) !important; max-width: 340px; right: 0 !important; }
.content-body { padding: 16px; }
/* tab / segmented rows: scroll horizontally instead of being cut off */
.billing-tabs, .sub-tabs, .subtabs, .segmented, .pill-tabs, [class$="-tabs"], [class*="-tabs "] {
display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
gap: 8px; scrollbar-width: none;
}
.billing-tabs::-webkit-scrollbar, [class$="-tabs"]::-webkit-scrollbar { display: none; }
.billing-tabs > *, [class$="-tabs"] > * { flex: 0 0 auto; white-space: nowrap; }
/* cards never wider than the screen */
.section-card, .stat-card, .invoice-card, .client-card, .deliverable-card,
.contract-card, .proposal-card, .card, .glass-card { width: 100%; max-width: 100%; box-sizing: border-box; }
/* media / wide content shouldn't push the layout */
.content-body img, .content-body pre, .content-body video, .content-body canvas { max-width: 100%; height: auto; }
/* wide tables scroll inside their own box */
.content-body table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* keep the e-sign signature writing smooth on mobile (exempt from the global 0.1s speed-up) */
@media (max-width: 768px) {
.bcs-sigsvg, .bcs-sigimg, .bcs-nib, .bcs-nib * { animation-duration: inherit !important; transition-duration: inherit !important; }
}
/* Client rows: stack avatar+name, then tier badge, then actions — so the name is never crushed */
@media (max-width: 768px) {
#adminClientGrid > .bc-card { grid-template-columns: 44px 1fr !important; row-gap: 12px !important; align-items: start !important; }
#adminClientGrid > .bc-card > span { grid-column: 1 / -1 !important; justify-self: start !important; }
#adminClientGrid > .bc-card > div:last-child { grid-column: 1 / -1 !important; justify-content: flex-start !important; }
}
/* Sidebar drawer on mobile: tighter, premium spacing (desktop stays airy) */
@media (max-width: 768px) {
/* hide the floating hamburger while the drawer is open (it was covering the logo) */
body:has(.sidebar.open) .mobile-menu-btn { display: none !important; }
/* drawer covers from the very top, above the sticky header, with a dimmed backdrop */
.sidebar { top: 0 !important; height: 100vh !important; z-index: 2000 !important; width: min(86vw, 330px) !important; }
.sidebar.open { box-shadow: 0 0 0 100vmax rgba(0,0,0,.55) !important; }
.sidebar .sidebar-nav { padding: 12px 12px 24px !important; }
.sidebar .nav-section { margin-bottom: 10px !important; }
.sidebar .nav-section-title { margin-bottom: 6px !important; }
.sidebar .nav-item { margin-bottom: 2px !important; }
.sidebar-header { padding: 20px 18px 16px !important; }
}
/* FIX: the mobile touch-target min-height:48px was overriding the accordion's
max-height:0, so collapsed groups still reserved full height (huge gaps).
Force collapsed items to truly shrink. */
@media (max-width: 1024px) {
.nav-section.collapsed .nav-item { min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
}
/* Chat: mobile master–detail. List first; tapping a conversation opens the
thread full-screen with a back button (no absolute overlap, no split-crush). */
.chat-back { display: none; background: transparent; border: 1px solid rgba(255,255,255,.08); color: var(--text-secondary); width: 36px; height: 36px; border-radius: 9px; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; margin-right: 6px; }
@media (max-width: 768px) {
#adminChatView .chat-container { flex-direction: column !important; }
#adminChatView .chat-sidebar { position: static !important; width: 100% !important; border-right: none !important; }
#adminChatView .chat-main { width: 100% !important; }
#adminChatView .chat-container:not(.chat-open) .chat-main { display: none !important; }
#adminChatView .chat-container.chat-open .chat-sidebar { display: none !important; }
#adminChatView .chat-container.chat-open .chat-main { display: flex !important; min-height: 72vh; }
#adminChatView .chat-container.chat-open .chat-back { display: inline-flex !important; }
}
/* Documents: stack the page list above the editor on mobile (no more 2 crushed columns) */
@media (max-width: 768px) {
#bcDocsHost .bcd-wrap { flex-direction: column !important; }
#bcDocsHost .bcd-side, #bcDocsHost .bcd-main { width: 100% !important; max-width: 100% !important; }
#bcDocsHost .bcd-side { border-right: none !important; border-bottom: 1px solid rgba(124,58,237,.12); }
}
/* Invoice line items: stack on mobile so Description isn't crushed */
@media (max-width: 768px) {
.inv-items-head { display: none !important; }
.inv-item-row { grid-template-columns: 1fr 1fr auto !important; gap: 8px !important; padding: 12px !important; }
.inv-item-row .ii-desc { grid-column: 1 / -1 !important; }
.inv-item-row .ii-qty { grid-column: 1 !important; }
.inv-item-row .ii-price { grid-column: 2 !important; }
.inv-item-row .inv-del { grid-column: 3 !important; }
.inv-item-row .inv-amt { grid-column: 1 / -1 !important; text-align: left !important; padding-top: 2px; }
}
/* Command Palette (Cmd+K) */
.command-palette-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
z-index: 10000;
display: none;
align-items: flex-start;
justify-content: center;
padding-top: 15vh;
}
.command-palette-overlay.show { display: flex; animation: fadeIn 0.15s ease-out; }
.command-palette {
width: 100%;
max-width: 580px;
background: var(--bg-card);
border: 1px solid var(--border-secondary);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.command-palette-input-wrapper {
display: flex;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid var(--border-primary);
gap: 12px;
}
.command-palette-icon { font-size: 1.25rem; color: var(--text-muted); }
.command-palette-input {
flex: 1;
background: transparent;
border: none;
outline: none;
font-size: 1.1rem;
color: var(--text-primary);
font-family: inherit;
}
.command-palette-input::placeholder { color: var(--text-muted); }
.command-palette-shortcut {
font-size: 0.75rem;
color: var(--text-muted);
background: var(--bg-tertiary);
padding: 4px 8px;
border-radius: 6px;
font-family: monospace;
}
.command-palette-results {
max-height: 400px;
overflow-y: auto;
padding: 8px;
}
.command-palette-section {
padding: 8px 12px 4px;
font-size: 0.7rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.command-palette-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.15s ease;
}
.command-palette-item:hover, .command-palette-item.selected {
background: var(--bg-hover);
}
.command-palette-item-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-tertiary);
border-radius: var(--radius-sm);
font-size: 1.1rem;
}
.command-palette-item-content { flex: 1; }
.command-palette-item-title { font-weight: 500; color: var(--text-primary); }
.command-palette-item-desc { font-size: 0.8rem; color: var(--text-muted); }
.command-palette-item-shortcut {
font-size: 0.7rem;
color: var(--text-muted);
background: var(--bg-tertiary);
padding: 3px 6px;
border-radius: 4px;
font-family: monospace;
}
.command-palette-footer {
padding: 12px 16px;
border-top: 1px solid var(--border-primary);
display: flex;
gap: 16px;
font-size: 0.75rem;
color: var(--text-muted);
}
.command-palette-footer kbd {
background: var(--bg-tertiary);
padding: 2px 6px;
border-radius: 4px;
font-family: monospace;
margin: 0 2px;
}
/* ===== premium-refine ===== */
/* ===== PREMIUM REFINEMENT — app.nexsend.io feel (2026-09-02, reverzibilno: obriši ovaj blok) ===== */
/* manja, tešnja slova u headerima sekcija */
.content-header-left h1 { font-size: 20px !important; font-weight: 600; letter-spacing: -0.3px; }
.content-header-left p { font-size: 12.5px !important; color: var(--text-secondary); letter-spacing: -0.1px; margin-top: 3px; }
.resource-card-title { font-size: 15px !important; letter-spacing: -0.2px; }
/* glatki prelazi svuda */
button, a, .btn, .nav-item, .resource-card, [class*="-card"], [class*="card-"] {
transition: all .22s cubic-bezier(.16,1,.3,1);
}
/* premium hover na karticama */
.resource-card:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,.55), 0 0 0 1px var(--accent-border); }
/* meki ulaz sekcija */
#adminMainContent > div { animation: pvFade .42s cubic-bezier(.16,1,.3,1); }
@keyframes pvFade { from { opacity:0; transform: translateY(10px);} to { opacity:1; transform:none;} }
/* premium scrollbar (purple) */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(124,58,237,.28); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(124,58,237,.45); }
::-webkit-scrollbar-track { background: transparent; }
/* dugmad premium */
.btn-primary { box-shadow: var(--shadow-glow-accent); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(124,58,237,.32); }
/* ===== AUTO-HIDE SIDEBAR (ChatUI stil: tanak spine, klizne na hover) ===== */
@media (min-width: 900px) {
.sidebar {
width: 280px !important;
transform: translateX(-260px);
transition: transform .32s cubic-bezier(.4,0,.2,1), box-shadow .32s ease !important;
z-index: 240;
overflow: visible !important;
}
.sidebar:hover { transform: translateX(0) !important; box-shadow: 24px 0 60px rgba(0,0,0,.5); }
/* spine: tanka ljubičasto→mint linija na desnoj ivici, vidljiva samo kad je skriven */
.sidebar::after {
content:""; position:absolute; top:18px; bottom:18px; right:0; width:2px; border-radius:2px;
background:linear-gradient(180deg, rgba(124,58,237,.42), rgba(0,245,212,.26));
opacity:.6; transition:opacity .18s ease; pointer-events:none;
}
.sidebar:hover::after { opacity:0; }
/* sadržaj bledi kad je skriven, pojavi se na hover */
.sidebar > * { opacity: 0; transition: opacity .18s ease; }
.sidebar:hover > * { opacity: 1; transition: opacity .22s ease .08s; }
/* FIX: kad je sidebar otvoren preko hamburgera (900-1024px opseg) sadrzaj mora da se vidi (ne samo na hover) */
.sidebar.open { transform: translateX(0) !important; box-shadow: 24px 0 60px rgba(0,0,0,.5) !important; }
.sidebar.open > * { opacity: 1 !important; }
.sidebar.open::after { opacity: 0 !important; }
.mobile-menu-btn { display: none !important; } /* ≥900: hover na spine otvara sidebar, plutajuci hamburger suvisan i ruzno se lepi uz naslov */
/* sadržaj koristi skoro punu širinu */
#adminMainContent { margin-left: 22px !important; }
}
/* ===== ACCORDION SIDEBAR (9 sekcija sa pod-stavkama, klik na naslov otvara) ===== */
.sidebar-nav .nav-section-title { cursor: pointer; display: flex !important; align-items: center; justify-content: space-between; user-select: none; transition: color .15s; }
.sidebar-nav .nav-section-title:hover { color: var(--text-secondary); }
.sidebar-nav .nav-section-title::after { content: "›"; font-size: 16px; line-height: 1; opacity: .45; transform: rotate(90deg); transition: transform .22s ease; }
.sidebar-nav .nav-section.collapsed .nav-section-title::after { transform: rotate(0deg); }
.sidebar-nav .nav-section .nav-item { max-height: 46px; overflow: hidden; transition: max-height .26s cubic-bezier(.16,1,.3,1), opacity .2s ease, margin .2s, padding .2s; }
.sidebar-nav .nav-section.collapsed .nav-item { max-height: 0 !important; opacity: 0; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; pointer-events: none; }
/* kompaktniji user blok */
.sidebar-user { padding: 8px 10px !important; gap: 9px !important; border-radius: 12px !important; }
.sidebar-user .user-avatar { width: 30px !important; height: 30px !important; font-size: 12px !important; }
.sidebar-user .user-name { font-size: 12.5px !important; }
.sidebar-user .user-role { font-size: 9.5px !important; letter-spacing: .4px; }
.sidebar-header { padding: 20px 18px 16px !important; }
/* Present mode traka (mint, kao ChatUI) */
#presentBar { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 9px 16px; font-size: 13px; font-weight: 600; color: #04342c; background: linear-gradient(90deg,#00F5D4,#00D4B4); box-shadow: 0 4px 20px rgba(0,245,212,.32); }
#presentBar b { color: #04342c; }
#presentBar .pb-dot { width: 8px; height: 8px; border-radius: 50%; background: #04342c; animation: pulse 1.6s infinite; }
#presentBar button { background: rgba(4,52,44,.16); border: 1px solid rgba(4,52,44,.32); color: #04342c; font-weight: 700; padding: 4px 14px; border-radius: 8px; cursor: pointer; font-size: 12px; }
#presentBar button:hover { background: rgba(4,52,44,.26); }
/* ROOMS: ugradjeni video enhancement (Auto/Vivid/Natural/Off preko --bcrEnh; Zoom-beating auto korekcija svetla) */
#bcRoomsOverlay video { filter: var(--bcrEnh, none) !important; transition: filter .4s ease; }
/* ===== ChatUI PREMIUM STIL (standard za nove sekcije: tanke ljubičaste hairline ivice, suptilni paneli, mint čipovi) ===== */
.sched-tab{padding:9px 16px;border-radius:11px;border:.5px solid rgba(124,58,237,.16);background:rgba(255,255,255,.02);color:var(--text-secondary);font-weight:600;font-size:13px;cursor:pointer;font-family:inherit;transition:all .15s;}
.sched-tab:hover{background:rgba(255,255,255,.045);border-color:rgba(124,58,237,.30);}
.sched-tab.active{background:rgba(124,58,237,.14);border-color:rgba(124,58,237,.42);color:#c4b5fd;}
.cal-grid-head{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:8px;font-size:10.5px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;}
.cal-grid-head>div{text-align:center;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;}
.cal-cell{min-height:96px;border-radius:14px;border:.5px solid rgba(124,58,237,.15);background:rgba(255,255,255,.02);padding:8px 9px;cursor:pointer;transition:all .16s cubic-bezier(.16,1,.3,1);overflow:hidden;}
.cal-cell:hover{background:rgba(255,255,255,.05);border-color:rgba(124,58,237,.34);transform:translateY(-1px);}
.cal-cell.empty{background:transparent;border:none;cursor:default;}
.cal-cell.today{border-color:rgba(124,58,237,.45);background:rgba(124,58,237,.07);}
.cal-daynum{font-size:12.5px;font-weight:600;margin-bottom:6px;color:var(--text-secondary);}
.cal-cell.today .cal-daynum{color:#c4b5fd;}
.cal-appt{font-size:10px;background:rgba(124,58,237,.12);color:#c4b5fd;border:.5px solid rgba(124,58,237,.25);border-radius:6px;padding:2px 6px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cal-more{font-size:9.5px;color:var(--text-muted);margin-top:2px;}
/* u Scheduling: kartice u ChatUI suptilnom stilu (bez teškog gradijenta) */
#schedTab-calendar .section-card, #schedTab-availability .section-card{background:rgba(255,255,255,.02) !important;border:.5px solid rgba(124,58,237,.15) !important;box-shadow:none !important;backdrop-filter:blur(20px);}
/* premium focus na formama (lagano) */
.form-input:focus, .form-select:focus, textarea.form-input:focus{border-color:rgba(124,58,237,.5) !important;box-shadow:0 0 0 3px rgba(124,58,237,.12) !important;outline:none;}
/* DARK dropdown (native select popup -> taman, ne beli; radi na Linux/Chromium) */
select, .form-select, select.form-input{background-color:var(--bg-tertiary) !important;color:var(--text-primary) !important;}
select option, .form-select option{background-color:#0d0d17 !important;color:#f1f5f9 !important;}
/* premium touch na modal formama */
.modal .form-input, .modal .form-select, .modal textarea.form-input{border-radius:12px !important;border:.5px solid rgba(255,255,255,.09) !important;background:rgba(255,255,255,.03) !important;}
.modal .form-group label{font-size:11.5px !important;color:var(--text-secondary) !important;letter-spacing:.2px;text-transform:none;}
.modal input[type="date"], .modal input[type="time"]{color-scheme:dark;}
/* ===== GLOBAL ChatUI THEME — SVE sekcije u koncept (tanke ljubičaste hairline, suptilni paneli, bez teških gradijenata) ===== */
.section-card, .stat-card, .item-card, .host-card, .resource-card, .call-type-card, .appointment-card, .proposal-card, .glass-card, .dashboard-card, .chat-container {
background: rgba(255,255,255,.022) !important;
border: .5px solid rgba(124,58,237,.16) !important;
box-shadow: none !important;
backdrop-filter: blur(20px);
transition: border-color .18s ease, transform .18s cubic-bezier(.16,1,.3,1), background .18s ease;
}
.item-card:hover, .resource-card:hover, .call-type-card:hover, .stat-card:hover, .host-card:hover, .appointment-card:hover {
border-color: rgba(124,58,237,.34) !important;
background: rgba(255,255,255,.045) !important;
transform: translateY(-2px);
}
.modal { background: linear-gradient(165deg,#0d0d17,#0b0b14) !important; border: .5px solid rgba(124,58,237,.22) !important; border-radius: 20px !important; box-shadow: 0 25px 80px rgba(0,0,0,.6) !important; }
.modal-overlay { background: rgba(3,7,18,.72) !important; backdrop-filter: blur(14px) !important; }
/* modal V2 refine — sve modale odjednom premium (hairline purple) */
.modal-header { border-bottom: .5px solid rgba(124,58,237,.14) !important; padding: 20px 24px !important; }
.modal-title { font-size: 1.05rem !important; font-weight: 700 !important; letter-spacing: -.2px; }
.modal-body { padding: 22px 24px !important; }
.modal-footer { border-top: .5px solid rgba(124,58,237,.14) !important; background: rgba(255,255,255,.015) !important; padding: 16px 24px !important; }
.modal-close { background: rgba(255,255,255,.04) !important; border: .5px solid rgba(124,58,237,.16) !important; border-radius: 10px !important; color: var(--text-muted) !important; }
.modal-close:hover { background: rgba(124,58,237,.16) !important; color: #fff !important; border-color: rgba(124,58,237,.4) !important; }
.modal .form-group label { font-size: 11px !important; text-transform: uppercase !important; letter-spacing: .05em !important; color: var(--text-muted) !important; font-weight: 700 !important; }
.modal .form-input, .modal .form-select, .modal textarea.form-input { border: .5px solid rgba(124,58,237,.18) !important; background: rgba(255,255,255,.03) !important; padding: 11px 13px !important; }
.modal .form-input:focus, .modal .form-select:focus, .modal textarea.form-input:focus { border-color: rgba(124,58,237,.55) !important; box-shadow: 0 0 0 3px rgba(124,58,237,.14) !important; }
.file-upload-zone { border: 1.5px dashed rgba(124,58,237,.28) !important; border-radius: 14px !important; }
.file-upload-zone:hover { border-color: rgba(124,58,237,.5) !important; background: rgba(124,58,237,.05) !important; }
.section-header { border-bottom: .5px solid rgba(124,58,237,.12) !important; }
.btn-secondary { background: rgba(255,255,255,.03) !important; border: .5px solid rgba(124,58,237,.16) !important; }
.btn-secondary:hover { background: rgba(255,255,255,.06) !important; border-color: rgba(124,58,237,.30) !important; }
/* input/textarea konzistentno ChatUI */
.form-input, .form-select, textarea.form-input { background: rgba(255,255,255,.03) !important; border: .5px solid rgba(255,255,255,.09) !important; border-radius: 12px !important; }
/* ===== CUSTOM DROPDOWN (zamena belog native select popup-a — pravi dark premium) ===== */
.cs-wrap{position:relative;width:100%;}
.cs-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px;border-radius:12px;border:.5px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);color:var(--text-primary);font-family:inherit;font-size:13.5px;cursor:pointer;text-align:left;transition:border-color .15s,box-shadow .15s;}
.cs-btn:hover{border-color:rgba(124,58,237,.32);}
.cs-btn svg{opacity:.6;flex:0 0 auto;transition:transform .18s;}
.cs-wrap.open .cs-btn{border-color:rgba(124,58,237,.5);box-shadow:0 0 0 3px rgba(124,58,237,.12);}
.cs-wrap.open .cs-btn svg{transform:rotate(180deg);}
.cs-list{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;max-height:260px;overflow-y:auto;background:#0d0d17;border:.5px solid rgba(124,58,237,.28);border-radius:12px;box-shadow:0 16px 50px rgba(0,0,0,.6);padding:6px;}
.cs-wrap.open .cs-list{display:block;animation:pvFade .16s ease;}
.cs-item{padding:9px 12px;border-radius:9px;font-size:13px;color:var(--text-secondary);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .12s;}
.cs-item:hover{background:rgba(124,58,237,.14);color:#fff;}
.cs-item.sel{color:#c4b5fd;background:rgba(124,58,237,.10);}
/* ===== MINT (ChatUI) na pozitivnim/success stanjima ===== */
.btn-success { background: linear-gradient(135deg,#00F5D4,#00D4B4) !important; color: #04342C !important; border: none !important; font-weight: 600; }
.btn-success:hover { box-shadow: 0 6px 22px rgba(0,245,212,.30) !important; transform: translateY(-1px); }
.stat-card.green { border-color: rgba(0,245,212,.28) !important; }
.stat-icon.green { background: rgba(0,245,212,.12) !important; color: #00F5D4 !important; }
.alert-success { border-color: rgba(0,245,212,.25) !important; }
.badge-success, .tag-success, .status-active, .badge-active { background: rgba(0,245,212,.12) !important; color: #00F5D4 !important; }
/* logo da se ne lomi u uskom railu */
.sidebar .logo, .sidebar [class*="logo"] { white-space: nowrap; }
/* ===== SMOOTH PREMIUM SEKCIJE (prostor, mirniji ritam, ne nabacano) ===== */
.content-body { padding: 8px 30px 44px !important; }
.content-body > * + * { margin-top: 22px !important; }
/* section-header = čist red: naslov levo, malo dugme desno (ne razvučen bar) */
.section-header { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-header .btn, .section-header .btn-primary { width: auto !important; flex: 0 0 auto; padding-left: 16px; padding-right: 16px; }
/* kartice mekše i konzistentne */
.stat-card { border-radius: 16px !important; border: 1px solid var(--border-secondary) !important; box-shadow: 0 6px 26px rgba(0,0,0,.28) !important; }
.quick-actions-grid { gap: 14px !important; }
.quick-action, .quick-actions-grid > * { border-radius: 14px !important; padding: 16px 12px !important; transition: all .2s cubic-bezier(.16,1,.3,1); }
.quick-action:hover, .quick-actions-grid > *:hover { transform: translateY(-2px); background: var(--bg-hover) !important; }
/* tešnje, manje "velike" kartice */
.stat-card { padding: 18px 20px !important; min-height: 0 !important; }
.content-header { padding-bottom: 4px !important; }
/* ===== PREMIUM DENSITY — kompaktno, ne razvučeno (GLOBALNO, sve sekcije) ===== */
/* ograniči širinu da ne bude razvučeno preko celog ekrana */
.content-header, .content-body { max-width: 1480px !important; margin-left: auto !important; margin-right: auto !important; }
/* stat kartice kompaktne (bile 152px za jedan broj) */
.stat-card { padding: 16px 18px !important; gap: 2px !important; }
.stat-icon { width: 38px !important; height: 38px !important; font-size: 18px !important; margin-bottom: 6px !important; border-radius: 11px !important; }
.stat-value { font-size: 23px !important; line-height: 1.12 !important; margin: 2px 0 !important; }
.stat-label { font-size: 12px !important; color: var(--text-secondary) !important; }
/* quick action kompaktnije */
.quick-action-btn { padding: 14px 10px !important; }
/* manji, tešnji naslovi sekcija */
.section-title { font-size: 14.5px !important; font-weight: 600 !important; letter-spacing: -.1px; }
/* grafovi da ne budu ogromni */
canvas { max-height: 240px !important; }
/* čiste linijske ikonice (zamena emotikona) */
.ic { width: 16px; height: 16px; vertical-align: -2px; flex: 0 0 auto; }
/* ===== V2 PREMIUM POLISH (GLOBALNO — kartice/dugmad/inputi/grafike svuda) ===== */
/* native inputi dark (time/date/number/select — kraj belih clock/spinner ikonica) */
input, select, textarea { color-scheme: dark !important; }
input[type="time"], input[type="date"], input[type="datetime-local"], input[type="number"] {
background: rgba(255,255,255,.03) !important; border: .5px solid rgba(124,58,237,.20) !important;
border-radius: 10px !important; color: var(--text-primary) !important;
}
input[type="time"]:focus, input[type="date"]:focus, input[type="number"]:focus,
.form-input:focus, .form-select:focus, textarea.form-input:focus {
border-color: rgba(124,58,237,.55) !important; box-shadow: 0 0 0 3px rgba(124,58,237,.14) !important;
}
input::-webkit-calendar-picker-indicator, input::-webkit-inner-spin-button { filter: invert(.75) opacity(.55); cursor: pointer; }
input[type="checkbox"], input[type="radio"] { accent-color: #7c3aed; }
/* emoji -> monohromni/beli (ne šareni), ostaju vidljivi i funkcionalni */
.bc-emoji { filter: saturate(.82) brightness(.97); opacity: .96; font-style: normal; }
/* Messages composer — vidljiva dugmad */
.chat-media-btn { background: rgba(124,58,237,.10) !important; border: .5px solid rgba(124,58,237,.26) !important; border-radius: 10px !important; min-width: 40px; height: 40px; display: inline-flex !important; align-items: center; justify-content: center; cursor: pointer; color: #c4b5fd !important; }
.chat-media-btn:hover { background: rgba(124,58,237,.22) !important; }
.chat-send-btn { background: linear-gradient(135deg,#7c3aed,#a855f7) !important; color: #fff !important; border: none !important; border-radius: 12px !important; min-width: 44px; height: 44px; cursor: pointer; }
.chat-input-wrapper { background: rgba(255,255,255,.03) !important; border: .5px solid rgba(124,58,237,.22) !important; border-radius: 12px !important; }
.chat-input-area { background: transparent !important; border-top: .5px solid rgba(124,58,237,.12) !important; }
/* dugmad = V2 purple, refinovana (ne plavi/pun-širina slab) */
.btn { border-radius: 12px !important; font-weight: 600 !important; letter-spacing: .1px; transition: all .18s cubic-bezier(.16,1,.3,1) !important; }
.btn-primary { background: linear-gradient(135deg,#6366f1 0%,#8b5cf6 50%,#a855f7 100%) !important; color: #fff !important; border: none !important; box-shadow: 0 6px 22px rgba(124,58,237,.30) !important; }
.btn-primary:hover { box-shadow: 0 9px 30px rgba(124,58,237,.45) !important; transform: translateY(-1px); }
/* ===== V2 FAZA A: poliš iz Nexsend V1/V2 (aditivno) ===== */
/* gradient broj za velike vrednosti (stat/analytics) */
.stat-value, .analytics-card-value { background: linear-gradient(135deg,#a5b4fc 0%,#c4b5fd 50%,#e9d5ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* spring/bounce tranzicije na karticama i modalima */
.stat-card, .analytics-card, .client-card, .deliverable-card, .invoice-card, .contract-card, .proposal-card, .doc-card, .goal-card, .pipeline-card, .item-card {
transition: transform .45s cubic-bezier(.175,.885,.32,1.275), border-color .18s ease, background .18s ease !important;
}
.modal { animation: bcScaleIn .32s cubic-bezier(.175,.885,.32,1.275) !important; }
/* fade-in-up na promeni sekcije (suptilno) — SAMO uz html.bc-anim (gasi se tokom reload-a da nema treperenja) */
html.bc-anim .dashboard-view.active { animation: bcFadeInUp .34s cubic-bezier(.16,1,.3,1); }
@keyframes bcFadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bcScaleIn { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } }
/* ===== PREMIUM POLISH LAYER (client side) ===== */
.bc-card { transition: border-color .22s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1), transform .18s cubic-bezier(.4,0,.2,1), background .22s; }
.bc-card:hover { border-color: rgba(124,58,237,.30) !important; box-shadow: 0 10px 34px -12px rgba(124,58,237,.35), 0 0 0 1px rgba(124,58,237,.10); transform: translateY(-2px); }
.bc-card.bc-static:hover { transform:none; box-shadow: 0 10px 30px -14px rgba(124,58,237,.28); }
@keyframes bcShimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
.bc-skel { background: linear-gradient(90deg, rgba(255,255,255,.03) 25%, rgba(255,255,255,.07) 37%, rgba(255,255,255,.03) 63%); background-size: 840px 100%; animation: bcShimmer 1.3s linear infinite; border-radius: 8px; }
/* animated bar fill on user navigation */
html.bc-navd .bc-bar-fill { animation: bcBarFill .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes bcBarFill { from { width: 0 !important; } }
/* logo avatar in chat: no colored ring/bg, just the mark */
.chat-message-avatar.bc-logo-ava { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
.chat-message-avatar.bc-logo-ava svg { display: block; }
/* row overflow menu (⋯) */
details.bc-rowmenu { position: relative; }
details.bc-rowmenu > summary { list-style: none; cursor: pointer; }
details.bc-rowmenu > summary::-webkit-details-marker { display: none; }
.bc-rowmenu-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; background: #12121c; border: 1px solid rgba(124,58,237,.25); border-radius: 12px; padding: 6px; min-width: 172px; box-shadow: 0 14px 44px -14px rgba(0,0,0,.75); }
.bc-rowmenu-pop button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; color: var(--text-secondary,#cbd5e1); font-size: 13px; padding: 9px 11px; border-radius: 8px; cursor: pointer; }
.bc-rowmenu-pop button:hover { background: rgba(124,58,237,.12); color: #fff; }
.bc-rowmenu-pop button.danger:hover { background: rgba(248,113,113,.1); color: #f87171; }
/* active sidebar glow */
#clientSidebar .nav-item.active { position: relative; }
#clientSidebar .nav-item.active::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:60%; border-radius:0 3px 3px 0; background:linear-gradient(180deg,#7c3aed,#a78bfa); box-shadow:0 0 10px rgba(124,58,237,.6); }
/* stagger za kartice u mrežama (blaga kaskada) */
html.bc-anim .card-grid > *, html.bc-anim .doc-grid > *, html.bc-anim .analytics-grid > * { animation: bcFadeInUp .4s cubic-bezier(.16,1,.3,1) both; }
.card-grid > *:nth-child(2), .doc-grid > *:nth-child(2), .analytics-grid > *:nth-child(2) { animation-delay: .04s; }
.card-grid > *:nth-child(3), .doc-grid > *:nth-child(3), .analytics-grid > *:nth-child(3) { animation-delay: .08s; }
.card-grid > *:nth-child(4), .doc-grid > *:nth-child(4), .analytics-grid > *:nth-child(4) { animation-delay: .12s; }
.card-grid > *:nth-child(5), .doc-grid > *:nth-child(5), .analytics-grid > *:nth-child(5) { animation-delay: .16s; }
.card-grid > *:nth-child(6), .doc-grid > *:nth-child(6), .analytics-grid > *:nth-child(6) { animation-delay: .2s; }
@media (prefers-reduced-motion: reduce) { .dashboard-view.active, .card-grid > *, .doc-grid > *, .analytics-grid > *, .modal { animation: none !important; } }
/* ===== Sidebar collapse (ikone-only) ===== */
.sidebar-header { position: relative; }
.sidebar-collapse-btn { position: absolute; top: 14px; right: 12px; width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.04); border: .5px solid rgba(124,58,237,.2); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; z-index: 2; transition: all .15s; }
.sidebar-collapse-btn:hover { background: rgba(124,58,237,.16); color: #fff; }
@media (max-width: 1024px) { .sidebar-collapse-btn { display: none; } }
/* Collapsed = docked icon rail, ALWAYS visible (override auto-hide so it can't get stuck off-screen) */
@media (min-width: 900px) {
body.sidebar-collapsed .sidebar { transform: translateX(0) !important; box-shadow: 4px 0 40px rgba(0,0,0,.3) !important; }
body.sidebar-collapsed .sidebar > * { opacity: 1 !important; }
body.sidebar-collapsed .sidebar::after { opacity: 0 !important; }
}
body.sidebar-collapsed .sidebar { width: 76px !important; }
body.sidebar-collapsed .main-content { margin-left: 76px !important; }
body.sidebar-collapsed .sidebar-logo { font-size: 0 !important; justify-content: center; }
body.sidebar-collapsed .sidebar-user { display: none !important; }
body.sidebar-collapsed .sidebar-nav { padding: 16px 10px; }
body.sidebar-collapsed .nav-section-title { display: none !important; }
body.sidebar-collapsed .nav-section .nav-item { max-height: 44px !important; opacity: 1 !important; pointer-events: auto !important; font-size: 0 !important; justify-content: center; padding-left: 0 !important; padding-right: 0 !important; gap: 0 !important; }
body.sidebar-collapsed .nav-item .nav-icon { font-size: 1rem !important; margin: 0 !important; }
body.sidebar-collapsed .nav-item .nav-badge { display: none !important; }
body.sidebar-collapsed .sidebar-collapse-btn { left: 25px; right: auto; transform: none; top: 12px; }
/* collapsed footer: icon-only Sign Out, hide legal links */
body.sidebar-collapsed .sidebar-footer { padding: 12px 8px !important; }
body.sidebar-collapsed .sidebar-footer-links { display: none !important; }
body.sidebar-collapsed .logout-btn { font-size: 0 !important; gap: 0 !important; justify-content: center !important; padding: 11px 0 !important; }
body.sidebar-collapsed .logout-btn svg { margin: 0 !important; }
.btn-sm { padding: 8px 16px !important; font-size: .82rem !important; border-radius: 11px !important; }
/* badge / status refinovani */
.badge, .tag, .status-pill { border-radius: 999px !important; font-weight: 600 !important; padding: 4px 11px !important; font-size: .72rem !important; letter-spacing: .03em; border: .5px solid rgba(124,58,237,.18); }
/* tabovi premium pill */
.sched-tab, .tab, .pill-tab { border-radius: 12px !important; }
/* tabele premium (hairline redovi) */
table th { color: var(--text-muted) !important; }
/* skrol-barovi tanki premium */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: rgba(124,58,237,.25); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(124,58,237,.4); }
/* ===== V2 CARD/BADGE NORMALIZACIJA — SVE sekcije odjednom ===== */
.contract-card, .proposal-card, .template-card, .analytics-card, .pipeline-card, .feedback-card,
.request-card, .goal-card, .milestone-card, .deliverable-card, .invoice-card, .message-card,
.file-card, .client-card, .note-card, .login-card, .vault-card, .prompt-card {
background: rgba(255,255,255,.022) !important; border: .5px solid rgba(124,58,237,.15) !important;
border-radius: 16px !important; box-shadow: none !important; backdrop-filter: blur(20px) !important;
transition: border-color .18s ease, background .18s ease, transform .18s cubic-bezier(.16,1,.3,1) !important;
}
.contract-card:hover, .proposal-card:hover, .template-card:hover, .analytics-card:hover,
.pipeline-card:hover, .request-card:hover, .client-card:hover, .deliverable-card:hover,
.invoice-card:hover, .file-card:hover, .goal-card:hover {
border-color: rgba(124,58,237,.34) !important; background: rgba(255,255,255,.045) !important; transform: translateY(-2px);
}
/* svi badge/status = pill V2 */
.badge, .nav-badge, .chat-list-badge, .template-item-badge, .status, .tag, .pill,
[class*="badge-"], [class*="status-"], [class*="-badge"] {
border-radius: 999px !important; font-weight: 600 !important; font-size: .7rem !important;
padding: 3px 10px !important; letter-spacing: .03em; line-height: 1.5;
}
.badge-active, .status-active, .badge-success, .status-completed, .badge-completed, .badge.active {
color: #00F5D4 !important; background: rgba(0,245,212,.12) !important; border: .5px solid rgba(0,245,212,.28) !important; }
.badge-pending, .status-pending, .badge-scheduled, .status-scheduled, .badge.pending {
color: #a78bfa !important; background: rgba(124,58,237,.14) !important; border: .5px solid rgba(124,58,237,.30) !important; }
.badge-overdue, .status-cancelled, .status-missed, .badge-cancelled, .badge.overdue, .status-lost {
color: #ef4444 !important; background: rgba(239,68,68,.12) !important; border: .5px solid rgba(239,68,68,.30) !important; }
.nav-badge { background: rgba(124,58,237,.18) !important; color: #c4b5fd !important; border: none !important; }
.nav-badge.warning { background: rgba(239,68,68,.18) !important; color: #fca5a5 !important; }
/* akcija = purple (monohrom), destruktivno = crveno */
.btn-success { background: linear-gradient(135deg,#7c3aed,#a855f7) !important; color: #fff !important; border: none !important; }
.btn-ghost { background: rgba(255,255,255,.03) !important; border: .5px solid rgba(124,58,237,.16) !important; color: var(--text-secondary) !important; }
.btn-danger { background: rgba(239,68,68,.14) !important; color: #fca5a5 !important; border: .5px solid rgba(239,68,68,.30) !important; }
.btn-purple { background: linear-gradient(135deg,#7c3aed,#a855f7) !important; color: #fff !important; border: none !important; }
.btn-cyan { background: linear-gradient(135deg,#7c3aed,#a855f7) !important; color: #fff !important; border: none !important; }
.btn-warning { background: rgba(234,179,8,.14) !important; color: #fcd34d !important; border: .5px solid rgba(234,179,8,.30) !important; }
.btn-secondary { background: rgba(255,255,255,.05) !important; border: .5px solid rgba(124,58,237,.16) !important; color: var(--text-secondary) !important; }
.btn-info { background: rgba(124,58,237,.14) !important; color: #c4b5fd !important; border: .5px solid rgba(124,58,237,.30) !important; }
/* Empty states — dugme normalne sirine (ne preko celog reda) + cistije */
.empty-state { padding: 56px 24px !important; text-align: center; display: flex; flex-direction: column; align-items: center; }
.empty-state .btn, .empty-state .btn-primary, .empty-state .btn-success, .empty-state .btn-purple, .empty-state .btn-cyan { width: auto !important; display: inline-flex !important; align-items: center; justify-content: center; padding: 10px 22px !important; box-shadow: none !important; }
.empty-state-icon { font-size: 2.4rem !important; opacity: .45 !important; margin-bottom: 14px !important; }
.empty-state h3 { font-size: 1.05rem; margin: 0 0 6px; }
.empty-state p { color: var(--text-muted); font-size: .88rem; max-width: 360px; margin: 0 0 18px; }
/* Documents (Notion-style) grid */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.doc-card { border: .5px solid rgba(124,58,237,.15); border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.022); transition: border-color .18s, transform .18s cubic-bezier(.16,1,.3,1); }
.doc-card:hover { border-color: rgba(124,58,237,.34); transform: translateY(-2px); }
.doc-preview { height: 140px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: .5px solid rgba(124,58,237,.12); background: rgba(0,0,0,.2); }
.doc-preview-file, .doc-preview-audio { flex-direction: column; gap: 10px; background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(0,245,212,.02)); }
.doc-preview .doc-ic { font-size: 2.4rem; opacity: .9; }
.doc-body { padding: 12px 14px; }
.doc-name { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-meta { font-size: .72rem; color: var(--text-muted); margin-top: 3px; }
.doc-actions { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.doc-actions .btn { padding: 5px 11px !important; font-size: .74rem !important; text-decoration: none; }
/* pipeline drag & drop feedback */
.pipeline-card { cursor: grab; }
.pipeline-card.dragging { opacity: .45; cursor: grabbing; }
.pipeline-column.drop-hover { background: rgba(124,58,237,.10) !important; outline: 1.5px dashed rgba(124,58,237,.5); outline-offset: -4px; border-radius: 14px; }
/* notification bell — brojac nepročitanih */
.notification-btn { position: relative !important; }
.notification-count { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: linear-gradient(135deg,#7c3aed,#a855f7); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--bg-primary); line-height: 1; }
/* billing tabs V2 */
.billing-tab { border-radius: 11px !important; }
.billing-tab.active { background: rgba(124,58,237,.16) !important; color: #c4b5fd !important; border-color: rgba(124,58,237,.34) !important; box-shadow: none !important; }
/* proposal-signing funnel + statusi = V2 (gase hardkodovanu plavu #7c3aed) */
.proposal-status.sent, .badge-sent { background: rgba(124,58,237,.15) !important; color: #c4b5fd !important; }
.funnel-progress-fill { background: linear-gradient(90deg,#7c3aed,#00F5D4) !important; }
.funnel-step.active .funnel-step-icon { background: linear-gradient(135deg,#7c3aed,#00F5D4) !important; box-shadow: 0 0 20px rgba(124,58,237,.4) !important; }
.funnel-card-header { background: linear-gradient(135deg, rgba(124,58,237,.10) 0%, rgba(0,245,212,.04) 100%) !important; }
.funnel-signature-box { background: rgba(124,58,237,.05) !important; border-color: rgba(124,58,237,.3) !important; }
.funnel-signature-input:focus { border-color: #7c3aed !important; }
.funnel-btn-primary { background: linear-gradient(135deg,#7c3aed 0%,#a855f7 100%) !important; }
.call-type-btn.ai { background: linear-gradient(135deg,#7c3aed 0%,#a855f7 100%) !important; }
.appointment-date .day { color: #a78bfa !important; }
/* stat-card boje suptilne (bez žutog/plavog "cheap") */
.stat-card.yellow, .stat-card.blue, .stat-card.purple, .stat-card.green { border-color: rgba(124,58,237,.18) !important; }
.analytics-card-title, .pipeline-card-company, .analytics-card-change, .item-card-header .subtitle { color: var(--text-muted) !important; }
/* progres barovi svuda purple→mint */
.progress-fill, .goal-progress-fill, [class*="progress-fill"] { background: linear-gradient(90deg,#7c3aed,#00F5D4) !important; }
.nav-icon .ic { width: 18px; height: 18px; }
.stat-icon .ic { width: 19px; height: 19px; }
.quick-action-btn .ic { width: 22px; height: 22px; }
.section-title .ic { width: 16px; height: 16px; margin-right: 7px; opacity: .9; }
.nav-icon { display: inline-flex; align-items: center; justify-content: center; }
.stat-icon { display: inline-flex !important; align-items: center; justify-content: center; }
/* ===== Messages — premium konverzacije ===== */
.chat-container { border: .5px solid rgba(124,58,237,.14) !important; border-radius: 18px !important; overflow: hidden; background: rgba(255,255,255,.015) !important; }
.chat-sidebar { border-right: .5px solid rgba(124,58,237,.12) !important; background: transparent !important; }
.chat-sidebar-header { padding: 18px 18px 12px !important; border-bottom: .5px solid rgba(124,58,237,.10) !important; }
.chat-sidebar-header h3 { font-size: 13px !important; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted) !important; margin: 0 0 10px !important; }
.chat-search { width: 100%; box-sizing: border-box; background: rgba(255,255,255,.03); border: .5px solid rgba(124,58,237,.16); color: var(--text-primary); border-radius: 10px; padding: 8px 12px; font-size: 13px; outline: none; transition: border-color .15s; }
.chat-search:focus { border-color: rgba(124,58,237,.45); }
.chat-search::placeholder { color: var(--text-muted); }
.chat-list-item { border-bottom: .5px solid rgba(124,58,237,.07) !important; padding: 13px 16px !important; }
.chat-list-item:hover { background: rgba(124,58,237,.06) !important; }
.chat-list-item.active { background: rgba(124,58,237,.10) !important; border-left: 2px solid #7c3aed !important; }
.chat-list-item.unread { background: rgba(124,58,237,.05) !important; }
.chat-list-avatar { width: 40px !important; height: 40px !important; border-radius: 12px !important; background: rgba(124,58,237,.12) !important; border: 1px solid rgba(124,58,237,.22) !important; color: #a78bfa !important; box-shadow: none !important; }
.chat-list-badge { background: #7c3aed !important; color: #fff !important; }
.chat-list-name { font-weight: 600; font-size: 14px; }
.chat-list-preview { color: var(--text-muted) !important; font-size: 12.5px; }
.chat-list-preview.empty { font-style: italic; opacity: .6; }
.chat-list-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.chat-list-time { color: var(--text-muted); font-size: 11px; }
.chat-list-badge { background: #7c3aed !important; color: #fff !important; min-width: 18px; height: 18px; border-radius: 9px; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.chat-message-avatar { background: rgba(124,58,237,.12) !important; border: 1px solid rgba(124,58,237,.22) !important; color: #a78bfa !important; border-radius: 11px !important; }
.chat-message.sent .chat-message-avatar { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.1) !important; color: #cbd5e1 !important; }
.chat-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; padding: 24px; }
.chat-empty-icon { font-size: 0 !important; margin-bottom: 14px !important; opacity: 1 !important; }
.chat-empty-icon svg { width: 46px; height: 46px; color: rgba(124,58,237,.5); }
.chat-empty h3 { font-size: 16px; margin: 0 0 6px; }
.chat-empty p { color: var(--text-muted); font-size: 13px; max-width: 260px; margin: 0; }
/* ===== Deliverables — premium kartica ===== */
.deliverable-card { border: .5px solid rgba(124,58,237,.14) !important; border-radius: 18px !important; padding: 22px !important; background: rgba(255,255,255,.015) !important; }
.deliverable-card:hover { border-color: rgba(124,58,237,.28) !important; }
.deliverable-card.overdue { border-color: rgba(239,68,68,.35) !important; background: rgba(239,68,68,.03) !important; }
.deliverable-title { font-size: 15.5px; font-weight: 600; }
.deliverable-desc { color: var(--text-muted); font-size: 13px; margin-top: 3px; }
.deliverable-meta-item { color: var(--text-muted); font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
.deliverable-meta-item .ic { width: 14px; height: 14px; }
.deliverable-card input[type=range] { -webkit-appearance: none; appearance: none; height: 5px; border-radius: 4px; background: rgba(124,58,237,.16); }
.deliverable-card input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: #00F5D4; cursor: pointer; box-shadow: 0 0 0 4px rgba(0,245,212,.15); }
.deliverable-actions .btn.btn-ghost { padding: 7px 9px !important; }
/* ===== block3 ===== */
.inv-modal{max-width:720px}
.inv-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.inv-sub{font-size:12px;color:var(--text-muted,#8b93a7);margin-top:4px;font-weight:400}
.inv-items{border:1px solid rgba(124,58,237,.18);border-radius:12px;overflow:hidden;margin:6px 0 14px;background:rgba(124,58,237,.03)}
.inv-items-head,.inv-item-row{display:grid;grid-template-columns:1fr 70px 120px 110px 34px;gap:8px;align-items:center}
.inv-items-head{padding:10px 12px;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted,#8b93a7);background:rgba(124,58,237,.07);font-weight:700}
.inv-item-row{padding:8px 12px;border-top:1px solid rgba(124,58,237,.1)}
.inv-item-row input{width:100%;background:rgba(6,6,12,.4);border:1px solid rgba(124,58,237,.2);color:var(--text-primary,#f1f5f9);border-radius:8px;padding:8px 10px;font-size:13px;outline:none}
.inv-item-row .inv-amt{font-size:13px;font-weight:700;color:var(--text-primary,#f1f5f9);text-align:right;padding-right:2px}
.inv-item-row .inv-del{background:transparent;border:0;color:var(--text-muted,#8b93a7);cursor:pointer;font-size:16px;line-height:1}
.inv-item-row .inv-del:hover{color:#ef4444}
.inv-additem{width:100%;padding:10px;background:transparent;border:0;border-top:1px dashed rgba(124,58,237,.25);color:#a78bfa;font-weight:600;font-size:12.5px;cursor:pointer}
.inv-additem:hover{background:rgba(124,58,237,.06)}
.inv-totals{margin:2px 0 14px;padding:14px 16px;background:rgba(124,58,237,.05);border:1px solid rgba(124,58,237,.14);border-radius:12px}
.inv-totals .row{display:flex;justify-content:space-between;font-size:13px;color:var(--text-secondary,#c7cdda);padding:3px 0}
.inv-totals .row.total{border-top:1px solid rgba(124,58,237,.18);margin-top:6px;padding-top:10px;font-size:17px;font-weight:800;color:var(--text-primary,#f1f5f9)}
.inv-wire{border:1px solid rgba(124,58,237,.18);border-radius:12px;padding:14px 16px;margin-bottom:14px;background:rgba(6,6,12,.25)}
.inv-wire-title{font-size:13px;font-weight:700;color:var(--text-primary,#f1f5f9);display:flex;align-items:center;gap:8px;margin-bottom:8px}
.inv-wire-badge{font-size:9.5px;letter-spacing:.08em;background:rgba(124,58,237,.18);color:#c4b5fd;border:1px solid rgba(124,58,237,.3);border-radius:6px;padding:2px 7px;font-weight:800}
.inv-wire-body{font-size:12.5px;color:var(--text-secondary,#c7cdda);line-height:1.7}
.inv-wire-body .k{color:var(--text-muted,#8b93a7);display:inline-block;min-width:130px}
.inv-wire-body .placeholder{color:#f59e0b}
/* ===== Mobile/tap polish (ne menja dizajn): bez plavog tap-highlighta na dodir;
fokus-okvir ostaje SAMO za tastaturnu navigaciju (pristupacnost ocuvana) ===== */
* { -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none; }
/* ===== Chart fit fix: canvas (Chart.js postavi inline width npr. 948px) je prepunjavao
prozore 1024-1200px jer je max-width:100% bio samo u @media(max-width:1024px).
Ovde cap-ujemo canvas na kontejner na SVIM sirinama -> nema horizontalnog scrolla.
Na sirokom ekranu bez vidljive promene (canvas ionako staje). ===== */
.chart-wrapper canvas, .analytics-chart-container canvas, .content-body canvas { max-width: 100% !important; }
.chart-wrapper, .analytics-chart-container { max-width: 100%; min-width: 0; }
/* ===== MOBILNI POLISH (Luka 2026-10-05): chat compose + billing dugmad ===== */
@media (max-width: 768px) {
/* Chat: mesto za kucanje bilo pretrpano — manji padding/gap, vise prostora inputu */
.chat-input-area { padding: 12px 12px !important; gap: 8px !important; }
.chat-input-wrapper { padding: 11px 14px !important; }
.chat-media-btns { gap: 6px !important; }
.chat-media-btn, .chat-send-btn { width: 42px !important; height: 42px !important; }
.chat-input { font-size: 16px; } /* 16px = iOS/Android ne zumira pri fokusu */
/* chat visina: ispravno racuna header + donji nav (bilo 100vh-180 = duplo) */
.chat-container { height: calc(100dvh - 148px) !important; }
/* Billing/header akcije: ujednacena 2-u-redu mreza umesto neravnog preloma */
.content-header-right > div[style*="width:1px"],
.content-header-right > div[style*="width: 1px"] { display: none !important; }
.content-header-right .btn { flex: 1 1 calc(50% - 4px) !important; justify-content: center !important; padding: 12px 10px !important; }
}
/* ===== Chat compose refinmeasuremore (Luka): input dominira, manje gužve ===== */
@media (max-width: 768px) {
.chat-media-btn[title="Quick replies"] { display: none !important; } /* power-feature, skloni na telefonu */
.chat-media-btn, .chat-send-btn { width: 38px !important; height: 38px !important; font-size: 1rem !important; }
.chat-media-btns { gap: 5px !important; }
.chat-input-area { gap: 7px !important; align-items: center !important; }
.chat-input-wrapper { min-width: 0 !important; flex: 1 1 auto !important; }
}
/* ===== PREMIUM CHAT COMPOSE (Luka 2026-10-05): borderless ikone + pill input + kruzni ljubicasti send ===== */
@media (max-width: 768px) {
.chat-input-area {
padding: 10px 12px !important; gap: 6px !important; align-items: center !important;
background: rgba(255,255,255,.015) !important; border-top: .5px solid rgba(124,58,237,.14) !important;
}
.chat-media-btns { gap: 2px !important; }
/* media ikone: bez kutije/bordera, suptilno */
.chat-media-btn {
background: transparent !important; border: none !important;
width: 40px !important; height: 40px !important; border-radius: 50% !important;
color: #8b93a7 !important; font-size: 1.15rem !important; transition: all .15s ease !important;
}
.chat-media-btn:active { background: rgba(124,58,237,.14) !important; color: #c4b5fd !important; }
/* input: mekan pill, bez ostrog bordera */
.chat-input-wrapper {
background: rgba(255,255,255,.045) !important; border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 21px !important; padding: 10px 16px !important; min-width: 0 !important; flex: 1 1 auto !important;
}
.chat-input { font-size: 16px !important; }
/* send: kruzno, ljubicasti gradient (na brendu), ne plavo */
.chat-send-btn {
width: 42px !important; height: 42px !important; border-radius: 50% !important; flex-shrink: 0 !important;
background: linear-gradient(135deg,#7c3aed,#a855f7) !important; color: #fff !important; border: none !important;
box-shadow: 0 6px 16px -6px rgba(124,58,237,.75) !important;
}
.chat-send-btn:active { transform: scale(.94) !important; }
}
/* ===== Chat mobilni: siri baloni + cist header (desktop netaknut) ===== */
@media (max-width: 768px) {
.chat-message { max-width: 82% !important; }
.chat-main-header { padding: 12px 14px !important; gap: 10px !important; }
.chat-main-info { flex: 1 1 auto !important; min-width: 0 !important; }
.chat-main-info h3, .chat-main-info p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-main-header .btn { display: none !important; }
}
/* ===== Mobilni breathing-room (Luka: billing nagurano) — vise vazduha, desktop netaknut ===== */
@media (max-width: 768px) {
.content-header { gap: 13px !important; }
.content-header-right { gap: 10px !important; }
.content-body { padding: 16px !important; }
.section-card { margin-bottom: 14px !important; }
.stat-card, .invoice-card, .proposal-card, .contract-card, .deliverable-card, .client-card { padding: 17px !important; }
.billing-tab { padding: 9px 14px !important; }
}
/* Emoji picker (tabbed) */
.iep{position:absolute;bottom:72px;left:14px;width:352px;background:#15161f;border:1px solid rgba(124,58,237,.28);border-radius:16px;box-shadow:0 18px 44px rgba(0,0,0,.6);z-index:9999;overflow:hidden;animation:cpmIn .16s cubic-bezier(.16,1,.3,1);}
.iep-tabs{display:flex;gap:2px;padding:7px 8px;border-bottom:1px solid rgba(124,58,237,.16);background:rgba(13,13,22,.7);overflow-x:auto;scrollbar-width:none;}
.iep-tabs::-webkit-scrollbar{display:none;}
.iep-tab{flex:0 0 auto;width:34px;height:32px;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:9px;font-size:18px;line-height:1;cursor:pointer;opacity:.6;transition:all .12s;}
.iep-tab:hover{opacity:1;background:rgba(255,255,255,.05);}
.iep-tab.on{opacity:1;background:rgba(124,58,237,.22);box-shadow:inset 0 -2px 0 #a855f7;}
.iep-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;padding:8px;max-height:252px;overflow-y:auto;}
.iep-grid::-webkit-scrollbar{width:8px;}
.iep-grid::-webkit-scrollbar-thumb{background:rgba(124,58,237,.3);border-radius:4px;}
.iep-e{background:none;border:none;font-size:22px;line-height:1;cursor:pointer;padding:5px;border-radius:7px;transition:background .1s,transform .08s;}
.iep-e:hover{background:rgba(124,58,237,.2);transform:scale(1.18);}
/* Voice recording bar (WhatsApp-style) */
.rec-bar{position:absolute;left:12px;right:12px;bottom:12px;height:48px;display:flex;align-items:center;gap:12px;padding:0 10px 0 6px;background:rgba(21,22,31,.98);border:1px solid rgba(124,58,237,.3);border-radius:14px;box-shadow:0 10px 28px rgba(0,0,0,.5);z-index:40;animation:cpmIn .16s cubic-bezier(.16,1,.3,1);}
.rec-bar .rec-cancel,.rec-bar .rec-send{flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:none;border-radius:11px;cursor:pointer;transition:all .12s;}
.rec-bar .rec-cancel{background:rgba(255,255,255,.05);color:#f87171;}
.rec-bar .rec-cancel:hover{background:rgba(248,113,113,.16);}
.rec-bar .rec-send{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;box-shadow:0 4px 12px rgba(124,58,237,.35);}
.rec-bar .rec-send:hover{filter:brightness(1.1);}
.rec-mid{flex:1;display:flex;align-items:center;gap:10px;min-width:0;}
.rec-dot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:#ef4444;animation:recPulse 1.1s ease-in-out infinite;}
@keyframes recPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.8);}}
.rec-wave{flex:1;display:flex;align-items:center;gap:2px;height:22px;overflow:hidden;}
.rec-wave i{flex:1;max-width:4px;min-width:2px;background:rgba(168,85,247,.65);border-radius:2px;height:6px;animation:recWave 1s ease-in-out infinite;}
.rec-wave i:nth-child(2n){animation-delay:.15s;}
.rec-wave i:nth-child(3n){animation-delay:.3s;}
.rec-wave i:nth-child(4n){animation-delay:.45s;}
.rec-wave i:nth-child(5n){animation-delay:.6s;}
@keyframes recWave{0%,100%{height:5px;}50%{height:20px;}}
.rec-time{flex:0 0 auto;font-size:.82rem;color:var(--text-muted);font-variant-numeric:tabular-nums;min-width:34px;text-align:right;}
.chat-media-btn.recording{color:#ef4444;}
/* Message templates (premium) */
#templatesList{display:flex;flex-direction:column;gap:8px;margin-bottom:4px;}
.tmpl-row{display:flex;align-items:center;gap:12px;padding:13px 14px;background:rgba(255,255,255,.03);border:1px solid rgba(124,58,237,.14);border-radius:12px;cursor:pointer;transition:all .14s;}
.tmpl-row:hover{background:rgba(124,58,237,.1);border-color:rgba(124,58,237,.4);transform:translateY(-1px);box-shadow:0 6px 18px rgba(124,58,237,.14);}
.tmpl-row-main{flex:1;min-width:0;}
.tmpl-row-title{font-weight:600;font-size:.9rem;color:var(--text-primary);margin-bottom:3px;}
.tmpl-row-preview{font-size:.8rem;color:var(--text-muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.tmpl-del{flex:0 0 auto;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border:none;border-radius:9px;color:#f87171;cursor:pointer;opacity:.65;transition:all .12s;}
.tmpl-row:hover .tmpl-del{opacity:1;}
.tmpl-del:hover{background:rgba(248,113,113,.18);}
.tmpl-empty{text-align:center;padding:28px 20px;color:var(--text-muted);font-size:.86rem;}
/* quick-replies dropdown polish */
.template-picker{border:1px solid rgba(124,58,237,.28) !important;border-radius:14px !important;box-shadow:0 14px 36px rgba(0,0,0,.55) !important;overflow:hidden;padding:4px;}
.template-item{border-radius:10px !important;border-bottom:none !important;margin-bottom:2px;}
.template-item:hover{background:rgba(124,58,237,.12) !important;}
.template-item-title{font-weight:600 !important;}
/* Voice message — premium polish */
.voice-message{ background:rgba(255,255,255,.05); min-width:200px; }
.voice-message-btn{ background:linear-gradient(135deg,#7c3aed,#a855f7) !important; box-shadow:0 2px 8px rgba(124,58,237,.3); flex:0 0 auto; }
.voice-message-btn svg{ display:block; }
.voice-message-wave span{ background:rgba(168,85,247,.42) !important; transition:background .15s; }
.voice-message.playing .voice-message-wave span{ background:#a855f7 !important; }
.voice-message-duration{ font-variant-numeric:tabular-nums; font-size:.72rem; opacity:.85; white-space:nowrap; }
.chat-message.sent .voice-message{ background:rgba(255,255,255,.14); }
.chat-message.sent .voice-message-btn{ background:#fff !important; color:#7c3aed !important; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.chat-message.sent .voice-message-wave span{ background:rgba(255,255,255,.5) !important; }
.chat-message.sent .voice-message.playing .voice-message-wave span{ background:#fff !important; }
/* ============================================================= */
/* ===== V2 SKIN (Nexsend V2 ChatUI premium jezik) ============= */
/* Mint akcenat, staklene kartice + radial glow + dubok shadow, */
/* gradijent brojevi, uppercase spaced labele. Dodatni sloj. */
/* ============================================================= */
:root{ --v2-mint:#00F5D4; --v2-mint-2:#00D4B4; --v2-ink:#08080e; }
body{ font-family:'Inter','Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif; background:
radial-gradient(900px 500px at 15% -5%, rgba(0,245,212,0.035), transparent 60%),
radial-gradient(800px 520px at 100% 0%, rgba(124,58,237,0.05), transparent 62%),
var(--v2-ink); }
/* ---- staklene kartice (stat + quick action) ---- */
.stat-card{
background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.008)) !important;
border:0.5px solid rgba(255,255,255,0.09) !important;
border-radius:20px !important;
box-shadow:0 40px 90px -30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.04) !important;
backdrop-filter:blur(18px);
overflow:hidden; position:relative;
}
.stat-card.blue,.stat-card.green,.stat-card.yellow,.stat-card.purple,.stat-card.cyan,.stat-card.orange,.stat-card.red{ border-left:0.5px solid rgba(255,255,255,0.09) !important; }
.stat-card::after{ content:""; position:absolute; top:-45%; left:50%; transform:translateX(-50%); width:130%; height:85%;
background:radial-gradient(closest-side, rgba(0,245,212,0.07), transparent 70%); pointer-events:none; z-index:0; }
.stat-card > *{ position:relative; z-index:1; }
.stat-card:hover{ transform:translateY(-3px); border-color:rgba(0,245,212,0.18) !important;
box-shadow:0 50px 100px -30px rgba(0,0,0,0.8), 0 0 40px -12px rgba(0,245,212,0.15), inset 0 1px 0 rgba(255,255,255,0.05) !important; }
/* ---- gradijent brojevi (premium) ---- */
.stat-value{
font-size:2.3rem !important; font-weight:600 !important; letter-spacing:-1.5px !important; line-height:1 !important;
font-variant-numeric:tabular-nums; margin-bottom:8px !important;
background:linear-gradient(180deg,#ffffff,#c6d0dc); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.stat-card.green .stat-value,.stat-card.cyan .stat-value{ background:linear-gradient(180deg,#8bfce9,var(--v2-mint)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
/* ---- uppercase spaced labele ---- */
.stat-label{ text-transform:uppercase !important; letter-spacing:2.2px !important; font-size:0.62rem !important;
font-weight:600 !important; color:#8595a8 !important; }
/* ---- stat ikonice: suptilnije, mint-leaning ---- */
.stat-icon{ border-radius:12px !important; width:40px !important; height:40px !important; margin-bottom:14px !important;
border:0.5px solid rgba(255,255,255,0.08); }
/* ---- quick actions = staklo + mint hover ---- */
.quick-action-btn{
background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.006)) !important;
border:0.5px solid rgba(255,255,255,0.08) !important; border-radius:16px !important; backdrop-filter:blur(14px);
transition:all .25s cubic-bezier(.16,1,.3,1) !important;
}
.quick-action-btn:hover{ background:rgba(0,245,212,0.06) !important; border-color:rgba(0,245,212,0.28) !important;
color:#eafcf8 !important; transform:translateY(-2px); box-shadow:0 10px 30px -12px rgba(0,245,212,0.25) !important; }
/* ---- section / header labele u V2 duhu ---- */
.section-title{ text-transform:uppercase; letter-spacing:2px; font-size:0.66rem !important; color:#8595a8 !important; font-weight:600 !important; }
.content-header-left h1{ letter-spacing:-0.6px; }
/* ===== V2 SKIN v2 (prave klase: bc-card / bc-num, univerzalne kroz app) ===== */
.bc-card{
border-radius:20px !important;
border:0.5px solid rgba(255,255,255,0.10) !important;
box-shadow:0 30px 72px -30px rgba(0,0,0,0.66), inset 0 1px 0 rgba(255,255,255,0.045) !important;
backdrop-filter:blur(16px);
transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.bc-card:hover{ transform:translateY(-2px); border-color:rgba(0,245,212,0.16) !important;
box-shadow:0 40px 90px -30px rgba(0,0,0,0.78), 0 0 36px -14px rgba(0,245,212,0.14), inset 0 1px 0 rgba(255,255,255,0.05) !important; }
.bc-num{
font-size:2.4rem !important; font-weight:600 !important; letter-spacing:-1.6px !important; line-height:1 !important;
font-variant-numeric:tabular-nums;
background:linear-gradient(180deg,#ffffff,#c4cede) !important;
-webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important;
}
/* ===== V2 SKIN v3 — dubina + mint akcenti (univerzalno) ===== */
.bc-card{ position:relative; overflow:hidden; }
.bc-card::after{ content:""; position:absolute; top:-50%; left:50%; transform:translateX(-50%);
width:130%; height:90%; background:radial-gradient(closest-side, rgba(0,245,212,0.055), transparent 72%);
pointer-events:none; z-index:0; }
.bc-card > *{ position:relative; z-index:1; }
/* mint akcenti na aktivnim/live stanjima */
.nav-item.active{ box-shadow:inset 2px 0 0 var(--v2-mint,#00F5D4); }
.bc-ctab.active, .bcr-tab.active{ color:#eafcf8 !important; }
/* primarni gradijent dugmici: ljubicasta -> ostaje, ali dodaj suptilni mint sjaj na hover */
.btn-primary:hover, button.btn.primary:hover{ box-shadow:0 12px 30px -12px rgba(124,58,237,0.5), 0 0 22px -12px rgba(0,245,212,0.4) !important; }
/* uppercase spaced labele (sekcijski naslovi malih slova) */
.nav-section-title{ text-transform:uppercase; letter-spacing:1.8px; font-size:0.6rem !important; color:#8595a8 !important; font-weight:600 !important; }
/* ===== V2 SKIN v4 — univerzalni premium ===== */
.bc-card::after{ top:0 !important; left:0 !important; transform:none !important; width:100% !important; height:120px !important; background:radial-gradient(120% 100% at 50% 0%, rgba(0,245,212,0.05), transparent 70%) !important; }
.btn-primary, button.btn.primary{ background:linear-gradient(135deg,#7c3aed,#a855f7) !important; border:none !important; color:#fff !important; box-shadow:0 10px 26px -12px rgba(124,58,237,0.55) !important; }
.btn-primary:hover, button.btn.primary:hover{ box-shadow:0 14px 34px -12px rgba(124,58,237,0.6), 0 0 26px -12px rgba(0,245,212,0.45) !important; transform:translateY(-1px); }
input[type="text"]:focus, input[type="search"]:focus, textarea:focus{ border-color:rgba(0,245,212,0.4) !important; box-shadow:0 0 0 3px rgba(0,245,212,0.08) !important; outline:none !important; }
*::-webkit-scrollbar{ width:8px; height:8px; } *::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.08); border-radius:4px; } *::-webkit-scrollbar-thumb:hover{ background:rgba(0,245,212,0.25); }
.nav-item.active{ color:#eafcf8 !important; background:rgba(0,245,212,0.05) !important; }
/* V2 SKIN v5 MOBILNI */
@media (max-width:768px){.bc-card,.content-header,.content-header-left,.content-header-right,.nav-item,.quick-action-btn{min-width:0}.bc-card{flex-wrap:wrap;row-gap:8px}.content-header-left h1,.section-title,.nav-item,.bc-num,.stat-label{overflow:hidden;text-overflow:ellipsis}.bc-num{font-size:1.9rem !important;letter-spacing:-1px !important}.content-header-left h1{font-size:1.15rem !important}.content-header,.content-header-right{flex-wrap:wrap;gap:8px}.bc-card,.bc-card *{overflow-wrap:anywhere;word-break:break-word}}
/* V2 SKIN v6 — sitni polish (bezbedno, samo izgled) */
.bc-card::after{background:radial-gradient(120% 100% at 50% 0%,rgba(0,245,212,0.035),transparent 72%) !important}
.bc-card{border-color:rgba(255,255,255,0.12) !important}
/* ===== V2 SKIN v8 — BC Base identitet: LJUBICASTA primarno, mat crna, mint SAMO tufna. Samo boje, bez pomeranja. ===== */
.bc-card::after{ background:radial-gradient(120% 100% at 50% 0%, rgba(124,58,237,0.07), transparent 72%) !important; }
.bc-card:hover{ border-color:rgba(168,85,247,0.22) !important; box-shadow:0 40px 90px -30px rgba(0,0,0,0.8), 0 0 40px -14px rgba(124,58,237,0.22), inset 0 1px 0 rgba(255,255,255,0.05) !important; }
.bc-num.mint, .bc-card.green .bc-num, .bc-card.cyan .bc-num{ background:linear-gradient(180deg,#d9c7ff,#a855f7) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
.nav-item.active{ color:#efe9ff !important; background:rgba(124,58,237,0.12) !important; box-shadow:inset 2px 0 0 #a855f7 !important; }
.quick-action-btn:hover{ background:rgba(124,58,237,0.08) !important; border-color:rgba(168,85,247,0.3) !important; color:#efe9ff !important; box-shadow:0 10px 30px -12px rgba(124,58,237,0.3) !important; }
.quick-action-btn:hover svg{ stroke:#c4b5fd !important; }
input[type="text"]:focus, input[type="search"]:focus, textarea:focus{ border-color:rgba(168,85,247,0.45) !important; box-shadow:0 0 0 3px rgba(124,58,237,0.1) !important; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(168,85,247,0.3) !important; }
.nav-badge:not(.warning):not(.danger){ background:rgba(124,58,237,0.18) !important; color:#c4b5fd !important; }
/* ===== V9 — LJUBICASTA + MINT KOMBO (ne dominira jedna). Samo boje. ===== */
.bc-card::after{ background:radial-gradient(120% 100% at 28% 0%, rgba(124,58,237,0.06), transparent 62%), radial-gradient(120% 100% at 82% 0%, rgba(0,245,212,0.045), transparent 62%) !important; }
.bc-card:hover{ border-color:rgba(140,120,230,0.22) !important; box-shadow:0 40px 90px -30px rgba(0,0,0,0.8), 0 0 36px -14px rgba(124,58,237,0.18), 0 0 30px -16px rgba(0,245,212,0.16), inset 0 1px 0 rgba(255,255,255,0.05) !important; }
.quick-action-btn:hover{ background:rgba(0,245,212,0.055) !important; border-color:rgba(0,245,212,0.26) !important; color:#eafcf8 !important; box-shadow:0 10px 30px -12px rgba(0,245,212,0.22) !important; }
.quick-action-btn:hover svg{ stroke:#00F5D4 !important; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(0,245,212,0.28) !important; }
.nav-badge:not(.warning):not(.danger){ background:rgba(0,245,212,0.15) !important; color:#8bfce9 !important; }
.bc-num.mint, .bc-card.green .bc-num, .bc-card.cyan .bc-num{ background:linear-gradient(180deg,#8bfce9,#00F5D4) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
/* ===== V10 — LJUBICASTA+MAT CRNA primarno, mint samo MALA tufna (chart + revenue broj) ===== */
.bc-card::after{ background:radial-gradient(120% 100% at 50% 0%, rgba(124,58,237,0.07), transparent 70%) !important; }
.bc-card:hover{ border-color:rgba(168,85,247,0.22) !important; box-shadow:0 40px 90px -30px rgba(0,0,0,0.8), 0 0 40px -14px rgba(124,58,237,0.22), inset 0 1px 0 rgba(255,255,255,0.05) !important; }
.quick-action-btn:hover{ background:rgba(124,58,237,0.08) !important; border-color:rgba(168,85,247,0.3) !important; color:#efe9ff !important; box-shadow:0 10px 30px -12px rgba(124,58,237,0.3) !important; }
.quick-action-btn:hover svg{ stroke:#c4b5fd !important; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(168,85,247,0.3) !important; }
.nav-badge:not(.warning):not(.danger){ background:rgba(124,58,237,0.18) !important; color:#c4b5fd !important; }
/* ===== V11 — malo VISE minta (revenue broj + sitan mint nagovestaj na karticama), ljubicasta i dalje glavna ===== */
.bc-num.mint, .bc-card.green .bc-num, .bc-card.cyan .bc-num{ background:linear-gradient(180deg,#9ffbe9,#00F5D4) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
.bc-card::after{ background:radial-gradient(120% 100% at 40% 0%, rgba(124,58,237,0.065), transparent 66%), radial-gradient(120% 100% at 86% 0%, rgba(0,245,212,0.032), transparent 66%) !important; }
.nav-badge:not(.warning):not(.danger){ background:rgba(0,245,212,0.13) !important; color:#9ffbe9 !important; }
/* ===== V12 — vise minta, blize preview-u (ljubicasta i dalje prisutna) ===== */
.bc-card::after{ background:radial-gradient(120% 100% at 36% 0%, rgba(124,58,237,0.05), transparent 66%), radial-gradient(120% 100% at 84% 0%, rgba(0,245,212,0.052), transparent 66%) !important; }
.bc-card:hover{ border-color:rgba(0,245,212,0.2) !important; box-shadow:0 40px 90px -30px rgba(0,0,0,0.8), 0 0 34px -14px rgba(124,58,237,0.15), 0 0 34px -14px rgba(0,245,212,0.2), inset 0 1px 0 rgba(255,255,255,0.05) !important; }
.quick-action-btn:hover{ background:rgba(0,245,212,0.06) !important; border-color:rgba(0,245,212,0.3) !important; color:#eafcf8 !important; box-shadow:0 10px 30px -12px rgba(0,245,212,0.26) !important; }
.quick-action-btn:hover svg{ stroke:#00F5D4 !important; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(0,245,212,0.3) !important; }
/* ===== V13 — jos malo minta na overview (jaci mint gradient iza kartica), ljubicasta drzi strukturu ===== */
.bc-card::after{ background:radial-gradient(120% 100% at 32% 0%, rgba(124,58,237,0.05), transparent 64%), radial-gradient(130% 110% at 82% 0%, rgba(0,245,212,0.075), transparent 66%) !important; }
.bc-card:hover{ border-color:rgba(0,245,212,0.26) !important; box-shadow:0 40px 90px -30px rgba(0,0,0,0.8), 0 0 32px -14px rgba(124,58,237,0.14), 0 0 40px -12px rgba(0,245,212,0.26), inset 0 1px 0 rgba(255,255,255,0.05) !important; }
.nav-badge:not(.warning):not(.danger){ background:rgba(0,245,212,0.16) !important; color:#9ffbe9 !important; }
/* ===== V14 — finalni mint boost (overview glow + hover + badge jaci), ljubicasta i dalje nosi strukturu ===== */
.bc-card::after{ background:radial-gradient(120% 100% at 30% 0%, rgba(124,58,237,0.05), transparent 64%), radial-gradient(135% 115% at 80% 0%, rgba(0,245,212,0.1), transparent 66%) !important; }
.bc-card:hover{ border-color:rgba(0,245,212,0.32) !important; box-shadow:0 40px 90px -30px rgba(0,0,0,0.8), 0 0 30px -14px rgba(124,58,237,0.13), 0 0 46px -12px rgba(0,245,212,0.32), inset 0 1px 0 rgba(255,255,255,0.05) !important; }
.nav-badge:not(.warning):not(.danger){ background:rgba(0,245,212,0.2) !important; color:#aefdee !important; }
/* ===== V15 — STAKLENA DUBINA (lit-from-top kao preview). Bezbedno: ::before overlay, ne dira bg/tinte. ===== */
.bc-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
background:linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.014) 38%, transparent 68%); }
.bc-card{ border-color:rgba(255,255,255,0.12) !important; box-shadow:0 30px 72px -30px rgba(0,0,0,0.66), inset 0 1px 0 rgba(255,255,255,0.06) !important; }
.bc-card > *{ position:relative; z-index:1; }
/* ===== V16 — manje boje + bez sivila. Mint suptilniji; stakleni sjaj SAMO na vrhu (ne wash preko cele kartice). ===== */
/* ::before = kratak top-sheen (88px), ne vise inset:0 preko cele kartice (to je pravilo sivilo na velikim karticama) */
.bc-card::before{ inset:auto !important; top:0 !important; left:0 !important; right:auto !important; bottom:auto !important; width:100% !important; height:88px !important;
background:linear-gradient(180deg, rgba(255,255,255,0.026), transparent) !important; }
/* mint glow suptilniji (jedan radial, manji intenzitet) — manje "bojasto" */
.bc-card::after{ background:radial-gradient(120% 100% at 50% 0%, rgba(0,245,212,0.042), transparent 70%) !important; }
.bc-card{ border-color:rgba(255,255,255,0.10) !important; }
.bc-card:hover{ border-color:rgba(0,245,212,0.16) !important; box-shadow:0 40px 90px -30px rgba(0,0,0,0.8), 0 0 34px -16px rgba(0,245,212,0.14), inset 0 1px 0 rgba(255,255,255,0.05) !important; }
.nav-badge:not(.warning):not(.danger){ background:rgba(0,245,212,0.14) !important; color:#9ffbe9 !important; }
/* body mint pozadina suptilnije (da 2. kartica ne izgleda zeleno od body glow-a) */
body{ background:
radial-gradient(900px 500px at 15% -5%, rgba(0,245,212,0.022), transparent 60%),
radial-gradient(820px 520px at 100% 0%, rgba(124,58,237,0.045), transparent 62%),
#08080e !important; }
/* ===== V17 — CHAT/MESSAGES premium (overview nivo). Staklo, ljubicasta/mint (bez starog plavog), glassier baloni, mint focus. ===== */
.chat-container{ border:.5px solid rgba(255,255,255,0.09) !important; border-radius:20px !important; box-shadow:0 30px 72px -30px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.04) !important; }
.chat-sidebar{ background:rgba(255,255,255,0.015) !important; border-right:.5px solid rgba(255,255,255,0.06) !important; }
.chat-sidebar-header{ border-bottom:.5px solid rgba(255,255,255,0.06) !important; }
.chat-list-item{ border-bottom:.5px solid rgba(255,255,255,0.045) !important; }
.chat-list-item:hover{ background:rgba(255,255,255,0.03) !important; }
.chat-list-item.active{ background:rgba(124,58,237,0.10) !important; border-left:3px solid #7c3aed !important; }
.chat-list-item.unread{ background:rgba(0,245,212,0.045) !important; }
.chat-list-badge{ background:linear-gradient(135deg,#7c3aed,#a855f7) !important; box-shadow:0 2px 8px rgba(124,58,237,0.4) !important; }
.chat-list-avatar, .chat-main-avatar{ background:linear-gradient(135deg,#7c3aed,#a855f7) !important; box-shadow:0 2px 10px rgba(124,58,237,0.32) !important; }
.chat-main-header{ background:rgba(255,255,255,0.02) !important; border-bottom:.5px solid rgba(255,255,255,0.06) !important; }
/* primljeni balon: staklo umesto ravno-sivog */
.chat-message:not(.sent) .chat-message-content{ background:linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.032)) !important; border:.5px solid rgba(255,255,255,0.09) !important; box-shadow:0 1px 2px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05) !important; }
/* composer: staklo + mint focus */
.chat-input-area{ background:transparent !important; border-top:.5px solid rgba(255,255,255,0.06) !important; }
.chat-input-wrapper{ background:rgba(255,255,255,0.03) !important; border:.5px solid rgba(255,255,255,0.09) !important; border-radius:14px !important; transition:border-color .2s ease, box-shadow .2s ease; }
.chat-input-wrapper:focus-within{ border-color:rgba(0,245,212,0.4) !important; box-shadow:0 0 0 3px rgba(0,245,212,0.08) !important; }
.chat-send-btn{ background:linear-gradient(135deg,#7c3aed,#a855f7) !important; border-radius:13px !important; box-shadow:0 8px 22px -10px rgba(124,58,237,0.55) !important; }
.chat-send-btn:hover{ box-shadow:0 10px 26px -10px rgba(124,58,237,0.6), 0 0 20px -10px rgba(0,245,212,0.4) !important; transform:translateY(-1px) !important; }
/* ===== V18 — jasnije staklo na SVIM karticama (sve sekcije vidno kao overview). Hladni sjaj (ne sivo) + zivi redovi. ===== */
.bc-card{ border-radius:18px !important; }
.bc-card::before{ height:104px !important; background:linear-gradient(180deg, rgba(200,214,255,0.045), rgba(200,214,255,0.012) 55%, transparent) !important; }
/* list/row kartice (bc-static) sada reaguju na hover kao overview — osecaj "zivo" */
.bc-card.bc-static{ transition:transform .2s cubic-bezier(.16,1,.3,1), border-color .2s ease, box-shadow .2s ease !important; }
.bc-card.bc-static:hover{ border-color:rgba(0,245,212,0.14) !important; box-shadow:0 30px 64px -30px rgba(0,0,0,0.7), 0 0 22px -16px rgba(0,245,212,0.12), inset 0 1px 0 rgba(255,255,255,0.06) !important; }
/* ===== V19 — ciljano: akciona dugmad (btn-sm) nikad full-width (bio neon bar); brand ljubicasti gradijent bez indigo ===== */
.btn-sm{ width:auto !important; display:inline-flex !important; align-items:center; justify-content:center; }
.contract-actions, .deliverable-actions, .invoice-actions, .proposal-actions{ align-items:center; }
.btn-primary{ background:linear-gradient(135deg,#7c3aed 0%,#a855f7 100%) !important; box-shadow:0 8px 22px -10px rgba(124,58,237,.5) !important; }
.btn-primary:hover{ box-shadow:0 10px 28px -10px rgba(124,58,237,.55), 0 0 20px -12px rgba(0,245,212,.4) !important; }
/* ===== V20 — overview header: search + zvonce premium (staklo, mint focus, SVG lupa umesto emojija) ===== */
.search-input{ background:rgba(255,255,255,0.03) !important; border:.5px solid rgba(255,255,255,0.09) !important; border-radius:12px !important; transition:border-color .2s ease, box-shadow .2s ease, width .2s ease !important; }
.search-input:focus{ border-color:rgba(0,245,212,0.4) !important; box-shadow:0 0 0 3px rgba(0,245,212,0.08) !important; }
.search-icon{ color:#8595a8 !important; display:inline-flex; align-items:center; }
.notification-btn{ background:rgba(255,255,255,0.03) !important; border:.5px solid rgba(255,255,255,0.09) !important; border-radius:12px !important; color:#cbd5e1 !important; transition:all .2s ease !important; }
.notification-btn:hover{ background:rgba(124,58,237,0.08) !important; border-color:rgba(124,58,237,0.3) !important; color:#fff !important; }
.notification-dropdown{ background:linear-gradient(180deg,rgba(19,19,27,.985),rgba(12,12,18,.985)) !important; border:.5px solid rgba(255,255,255,0.1) !important; border-radius:16px !important; box-shadow:0 30px 72px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05) !important; backdrop-filter:blur(16px); }
/* ===== V21 — ANALYTICS kartice = overview staklo (bile solid/pljosnate); broj belo->sivo kao bc-num (ne indigo) ===== */
.analytics-card{ position:relative; overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008)) !important; border:.5px solid rgba(255,255,255,.1) !important; border-radius:18px !important; box-shadow:0 30px 72px -30px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.05) !important; backdrop-filter:blur(16px); }
.analytics-card::before{ content:""; position:absolute; top:0; left:0; width:100%; height:104px; pointer-events:none; z-index:0; background:linear-gradient(180deg, rgba(200,214,255,0.045), transparent); }
.analytics-card::after{ content:""; position:absolute; top:0; left:0; width:100%; height:120px; pointer-events:none; z-index:0; background:radial-gradient(120% 100% at 50% 0%, rgba(0,245,212,0.042), transparent 70%); }
.analytics-card > *{ position:relative; z-index:1; }
.analytics-card:hover{ transform:translateY(-2px); border-color:rgba(0,245,212,.16) !important; box-shadow:0 40px 90px -30px rgba(0,0,0,.8), 0 0 30px -16px rgba(0,245,212,.14), inset 0 1px 0 rgba(255,255,255,.05) !important; }
.analytics-card-value{ background:linear-gradient(180deg,#ffffff,#c4cede) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; font-size:2.3rem !important; font-weight:600 !important; letter-spacing:-1.4px !important; font-variant-numeric:tabular-nums; }
.analytics-chart-container{ position:relative; overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.006)) !important; border:.5px solid rgba(255,255,255,.09) !important; border-radius:18px !important; box-shadow:0 30px 72px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.045) !important; }
.analytics-chart-container::before{ content:""; position:absolute; top:0; left:0; width:100%; height:100px; pointer-events:none; background:linear-gradient(180deg, rgba(200,214,255,0.03), transparent); }
/* ===== V22 — Billing toolbar: dugmad bez prelamanja teksta (bilo "Generate/PDF" u 2 reda), ujednacen radius ===== */
.btn{ white-space:nowrap; }
.content-header-right .btn-secondary{ border-radius:11px !important; padding:10px 16px !important; }
.content-header-right .btn-primary{ border-radius:11px !important; }
/* ===== V23 — preostale "-card" klase (bile solid/pljosnate) -> overview staklo ===== */
.contract-card, .feedback-card, .template-card, .goal-card, .deliverable-card, .doc-card{
position:relative; overflow:hidden;
background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008)) !important;
border:.5px solid rgba(255,255,255,.1) !important;
border-radius:18px !important;
box-shadow:0 30px 72px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05) !important;
backdrop-filter:blur(14px);
}
.contract-card::before, .feedback-card::before, .template-card::before, .goal-card::before, .deliverable-card::before, .doc-card::before{
content:""; position:absolute; top:0; left:0; width:100%; height:92px; pointer-events:none; z-index:0;
background:linear-gradient(180deg, rgba(200,214,255,0.042), transparent); }
.contract-card::after, .feedback-card::after, .template-card::after, .goal-card::after, .deliverable-card::after{
content:""; position:absolute; top:0; left:0; width:100%; height:110px; pointer-events:none; z-index:0;
background:radial-gradient(120% 100% at 50% 0%, rgba(0,245,212,0.04), transparent 70%); }
.contract-card > *, .feedback-card > *, .template-card > *, .goal-card > *, .deliverable-card > *, .doc-card > *{ position:relative; z-index:1; }
.contract-card:hover, .feedback-card:hover, .template-card:hover, .goal-card:hover, .deliverable-card:hover{
transform:translateY(-2px); border-color:rgba(0,245,212,.16) !important;
box-shadow:0 40px 90px -30px rgba(0,0,0,.8), 0 0 28px -16px rgba(0,245,212,.14), inset 0 1px 0 rgba(255,255,255,.05) !important; }
/* kanban deal kartice: lagano staklo (bez teskog shadow/glow, zadrzi kompaktnost) */
.pipeline-card{ background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)) !important; border:.5px solid rgba(255,255,255,.09) !important; border-radius:12px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important; }
.pipeline-card:hover{ border-color:rgba(0,245,212,.2) !important; box-shadow:0 16px 36px -22px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06) !important; }
/* ===== V24 — Billing fakture: status-obojena leva ivica (brzo skeniranje) ===== */
.invoice-card{ border-left:2px solid rgba(251,191,36,.42) !important; }
.invoice-card.unpaid{ border-left-color:rgba(251,191,36,.5) !important; }
.invoice-card.overdue{ border-left-color:rgba(248,113,113,.6) !important; }
.invoice-card.paid{ border-left-color:rgba(0,245,212,.5) !important; }
/* ===== V25 — toolbar (content-header-right) wrap: dugmad se prelome u novi red umesto da se seku desno ===== */
.content-header-right{ flex-wrap:wrap !important; justify-content:flex-end !important; row-gap:8px; }
.content-header{ align-items:flex-start !important; }
.content-header-right .btn-secondary{ background:rgba(255,255,255,.035) !important; border:.5px solid rgba(124,58,237,.28) !important; color:#c4b5fd !important; }
.content-header-right .btn-secondary:hover{ background:rgba(124,58,237,.12) !important; border-color:rgba(124,58,237,.45) !important; color:#e9d5ff !important; }
/* ===== V26 — toolbar dugmad se NIKAD ne razvlace (fix: .btn-primary ima width:100% u bazi) ===== */
.content-header-right .btn{ width:auto !important; flex:0 0 auto !important; }
@media(max-width:768px){ .content-header-right .btn{ flex:1 1 calc(50% - 4px) !important; width:auto !important; } }
/* ===== V27 — Scheduling pod-sekcije: ravne hairline trake -> premium kartice (call types + availability + tier tabela) ===== */
.sched-ct-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 15px; margin-bottom:9px;
border:.5px solid rgba(255,255,255,.08); border-radius:13px;
background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
box-shadow:inset 0 1px 0 rgba(255,255,255,.04); transition:border-color .16s, transform .16s, box-shadow .16s; }
.sched-ct-row:hover{ border-color:rgba(0,245,212,.18); transform:translateY(-1px);
box-shadow:0 14px 30px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06); }
.sched-day-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:11px 14px; margin-bottom:8px;
border:.5px solid rgba(255,255,255,.07); border-radius:12px; background:rgba(255,255,255,.022);
transition:border-color .16s, background .16s; }
.sched-day-row:hover{ border-color:rgba(124,58,237,.28); background:rgba(124,58,237,.04); }
.sched-tier-table{ border-radius:12px; overflow:hidden; }
.sched-tier-table thead th{ background:rgba(124,58,237,.06); padding-top:13px !important; padding-bottom:13px !important; }
.sched-tier-table tbody tr{ transition:background .14s; }
.sched-tier-table tbody tr:hover{ background:rgba(124,58,237,.055); }
.sched-tier-table tbody td{ border-top-color:rgba(255,255,255,.055) !important; }
/* ===== V28 — Scheduling: pravi raspored (ikon-pločica, status pill, 2-kolonski availability grid) ===== */
.sched-ct-row{ gap:13px !important; padding:13px 16px !important; }
.sched-ct-ico{ flex:0 0 auto; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
color:#a78bfa; background:rgba(124,58,237,.12); border:1px solid rgba(124,58,237,.22); }
.sched-ct-row:hover .sched-ct-ico{ color:#00F5D4; background:rgba(0,245,212,.1); border-color:rgba(0,245,212,.22); }
.sched-pill{ display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; letter-spacing:.02em;
padding:5px 11px; border-radius:999px; white-space:nowrap; }
.sched-pill.on{ color:#00F5D4; background:rgba(0,245,212,.1); border:.5px solid rgba(0,245,212,.28); }
.sched-pill.off{ color:#94a3b8; background:rgba(255,255,255,.04); border:.5px solid rgba(255,255,255,.1); }
.sched-pill-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px rgba(0,245,212,.12); }
.sched-pill.off .sched-pill-dot{ box-shadow:none; }
.sched-x{ flex:0 0 auto; width:30px; height:30px; display:flex; align-items:center; justify-content:center;
background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.07); border-radius:9px; color:var(--text-muted);
cursor:pointer; font-size:1.05rem; line-height:1; transition:all .15s; }
.sched-x:hover{ color:#f87171; border-color:rgba(248,113,113,.4); background:rgba(248,113,113,.08); }
/* availability: 2-kolonski grid kompaktnih day kartica (umesto praznih full-width traka) */
.sched-day-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:10px; margin-bottom:16px; }
.sched-day-row{ margin-bottom:0 !important; justify-content:flex-start !important; gap:10px !important; padding:11px 14px !important; }
.sched-day-row > label{ width:70px !important; flex:0 0 auto; }
.sched-day-row input[type="time"]{ background:rgba(255,255,255,.03) !important; border:1px solid rgba(124,58,237,.20) !important;
border-radius:9px !important; color:var(--text-primary) !important; padding:7px 9px !important; font-family:inherit; font-size:.84rem;
color-scheme:dark; width:104px !important; }
.sched-day-row input[type="time"]:hover{ border-color:rgba(124,58,237,.4) !important; }
@media(max-width:560px){ .sched-day-grid{ grid-template-columns:1fr; } }
/* ===== V29 — reusable card grid (Project Templates i sl. sparse full-width liste -> grid kao Vaults/Prompts) ===== */
.bc-grid-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; align-items:start; }
@media(max-width:560px){ .bc-grid-cards{ grid-template-columns:1fr; } }
/* ===== V30 — Scheduling: jednostavnije i kompaktnije (lakse za manevrisanje) ===== */
/* call-type redovi: tanji, manja ikonica */
.sched-ct-row{ padding:9px 14px !important; margin-bottom:7px !important; gap:12px !important; }
.sched-ct-ico{ width:30px !important; height:30px !important; border-radius:9px !important; }
.sched-ct-row .sched-pill{ padding:4px 10px !important; }
/* availability: siri grid (2 kolone) + SVE u JEDNU liniju (dan + vreme inline), kraci redovi */
.sched-day-grid{ grid-template-columns:repeat(auto-fit,minmax(380px,1fr)) !important; gap:8px !important; }
.sched-day-row{ flex-wrap:nowrap !important; padding:8px 13px !important; gap:10px !important; }
.sched-day-row > label{ width:52px !important; }
.sched-day-row input[type="time"]{ width:88px !important; padding:6px 8px !important; }
.sched-day-row .sched-to, .sched-day-row span{ font-size:.78rem; }
@media(max-width:820px){ .sched-day-grid{ grid-template-columns:1fr !important; } }
/* ===== V31 — Deliverables: komentari SKUPLJENI po defaultu (kartice kompaktne, lakse za manevrisanje) ===== */
.comments-section{ margin-top:12px; padding-top:10px; border-top:.5px solid rgba(255,255,255,.06); }
.comments-toggle{ display:inline-flex; align-items:center; gap:7px; background:none; border:none; cursor:pointer;
padding:4px 0; color:var(--text-muted); font-family:inherit; font-size:.82rem; font-weight:600; }
.comments-toggle:hover{ color:#c4b5fd; }
.comments-chev{ flex:0 0 auto; transition:transform .16s; }
.comments-section.open .comments-chev{ transform:rotate(90deg); }
.comments-collapse{ display:none; margin-top:10px; }
.comments-section.open .comments-collapse{ display:block; }
/* ===== V32 — Settings gear-popover u dnu sidebara (kao V1) ===== */
.sidebar-footer-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.bc-settings-wrap{ position:relative; }
.bc-gear-btn{ width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:9px;
border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); color:var(--text-muted,#94a3b8); cursor:pointer; transition:all .15s; }
.bc-gear-btn:hover{ color:#c4b5fd; border-color:rgba(124,58,237,.42); background:rgba(124,58,237,.1); transform:rotate(25deg); }
.bc-settings-menu{ position:absolute; bottom:calc(100% + 10px); right:0; min-width:236px;
background:linear-gradient(180deg,#15161f,#101019); border:1px solid rgba(124,58,237,.28); border-radius:14px;
box-shadow:0 26px 64px -22px rgba(0,0,0,.8); padding:8px; opacity:0; transform:translateY(6px) scale(.98);
pointer-events:none; transition:opacity .16s, transform .16s; z-index:100000; }
.bc-settings-menu.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.bc-settings-menu-title{ font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted,#64748b); padding:6px 10px 8px; }
.bc-settings-item{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:none; border:none; cursor:pointer;
color:#e2e8f0; font-family:inherit; font-size:13.5px; font-weight:500; padding:9px 10px; border-radius:9px; transition:background .13s,color .13s; }
.bc-settings-item:hover{ background:rgba(124,58,237,.14); color:#fff; }
.bc-settings-item svg{ flex:0 0 auto; color:#a78bfa; }
/* ===== V33 — Settings popover: kompaktniji + izlazi DESNO (fixed poz. iz JS) ===== */
.bc-settings-menu{ min-width:184px !important; padding:5px !important; border-radius:12px !important; }
.bc-settings-menu-title{ font-size:9px !important; padding:5px 9px 5px !important; }
.bc-settings-item{ font-size:12.5px !important; padding:7px 9px !important; gap:9px !important; border-radius:8px !important; }
.bc-settings-item svg{ width:13px !important; height:13px !important; }
.bc-settings-menu.open{ transform:none !important; }
/* ===== V34 — Settings popover: separator + Sign out (crveno) ===== */
.bc-settings-sep{ height:1px; background:rgba(255,255,255,.08); margin:5px 7px; }
.bc-settings-item.bc-danger{ color:#f87171 !important; }
.bc-settings-item.bc-danger svg{ color:#f87171 !important; }
.bc-settings-item.bc-danger:hover{ background:rgba(248,113,113,.12) !important; color:#fca5a5 !important; }
/* ===== V35 — Settings sekcija: skok iz popover-a lepo sedne + lagani hover ===== */
#adminSettingsView .section-card{ scroll-margin-top:86px; transition:border-color .16s, box-shadow .16s; }
#adminSettingsView .section-card:hover{ border-color:rgba(124,58,237,.2); }
/* ===== V36 — Service Requests: ikon-pločica levo (premium anchor) ===== */
.req-ico{ flex:0 0 auto; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
color:#a78bfa; background:rgba(124,58,237,.12); border:1px solid rgba(124,58,237,.22); }
/* ===== V37 — Sidebar nav kao PREVIEW (bcbase-v2-FULL-preview): mint aktivni akcenat, 2 grupe ===== */
#adminSidebar .nav-item{ display:flex !important; align-items:center !important; gap:10px !important;
padding:9px 12px !important; border-radius:10px !important; color:#94a3b8 !important; font-size:0.86rem !important;
margin-bottom:2px !important; font-weight:500; border:none !important; transition:background .14s,color .14s,box-shadow .14s; }
#adminSidebar .nav-item:hover{ color:#f1f5f9 !important; background:rgba(255,255,255,0.03) !important; }
#adminSidebar .nav-item.active{ color:#f1f5f9 !important; background:rgba(124,58,237,0.12) !important; box-shadow:inset 2px 0 0 #7c3aed !important; }
#adminSidebar .nav-item.active .nav-icon{ color:#c4b5fd !important; }
#adminSidebar .nav-item .nav-icon{ display:inline-flex; align-items:center; }
#adminSidebar .nav-item .nav-icon svg{ opacity:.85; }
#adminSidebar .nav-section-title{ text-transform:uppercase !important; letter-spacing:1.8px !important; font-size:0.58rem !important;
color:#8595a8 !important; font-weight:600 !important; margin:16px 8px 6px !important; }
#adminSidebar .nav-badge{ background:rgba(255,255,255,.06) !important; color:#94a3b8 !important; border:none !important; }
#adminSidebar .nav-badge.warning{ background:rgba(124,58,237,.16) !important; color:#c4b5fd !important; }
/* ===== V38 (ispravka) — collapse OSTAJE; samo skupljene stavke = NULA prostora (V37 ID padding je curio) ===== */
#adminSidebar .nav-section.collapsed .nav-item{ max-height:0 !important; opacity:0 !important; overflow:hidden !important; pointer-events:none !important;
padding-top:0 !important; padding-bottom:0 !important; margin-top:0 !important; margin-bottom:0 !important; }
#adminSidebar .nav-section-title{ margin:18px 8px 6px !important; }
#adminSidebar .nav-section{ margin-bottom:8px !important; }
/* ===== V39 — Sidebar footer: Privacy/Terms + gear lepo (Sign Out sklonjen, u popover-u) ===== */
.sidebar-footer{ padding:12px 10px 12px !important; border-top:1px solid rgba(255,255,255,.06); margin-top:4px; }
.sidebar-footer-row{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px; margin-bottom:0 !important; }
.sidebar-footer-links{ display:flex; align-items:center; gap:14px; }
.sidebar-footer-links a{ color:#64748b !important; font-size:.76rem; text-decoration:none; letter-spacing:.01em; transition:color .15s; }
.sidebar-footer-links a:hover{ color:#c4b5fd !important; }
/* ===== V40 — Proposal kartice isti glass+mint kao Contract (Luka: moraju biti iste) ===== */
.proposal-card{
position:relative; overflow:hidden;
background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008)) !important;
border:.5px solid rgba(255,255,255,.1) !important;
border-radius:18px !important;
box-shadow:0 30px 72px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05) !important;
backdrop-filter:blur(14px);
}
.proposal-card::before{ content:""; position:absolute; top:0; left:0; width:100%; height:92px; pointer-events:none; z-index:0;
background:linear-gradient(180deg, rgba(200,214,255,0.042), transparent); }
.proposal-card::after{ content:""; position:absolute; top:0; left:0; width:100%; height:110px; pointer-events:none; z-index:0;
background:radial-gradient(120% 100% at 50% 0%, rgba(0,245,212,0.04), transparent 70%); }
.proposal-card > *{ position:relative; z-index:1; }
.proposal-card:hover{ transform:translateY(-2px); border-color:rgba(0,245,212,.16) !important;
box-shadow:0 40px 90px -30px rgba(0,0,0,.8), 0 0 28px -16px rgba(0,245,212,.14), inset 0 1px 0 rgba(255,255,255,.05) !important; }
/* ===== V41 — Invoice kartice iste kao Proposal/Contract (Luka: sve tri istog izgleda) ===== */
.invoice-card{
position:relative; overflow:hidden;
background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008)) !important;
border:.5px solid rgba(255,255,255,.1) !important;
border-left:.5px solid rgba(255,255,255,.1) !important;
border-radius:18px !important;
box-shadow:0 30px 72px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05) !important;
backdrop-filter:blur(14px);
}
.invoice-card.unpaid, .invoice-card.overdue, .invoice-card.paid{ border-left:.5px solid rgba(255,255,255,.1) !important; }
.invoice-card::before{ content:""; position:absolute; top:0; left:0; width:100%; height:92px; pointer-events:none; z-index:0;
background:linear-gradient(180deg, rgba(200,214,255,0.042), transparent); }
.invoice-card::after{ content:""; position:absolute; top:0; left:0; width:100%; height:110px; pointer-events:none; z-index:0;
background:radial-gradient(120% 100% at 50% 0%, rgba(0,245,212,0.04), transparent 70%); }
.invoice-card > *{ position:relative; z-index:1; }
.invoice-card:hover{ transform:translateY(-2px); border-color:rgba(0,245,212,.16) !important;
box-shadow:0 40px 90px -30px rgba(0,0,0,.8), 0 0 28px -16px rgba(0,245,212,.14), inset 0 1px 0 rgba(255,255,255,.05) !important; }
/* ===== V42 — Billing kartice: ikon-pločica levo (match requests/scheduling) ===== */
.bill-ico{ flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
color:#a78bfa; background:rgba(124,58,237,.12); border:1px solid rgba(124,58,237,.22); margin-top:2px; }
.proposal-card:hover .bill-ico, .invoice-card:hover .bill-ico, .contract-card:hover .bill-ico{
color:#00F5D4; background:rgba(0,245,212,.1); border-color:rgba(0,245,212,.22); }
/* ===== Wingman stranica — Claude-chat izgled (A20) ===== */
.wm-wrap{display:flex;gap:18px;max-width:1120px;margin:0 auto}
.wm-main{flex:1;min-width:0;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));border:.5px solid rgba(255,255,255,.1);border-radius:18px;overflow:hidden}
.wm-head{padding:15px 20px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:12px;flex:0 0 auto}
.wm-thread{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:10px;min-height:260px}
.wm-composer{flex:0 0 auto;border-top:1px solid rgba(124,58,237,.14);padding:13px 16px;background:rgba(10,10,18,.45)}
.wm-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.wm-aside{width:330px;flex:0 0 auto;display:flex;flex-direction:column;gap:16px}
.wm-sec-h{font-size:11.5px;font-weight:700;letter-spacing:.05em;color:#94a3b8;text-transform:uppercase;margin:0 0 10px 2px}
@media(min-width:981px){.wm-wrap{height:calc(100vh - 150px);min-height:540px}.wm-aside{overflow-y:auto;padding-right:2px}}
@media(max-width:980px){.wm-wrap{flex-direction:column}.wm-aside{width:auto;order:-1}.wm-main{min-height:60vh}.wm-rb-txt{display:none}}
/* Scheduling progressive disclosure (A22) */
details.sched-disc summary::-webkit-details-marker{color:#00F5D4}
details.sched-disc summary{transition:color .18s ease}
details.sched-disc summary:hover{color:var(--text-primary)}
details.sched-disc[open] summary{color:var(--text-primary)}
/* Settings: uskladi sa bc-card stilom + lakše + 2-kolone (A24) */
#adminSettingsView .section-card{ background:linear-gradient(180deg,rgba(255,255,255,0.035),rgba(255,255,255,0.008)) !important; border:0.5px solid rgba(255,255,255,0.10) !important; box-shadow:0 24px 58px -30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04) !important; margin-bottom:16px !important; transition:border-color .22s ease, box-shadow .22s ease; }
#adminSettingsView .section-card::before{ display:none !important; }
#adminSettingsView .section-card:hover{ border-color:rgba(0,245,212,0.14) !important; box-shadow:0 30px 70px -30px rgba(0,0,0,0.62), 0 0 30px -16px rgba(0,245,212,0.12), inset 0 1px 0 rgba(255,255,255,0.045) !important; }
#adminSettingsView .set-row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
#adminSettingsView .set-row2 .section-card{ margin-bottom:0 !important; }
@media(max-width:768px){ #adminSettingsView .set-row2{ grid-template-columns:1fr; } }
#pwToggleLink:hover{color:var(--text-secondary)!important;}
/* btn-test-1793486900410 */
/* ===== ENGINEER SECTION ===== */
.eng-wrap{--ep:#a855f7;--ep2:#7c3aed;--eln:rgba(168,85,247,.16);--eln2:rgba(168,85,247,.28);--epanel:#0e0e18;--epanel2:#11111d;--edim:#8b86a6;--efaint:#5b5676;--emono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:13px;color:#e7e3f3}
.eng-top{display:flex;align-items:center;gap:13px;padding:12px 15px;border:1px solid var(--eln);border-radius:12px;background:linear-gradient(180deg,rgba(168,85,247,.05),transparent)}
.eng-knight{width:30px;height:30px;border:1px solid var(--eln2);border-radius:8px;display:grid;place-items:center;color:var(--ep);font-family:var(--emono);box-shadow:0 0 16px rgba(168,85,247,.2) inset}
.eng-brand{display:flex;flex-direction:column;line-height:1.1}.eng-brand b{font-size:14px;letter-spacing:1.4px}.eng-brand span{font-size:10px;color:var(--efaint);letter-spacing:2.5px;text-transform:uppercase}
.eng-pills{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap}
.eng-pill{font-family:var(--emono);font-size:11px;color:var(--edim);border:1px solid var(--eln);border-radius:999px;padding:5px 11px;display:flex;align-items:center;gap:7px;background:var(--epanel)}
.eng-pill.live{border-color:rgba(255,93,108,.35);color:#ffb3bb}
.eng-dot{width:7px;height:7px;border-radius:50%;box-shadow:0 0 7px currentColor;display:inline-block}
.eng-dot.ok{background:#36d399;color:#36d399}.eng-dot.warn{background:#f6c445;color:#f6c445}.eng-dot.rec{background:#ff5d6c;color:#ff5d6c;animation:engbl 1.6s steps(1) infinite}
@keyframes engbl{50%{opacity:.25}}
#engClock{color:var(--ep);font-family:var(--emono)}
.eng-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.eng-kpi{border:1px solid var(--eln);border-radius:10px;padding:11px 13px;background:var(--epanel2)}
.eng-kpi b{display:block;font-family:var(--emono);font-size:22px}.eng-kpi .u{color:var(--ep)}
.eng-kpi span{font-size:10px;color:var(--efaint);letter-spacing:1.4px;text-transform:uppercase}
.eng-sysbar{display:flex;gap:4px;flex-wrap:wrap;margin-top:12px;padding:10px 8px;border:1px solid var(--eln);border-radius:12px;background:var(--epanel);font-family:var(--emono);font-size:11px}
.eng-mod{display:flex;align-items:center;gap:7px;color:var(--edim);padding:3px 13px;border-right:1px solid var(--eln)}.eng-mod:last-child{border-right:none}.eng-mod b{color:#e7e3f3;font-weight:500}.eng-mod .ms{color:var(--efaint);margin-left:3px}
.eng-grid{display:grid;grid-template-columns:1fr 320px;gap:12px;margin-top:12px}
.eng-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.eng-panel{border:1px solid var(--eln);border-radius:12px;background:var(--epanel);overflow:hidden}
.eng-ph{display:flex;align-items:center;gap:8px;padding:9px 13px;border-bottom:1px solid var(--eln);font-family:var(--emono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--edim)}
.eng-ph b{color:var(--ep)}.eng-ph .eng-tag{margin-left:auto;color:var(--efaint);letter-spacing:.5px;text-transform:none}
.eng-pc{padding:13px}
.eng-chat{display:flex;flex-direction:column;gap:12px;padding:15px;max-height:520px;overflow-y:auto}
.eng-msg{max-width:88%;padding:10px 13px;border-radius:13px;font-size:13px;line-height:1.5}
.eng-me{align-self:flex-end;background:linear-gradient(135deg,var(--ep2),var(--ep));color:#0b0b12;border-bottom-right-radius:4px;font-weight:500}
.eng-engm,.eng-nudge{align-self:flex-start;background:var(--epanel2);border:1px solid var(--eln);border-bottom-left-radius:4px}
.eng-nudge{border-color:rgba(246,196,69,.3)}
.eng-who{font-family:var(--emono);font-size:10px;color:var(--ep);letter-spacing:1px;margin-bottom:5px;display:flex;align-items:center;gap:6px}
.eng-card{margin-top:10px;border:1px solid var(--eln);border-radius:10px;overflow:hidden;background:#0b0b14}
.eng-ch{padding:7px 11px;border-bottom:1px solid var(--eln);font-family:var(--emono);font-size:10px;letter-spacing:1px;color:var(--efaint)}
.eng-cbody{display:flex;gap:10px;padding:10px}
.eng-sum{flex:1;min-width:0;font-family:var(--emono);font-size:11px;line-height:1.6;color:#bdb6d6;white-space:pre-wrap;word-break:break-word;margin:0;max-height:220px;overflow:auto}
.eng-snap{width:140px;flex:none;border:1px solid var(--eln);border-radius:8px;overflow:hidden;height:fit-content}.eng-snap img{width:100%;display:block}
.eng-verdict{padding:8px 11px;border-top:1px solid var(--eln);font-size:11.5px;color:var(--edim);display:flex;align-items:center;gap:7px}
.eng-acts{display:flex;gap:9px;padding:0 10px 11px}
.eng-btn{flex:1;text-align:center;padding:9px;border-radius:8px;font-weight:600;font-size:12.5px;cursor:pointer;border:1px solid var(--eln2)}
.eng-btn.go{background:linear-gradient(135deg,var(--ep2),var(--ep));color:#0b0b12;border:none}
.eng-btn.no{background:transparent;color:var(--edim)}
.eng-typing{align-self:flex-start;padding:4px 2px}.eng-typing i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ep);margin:0 1px;animation:engtp 1.2s infinite}.eng-typing i:nth-child(2){animation-delay:.2s}.eng-typing i:nth-child(3){animation-delay:.4s}
@keyframes engtp{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.eng-cmd{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid var(--eln);background:linear-gradient(180deg,rgba(168,85,247,.05),transparent)}
.eng-pr{color:var(--ep);font-weight:700;font-family:var(--emono)}
.eng-cmd input{flex:1;background:transparent;border:none;outline:none;color:#e7e3f3;font-size:13px}
.eng-cmd input::placeholder{color:var(--efaint)}
.eng-send{padding:9px 16px;border-radius:8px;background:linear-gradient(135deg,var(--ep2),var(--ep));color:#0b0b12;font-weight:700;font-size:12px;cursor:pointer;white-space:nowrap}
.eng-radar{height:160px;position:relative;border-radius:10px;overflow:hidden;background:radial-gradient(circle at 50% 55%,rgba(124,58,237,.09),transparent 65%),#0b0b16}
.eng-ring{position:absolute;border:1px solid var(--eln);border-radius:50%;left:50%;top:55%;transform:translate(-50%,-50%)}
.eng-sig{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--ep);box-shadow:0 0 10px var(--ep);transform:translate(-50%,-50%)}
.eng-sweep{position:absolute;left:50%;top:55%;width:50%;height:1px;background:linear-gradient(90deg,var(--ep),transparent);transform-origin:left center;animation:engsw 6s linear infinite;opacity:.45}
@keyframes engsw{to{transform:rotate(360deg)}}
.eng-log{font-family:var(--emono);font-size:11.5px;line-height:1.85;height:250px;overflow:hidden;color:#bdb6d6}
.eng-log .t{color:var(--efaint)}.eng-log .p{color:var(--ep)}.eng-log .g{color:#36d399}.eng-log .w{color:#f6c445}.eng-log .b{color:#ff5d6c}
.eng-idle{color:var(--efaint);font-style:italic;padding:10px 2px}
@media(max-width:1024px){.eng-grid{grid-template-columns:1fr}}
/* Engineer polish: file chips + mobile */
.eng-sumcol{flex:1;min-width:0}
.eng-files{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.eng-fchip{font-family:var(--emono,ui-monospace,monospace);font-size:10px;color:#a855f7;border:1px solid rgba(168,85,247,.28);border-radius:6px;padding:2px 7px;background:rgba(168,85,247,.07)}
@media(max-width:700px){
.eng-kpis{grid-template-columns:repeat(3,1fr);gap:6px}
.eng-kpi{padding:8px 9px}
.eng-kpi b{font-size:16px}
.eng-kpi span{font-size:8px;letter-spacing:.6px}
.eng-sysbar{overflow-x:auto;flex-wrap:nowrap}
.eng-cbody{flex-direction:column}
.eng-snap{width:100%}
.eng-chat{max-height:62vh}
.eng-top{flex-wrap:wrap}
.eng-pills{margin-left:0;width:100%}
}
/* Engineer plan-kapija */
.eng-plan{margin:9px 0;border-left:2px solid rgba(168,85,247,.4);padding:5px 0 5px 11px;display:flex;flex-direction:column;gap:4px}
.eng-step{font-size:12.5px;color:#cfc8e6;line-height:1.4}
.eng-qs{margin-top:6px;font-size:11.5px;color:#f6c445}
/* Engineer auto-golive toggle */
.eng-auto{cursor:pointer;user-select:none}
.eng-auto.on{border-color:rgba(54,211,153,.5);color:#9be7c4;box-shadow:0 0 10px rgba(54,211,153,.15)}
/* auto-1793557723258 */
/* === Engineer chat: premium staklo (uskladjeno sa .chat-message) === */
.eng-chat{padding:20px 22px;gap:4px;max-height:560px}
.eng-chat .eng-msg{max-width:600px;padding:13px 16px;border-radius:16px;font-size:13.5px;line-height:1.62;margin:7px 0}
/* primljeni balon (Claude) = staklo, bez tvrdog ljubicastog okvira */
.eng-chat .eng-msg.eng-engm,.eng-chat .eng-msg.eng-nudge{
background:linear-gradient(180deg,rgba(255,255,255,0.055),rgba(255,255,255,0.022));
border:.5px solid rgba(255,255,255,0.09);
box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.05);
border-bottom-left-radius:5px;max-width:600px}
.eng-chat .eng-msg.eng-nudge{border-color:rgba(246,196,69,.28);background:linear-gradient(180deg,rgba(246,196,69,.07),rgba(246,196,69,.02))}
/* moj balon = ljubicasti, malo mekse */
.eng-chat .eng-msg.eng-me{
max-width:460px;align-self:flex-end;
background:linear-gradient(135deg,var(--ep2),var(--ep));color:#0b0b12;font-weight:500;
border-bottom-right-radius:5px;
box-shadow:0 8px 22px -12px rgba(124,58,237,.55)}
/* label iznad poruke = diskretniji, vise vazduha */
.eng-chat .eng-who{font-size:9.5px;letter-spacing:1.3px;color:var(--efaint);margin-bottom:7px;opacity:.85}
.eng-chat .eng-msg.eng-me+.eng-msg,.eng-chat .eng-msg+.eng-msg.eng-me{margin-top:12px}
/* kartica predloga = staklo umesto crne kutije */
.eng-chat .eng-card{max-width:600px;margin-top:12px;border:.5px solid rgba(255,255,255,0.09);border-radius:12px;background:rgba(255,255,255,0.02)}
.eng-chat .eng-ch{background:rgba(255,255,255,0.02);border-bottom:.5px solid rgba(255,255,255,0.07)}
.eng-chat .eng-sum{font-size:11.5px;line-height:1.65;color:#bdb6d6}
/* plan koraci = malo mekse */
.eng-chat .eng-plan{border-left:2px solid rgba(168,85,247,.35)}
/* Engineer: faza (pre-launch / uzivo) pill */
.eng-mode{cursor:pointer;user-select:none;border-color:rgba(246,196,69,.4);color:#f0d58a}
.eng-mode.on{border-color:rgba(54,211,153,.5);color:#9be7c4;box-shadow:0 0 10px rgba(54,211,153,.15)}
/* === Engineer: sidebar sesija (razgovori) === */
.eng-chatpanel{display:flex;flex-direction:column}
.eng-chatwrap{display:flex;flex:1;min-height:0}
.eng-sessions{width:195px;flex:0 0 195px;border-right:1px solid var(--eln);display:flex;flex-direction:column;min-height:0}
.eng-newchat{margin:10px;padding:9px 10px;border:1px solid var(--eln2);border-radius:10px;background:rgba(168,85,247,.1);color:#c4b5fd;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;transition:background .15s}
.eng-newchat:hover{background:rgba(168,85,247,.18)}
.eng-slist{flex:1;overflow-y:auto;padding:0 8px 10px;display:flex;flex-direction:column;gap:3px}
.eng-sitem{padding:9px 9px;border-radius:9px;cursor:pointer;border:1px solid transparent;color:var(--edim);font-size:12.5px;display:flex;align-items:center;gap:7px;min-width:0}
.eng-sitem:hover{background:rgba(255,255,255,.03)}
.eng-sitem.on{background:rgba(168,85,247,.1);border-color:var(--eln2);color:#e7e3f3}
.eng-sitem .st{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eng-sitem .sa{flex:0 0 auto;font-size:10px;color:var(--efaint)}
.eng-sitem .sx{flex:0 0 auto;width:20px;height:20px;border:none;background:transparent;color:var(--efaint);cursor:pointer;border-radius:6px;font-size:15px;line-height:1;padding:0;opacity:0;transition:opacity .15s,background .15s}
.eng-sitem:hover .sx{opacity:.85}
.eng-sitem .sx:hover{background:rgba(255,90,110,.16);color:#ff9eaa}
.eng-sempty{padding:16px 10px;color:var(--efaint);font-size:11.5px;text-align:center;line-height:1.5}
.eng-chatmain{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
@media(max-width:1024px){.eng-sessions{width:150px;flex-basis:150px}}
@media(max-width:640px){.eng-chatwrap{flex-direction:column}.eng-sessions{width:auto;flex-basis:auto;border-right:none;border-bottom:1px solid var(--eln);max-height:128px}.eng-slist{flex-direction:row;overflow-x:auto;padding:8px}.eng-sitem{flex:0 0 auto;max-width:160px}.eng-newchat{margin:8px}}
/* ===== Rooms card: mobile stack (fix vertikalni datum / isečena dugmad) 2026-11-07 ===== */
@media (max-width:600px){
.rm-card{display:flex !important;flex-direction:column;align-items:stretch !important;gap:8px !important;padding:14px 16px !important;}
.rm-card > .rm-ico{display:none !important;}
.rm-info{min-width:0;}
.rm-info > div{white-space:normal !important;overflow:visible !important;text-overflow:clip !important;}
.rm-status{align-self:flex-start !important;}
.rm-actions{flex-wrap:wrap;gap:8px !important;}
.rm-actions .btn{flex:1 1 auto;text-align:center;justify-content:center;}
}
/* ===== #3 Settings gear: ukloni žuti focus-kvadrat + suptilan glow 2026-11-07 ===== */
.bc-gear-btn:focus{outline:none;}
.bc-gear-btn:focus-visible{outline:none;border-color:rgba(124,58,237,.5);box-shadow:0 0 0 3px rgba(124,58,237,.22);}
.bc-settings-item:focus{outline:none;}
.bc-settings-item:focus-visible{outline:none;box-shadow:inset 0 0 0 1px rgba(124,58,237,.4);}
/* ===== #3 Settings popover: na telefonu bottom-sheet pune širine (ne izlazi iz kadra) ===== */
@media (max-width:600px){
#adminSettingsMenu{min-width:0 !important;width:max-content !important;max-width:170px !important;max-height:62vh;overflow:auto;}
#adminSettingsMenu .bc-settings-item{font-size:12px !important;padding:8px 10px !important;}
#adminSettingsMenu .bc-settings-item svg{width:14px !important;height:14px !important;}
}
/* ===== #4 Engineer tab: mobilna gustina (zbijen header, brži pristup chatu) 2026-11-07 ===== */
@media (max-width:600px){
.eng-top{flex-wrap:wrap;gap:10px;padding:11px 13px;}
.eng-knight{width:26px;height:26px;font-size:12px;}
.eng-brand b{font-size:12.5px;letter-spacing:1px;}
.eng-brand span{font-size:8.5px;letter-spacing:1.5px;}
.eng-pills{margin-left:0;width:100%;gap:6px;}
.eng-pill{font-size:10px;padding:4px 9px;gap:5px;}
.eng-kpis{margin-top:10px;gap:6px;}
.eng-sysbar{margin-top:10px;overflow-x:auto;flex-wrap:nowrap;-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent);}
.eng-grid{margin-top:10px;gap:10px;}
.eng-ph{font-size:11.5px;}
.eng-radar{max-width:100%;}
}
/* ===== #5 Billing: 4 akciona dugmeta u kompaktan 2-u-red grid (samo billing) 2026-11-07 ===== */
@media (max-width:600px){
#adminBillingView .content-header-right{display:flex !important;flex-wrap:wrap !important;gap:8px !important;width:100%;justify-content:stretch !important;}
#adminBillingView .content-header-right .btn{flex:1 1 calc(50% - 4px) !important;width:auto !important;min-width:0 !important;padding:11px 8px !important;font-size:13px !important;justify-content:center !important;}
}
/* ===== #5 Factory: mobilni raspored (One button build iznad rostera, puna širina) 2026-11-07 ===== */
@media (max-width:600px){
.fct-split{flex-direction:column !important;gap:14px !important;}
.fct-split-l,.fct-split-r{flex:1 1 auto !important;min-width:0 !important;width:100%;}
.fct-split-r{order:-1;}
.fct-row{gap:10px !important;padding:12px !important;}
.fct-row .fct-av{width:34px;height:34px;font-size:12.5px;}
.fct-chip{min-width:76px !important;font-size:10.5px !important;padding:4px 8px !important;}
.ob-panel{padding:16px !important;}
}
/* ===== #6 Dnevnik SR: premium custom dropdown (zamena native select) 2026-11-07 ===== */
.dlang{position:relative;display:inline-block;flex:0 0 auto;margin-right:8px;}
.dlang-btn{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 11px;border-radius:10px;border:1px solid rgba(124,58,237,.32);background:linear-gradient(180deg,rgba(124,58,237,.1),rgba(124,58,237,.04));color:#c4b5fd;font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;transition:border-color .15s,background .15s;}
.dlang-btn:hover{border-color:rgba(124,58,237,.5);background:rgba(124,58,237,.14);}
.dlang-btn:focus{outline:none;}
.dlang-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(124,58,237,.22);}
.dlang-btn svg{opacity:.8;}
.dlang-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:172px;background:linear-gradient(180deg,#15161f,#101019);border:1px solid rgba(124,58,237,.28);border-radius:12px;box-shadow:0 26px 64px -22px rgba(0,0,0,.8);padding:5px;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .15s,transform .15s;z-index:100000;}
.dlang-menu.open{opacity:1;transform:translateY(0);pointer-events:auto;}
.dlang-opt{display:block;width:100%;text-align:left;background:none;border:none;color:#e2e8f0;font-family:inherit;font-size:12.5px;font-weight:500;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background .12s,color .12s;}
.dlang-opt:hover{background:rgba(124,58,237,.14);color:#fff;}
.dlang-opt:focus{outline:none;}
/* ===== Dnevnik strelice: na telefonu u donje uglove (ne preko teksta) 2026-11-07 ===== */
@media (max-width:600px){
.diary-nav{top:auto !important;bottom:8px !important;transform:none !important;width:42px !important;height:38px !important;}
.diary-prev{left:6px !important;}
.diary-next{right:6px !important;}
}
/* ===== #3 Settings: V1-stil flyout DESNO od gear-a (gear levo u footeru) 2026-11-07 ===== */
@media(min-width:601px){ .bc-settings-menu{left:calc(100% + 8px) !important;right:auto !important;bottom:0 !important;top:auto !important;} }
@media(hover:hover){ .bc-settings-wrap:hover .bc-settings-menu{opacity:1 !important;transform:none !important;pointer-events:auto !important;} }
/* ===== #3 Settings: sidebar pun; gear pomeren taman da KOMPAKTAN popup izleti DESNO pored njega i stane 2026-11-07 ===== */
@media (max-width:600px){
.bc-settings-menu{ min-width:0 !important; width:max-content !important; max-width:172px !important; border-radius:13px !important; }
.bc-settings-menu .bc-settings-item{ font-size:12px !important; padding:8px 10px !important; gap:8px !important; }
.bc-settings-menu .bc-settings-item svg{ width:14px !important; height:14px !important; }
.bc-settings-menu-title{ font-size:8.5px !important; padding:4px 8px 4px !important; }
}
/* ===== #3 Settings: jasan hover highlight na stavkama (premium) 2026-11-07 ===== */
#adminSettingsMenu .bc-settings-item{ transition:background .12s ease, color .12s ease !important; }
#adminSettingsMenu .bc-settings-item:hover,
#adminSettingsMenu .bc-settings-item:focus{ background:rgba(124,58,237,.26) !important; color:#fff !important; }
#adminSettingsMenu .bc-settings-item:hover svg{ color:#d8c5ff !important; }
#adminSettingsMenu .bc-settings-item.bc-danger:hover{ background:rgba(248,113,113,.18) !important; color:#fecaca !important; }
/* ===== #3 Settings: tap/press highlight (telefon nema hover, ovo radi na dodir) 2026-11-07 ===== */
#adminSettingsMenu .bc-settings-item:active{ background:rgba(124,58,237,.34) !important; color:#fff !important; }
#adminSettingsMenu .bc-settings-item.bc-danger:active{ background:rgba(248,113,113,.26) !important; color:#fecaca !important; }
/* ===== #3 Settings: press highlight klasa (JS pointerdown, vidljiv na tap) 2026-11-07 ===== */
#adminSettingsMenu .bc-settings-item.bc-hot{ background:rgba(124,58,237,.34) !important; color:#fff !important; }
#adminSettingsMenu .bc-settings-item.bc-danger.bc-hot{ background:rgba(248,113,113,.26) !important; color:#fecaca !important; }
/* ===== Clients 3-tačke meni: kartica iznad sledećih dok je otvoren (ne iza) 2026-11-07 ===== */
.bc-card:has(details.bc-rowmenu[open]){ position:relative; z-index:50; }
details.bc-rowmenu[open]{ z-index:51; }
.bc-rowmenu-pop{ z-index:1000 !important; }
/* ===== Factory: zbijen raspored na telefonu (tabovi 1 scroll-red, KPI 3-u-red) 2026-11-07 ===== */
@media (max-width:600px){
.fct-tabs{ flex-wrap:nowrap !important; overflow-x:auto; gap:6px !important; margin-bottom:16px !important; -webkit-overflow-scrolling:touch; -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent); mask-image:linear-gradient(90deg,#000 90%,transparent); }
.fct-tabs .btn{ flex:0 0 auto; white-space:nowrap; }
.fct-sum{ gap:8px !important; margin-bottom:14px !important; }
.fct-sum > .bc-card{ min-width:0 !important; flex:1 1 0 !important; padding:11px 9px !important; }
.fct-sum > .bc-card > div:first-child{ font-size:19px !important; }
.fct-sum > .bc-card > div:last-child{ font-size:9.5px !important; gap:4px !important; }
}
/* ===== Engineer: lepši/prostiji raspored po prioritetu (chat = hero) 2026-11-07 ===== */
@media (max-width:600px){
.eng-top{ padding:11px 13px !important; gap:9px !important; }
.eng-pills{ gap:5px !important; }
.eng-pill{ font-size:9.5px !important; padding:4px 8px !important; }
.eng-kpis{ gap:7px !important; margin-top:10px !important; }
.eng-kpi{ padding:10px 8px !important; border-radius:12px !important; }
/* "čeka tvoj tap" (srednji KPI) = akcioni akcenat */
.eng-kpi:nth-child(2){ border-color:rgba(168,85,247,.45) !important; background:linear-gradient(180deg,rgba(168,85,247,.13),rgba(168,85,247,.03)) !important; }
.eng-kpi:nth-child(2) b{ color:#c4b5fd !important; }
.eng-sysbar{ margin-top:10px !important; }
.eng-grid{ gap:14px !important; margin-top:14px !important; }
/* chat = glavna kartica (istaknuta) */
.eng-chatpanel{ border:1px solid rgba(168,85,247,.34) !important; box-shadow:0 20px 52px -26px rgba(168,85,247,.32) !important; }
.eng-chat{ max-height:56vh !important; }
/* radar + live log = sekundarno, blago stišano */
.eng-grid > .eng-col + .eng-col .eng-panel{ background:rgba(255,255,255,.015) !important; }
.eng-grid > .eng-col + .eng-col .eng-ph{ opacity:.85 !important; }
}
/* ===== Factory Our infra: gornje kartice 1-kolona na telefonu + "Napredno" sklopivo 2026-11-07 ===== */
@media (max-width:600px){ .fct-cap-grid{ grid-template-columns:1fr !important; } }
.fct-adv{ margin-top:4px; border:1px solid rgba(124,58,237,.14); border-radius:14px; background:rgba(255,255,255,.015); padding:4px 14px; }
.fct-adv > .fct-adv-sum{ cursor:pointer; list-style:none; padding:12px 2px; font-size:13px; font-weight:600; color:#a78bfa; display:flex; align-items:center; gap:8px; }
.fct-adv > .fct-adv-sum::-webkit-details-marker{ display:none; }
.fct-adv > .fct-adv-sum::before{ content:"\25B8"; transition:transform .18s; opacity:.7; }
.fct-adv[open] > .fct-adv-sum::before{ transform:rotate(90deg); }
/* ===== Engineer: signali + live log JEDAN PORED DRUGOG ispod chata (telefon) 2026-11-07 ===== */
@media (max-width:600px){
.eng-grid > .eng-col + .eng-col{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; align-items:start; }
.eng-grid > .eng-col + .eng-col .eng-panel{ margin:0 !important; }
.eng-grid > .eng-col + .eng-col .eng-log{ height:210px !important; font-size:10px !important; line-height:1.7 !important; }
.eng-grid > .eng-col + .eng-col .eng-radar{ max-width:100% !important; }
.eng-grid > .eng-col + .eng-col .eng-ph{ font-size:10.5px !important; }
}
/* ===== Engineer chat: lepši raspored (+ nov inline, čist header, poruke dobijaju prostor) 2026-11-07 ===== */
@media (max-width:600px){
.eng-chatpanel .eng-ph{ font-size:10.5px !important; letter-spacing:.5px !important; }
.eng-chatpanel .eng-ph .eng-tag{ display:none !important; }
.eng-chatpanel .eng-sessions{ max-height:none !important; flex-direction:row !important; align-items:center !important; gap:8px !important; padding:8px 10px !important; border-right:none !important; border-bottom:1px solid var(--eln) !important; }
.eng-chatpanel .eng-newchat{ margin:0 !important; width:auto !important; flex:0 0 auto !important; padding:7px 12px !important; font-size:12px !important; border-radius:9px !important; }
.eng-chatpanel .eng-slist{ flex:1 1 auto !important; min-width:0 !important; flex-direction:row !important; overflow-x:auto !important; padding:0 !important; }
.eng-chatpanel .eng-sitem{ max-width:120px !important; flex:0 0 auto !important; }
.eng-chatpanel .eng-chat{ padding-top:8px !important; }
}
/* ===== Engineer radar: čist opis dogadjaja na klik (umesto ružnog floating labela) 2026-11-07 ===== */
.eng-radar-cap{ margin-top:10px; font-size:10.5px; line-height:1.45; color:#8b86a6; font-family:var(--emono,ui-monospace,monospace); word-break:break-word; min-height:30px; padding:0 2px; transition:color .15s; }
.eng-radar-cap.on{ color:#d8c5ff; }
/* ===== Engineer chat: jednostavan messenger izgled (telefon) 2026-11-08 ===== */
@media (max-width:600px){
.eng-msg .eng-who{ display:none !important; }
.eng-msg{ font-family:-apple-system,system-ui,"Segoe UI",sans-serif !important; }
.eng-msg.eng-engm{ background:rgba(255,255,255,.055) !important; border:none !important; border-radius:17px 17px 17px 5px !important; padding:11px 14px !important; max-width:86% !important; margin:4px auto 4px 0 !important; font-size:14px !important; line-height:1.5 !important; color:#e9e5f5 !important; }
.eng-msg.eng-me{ background:linear-gradient(135deg,#7c3aed,#a855f7) !important; color:#fff !important; border:none !important; border-radius:17px 17px 5px 17px !important; padding:11px 14px !important; max-width:86% !important; margin:4px 0 4px auto !important; font-size:14px !important; line-height:1.5 !important; }
.eng-msg.eng-nudge{ background:rgba(246,196,69,.08) !important; border:1px solid rgba(246,196,69,.22) !important; border-radius:16px !important; padding:11px 14px !important; max-width:92% !important; margin:4px auto 4px 0 !important; font-size:13.5px !important; line-height:1.5 !important; }
.eng-cmd{ padding:9px 8px !important; gap:8px !important; align-items:center !important; }
.eng-cmd .eng-pr{ display:none !important; }
.eng-cmd #engInput{ border-radius:22px !important; background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.12) !important; padding:11px 16px !important; font-family:-apple-system,system-ui,sans-serif !important; font-size:14px !important; }
.eng-cmd .eng-send{ border-radius:22px !important; padding:11px 18px !important; font-weight:600 !important; }
}
/* ===== Engineer: chat odmah ispod headera; KPI + infra traka premešteni DOLE 2026-11-08 ===== */
@media (max-width:600px){
.eng-wrap{ display:flex !important; flex-direction:column !important; }
.eng-wrap > .eng-top{ order:0 !important; }
.eng-wrap > .eng-grid{ order:1 !important; margin-top:14px !important; }
.eng-wrap > .eng-sysbar{ order:2 !important; margin-top:12px !important; }
.eng-wrap > .eng-kpis{ order:3 !important; margin-top:10px !important; }
}
/* ===== Engineer: KPI + infra traka SPOJENI u jednu karticu (čitljivo, sve ostaje) 2026-11-08 ===== */
.eng-status{ border:1px solid var(--eln) !important; border-radius:14px; background:var(--epanel); overflow:hidden; }
.eng-status .eng-kpis{ margin:0 !important; grid-template-columns:repeat(3,1fr) !important; gap:0 !important; }
.eng-status .eng-kpi{ border:none !important; background:transparent !important; border-radius:0 !important; border-right:1px solid var(--eln) !important; padding:12px 10px !important; }
.eng-status .eng-kpi:last-child{ border-right:none !important; }
.eng-status .eng-kpi:nth-child(2){ background:rgba(168,85,247,.09) !important; }
.eng-status .eng-kpi:nth-child(2) b{ color:#c4b5fd !important; }
.eng-status .eng-sysbar{ margin:0 !important; border:none !important; border-top:1px solid var(--eln) !important; border-radius:0 !important; background:transparent !important; padding:9px 10px !important; }
@media (max-width:600px){ .eng-wrap > .eng-status{ order:3 !important; margin-top:12px !important; } }
/* ===== Engineer chat: produktivniji/manje boksast izgled 2026-11-08 ===== */
@media (max-width:600px){
.eng-chatpanel{ border:1px solid rgba(255,255,255,.06) !important; box-shadow:none !important; background:rgba(255,255,255,.012) !important; }
.eng-chatpanel .eng-ph{ padding:11px 14px !important; border-bottom:1px solid rgba(255,255,255,.06); margin:0 !important; }
.eng-chat{ max-height:64vh !important; padding:14px 12px 8px !important; }
.eng-msg.eng-engm{ max-width:93% !important; }
.eng-msg.eng-me{ max-width:90% !important; }
.eng-msg.eng-nudge{ max-width:97% !important; }
.eng-msg pre, .eng-msg code{ font-size:11.5px !important; line-height:1.45 !important; }
.eng-chatpanel .eng-sessions{ background:transparent !important; padding:7px 10px !important; }
.eng-chatpanel .eng-newchat{ font-size:11.5px !important; padding:6px 11px !important; }
}
/* ===== Engineer chat: čist header + drawer (istorija, novi razgovor) kao moderni chat 2026-11-08 ===== */
.eng-chathead{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-bottom:1px solid rgba(255,255,255,.07); }
.eng-chatmenu,.eng-chatnew{ width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:9px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); color:#8b86a6; cursor:pointer; flex:0 0 auto; transition:all .15s; }
.eng-chatmenu:hover,.eng-chatnew:hover{ color:#c4b5fd; border-color:rgba(124,58,237,.42); background:rgba(124,58,237,.1); }
.eng-chatt{ flex:1; font-size:13.5px; font-weight:600; color:#e7e3f3; }
.eng-chatt i{ font-style:normal; color:#5b5676; font-weight:400; font-size:11.5px; }
.eng-drawer{ position:fixed; inset:0; z-index:99998; display:none; }
.eng-drawer.open{ display:block; }
.eng-drawer-bg{ position:absolute; inset:0; background:rgba(5,5,10,.55); }
.eng-drawer-pan{ position:absolute; top:0; left:0; bottom:0; width:min(82vw,300px); background:linear-gradient(180deg,#15131e,#0e0d16); border-right:1px solid rgba(124,58,237,.22); box-shadow:24px 0 60px rgba(0,0,0,.5); padding:14px 12px; display:flex; flex-direction:column; gap:10px; transform:translateX(-100%); transition:transform .22s cubic-bezier(.4,0,.2,1); overflow-y:auto; }
.eng-drawer.open .eng-drawer-pan{ transform:translateX(0); }
.eng-drawer-top{ display:flex; align-items:center; justify-content:space-between; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#8b86a6; padding:2px 4px 6px; }
.eng-drawer-x{ background:none; border:none; color:#8b86a6; font-size:15px; cursor:pointer; padding:2px 7px; border-radius:7px; }
.eng-drawer-x:hover{ background:rgba(255,255,255,.06); color:#e7e3f3; }
.eng-drawer .eng-newchat{ margin:0 !important; width:100% !important; justify-content:center; }
.eng-drawer .eng-slist{ display:flex !important; flex-direction:column !important; gap:6px !important; overflow-y:auto !important; padding:0 !important; }
.eng-drawer .eng-sitem{ max-width:none !important; width:100% !important; }
/* ===== Engineer chat: textarea (Enter/Shift+Enter) + drawer u veličini chata, manji 2026-11-08 ===== */
.eng-cmd #engInput{ resize:none !important; min-height:24px; max-height:120px; overflow-y:auto; line-height:1.4; font-family:-apple-system,system-ui,"Segoe UI",sans-serif !important; }
.eng-panel.eng-chatpanel{ position:relative; overflow:hidden; }
.eng-drawer{ position:absolute !important; inset:0 !important; z-index:40 !important; }
.eng-drawer-bg{ border-radius:inherit; }
.eng-drawer-pan{ width:min(76%,236px) !important; box-shadow:18px 0 46px rgba(0,0,0,.5) !important; border-radius:0 !important; }
/* ===== Engineer chat drawer kao kockica (kompaktan box unutar chata) 2026-11-08 ===== */
.eng-panel.eng-chatpanel{ position:relative !important; overflow:hidden !important; }
#engDrawer{ position:absolute !important; inset:0 !important; z-index:40 !important; }
#engDrawer .eng-drawer-pan{ top:10px !important; left:10px !important; bottom:auto !important; height:auto !important; max-height:min(56vh,400px) !important; width:min(74%,230px) !important; border-radius:14px !important; border:1px solid rgba(124,58,237,.22) !important; transform:translateX(calc(-100% - 18px)); }
#engDrawer.open .eng-drawer-pan{ transform:translateX(0) !important; }
/* ===== Engineer chat input: čist unos + okruglo dugme-strelica 2026-11-08 ===== */
.eng-cmd{ padding:10px !important; gap:9px !important; align-items:flex-end !important; }
.eng-cmd #engInput{ border-radius:20px !important; background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.12) !important; padding:12px 16px !important; font-size:14px !important; min-height:44px; max-height:120px; box-sizing:border-box; }
.eng-send{ width:42px !important; height:42px !important; min-width:42px; border-radius:50% !important; background:linear-gradient(135deg,#7c3aed,#a855f7) !important; color:#fff !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; flex:0 0 auto !important; cursor:pointer; font-size:0 !important; transition:filter .15s; }
.eng-send:hover{ filter:brightness(1.1); }
.eng-send svg{ display:block; }
/* ===== Engineer send dugme: jasna veća strelica (ne tačkica) 2026-11-08 ===== */
.eng-send svg{ width:21px !important; height:21px !important; display:block !important; stroke:#fff !important; }
.eng-send{ font-size:0 !important; }
/* ===== Engineer send strelica: spreči flex da je stisne (6px bug) 2026-11-08 ===== */
.eng-send svg{ flex:0 0 auto !important; width:21px !important; height:21px !important; min-width:21px !important; }
/* ===== Engineer radar: najnovija tačka pulsira + legenda 2026-11-08 ===== */
.eng-sig.newest{ width:13px !important; height:13px !important; z-index:5 !important; animation:engnew 1.6s ease-in-out infinite; }
@keyframes engnew{ 0%,100%{ transform:translate(-50%,-50%) scale(1); } 50%{ transform:translate(-50%,-50%) scale(1.28); } }
.eng-radar-leg{ display:flex; flex-wrap:wrap; align-items:center; gap:7px 10px; margin-top:9px; font-size:10px; color:#8b86a6; font-family:var(--emono,monospace); }
.eng-radar-leg b{ color:#bdb6d6; font-weight:600; }
.eng-radar-leg .lg{ display:inline-flex; align-items:center; gap:5px; }
.eng-radar-leg .lg::before{ content:""; width:8px; height:8px; border-radius:50%; display:inline-block; }
.eng-radar-leg .lg-p::before{ background:#a855f7; box-shadow:0 0 6px #a855f7; }
.eng-radar-leg .lg-g::before{ background:#34d399; box-shadow:0 0 6px #34d399; }
.eng-radar-leg .lg-r::before{ background:#fb7185; box-shadow:0 0 6px #fb7185; }
/* ===== Dnevnik: cist mobilni zapis (desktop ledger ostaje netaknut) ===== */
@media (max-width:600px){
.dk-dpage{
background-image:none !important; /* sklanja krute linije */
padding:6px 14px 46px 14px !important; /* bez ogromnog levog uvlacenja */
min-height:280px !important;
}
.dk-dmargin{ display:none !important; } /* crvena margina linija */
.dk-drow{
line-height:1.55 !important;
min-height:0 !important;
padding:13px 4px 13px 38px !important;
padding-right:4px !important;
border-bottom:1px solid rgba(120,90,40,.16) !important;
}
.dk-dico{
left:0 !important;
top:13px !important;
width:26px !important;
height:26px !important;
}
.dk-dtime{
position:static !important;
right:auto !important; top:auto !important;
display:inline-block !important;
margin-left:2px !important;
}
.dk-dhead{
line-height:1.4 !important;
min-height:0 !important;
padding:12px 0 5px !important;
margin-top:2px !important;
border-bottom:2px solid rgba(74,58,30,.28) !important;
}
}
/* ===== Dnevnik: "Nove stavke" dugme (zivo auto-osvezavanje) ===== */
.diary-newpill{
position:fixed; left:50%; top:74px; transform:translateX(-50%);
z-index:1200; display:inline-flex; align-items:center; gap:7px;
padding:9px 16px; border-radius:999px; cursor:pointer;
font-size:13px; font-weight:700; color:#fff; letter-spacing:.01em;
background:linear-gradient(135deg,#7c3aed,#a855f7);
border:1px solid rgba(168,85,247,.55);
box-shadow:0 10px 30px -8px rgba(124,58,237,.65);
animation:diaryPillIn .22s ease-out;
}
.diary-newpill svg{ flex:0 0 auto; }
@keyframes diaryPillIn{ from{ opacity:0; transform:translate(-50%,-8px); } to{ opacity:1; transform:translate(-50%,0); } }
/* ===== Wingman header: rasteretiti na telefonu (naslov+dugmad gore, "te čeka" u svoj red) ===== */
@media (max-width:600px){
.wm-hdr{ flex-wrap:wrap !important; gap:8px !important; }
.wm-hdr #wmPendChip{ order:9; flex:0 0 100% !important; justify-content:flex-start !important; }
}
/* ===== DK Private — app launcher (Proton-style switcher) ===== */
.dkp-btn{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted,#9a9ab0);border:1px solid rgba(168,85,247,.22);background:rgba(168,85,247,.06);transition:background .15s,border-color .15s,color .15s;flex:0 0 auto;margin-left:auto}
.dkp-btn:hover{background:rgba(168,85,247,.16);border-color:rgba(168,85,247,.5);color:#fff}
.dkp-btn svg{width:16px;height:16px;display:block}
body.sidebar-collapsed .dkp-btn{margin-left:0}
.dkp-ov{position:fixed;inset:0;z-index:3999;background:transparent}
.dkp-pop{position:fixed;z-index:4000;width:300px;max-width:calc(100vw - 24px);background:#12121c;border:1px solid rgba(168,85,247,.25);border-radius:16px;padding:12px;box-shadow:0 18px 50px rgba(0,0,0,.55);opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;transition:opacity .14s,transform .14s}
.dkp-pop.open{opacity:1;transform:none;pointer-events:auto}
.dkp-head{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted,#8a8aa0);padding:4px 6px 10px;font-weight:700}
.dkp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.dkp-tile{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 6px;border-radius:12px;cursor:pointer;text-decoration:none;border:1px solid transparent;transition:background .13s,border-color .13s}
.dkp-tile:hover{background:rgba(255,255,255,.04);border-color:rgba(168,85,247,.25)}
.dkp-ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.dkp-ic svg{width:20px;height:20px;display:block}
.dkp-lb{font-size:11.5px;color:var(--text,#e8e8f0);font-weight:600;text-align:center;line-height:1.2}
.dkp-tile.soon{cursor:default}
.dkp-tile.soon .dkp-ic{filter:grayscale(.35);opacity:.8}
.dkp-tile.soon:hover{background:transparent;border-color:transparent}
.dkp-soon{font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:#c4a2f7;background:rgba(168,85,247,.16);border-radius:5px;padding:1px 5px;font-weight:700;margin-top:-1px}
/* ===== DK Private — crypto modal ===== */
.dkpm-ov{position:fixed;inset:0;z-index:5000;background:rgba(6,6,12,.72);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:16px}
.dkpm-ov.open{display:flex}
.dkpm{width:420px;max-width:calc(100vw - 24px);background:#12121c;border:1px solid rgba(168,85,247,.28);border-radius:18px;padding:24px;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.dkpm-ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#6366f1,#4f46e5);margin-bottom:14px}
.dkpm-ic svg{width:24px;height:24px}
.dkpm h3{margin:0 0 6px;font-size:18px;color:#f1f1f7;font-weight:700}
.dkpm p{margin:0 0 4px;font-size:13px;color:#9a9ab0;line-height:1.5}
.dkpm label{display:block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#8a8aa0;font-weight:700;margin:14px 0 6px}
.dkpm-inp{width:100%;box-sizing:border-box;background:#0c0c14;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:12px 14px;color:#f1f1f7;font-size:14px;outline:none;transition:border-color .14s}
.dkpm-inp:focus{border-color:rgba(168,85,247,.6)}
.dkpm-row{display:flex;gap:10px;margin-top:22px}
.dkpm-b{flex:1;padding:12px;border-radius:10px;border:none;cursor:pointer;font-size:14px;font-weight:600;transition:filter .14s,background .14s}
.dkpm-b.primary{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff}
.dkpm-b.primary:hover{filter:brightness(1.1)}
.dkpm-b.ghost{background:rgba(255,255,255,.05);color:#c8c8d4}
.dkpm-b.ghost:hover{background:rgba(255,255,255,.1)}
.dkpm-b:disabled{opacity:.55;cursor:default}
.dkpm-rec{background:#0c0c14;border:1px dashed rgba(168,85,247,.5);border-radius:10px;padding:14px;font-family:ui-monospace,Menlo,monospace;font-size:13px;color:#c4a2f7;word-break:break-all;line-height:1.6;margin-top:8px;text-align:center}
.dkpm-warn{background:rgba(244,63,94,.1);border:1px solid rgba(244,63,94,.3);border-radius:10px;padding:10px 12px;font-size:12px;color:#fca5b5;margin-top:14px;line-height:1.45}
.dkpm-err{font-size:12.5px;color:#fca5b5;margin-top:10px;min-height:16px}
.dkpm-ok{display:flex;flex-direction:column;align-items:center;text-align:center}
.dkpm-link{background:none;border:none;color:#a855f7;cursor:pointer;font-size:12.5px;padding:8px 0 0;text-decoration:underline}
/* ===== DK Private — Pass vault ===== */
.dkpv-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.dkpv-top h3{margin:0;font-size:18px;color:#f1f1f7;font-weight:700}
.dkpv-list{max-height:52vh;overflow:auto;margin:12px -2px 0;display:flex;flex-direction:column;gap:6px}
.dkpv-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:#0c0c14;border:1px solid rgba(255,255,255,.06)}
.dkpv-ic{width:34px;height:34px;border-radius:9px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;font-weight:700;font-size:14px}
.dkpv-meta{flex:1;min-width:0}
.dkpv-t{font-size:13.5px;color:#f1f1f7;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dkpv-u{font-size:11.5px;color:#9a9ab0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dkpv-act{display:flex;gap:4px;flex:0 0 auto}
.dkpv-ib{width:30px;height:30px;border-radius:8px;border:none;background:rgba(255,255,255,.05);color:#c8c8d4;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s}
.dkpv-ib:hover{background:rgba(168,85,247,.18);color:#fff}
.dkpv-ib svg{width:15px;height:15px}
.dkpv-empty{text-align:center;color:#8a8aa0;font-size:12.5px;padding:24px 8px}
.dkpv-add{width:100%;margin-top:12px}
/* ===== DK Private — space tabs + Files-sef ===== */
.dkp-tabs{display:flex;gap:6px;margin-bottom:12px;background:#0c0c14;padding:4px;border-radius:11px}
.dkp-tab{flex:1;padding:9px 10px;border:none;border-radius:8px;background:transparent;color:#9a9ab0;font-size:13px;font-weight:600;cursor:pointer;transition:background .13s,color .13s}
.dkp-tab:hover{color:#e8e8f0}
.dkp-tab.active{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff}
.dkpf-list{max-height:48vh;overflow:auto;margin:12px -2px 0;display:flex;flex-direction:column;gap:6px}
.dkpf-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:#0c0c14;border:1px solid rgba(255,255,255,.06)}
.dkpf-ic{width:34px;height:34px;border-radius:9px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#06b6d4,#0891b2);color:#fff}
.dkpf-ic svg{width:17px;height:17px}
.dkpf-meta{flex:1;min-width:0}
.dkpf-n{font-size:13.5px;color:#f1f1f7;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dkpf-s{font-size:11px;color:#9a9ab0}
.dkpf-empty{text-align:center;color:#8a8aa0;font-size:12.5px;padding:24px 8px}
.dkpf-add{width:100%;margin-top:12px}
.dkpf-prog{font-size:12px;color:#c4a2f7;margin-top:10px;min-height:16px;text-align:center}
/* ===== DK Private VPN — premium polish ===== */
#dkpvpnBox .dkpm-ic{box-shadow:0 8px 22px rgba(20,184,166,.32)}
#dkpvpnRegion{
appearance:none;-webkit-appearance:none;-moz-appearance:none;
background:#0c0c14 url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a855f7' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center;
background-size:12px;padding-right:38px;cursor:pointer;
border:1px solid rgba(168,85,247,.28);
}
#dkpvpnRegion:hover{border-color:rgba(168,85,247,.45)}
#dkpvpnRegion:focus{border-color:rgba(168,85,247,.65);outline:none}
#dkpvpnRegion option{background:#12121c;color:#e8e8f0;padding:8px}
/* premium preview card inside the gate */
#dkpvpnBox .dkpm-row{margin-top:18px}
/* ===== Uklonjena collapse strelica — ostaje SAMO auto-hide+hover sidebar (Luka: "ukloni strelicu i 2 sidebara") ===== */
.sidebar-collapse-btn{ display:none !important; }
/* ===== DK Private VPN modal — PREMIUM polish ===== */
#dkpvpnBox{ background:linear-gradient(180deg,#15151f,#0d0d15) !important; border:1px solid rgba(20,184,166,.20) !important; border-radius:20px !important; box-shadow:0 30px 80px rgba(0,0,0,.6) !important; }
#dkpvpnBox .dkpm-ic{ width:52px !important; height:52px !important; border-radius:15px !important; box-shadow:0 12px 32px rgba(20,184,166,.42) !important; margin-bottom:16px !important; }
#dkpvpnBox .dkpm-ic svg{ width:26px !important; height:26px !important; }
#dkpvpnBox h3{ font-size:19px !important; letter-spacing:-.2px; }
#dkpvpnBox > p{ color:#9a9ab0 !important; }
#dkpvpnBox label{ color:#86b9b2 !important; letter-spacing:.06em; }
#dkpvpnRegion{ border-color:rgba(20,184,166,.28) !important; }
#dkpvpnRegion:focus{ border-color:rgba(20,184,166,.6) !important; }
/* pick info kartica (line-height:1.6) */
#dkpvpnBox div[style*="line-height:1.6"]{ background:linear-gradient(180deg,rgba(20,184,166,.07),rgba(12,12,20,.55)) !important; border:1px solid rgba(20,184,166,.22) !important; border-radius:14px !important; padding:16px !important; }
/* confirm summary kartica (line-height:1.9) */
#dkpvpnBox div[style*="line-height:1.9"]{ background:linear-gradient(180deg,rgba(20,184,166,.10),rgba(12,12,20,.55)) !important; border:1px solid rgba(20,184,166,.35) !important; border-radius:14px !important; }
/* dugmad u VPN modalu — Dalje/Potvrdi teal akcenat */
#dkpvpnBox .dkpm-b.primary{ background:linear-gradient(135deg,#0d9488,#14b8a6) !important; }
#dkpvpnBox .dkpm-b.primary:hover{ filter:brightness(1.08); }
/* ===== DK Private — custom premium dropdown (zamena za native select) ===== */
.dkpdd{ position:relative; }
.dkpdd-btn{ width:100%; box-sizing:border-box; background:#0c0c14; border:1px solid rgba(20,184,166,.28); border-radius:10px; padding:12px 14px; color:#f1f1f7; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; transition:border-color .14s; }
.dkpdd-btn:hover{ border-color:rgba(20,184,166,.5); }
.dkpdd.open .dkpdd-btn{ border-color:rgba(20,184,166,.65); }
.dkpdd-ch{ width:13px; height:13px; flex:0 0 auto; transition:transform .18s; }
.dkpdd.open .dkpdd-ch{ transform:rotate(180deg); }
.dkpdd-list{ position:absolute; top:calc(100% + 6px); left:0; right:0; background:#12121c; border:1px solid rgba(20,184,166,.28); border-radius:12px; padding:6px; box-shadow:0 18px 50px rgba(0,0,0,.55); z-index:60; max-height:262px; overflow:auto; opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .14s, transform .14s; }
.dkpdd.open .dkpdd-list{ opacity:1; transform:none; pointer-events:auto; }
.dkpdd-opt{ padding:10px 12px; border-radius:8px; color:#c8c8d4; font-size:13.5px; cursor:pointer; transition:background .12s, color .12s; }
.dkpdd-opt:hover{ background:rgba(20,184,166,.14); color:#fff; }
.dkpdd-opt.sel{ background:rgba(20,184,166,.18); color:#5eead4; font-weight:600; }
/* ===== DK Private VPN — picker (koraci + tier kartice) ===== */
.dkpvpn-steps{ display:flex; gap:10px; margin:2px 0 16px; }
.dkpvpn-step{ flex:1; display:flex; align-items:center; gap:7px; font-size:11.5px; color:#8a8aa0; font-weight:600; }
.dkpvpn-step span{ width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; font-size:11px; flex:0 0 auto; }
.dkpvpn-step.on{ color:#5eead4; } .dkpvpn-step.on span{ background:linear-gradient(135deg,#14b8a6,#0d9488); color:#fff; }
.dkpvpn-step.done span{ background:rgba(20,184,166,.25); color:#5eead4; }
.dkpvpn-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:6px; }
.dkpvpn-tier{ position:relative; background:#0c0c14; border:1px solid rgba(255,255,255,.08); border-radius:13px; padding:15px 12px 13px; cursor:pointer; transition:border-color .14s, background .14s, transform .12s; }
.dkpvpn-tier:hover{ border-color:rgba(20,184,166,.4); transform:translateY(-1px); }
.dkpvpn-tier.sel{ border-color:rgba(20,184,166,.7); background:linear-gradient(180deg,rgba(20,184,166,.1),rgba(12,12,20,.5)); box-shadow:0 0 0 1px rgba(20,184,166,.3); }
.dkpvpn-rec{ position:absolute; top:-8px; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:8.5px; letter-spacing:.04em; text-transform:uppercase; font-weight:700; color:#07120f; background:linear-gradient(135deg,#5eead4,#14b8a6); padding:2px 8px; border-radius:6px; }
.dkpvpn-tn{ font-size:13px; font-weight:700; color:#f1f1f7; }
.dkpvpn-tp{ font-size:16px; font-weight:800; color:#5eead4; margin:3px 0 6px; }
.dkpvpn-ts{ font-size:11px; color:#9a9ab0; line-height:1.5; }
.dkpvpn-mini{ background:#0c0c14; border:1px solid rgba(20,184,166,.2); border-radius:10px; padding:11px 13px; margin-top:14px; font-size:12.5px; color:#c8c8d4; }
.dkpvpn-sum{ background:linear-gradient(180deg,rgba(20,184,166,.09),rgba(12,12,20,.55)); border:1px solid rgba(20,184,166,.3); border-radius:14px; padding:16px; font-size:13px; color:#e8e8f0; line-height:1.85; margin-top:4px; }
.dkpvpn-price{ margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,.08); }
.dkpvpn-price b{ color:#5eead4; font-size:15px; }
.dkpvpn-price span{ color:#8a8aa0; font-size:11px; }
@media(max-width:600px){ .dkpvpn-grid{ grid-template-columns:repeat(2,1fr); } }
/* DK Private VPN — wait + config/QR prikaz */
.dkpvpn-wait{margin:10px 0 4px;text-align:center;color:#a855f7;font-size:13px;letter-spacing:.2px}
.dkpvpn-qr{display:flex;justify-content:center;margin:14px 0 6px}
.dkpvpn-qr>div{background:#fff;border-radius:12px;padding:10px;box-shadow:0 6px 24px rgba(124,58,237,.25);line-height:0}
.dkpvpn-qr canvas{display:block;width:200px;height:200px;border-radius:4px}
.dkpvpn-qr img{display:none}
.dkpvpn-qrcap{text-align:center;color:#8b8ba0;font-size:11.5px;margin:0 0 12px;line-height:1.4}
.dkpvpn-adv-t{display:block;width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#c8c8d4;font-size:12.5px;font-weight:600;letter-spacing:.3px;padding:11px;border-radius:10px;cursor:pointer;margin:0 0 0;text-align:center;transition:background .14s,color .14s,border-color .14s}
.dkpvpn-adv-t:hover{background:rgba(255,255,255,.07)}
.dkpvpn-adv-t.open{color:#c084fc;border-color:rgba(168,85,247,.3);background:rgba(168,85,247,.08)}
.dkpvpn-adv{margin-top:12px}
.dkpvpn-cfg{max-height:150px;overflow:auto;background:#0b0b13;border:1px solid rgba(168,85,247,.22);border-radius:10px;padding:10px 12px;font:12px/1.5 ui-monospace,Menlo,Consolas,monospace;color:#cbd5e1;white-space:pre-wrap;word-break:break-all;margin:0 0 12px}
/* DK Private VPN — lista cvorova */
.dkpvpn-nodes{display:flex;flex-direction:column;gap:10px;margin:6px 0 14px;max-height:320px;overflow:auto}
.dkpvpn-empty{color:#8b8ba0;font-size:13px;text-align:center;padding:18px 0}
.dkpvpn-node{background:#0b0b13;border:1px solid rgba(168,85,247,.2);border-radius:12px;padding:12px 14px}
.dkpvpn-node-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dkpvpn-node-top b{color:#e5e7eb;font-size:14px}
.dkpvpn-badge{font-size:11px;padding:3px 9px;border-radius:999px;letter-spacing:.3px}
.dkpvpn-badge.ok{background:rgba(16,185,129,.15);color:#34d399;border:1px solid rgba(16,185,129,.35)}
.dkpvpn-badge.wait{background:rgba(168,85,247,.14);color:#c084fc;border:1px solid rgba(168,85,247,.32)}
.dkpvpn-node-sub{color:#8b8ba0;font-size:12px;margin:5px 0 10px}
.dkpvpn-node-act{display:flex;gap:8px;flex-wrap:wrap}
.dkpm-b.sm{padding:7px 12px;font-size:12px}
.dkpm-b.danger{color:#f87171;border-color:rgba(248,113,113,.3)}
.dkpm-b.danger:hover{background:rgba(248,113,113,.1)}
/* DK Private VPN — SSH pristup */
.dkpvpn-ssh{background:#0b0b13;border:1px solid rgba(20,184,166,.25);border-radius:10px;padding:10px 12px;margin:0 0 12px}
.dkpvpn-ssh-h{color:#14b8a6;font-size:12px;font-weight:600;letter-spacing:.3px;margin-bottom:6px}
.dkpvpn-ssh-r{color:#cbd5e1;font-size:12px;margin:3px 0}
.dkpvpn-ssh-r code{background:#15151f;border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:2px 6px;font:11px ui-monospace,Menlo,Consolas,monospace;color:#a7f3d0;word-break:break-all}
.dkpvpn-ssh button{margin-top:8px}
/* DK Private VPN — cena napomena */
.dkpvpn-usd{color:#8b8ba0;font-size:12px;font-weight:500}
.dkpvpn-note{margin-top:6px;color:#f0b86e;font-size:11.5px;line-height:1.5;background:rgba(240,184,110,.08);border:1px solid rgba(240,184,110,.22);border-radius:8px;padding:7px 10px}
/* DK Private VPN — unos stvarne cene (price-learning) */
.dkpvpn-pricein{background:#0b0b13;border:1px solid rgba(124,58,237,.2);border-radius:10px;padding:10px 12px;margin:0 0 12px}
.dkpvpn-pricein-l{color:#cbd5e1;font-size:12px;margin-bottom:8px}
.dkpvpn-pricein-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dkpvpn-pricein-row input{width:110px;background:#15151f;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:7px 10px;color:#e5e7eb;font-size:13px}
.dkpvpn-pricein-row select{background:#15151f;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:7px 8px;color:#e5e7eb;font-size:13px}
.dkpvpn-pricein-ok{color:#34d399;font-size:12px}
/* DK Private VPN — native toggle (u mobilnoj app) */
.dkpvpn-native{margin:0 0 12px}
.dkpvpn-native-note{color:#8b8ba0;font-size:12px;line-height:1.5;background:#0b0b13;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:10px 12px}
.dkpvpn-native-box{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#0b0b13;border:1px solid rgba(124,58,237,.25);border-radius:12px;padding:14px 16px}
.dkpvpn-native-st{font-size:13px;font-weight:600;padding:5px 12px;border-radius:999px}
.dkpvpn-native-st.on{background:rgba(16,185,129,.16);color:#34d399;border:1px solid rgba(16,185,129,.35)}
.dkpvpn-native-st.off{background:rgba(139,139,160,.14);color:#9ca3af;border:1px solid rgba(139,139,160,.3)}
.dkpvpn-native-st.mid{background:rgba(168,85,247,.16);color:#c084fc;border:1px solid rgba(168,85,247,.35)}
.dkpvpn-native-box .dkpm-b{margin:0}
/* DK Private VPN — kill-switch link */
.dkpvpn-ks-link{display:block;width:100%;margin-top:8px;background:none;border:none;color:#a855f7;font-size:12px;text-align:center;cursor:pointer;text-decoration:underline;padding:4px}
/* DK Private VPN — auto-backup (snapshot) */
.dkpvpn-backup{background:#0b0b13;border:1px solid rgba(124,58,237,.2);border-radius:12px;padding:12px 14px;margin:0 0 12px}
.dkpvpn-bk-h{color:#a855f7;font-size:12px;font-weight:600;letter-spacing:.3px;margin-bottom:8px}
.dkpvpn-bk-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.dkpvpn-bk-tog{display:flex;align-items:center;gap:6px;color:#cbd5e1;font-size:13px}
.dkpm-inp.sm{background:#15151f;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:6px 8px;color:#e5e7eb;font-size:13px}
.dkpvpn-bk-list{display:flex;flex-direction:column;gap:5px;max-height:120px;overflow:auto}
.dkpvpn-bk-i{font-size:12px;color:#cbd5e1;display:flex;justify-content:space-between;gap:8px;background:#15151f;border-radius:6px;padding:5px 9px}
.dkpvpn-bk-i span{color:#8b8ba0}
.dkpvpn-bk-none{color:#8b8ba0;font-size:12px}
/* DK Private VPN — ON/OFF prekidac */
.dkpvpn-modes{display:flex;gap:6px;background:#0b0b13;border:1px solid rgba(124,58,237,.25);border-radius:12px;padding:5px;margin-bottom:10px}
.dkpvpn-mode{flex:1;background:none;border:none;color:#8b8ba0;font-size:12px;font-weight:600;letter-spacing:.3px;padding:9px 8px;border-radius:9px;cursor:pointer;transition:background .18s,color .18s}
.dkpvpn-mode.on{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;box-shadow:0 2px 10px rgba(124,58,237,.35)}
.dkpvpn-mode-note{font-size:11px;color:#8b8ba0;line-height:1.5;margin-top:8px;padding:0 2px}
.dkpvpn-torcc{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:10px;background:#0b0b13;border:1px solid rgba(124,58,237,.25);border-radius:12px;padding:11px 14px}
.dkpvpn-torcc-l{color:#cbd5e1;font-size:12.5px;font-weight:600;letter-spacing:.3px}
.dkpvpn-torcc-sel{flex:1;min-width:120px;background:#15151f;border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:8px 10px;color:#e5e7eb;font-size:13px;outline:none}
.dkpvpn-torcc-sel:focus{border-color:rgba(168,85,247,.6)}
.dkpvpn-torcc-st{color:#34d399;font-size:11.5px;min-width:60px}
.dkpvpn-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#0b0b13;border:1px solid rgba(124,58,237,.25);border-radius:12px;padding:14px 16px}
.dkpvpn-tg-info{display:flex;flex-direction:column;gap:3px}
.dkpvpn-tg-info b{color:#e5e7eb;font-size:14px;letter-spacing:.3px}
.dkpvpn-switch{width:58px;height:32px;border-radius:999px;border:none;position:relative;cursor:pointer;transition:background .2s;padding:0;flex:0 0 auto}
.dkpvpn-switch.off{background:#3a3a46}
.dkpvpn-switch.on{background:#10b981}
.dkpvpn-switch:disabled{opacity:.6;cursor:default}
.dkpvpn-knob{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.dkpvpn-switch.on .dkpvpn-knob{left:29px}