/* app.css — camere.md Field App (mobile-first, tema inchisa) */ :root { --bg: #0F1923; --surface: #17232F; --surface2: #1E2D3B; --border: #2A3B4B; --text: #EAF1F7; --text-sec: #9FB2C2; --text-dim: #64798A; --blue: #3B82F6; --green: #22C55E; --orange: #F59E0B; --red: #EF4444; --purple: #8B5CF6; --brand: #F26F21; --radius: 12px; --nav-h: 62px; } /* Tema luminoasa — activata cu ; culorile hardcodate (badge-uri, bannere) au override-uri mai jos. */ [data-theme="light"] { --bg: #F1F5F9; --surface: #FFFFFF; --surface2: #E9EEF4; --border: #D4DDE6; --text: #16232F; --text-sec: #4E6172; --text-dim: #7D8FA0; --blue: #2563EB; --green: #16A34A; --orange: #D97706; --red: #DC2626; --purple: #7C3AED; } [data-theme="light"] .badge-service, [data-theme="light"] .badge-status-open, [data-theme="light"] .equip-qty { background: #DBEAFE; color: #1D4ED8; } [data-theme="light"] .badge-status-in_progress, [data-theme="light"] .badge-pending { background: #FCEEC7; color: #92400E; } [data-theme="light"] .badge-status-resolved { background: #D6F5E0; color: #15803D; } [data-theme="light"] .badge-status-cancelled, [data-theme="light"] .badge-prio-urgent { background: #FBDEDE; color: #B91C1C; } [data-theme="light"] .badge-prio-high { background: #FDE6D2; color: #C2410C; } [data-theme="light"] .badge-mine { background: #E9E3FB; color: #6D28D9; } [data-theme="light"] .badge-team { background: #DCEEFB; color: #0369A1; } [data-theme="light"] .offline-banner { background: #FCEEC7; color: #92400E; } [data-theme="light"] .checkin-banner { background: #D6F5E0; color: #15803D; } [data-theme="light"] .toast { background: #FFFFFF; box-shadow: 0 8px 24px rgba(30, 41, 59, .18); } [data-theme="light"] .login-card { box-shadow: 0 20px 55px rgba(30, 41, 59, .22); } [data-theme="light"] .sheet-backdrop { background: rgba(15, 23, 42, .35); } [data-theme="light"] .sheet { box-shadow: 0 -8px 32px rgba(30, 41, 59, .25); } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 15px; line-height: 1.45; } body { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } a { color: var(--blue); text-decoration: none; } input, select, textarea { font: inherit; color: var(--text); } .boot-splash { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 80vh; font-size: 56px; text-align: center; } .boot-splash small { font-size: 16px; color: var(--text-sec); margin-top: 8px; } /* ── Layout ─────────────────────────────────────────────── */ .screen { max-width: 640px; margin: 0 auto; animation: fade .18s ease; } @keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } } .top-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; padding-top: calc(14px + env(safe-area-inset-top)); position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); } .top-header h1 { font-size: 20px; font-weight: 800; flex: 1; } .header-right { display: flex; gap: 6px; } .home-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 6px; padding-top: calc(18px + env(safe-area-inset-top)); } .grow { flex: 1; min-width: 0; } .muted { color: var(--text-sec); } .small { font-size: 12.5px; } .c-blue { color: var(--blue); } .c-green { color: var(--green); } .c-orange { color: var(--orange); } .c-red { color: var(--red); } .icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--text-sec); transition: background .15s; } .icon-btn:active { background: var(--surface2); } .icon-btn.danger { color: var(--red); } .dot-badge { position: absolute; top: 3px; right: 3px; background: var(--red); color: #fff; min-width: 17px; height: 17px; border-radius: 9px; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; } .link-btn { color: var(--blue); font-size: 13.5px; font-weight: 600; } /* ── Statistici ─────────────────────────────────────────── */ .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 16px; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; text-align: left; display: flex; flex-direction: column; gap: 2px; } .stat-value { font-size: 26px; font-weight: 800; } .stat-label { color: var(--text-sec); font-size: 12.5px; } /* ── Carduri & liste ────────────────────────────────────── */ .section-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; font-weight: 700; font-size: 15px; } .detail-card .section-header { padding: 0 0 10px; } .card-list { display: flex; flex-direction: column; gap: 8px; padding: 4px 16px 16px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; text-align: left; width: 100%; display: flex; flex-direction: column; gap: 6px; } .card:active { background: var(--surface2); } .card.pending { border-style: dashed; border-color: var(--orange); } .row-card { flex-direction: row; align-items: center; gap: 12px; } .card-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .card-title { font-weight: 650; display: block; } .card-sub { color: var(--text-sec); font-size: 13px; display: block; } .avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--blue), #1D4ED8); color: #fff; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; } .avatar-lg { width: 54px; height: 54px; font-size: 18px; } .empty-state { text-align: center; color: var(--text-dim); padding: 28px 16px; } .empty-state.small { padding: 14px; font-size: 13.5px; } /* ── Badge-uri ──────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .2px; padding: 2.5px 9px; border-radius: 999px; white-space: nowrap; } .badge-service { background: #1E3A5F; color: #7EB6FF; } .badge-status-open { background: #143A5E; color: #60A5FA; } .badge-status-in_progress { background: #4A3A10; color: #FBBF24; } .badge-status-resolved { background: #123B26; color: #4ADE80; } .badge-status-closed { background: var(--surface2); color: var(--text-dim); } .badge-status-cancelled { background: #3D1A1A; color: #F87171; } .badge-prio-high { background: #4A2A10; color: #FB923C; } .badge-prio-urgent { background: #4C1212; color: #F87171; } .badge-prio-low { background: var(--surface2); color: var(--text-dim); } .badge-mine { background: #2A1F4D; color: #A78BFA; } .badge-team { background: #13324A; color: #7DD3FC; } .badge-pending { background: #4A3A10; color: #FBBF24; } /* ── Butoane ────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: var(--radius); font-weight: 700; font-size: 14.5px; width: 100%; border: 1px solid transparent; transition: filter .15s; } .btn:active { filter: brightness(1.15); } .btn-sm { width: auto; padding: 10px 14px; } .btn-primary { background: var(--blue); color: #fff; } .btn-success { background: var(--green); color: #06220f; } .btn-danger { background: var(--red); color: #fff; } .btn-outline { background: transparent; border-color: var(--border); color: var(--text); } /* Se impacheteaza pe 2 coloane cand butoanele nu incap pe un rand (ex. Suna / Harta / Check-in / Piese pe ecranul tichetului). */ .action-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .action-row .btn { flex: 1 1 calc(50% - 4px); min-width: 0; white-space: nowrap; padding: 12px 10px; } .action-col { display: flex; flex-direction: column; gap: 8px; } .quick-actions { display: flex; gap: 10px; padding: 8px 16px 20px; } .fab { position: fixed; right: 18px; bottom: calc(var(--nav-h) + 18px + env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(59, 130, 246, .45); z-index: 30; } /* ── Filtre & cautare ───────────────────────────────────── */ .search-bar { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin: 4px 16px 10px; padding: 0 12px; color: var(--text-dim); } .search-bar input { flex: 1; background: none; border: none; outline: none; padding: 11px 0; font-size: 14.5px; } .filter-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 0 16px 8px; scrollbar-width: none; } .filter-tabs::-webkit-scrollbar { display: none; } .filter-tab { padding: 7px 14px; border-radius: 999px; white-space: nowrap; background: var(--surface); border: 1px solid var(--border); color: var(--text-sec); font-size: 13px; font-weight: 600; } .filter-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; } .toggle-row { display: flex; align-items: center; gap: 8px; padding: 2px 18px 10px; font-size: 13.5px; color: var(--text-sec); } .toggle-row input { accent-color: var(--blue); width: 17px; height: 17px; } /* ── Detalii ────────────────────────────────────────────── */ .detail-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin: 10px 16px; padding: 14px; } .detail-card h2 { font-size: 17.5px; } .client-head { display: flex; align-items: center; gap: 14px; } .desc-box { background: var(--surface2); border-radius: 8px; padding: 10px 12px; margin: 8px 0; color: var(--text-sec); white-space: pre-wrap; } .kv-list { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; } .kv-list > div { display: flex; gap: 10px; font-size: 14px; } .kv-list .k { color: var(--text-dim); min-width: 95px; flex-shrink: 0; } .kv-list .v { color: var(--text); word-break: break-word; } /* ── Formulare ──────────────────────────────────────────── */ .form-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-sec); margin: 12px 0 5px; text-transform: uppercase; letter-spacing: .4px; } .form-input { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; outline: none; font-size: 14.5px; } .form-input:focus { border-color: var(--blue); } textarea.form-input { resize: vertical; } select.form-input { appearance: none; } .detail-card > .btn { margin-top: 14px; } .add-activity { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; } .add-activity .form-input { margin: 0; } .contact-row { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--border); } .contact-row:last-of-type { border-bottom: none; } .equip-icon { color: var(--text-dim); display: flex; } /* ── Timeline ───────────────────────────────────────────── */ .timeline { display: flex; flex-direction: column; gap: 12px; padding: 6px 0 16px; } .timeline-item { display: flex; gap: 10px; } .timeline-item.pending { opacity: .75; } .timeline-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); margin-top: 6px; flex-shrink: 0; } .timeline-dot.dot-green { background: var(--green); } .timeline-dot.dot-red { background: var(--red); } /* ── Notificari ─────────────────────────────────────────── */ .notif-card.unread { border-left: 3px solid var(--blue); background: var(--surface2); } .push-promo { display: flex; align-items: center; gap: 12px; border-color: var(--blue); } /* ── Offline / stari ────────────────────────────────────── */ .offline-banner { display: flex; align-items: center; justify-content: center; gap: 7px; background: #4A3A10; color: #FBBF24; font-size: 12.5px; font-weight: 600; padding: 7px 12px; margin: 0 16px 8px; border-radius: 8px; } .checkin-banner { display: flex; align-items: center; justify-content: center; gap: 7px; background: #123B26; color: #4ADE80; font-size: 13px; font-weight: 700; padding: 10px 12px; margin: 4px 16px 6px; border-radius: 10px; width: calc(100% - 32px); } body.is-offline #bottom-nav { border-top-color: var(--orange); } /* ── Toast ──────────────────────────────────────────────── */ .toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 20px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(16px); background: #223447; color: var(--text); font-size: 14px; font-weight: 600; padding: 11px 18px; border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); opacity: 0; transition: all .25s ease; z-index: 100; max-width: calc(100vw - 40px); text-align: center; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast-success { border-color: var(--green); } .toast-error { border-color: var(--red); } .toast-warn { border-color: var(--orange); } /* ── Login ──────────────────────────────────────────────── */ .login-screen { position: relative; overflow: hidden; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: var(--bg); } /* Trama fina de puncte — textura, nu desen; sta sub aure. */ .login-screen::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(currentColor 1px, transparent 1px); background-size: 26px 26px; color: var(--text-dim); opacity: .10; mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 30%, transparent 75%); } /* Doua aure care plutesc lent — miscarea e doar transform (GPU), ca sa nu incarce telefoanele slabe. */ .login-aura { position: absolute; border-radius: 50%; filter: blur(58px); pointer-events: none; will-change: transform; } .login-aura-1 { width: 80vw; height: 80vw; max-width: 440px; max-height: 440px; top: -20%; left: -22%; background: radial-gradient(circle, rgba(242, 111, 33, .30), transparent 70%); animation: login-aura-a 19s ease-in-out infinite; } .login-aura-2 { width: 70vw; height: 70vw; max-width: 380px; max-height: 380px; bottom: -18%; right: -20%; background: radial-gradient(circle, rgba(59, 130, 246, .24), transparent 70%); animation: login-aura-b 24s ease-in-out infinite; } @keyframes login-aura-a { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(9%, 7%, 0) scale(1.14); } } @keyframes login-aura-b { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-8%, -9%, 0) scale(1.12); } } [data-theme="light"] .login-aura { opacity: .55; } .login-card { position: relative; z-index: 1; width: 100%; max-width: 372px; background: linear-gradient(180deg, var(--surface2), var(--surface)); border: 1px solid var(--border); border-radius: 20px; padding: 30px 24px 26px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); text-align: center; animation: login-card-in .55s cubic-bezier(.22, 1, .36, 1) both; } /* Firul de lumina de pe muchia de sus */ .login-card::before { content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(242, 111, 33, .7), transparent); } @keyframes login-card-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } } /* Continutul intra pe rand, cu un decalaj mic */ .login-card > * { animation: login-rise .5s cubic-bezier(.22, 1, .36, 1) both; } .login-card > *:nth-child(1) { animation-delay: .10s; } .login-card > *:nth-child(2) { animation-delay: .16s; } .login-card > *:nth-child(3) { animation-delay: .22s; } .login-card > *:nth-child(4) { animation-delay: .28s; } .login-card > *:nth-child(5) { animation-delay: .34s; } .login-card > *:nth-child(6) { animation-delay: .40s; } .login-card > *:nth-child(7) { animation-delay: .46s; } .login-card > *:nth-child(8) { animation-delay: .52s; } @keyframes login-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } } .login-card.shake { animation: login-shake .45s cubic-bezier(.36, .07, .19, .97); } @keyframes login-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } } .login-logo-img { width: 210px; max-width: 82%; display: block; margin: 0 auto 4px; } .login-card h1 { font-size: 21px; margin: 10px 0 2px; } .login-sub { color: var(--text-sec); font-size: 13.5px; } .login-divider { display: flex; align-items: center; gap: 10px; margin: 20px 0 14px; color: var(--text-dim); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; } .login-divider .line { height: 1px; flex: 1; background: var(--border); } .login-card .card-list { text-align: left; padding: 0; } .login-card .card { background: var(--surface2); } .login-card .card:active { border-color: var(--brand); } .login-field { text-align: left; margin-top: 14px; } .login-field label { display: block; color: var(--text-sec); font-size: 12.5px; font-weight: 600; margin-bottom: 6px; transition: color .2s; } .login-field:focus-within label { color: var(--brand); } .login-input { position: relative; display: flex; align-items: center; } .login-input .login-ico { position: absolute; left: 13px; display: flex; color: var(--text-dim); pointer-events: none; transition: color .2s; } .login-input .login-ico svg { width: 17px; height: 17px; } .login-input:focus-within .login-ico { color: var(--brand); } .login-field input { width: 100%; border-radius: 11px; border: 1px solid var(--border); background: var(--bg); padding: 13px 14px 13px 40px; outline: 0; font-size: 15.5px; transition: border-color .2s, box-shadow .2s, background .2s; } .login-field input:focus { border-color: var(--brand); background: color-mix(in srgb, var(--bg) 88%, var(--brand) 12%); box-shadow: 0 0 0 3px rgba(242, 111, 33, .2); } .login-field input.has-eye { padding-right: 44px; } .login-eye { position: absolute; right: 4px; padding: 9px; display: flex; color: var(--text-dim); border-radius: 9px; transition: color .15s; } .login-eye svg { width: 18px; height: 18px; } .login-eye:active { color: var(--brand); } .login-err { color: var(--red); font-size: 13px; min-height: 18px; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; } .login-err:not(:empty) { animation: login-rise .25s ease both; } .login-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; margin-top: 12px; padding: 14px; background: linear-gradient(180deg, #FF8A3D, var(--brand)); color: #fff; font-weight: 700; font-size: 15px; border-radius: 11px; transition: filter .15s, transform .12s, box-shadow .2s; box-shadow: 0 8px 22px rgba(242, 111, 33, .32); } .login-btn:active { filter: brightness(.88); transform: translateY(1px); } .login-btn[disabled] { filter: saturate(.75) brightness(.9); pointer-events: none; } .login-spin { width: 16px; height: 16px; flex-shrink: 0; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: login-spin .7s linear infinite; } @keyframes login-spin { to { transform: rotate(360deg); } } .login-foot { margin-top: 18px; color: var(--text-dim); font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; } @media (prefers-reduced-motion: reduce) { .login-aura, .login-card, .login-card > *, .login-card.shake, .login-err:not(:empty) { animation: none !important; } .login-spin { animation-duration: 1.4s; } } .login-back { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 12px; padding: 9px; color: var(--text-sec); font-size: 13.5px; font-weight: 600; } .login-back:active { color: var(--text); } /* ── Ziua mea (teren) ───────────────────────────────────── */ .day-chips { display: flex; gap: 6px; padding: 6px 16px 10px; overflow-x: auto; scrollbar-width: none; } .day-chips::-webkit-scrollbar { display: none; } .day-chip { position: relative; flex: 1; min-width: 44px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--text-sec); } .day-chip.active { background: var(--blue); border-color: var(--blue); color: #fff; } .day-chip-wd { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; } .day-chip-num { font-size: 16px; font-weight: 800; } .day-chip-dot { position: absolute; top: 5px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); } /* Starea zilei de lucru: neînceputa / în desfășurare / încheiată */ .day-status { display: flex; align-items: center; gap: 7px; margin: -2px 0 10px; padding: 7px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 650; background: var(--bg); color: var(--text-dim); } .day-status.open { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); } .day-status.done { background: var(--bg); color: var(--text-sec); } .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse-dot 1.6s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 45%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } } /* Composer-ul blocat: jurnalul se deschide odată cu ziua de lucru */ .day-locked { display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); /* buton: nu umple singur latimea; 32px = marginile laterale din .detail-card */ text-align: left; border-style: dashed; cursor: pointer; } .day-locked.done { cursor: default; } .day-locked-icon { display: inline-flex; padding: 10px; border-radius: 12px; background: var(--bg); color: var(--text-dim); flex-shrink: 0; } .day-locked.done .day-locked-icon { color: var(--green); } .entry-edit-btn { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 4px; padding: 2px 6px; border-radius: 8px; background: none; border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; } .entry-edit-btn:active { color: var(--blue); border-color: var(--blue); } .day-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; text-align: center; } .day-stats b { display: block; font-size: 15.5px; } .day-stats span { display: block; font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .4px; margin-top: 1px; } .day-checkin-summary { cursor: pointer; font-weight: 650; list-style: none; display: flex; align-items: center; gap: 8px; padding: 2px 0; } .day-checkin-summary::-webkit-details-marker { display: none; } .checkin-live { border-color: var(--green); } .timeline-dot.dot-blue { background: var(--blue); } .photo-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .photo-thumb { width: 74px; height: 74px; object-fit: cover; border-radius: 10px; background: var(--surface2); border: 1px solid var(--border); } .photo-thumb-wrap { position: relative; display: inline-block; } .photo-thumb-x { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--red); color: #fff; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; } .photo-lightbox { position: fixed; inset: 0; z-index: 3000; background: rgba(0, 0, 0, .92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; } .photo-lightbox img { max-width: 100%; max-height: 78vh; border-radius: 12px; } .photo-lightbox-bar { display: flex; gap: 10px; } .photo-lightbox-bar .btn { width: auto; } /* ── Semnatura client ───────────────────────────────────── */ .sign-overlay { position: fixed; inset: 0; z-index: 3000; background: rgba(0, 0, 0, .72); display: flex; align-items: flex-end; justify-content: center; } .sign-sheet { width: 100%; max-width: 560px; background: var(--surface); border-radius: 18px 18px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; } #sig-canvas { width: 100%; height: 220px; background: #fff; border: 1px solid var(--border); border-radius: 12px; touch-action: none; display: block; } .sign-sheet .form-input { margin: 0; } .sign-img { width: 100%; max-width: 360px; min-height: 60px; background: #fff; border: 1px solid var(--border); border-radius: 12px; display: block; margin-bottom: 6px; } /* ── Echipamente client (collapse) ──────────────────────── */ .equip-details { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; background: var(--surface2); } /* Dropdown-ul folosit ca sectiune de sine statatoare (Setari -> Dispozitivele mele) trebuie sa arate ca celelalte carduri, altfel randul strans pare o bucata straina lipita intre ele: aceleasi margini si aceeasi suprafata ca `.detail-card`. */ .drop { border: 1px solid var(--border); border-radius: var(--radius); margin: 10px 16px; background: var(--surface); } .equip-details summary, .drop summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 11px 12px; } .equip-details summary::-webkit-details-marker, .drop summary::-webkit-details-marker { display: none; } .equip-details summary .chev, .drop summary .chev { margin-left: auto; color: var(--text-dim); transition: transform .15s; } .equip-details[open] summary .chev, .drop[open] summary .chev { transform: rotate(90deg); } /* Continutul unui dropdown generic: rândurile stau lipite de marginea cutiei, despartite de o linie de antet. */ .drop-body { padding: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; } /* Randurile din interior sunt carduri, deci nu-si mai poarta marginea proprie */ .drop-body .card { margin: 0; } .drop-count { color: var(--text-dim); font-size: 12.5px; } .equip-specs { padding: 0 12px 10px; border-top: 1px solid var(--border); } .equip-spec-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13.5px; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); } .equip-spec-row:last-child { border-bottom: 0; } .equip-spec-row span:first-child { color: var(--text-sec); } .equip-spec-row span:last-child { text-align: right; word-break: break-word; } .equip-qty { background: #1E3A5F; color: #7EB6FF; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; } /* ── Profil ─────────────────────────────────────────────── */ .profile-photo { object-fit: cover; border: 2px solid var(--border); } .profile-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); } .profile-row:last-child { border-bottom: 0; } .profile-row span:last-child { text-align: right; word-break: break-word; } /* ── Navigatie jos ──────────────────────────────────────── */ #bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: space-around; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--border); } .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-dim); font-size: 10.5px; font-weight: 600; } .nav-item svg { width: 22px; height: 22px; } .nav-item.active { color: var(--blue); } /* ── Banner „Versiune nouă" (actualizarea aplicației) ───── */ #update-bar { position: fixed; left: 12px; right: 12px; z-index: 1500; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px); display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--blue); box-shadow: 0 8px 24px rgba(0,0,0,.35); transform: translateY(12px); opacity: 0; transition: transform .25s ease, opacity .25s ease; } #update-bar.show { transform: translateY(0); opacity: 1; } /* ── Buton pe toată lățimea ─────────────────────────────── */ .btn-block { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; } /* ── Bottom sheet („Mai multe") ─────────────────────────── */ .sheet-backdrop { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; opacity: 0; transition: opacity .2s ease; } .sheet-backdrop.show { opacity: 1; } .sheet { width: 100%; background: var(--surface); border-radius: 18px 18px 0 0; padding: 8px 12px calc(16px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .25s cubic-bezier(.2,.7,.3,1); box-shadow: 0 -8px 32px rgba(0,0,0,.4); } .sheet-backdrop.show .sheet { transform: translateY(0); } .sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--border); margin: 8px auto 12px; } .sheet-title { font-weight: 600; font-size: 15px; padding: 0 8px 8px; color: var(--text-sec); } .sheet-item { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 8px; background: none; border: 0; color: var(--text); font-size: 15px; text-align: left; cursor: pointer; border-radius: 12px; } .sheet-item:active { background: var(--bg); } .sheet-icon { display: inline-flex; color: var(--blue); } /* ── Notite structurate pe client (categorii + poze) ─────────── */ .note-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .note-chip { border: 1px solid var(--border); background: var(--surface2); color: var(--text-dim); font-size: 12px; padding: 5px 11px; border-radius: 999px; cursor: pointer; } .note-chip.active { background: var(--blue); border-color: var(--blue); color: #fff; } .note-cat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .note-cat-dot.cat-proiect { background: #60A5FA; } .note-cat-dot.cat-schema { background: #A78BFA; } .note-cat-dot.cat-configurare { background: #FBBF24; } .note-cat-dot.cat-acces { background: #F87171; } .note-cat-dot.cat-general { background: var(--text-dim); } .note-body { white-space: pre-wrap; word-break: break-word; font-size: 14px; padding: 4px 0; } .note-composer { margin-top: 10px; } .note-composer summary { list-style: none; cursor: pointer; } .note-composer summary::-webkit-details-marker { display: none; } /* ── Setari: rand cu comutator + densitatea listelor ─────────── */ .switch-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); } .detail-card .switch-row:first-of-type { border-top: none; padding-top: 0; } .switch-row input[type="checkbox"] { width: 44px; height: 26px; flex-shrink: 0; accent-color: var(--blue); } .block { display: block; } /* Densitatea compacta: aceleasi ecrane, mai multe randuri pe un ecran de telefon. Doar spatiere — nu ascunde informatie. */ .density-compact .card-list { gap: 6px; } .density-compact .card { padding: 8px 12px; gap: 4px; } .density-compact .card-sub { font-size: 12.5px; } .density-compact .detail-card { padding: 12px 14px; } .density-compact .avatar { width: 34px; height: 34px; font-size: 13px; } /* ── Activitatea mea: calendar pliabil + panoul zilei ───────── Calendarul se deschide din bandă de săptămână în lună întreagă, tras cu degetul de mâner (sau apăsat). Înălțimile se calculează în JS din cele două variabile de mai jos, deci aici e singurul loc unde se schimbă dimensiunea unei celule. */ :root { --cal-cell: 42px; --cal-gap: 5px; } .cal-card { padding: 12px 12px 4px; } .cal-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; } .cal-month { flex: 1; text-align: center; font-weight: 700; font-size: 15.5px; text-transform: capitalize; } .cal-nav { width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--border); color: var(--text-sec); cursor: pointer; transition: background .15s; } .cal-nav:active { background: var(--surface2); } .cal-nav:disabled { opacity: .3; cursor: default; } .rot90 { display: inline-flex; transform: rotate(90deg); } .rot180 { display: inline-flex; transform: rotate(180deg); } .cal-wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--cal-gap); margin-bottom: 6px; } .cal-wd span { text-align: center; font-size: 10px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; } /* Corpul se strânge la o singură săptămână; grila din interior gliseaza ca săptămâna selectată să rămână vizibilă. */ .cal-body { overflow: hidden; transition: height .32s cubic-bezier(.32,.72,0,1); } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--cal-gap); transition: transform .32s cubic-bezier(.32,.72,0,1); } .cal-body.dragging, .cal-body.dragging .cal-grid { transition: none; } .cal-cell { position: relative; height: var(--cal-cell); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 650; cursor: pointer; background: var(--bg); border: 1.5px solid transparent; color: var(--text-sec); transition: transform .12s ease, background .18s; } .cal-cell:active { transform: scale(.9); } .cal-cell.other { opacity: .28; } .cal-cell.future { opacity: .45; } /* Intensitatea = cât s-a lucrat în ziua respectivă */ .cal-cell.lvl1 { background: color-mix(in srgb, var(--blue) 20%, var(--bg)); color: var(--text); } .cal-cell.lvl2 { background: color-mix(in srgb, var(--blue) 40%, var(--bg)); color: var(--text); } .cal-cell.lvl3 { background: color-mix(in srgb, var(--blue) 62%, var(--bg)); color: #fff; } .cal-cell.lvl4 { background: color-mix(in srgb, var(--blue) 85%, var(--bg)); color: #fff; } .cal-cell.today { border-color: var(--brand); } .cal-cell.sel { border-color: var(--text); } /* Zi începută și neînchisă — exact ce urmărește reminderul de la 18:00 */ .cal-flag { position: absolute; top: 4px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); } .cal-handle { display: block; width: 100%; padding: 9px 0 5px; background: none; border: 0; cursor: grab; touch-action: none; } .cal-handle span { display: block; width: 46px; height: 4px; border-radius: 2px; background: var(--border); margin: 0 auto; transition: background .15s, width .15s; } .cal-handle:active span { background: var(--text-dim); width: 56px; } .cal-legend { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; font-size: 10.5px; color: var(--text-dim); padding: 0 0 8px; } .cal-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; background: var(--bg); } .cal-legend i.lvl2 { background: color-mix(in srgb, var(--blue) 40%, var(--bg)); } .cal-legend i.lvl4 { background: color-mix(in srgb, var(--blue) 85%, var(--bg)); } .cal-legend i.flag { background: var(--orange); border-radius: 50%; } /* ── Panoul zilei (tras de jos) ───────────────────────────── */ .day-sheet-back { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .28s ease; } .day-sheet-back.show { opacity: 1; } .day-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2001; height: 92vh; display: flex; flex-direction: column; background: var(--surface); border-radius: 18px 18px 0 0; box-shadow: 0 -8px 32px rgba(0,0,0,.45); transform: translateY(100%); transition: transform .3s cubic-bezier(.32,.72,0,1); } .day-sheet.dragging { transition: none; } [data-theme="light"] .day-sheet { box-shadow: 0 -8px 32px rgba(30,41,59,.25); } /* Doar mânerul și antetul prind gestul; corpul rămâne liber să deruleze. */ .day-sheet-grab { padding: 10px 0 4px; flex-shrink: 0; cursor: grab; touch-action: none; } .day-sheet-grab span { display: block; width: 46px; height: 4px; border-radius: 2px; background: var(--border); margin: 0 auto; } .day-sheet-head { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 2px 12px 10px 16px; border-bottom: 1px solid var(--border); touch-action: none; } .day-sheet-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px calc(24px + env(safe-area-inset-bottom)); } .day-sheet-stats { margin-bottom: 12px; } /* ── Foaia de jos: antet, corp, „mai multe" ─────────────────── Clasele .rc-* sunt coaja comună a panourilor de jos (intrare marfă, client nou), nu doar a depozitului: antetul cu titlu și buton de închidere, corpul care derulează și secțiunea pliată. Gândite pentru o mână și lumină proastă: ținte mari de apăsat și cifre citibile. */ .rc-body { max-height: 78vh; overflow-y: auto; padding: 0 4px 4px; } .rc-head { display: flex; align-items: center; gap: 10px; padding: 2px 4px 10px; } .rc-head .grow { min-width: 0; } .rc-back { width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--border); color: var(--text-sec); } .rc-title { font-weight: 700; font-size: 16px; display: block; } .rc-sub { color: var(--text-sec); font-size: 12.5px; display: block; } .rc-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 8px; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text); text-align: left; cursor: pointer; } .rc-item:last-child { border-bottom: 0; } .rc-item:active { background: var(--bg); } .rc-item b { display: block; font-weight: 650; } .rc-item span { display: block; color: var(--text-sec); font-size: 12.5px; } /* Comutatorul de unitate: buhte sau metri */ .rc-seg { display: flex; gap: 8px; margin: 12px 0 6px; } .rc-seg button { flex: 1; padding: 13px 8px; border-radius: 12px; font-size: 15px; font-weight: 650; background: var(--bg); border: 1px solid var(--border); color: var(--text-sec); transition: background .15s, color .15s; } .rc-seg button.on { background: var(--blue); border-color: var(--blue); color: #fff; } /* Cantitatea: minus / cifră / plus, toate cât degetul */ .rc-step { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; } .rc-step button { width: 58px; height: 58px; flex-shrink: 0; border-radius: 16px; font-size: 26px; font-weight: 700; line-height: 1; background: var(--surface2); border: 1px solid var(--border); color: var(--text); } .rc-step button:active { background: var(--bg); } .rc-step input { flex: 1; min-width: 0; text-align: center; font-size: 30px; font-weight: 800; padding: 12px 6px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg); color: var(--text); } .rc-calc { text-align: center; font-size: 13.5px; color: var(--text-sec); margin: 6px 0 2px; } .rc-calc b { color: var(--blue); font-size: 15px; } .rc-after { text-align: center; font-size: 12.5px; color: var(--text-dim); margin-bottom: 10px; } .rc-more { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 10px; } .rc-more summary { list-style: none; cursor: pointer; font-size: 13.5px; color: var(--text-sec); display: flex; align-items: center; gap: 8px; padding: 4px 0; } .rc-more summary::-webkit-details-marker { display: none; } /* ── Client nou (foaia de jos) ──────────────────────────────── Formularul urmează regula din migrarea 039: forma juridică e primul câmp fiindcă ea decide ce înseamnă restul, iar indiciile de sub selector spun ce se schimbă. Câmpurile rare (IDNO, IBAN, note) stau pliate — pe teren se scriu numele, telefonul și adresa, restul se completează la birou. */ .cn-hint { color: var(--text-dim); font-size: 12px; margin: 4px 2px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cn-hint:empty { display: none; } .cn-fix { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface2); border: 1px solid var(--border); color: var(--blue); } .cn-strip { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: var(--bg); color: var(--text-dim); font-size: 12.5px; } .cn-strip svg { flex-shrink: 0; } /* Butoanele stau în afara zonei care derulează, nu lipite în interiorul ei: formularul e lung, iar „Adaugă clientul" nu are voie să fie lucrul pe care trebuie să-l cauți prin derulare. Un element `sticky` în interiorul lui .rc-body s-ar opri la marginea zonei de derulare, nu la marginea foii, și lăsa ultimul rând de câmpuri să se vadă mijit pe sub butoane. */ .cn-actions { display: flex; gap: 8px; margin-top: 10px; padding: 10px 4px 0; border-top: 1px solid var(--border); } .cn-actions .btn { flex: 1; margin: 0; } .cn-actions .btn-primary { flex: 1.6; } /* ── Termenii aplicatiei, la prima intrare (migrarea 049) ── Nu e un ecran de rutare, ci o fereastra peste aplicatie: se arata o singura data, ca la instalarea unui program, si nu are unde sa ducem omul inainte de ea. Sta pe , deasupra a tot (z-index peste semnatura si lightbox), si nu se inchide cu un click pe fundal — un acord luat din greseala, printr-o apasare alaturi, nu ar fi un acord. */ .eula-backdrop { position: fixed; inset: 0; z-index: 4000; background: rgba(6, 12, 18, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 18px; opacity: 0; transition: opacity .18s ease; } .eula-backdrop.show { opacity: 1; } .eula-card { width: 100%; max-width: 480px; max-height: min(88vh, 720px); background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0, 0, 0, .45); transform: translateY(10px) scale(.985); transition: transform .22s cubic-bezier(.2, .8, .3, 1); } .eula-backdrop.show .eula-card { transform: none; } .eula-head { padding: 20px 20px 14px; text-align: center; border-bottom: 1px solid var(--border); position: relative; } /* Sageata de intoarcere e absoluta, nu in flux: altfel titlul centrat s-ar deplasa la stanga cand apare, si fereastra ar parea ca sare. */ .eula-back { position: absolute; left: 10px; top: 14px; width: 34px; height: 34px; border-radius: 10px; background: transparent; border: 0; color: var(--text-sec); display: flex; align-items: center; justify-content: center; } .eula-back:active { background: var(--surface2); } .eula-step { margin-top: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); } .eula-mark { width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); } .eula-title { font-size: 17px; font-weight: 650; letter-spacing: -.01em; } .eula-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; } /* Zona care deruleaza. Umbra de sub antet si de deasupra butoanelor spune, fara text, ca mai e ceva mai jos — un text juridic taiat curat la marginea cardului arata ca si cum s-ar fi terminat. */ .eula-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px 18px; font-size: 13.5px; line-height: 1.7; color: var(--text-sec); white-space: pre-wrap; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .eula-body::-webkit-scrollbar { width: 6px; } .eula-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } /* Lista de documente foloseste acelasi corp derulabil: fara text preformatat si fara indentarea textului juridic. */ .eula-body--list { white-space: normal; padding: 8px; } .eula-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 13px 12px; margin-bottom: 6px; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; color: var(--text); text-align: left; } .eula-item:active { background: var(--bg); } .eula-item .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .eula-item-t { font-size: 14px; font-weight: 600; } .eula-item-s { font-size: 12.5px; color: var(--text-sec); } .eula-item-st { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; } .eula-foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: 8px; } .eula-hint { font-size: 12px; color: var(--text-dim); text-align: center; min-height: 16px; } .eula-row { display: flex; gap: 8px; } .eula-row .btn { margin: 0; } .eula-row .btn-primary { flex: 2; } .eula-row .btn-ghost { flex: 1; } .eula-card .btn[disabled] { opacity: .5; pointer-events: none; } /* ── Semnalul ca aplicatia lucreaza (2026-08-23) ────────── Doua straturi, fiindca raspund la doua intrebari diferite: 1) „butonul meu a inregistrat apasarea?" — bara din buton; 2) „aplicatia face ceva acum?" — dunga subtire de sus, pentru actiunile care nu pornesc dintr-un buton anume (sincronizare, cautare de versiune noua). Amandoua sunt INDETERMINATE: nu stim cat dureaza o cerere de retea, iar o bara care se preface ca stie (si sta la 90%) e mai rea decat una care doar spune „inca lucrez". */ .btn.is-busy { position: relative; overflow: hidden; pointer-events: none; /* a doua apasare nu mai are ce declansa */ color: color-mix(in srgb, currentColor 70%, transparent); } .btn.is-busy > * { position: relative; z-index: 1; } /* Dunga care mătură butonul. Pe fundal deschis (btn-primary) e o urma alba, pe butoanele conturate e culoarea de accent — de aceea `currentColor`. */ .btn.is-busy::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: currentColor; opacity: .9; transform-origin: left center; animation: btn-busy-sweep 1.1s cubic-bezier(.4, 0, .2, 1) infinite; } @keyframes btn-busy-sweep { 0% { transform: translateX(-100%) scaleX(.35); } 55% { transform: translateX(35%) scaleX(.65); } 100% { transform: translateX(100%) scaleX(.35); } } .btn.is-busy .btn-dots::after { content: ''; animation: btn-dots 1.2s steps(4, end) infinite; } @keyframes btn-dots { 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} } /* Dunga de sus. `pointer-events:none` — trece peste continut, nu il blocheaza. */ #app-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 5000; pointer-events: none; opacity: 0; transition: opacity .18s ease; background: color-mix(in srgb, var(--blue) 22%, transparent); } #app-progress.show { opacity: 1; } #app-progress::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--blue), transparent); animation: app-progress-slide 1.15s ease-in-out infinite; } @keyframes app-progress-slide { 0% { transform: translateX(-60%) scaleX(.5); } 100% { transform: translateX(160%) scaleX(.5); } } /* Bannerul de versiune noua: cat se instaleaza, arata ca se intampla ceva. Instalarea unui service worker dureaza secunde bune pe telefon, iar pana acum butonul ramanea neschimbat — omul apasa a doua oara, crezand ca n-a mers. */ #update-bar .upd-progress { height: 3px; border-radius: 2px; margin-top: 8px; overflow: hidden; background: rgba(255, 255, 255, .25); display: none; } #update-bar.busy .upd-progress { display: block; } #update-bar .upd-progress i { display: block; height: 100%; width: 40%; border-radius: 2px; background: #fff; animation: app-progress-slide 1.15s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .btn.is-busy::after, #app-progress::after, #update-bar .upd-progress i, .btn.is-busy .btn-dots::after { animation: none; } .btn.is-busy::after { transform: none; opacity: .5; } } /* ── Categorii de clienți ───────────────────────────────────── Lista de clienți era un șir alfabetic în care un liceu se căuta printre SRL-uri. Categoria vine din forma juridică (migrarea 039), nu dintr-un câmp nou, iar culoarea o poartă chiar bulina cu inițiale: cine derulează recunoaște rândul înainte să-i citească numele. Trei culori, nu douăsprezece — pe teren contează cine semnează, nu litera de pe act. */ .cat-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 16px 10px; margin: 0; } .cat-chips::-webkit-scrollbar { display: none; } /* Dimensiunile sunt masurate, nu alese: la 390px (latimea unui telefon obisnuit) cele patru pastile intra fix pe un rand. Mai mari, „Persoane" ramanea taiata la margine si parea ca lista are trei categorii. */ .cat-chip { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 8px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--surface); border: 1px solid var(--border); color: var(--text-sec); cursor: pointer; transition: background .15s, color .15s, border-color .15s; } /* Numaratoarea e text, nu o a doua pastila in pastila: la patru categorii, ramele duble mancau exact latimea din care „Persoane" nu mai incapea. */ .cat-chip b { font-size: 12px; font-weight: 700; color: var(--text-dim); } .cat-chip.on { background: var(--surface2); color: var(--text); border-color: var(--text-dim); } .cat-chip.on b { color: inherit; opacity: .75; } /* Pastila aprinsă poartă culoarea categoriei ei, nu un albastru unic: altfel „ce filtru e pornit" s-ar citi doar din text, iar bulinele din listă ar folosi un limbaj de culori pe care bara de sus nu-l vorbește. */ .cat-chip.on.cat-pub { border-color: var(--green); color: var(--green); } .cat-chip.on.cat-biz { border-color: var(--purple); color: var(--purple); } .cat-chip.on.cat-pf { border-color: var(--blue); color: var(--blue); } .cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text-dim); } .cat-dot.cat-pub { background: var(--green); } .cat-dot.cat-biz { background: var(--purple); } .cat-dot.cat-pf { background: var(--blue); } /* Eticheta scurtă de pe card: forma juridică exactă („LT", „SRL") când se știe. E un cuvânt, nu un badge plin — pe un card care are deja adresă, contact și numărul de tichete, încă o pată de culoare ar fi zgomot. */ .cat-tag { font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; margin-right: 6px; background: var(--surface2); color: var(--text-dim); } .cat-tag.cat-pub { color: var(--green); } .cat-tag.cat-biz { color: var(--purple); } .cat-tag.cat-pf { color: var(--blue); } .avatar.cat-pub { background: linear-gradient(135deg, var(--green), #15803D); } .avatar.cat-biz { background: linear-gradient(135deg, var(--purple), #6D28D9); } .avatar.cat-pf { background: linear-gradient(135deg, var(--blue), #1D4ED8); } .avatar.cat-none { background: var(--surface2); color: var(--text-dim); } /* Antetul de grup din listă. Rămâne lipit sus cât ține grupul: pe un ecran de telefon intră patru carduri, deci fără el nu se mai știe, după două degete de derulare, în ce categorie ești. */ .grp-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; padding: 6px 4px; font-size: 12.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-dim); background: var(--bg); } .grp-head b { font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--surface2); color: var(--text-sec); text-transform: none; } /* ── Alegerea clientului pe formularul de tichet ────────────── Un