/* ============================================================ main.css — ServisPro 1.0 Entry point: imports all partials + defines design tokens ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:wght@300;400;500&display=swap'); /* Version query strings ensure browsers re-fetch after dashboard layout changes (иначе cache држи стар layout.css и нов dashboard HTML не се прилагодува). */ @import './layout.css?v=10'; @import './components.css?v=10'; @import './animations.css?v=1'; /* ── DESIGN TOKENS ── */ :root { --bg: #f1f3f7; --surface: #ffffff; --surface2: #f0f2f7; --border: #dde1ea; --accent: #f97316; --accent2: #fb923c; --text: #1a1d26; --muted: #8a93a6; --green: #16a34a; --red: #dc2626; --blue: #2563eb; --yellow: #ca8a04; --purple: #9333ea; --sidebar-w: 240px; --topbar-h: 60px; --mobile-nav-h: 64px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --shadow-sm: 0 1px 3px rgba(0,0,0,.06); --shadow-md: 0 4px 16px rgba(0,0,0,.10); --shadow-lg: 0 8px 32px rgba(0,0,0,.15); --transition: .2s ease; } /* Двете класи се поддржани — `body.dark` (нов unified селектор) и legacy `body.dark-mode` за старите корисници чиј localStorage сеuш чува 'dark-mode'. JS toggle-от мора само едно од двете, но CSS активира со било кое. */ body.dark, body.dark-mode { --bg: #0f1117; --surface: #1a1d26; --surface2: #22263a; --border: #2e3347; --text: #e8eaf0; --muted: #6b7280; } /* ── RESET ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; overflow: hidden; font-size: 16px; } body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); display: flex; flex-direction: column; } /* ── PRINT ── `#print-invoice-area` се инјектира директно во пред `window.print()` со pristine A4 содржина; сите останати body децата (sidebar, topbar, main, modals, итн.) се скриваат на print. По print, div-от се отстранува. A4 страница, 15mm margin, serif font за класичен фактура изглед. */ @media print { body > *:not(#print-invoice-area) { display: none !important; } #print-invoice-area { display: block !important; } @page { size: A4; margin: 15mm; } body { background: #fff !important; color: #000 !important; } #print-invoice-area { padding: 0 !important; margin: 0 !important; color: #000 !important; background: #fff !important; font-family: 'Times New Roman', Georgia, serif !important; font-size: 11px !important; line-height: 1.35 !important; } #print-invoice-area * { color: #000 !important; } #print-invoice-area table { width: 100% !important; border-collapse: collapse !important; font-size: 11px !important; } #print-invoice-area th, #print-invoice-area td { border: 1px solid #000 !important; padding: 4px 6px !important; } #print-invoice-area .pia-no-border, #print-invoice-area .pia-no-border th, #print-invoice-area .pia-no-border td { border: none !important; } } /* На екран, #print-invoice-area е скриен — постои само кога принт е активен. */ #print-invoice-area { display: none; } /* ── ANIMATIONS ── */ @keyframes slideUp { from { opacity:0; transform:translateY(40px) } to { opacity:1; transform:translateY(0) } } @keyframes spin { to { transform:rotate(360deg) } } @keyframes shimmer { 0% { background-position:-200% 0 } 100% { background-position:200% 0 } } @keyframes popIn { 0% { transform:scale(0) rotate(-10deg); opacity:0 } 60% { transform:scale(1.2) rotate(3deg) } 100% { transform:scale(1) rotate(0); opacity:1 } } @keyframes fadeInDown { from { opacity:0; transform:translateY(-12px) } to { opacity:1; transform:translateY(0) } } @keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.4 } } @keyframes checkDraw { from { stroke-dashoffset:60 } to { stroke-dashoffset:0 } } @keyframes circleDraw { from { stroke-dashoffset:220 } to { stroke-dashoffset:0 } }