/* ===== Tichete — completari peste Bootstrap 5 ===== */ /* Font unic in toata aplicatia: Inter (variable font, gazduit local — CSP nu permite fonturi externe). */ @font-face { font-family: 'Inter'; src: url('/assets/fonts/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/assets/fonts/InterVariable-Italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; } /* * Variabilele temei. Valorile din :root sunt tema implicita (Indigo, day mode); * celelalte teme le suprascriu in themes.css prin clase pe (theme-*). */ :root { --brand: #4f46e5; --brand-strong: #4338ca; --brand-rgb: 79, 70, 229; --brand-soft: #eef2ff; --brand-text: #4f46e5; --navbar-bg: #4338ca; --surface-1: #fff; --surface-2: #fafafe; --surface-3: #f3f4fb; --surface-hover: #f7f8fd; --header-bg: #f8f8fd; --border-soft: #eceefa; --border-softer: #eef0f8; --border-strong: #e6e8f5; --card-border: rgba(15, 23, 42, .06); --card-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 20px rgba(15, 23, 42, .06); --card-shadow-hover: 0 4px 8px rgba(15, 23, 42, .06), 0 12px 28px rgba(15, 23, 42, .1); --text-heading: #363a5c; --text-soft: #6366a3; --text-soft-2: #4b4f7a; --accent-teal: #0891b2; --accent-amber: #d97706; --accent-rose: #e11d48; --bs-primary: var(--brand); --bs-primary-rgb: var(--brand-rgb); --bs-body-bg: #fff; --bs-border-radius: .75rem; --bs-border-radius-sm: .55rem; --bs-border-radius-lg: 1rem; } body { background: var(--bs-body-bg); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; } /* Paginile aplicatiei: continut limitat la 1900px (nativ pe Full HD), centrat pe ecrane mai late, iar footerul sta lipit de partea de jos a ecranului si pe paginile cu putin continut. */ .app-body { display: flex; flex-direction: column; min-height: 100vh; } .app-body main { flex: 1 0 auto; } .app-navbar > .container-fluid, .app-body main > .container-fluid, .app-footer > .container-fluid { max-width: 1900px; margin-inline: auto; } .app-footer { background: var(--header-bg); border-top: 1px solid var(--border-soft); padding: .8rem 0; font-size: .8rem; color: var(--text-soft-2); } h1, h2, h3, .fw-semibold-heading { letter-spacing: -.01em; } .btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-strong); --bs-btn-hover-border-color: var(--brand-strong); --bs-btn-active-bg: var(--brand-strong); --bs-btn-active-border-color: var(--brand-strong); --bs-btn-focus-shadow-rgb: var(--brand-rgb); box-shadow: 0 2px 6px rgba(var(--brand-rgb), .25); } .btn-primary:hover { box-shadow: 0 4px 10px rgba(var(--brand-rgb), .3); } .btn-outline-primary { --bs-btn-color: var(--brand-text); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-active-bg: var(--brand); --bs-btn-active-border-color: var(--brand); --bs-btn-focus-shadow-rgb: var(--brand-rgb); } .form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .15); } .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); } .link-brand { color: var(--brand-text); text-decoration: none; font-weight: 500; } .link-brand:hover { text-decoration: underline; } /* Componentele Bootstrap cu fundal propriu folosesc suprafata temei (alb pe day, gri inchis pe night). */ .dropdown-menu { --bs-dropdown-bg: var(--surface-1); --bs-dropdown-link-hover-bg: var(--surface-hover); } .modal { --bs-modal-bg: var(--surface-1); } .popover { --bs-popover-bg: var(--surface-1); } /* Paginare: culorile temei (nu albastrul implicit Bootstrap) + stil pastila, modern. */ .pagination { --bs-pagination-color: var(--text-soft-2); --bs-pagination-bg: var(--surface-1); --bs-pagination-border-color: var(--border-soft); --bs-pagination-hover-color: var(--brand-text); --bs-pagination-hover-bg: var(--surface-hover); --bs-pagination-hover-border-color: var(--border-soft); --bs-pagination-focus-color: var(--brand-text); --bs-pagination-focus-bg: var(--surface-hover); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .2); --bs-pagination-active-color: #fff; --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); --bs-pagination-disabled-color: var(--text-soft); --bs-pagination-disabled-bg: var(--surface-2); --bs-pagination-disabled-border-color: var(--border-soft); gap: .2rem; } .pagination .page-link { border-radius: .5rem !important; min-width: 2.15rem; text-align: center; font-weight: 500; } .pagination .page-item.active .page-link { box-shadow: 0 1px 3px rgba(var(--brand-rgb), .35); } .app-pagination .pagination-jump-input { width: 4.5rem; } /* Modal mai lat decat modal-xl (1140px), pt. formulare incarcate (ex. intrari magazie din document). */ .modal-2xl { --bs-modal-width: 1400px; } /* Overlay-ul modalelor: efect de geam mat (blur + tenta intunecata). Transparenta e configurabila per user (Contul meu -> Aspect), 0-100%, prin variabila --overlay-transparency pusa pe din layout.php. La 100% tenta si blur-ul ajung la 0, deci overlay-ul nu se mai vede deloc. */ .modal-backdrop { --bs-backdrop-opacity: 1; --overlay-t: var(--overlay-transparency, 55); background: rgba(15, 23, 42, calc((100 - var(--overlay-t)) / 100)); backdrop-filter: blur(calc((100 - var(--overlay-t)) * .15px)); -webkit-backdrop-filter: blur(calc((100 - var(--overlay-t)) * .15px)); transition: opacity .18s ease; } /* Cat timp modalul este tras cu mouse-ul, overlay-ul dispare ca sa se vada pagina. */ .modal-backdrop.drag-hidden { opacity: 0; } /* Panoul de filtre (toate paginile cu tabele filtrabile): slide-in din dreapta, nu card colapsabil in flux. Latime fixa, ingusta pe desktop (nu are rost sa ocupe jumatate de ecran pe monitoare late); pe mobil portret, unde 400px ar acoperi aproape tot ecranul oricum, trece la latime procentuala. */ .filters-offcanvas { --bs-offcanvas-width: 500px; } @media (max-width: 576px) { .filters-offcanvas { --bs-offcanvas-width: 88vw; } } /* Panoul de comutare a proiectului curent, deschis din logo-ul din navbar: randuri aerisite (nu carduri), separate prin linie subtire, cu un inel (conic-gradient, fara JS/canvas) care arata procentul de tichete deschise — acelasi limbaj vizual ca graficul donut de pe pagina de proiect, dar usor de randat pe orice pagina. */ .project-switch-offcanvas { --bs-offcanvas-width: 400px; } @media (max-width: 576px) { .project-switch-offcanvas { --bs-offcanvas-width: 88vw; } } .project-switch-list { display: flex; flex-direction: column; } .project-switch-row { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--border-soft); transition: background-color .12s ease; } .project-switch-row:last-child { border-bottom: 0; } .project-switch-row:hover { background: var(--surface-hover); } .project-switch-row-active { background: color-mix(in srgb, var(--brand) 7%, transparent); } .project-switch-ring { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--brand) calc(var(--pct) * 1%), var(--surface-3) 0); } .project-switch-ring-hole { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-1); display: flex; align-items: center; justify-content: center; font-size: .64rem; font-weight: 700; color: var(--text-body); } .project-switch-form { display: contents; } .project-switch-action { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-soft); background: var(--surface-1); color: var(--text-body); text-decoration: none; transition: background-color .12s ease, color .12s ease, border-color .12s ease; } .project-switch-action:hover { background: var(--brand); border-color: var(--brand); color: #fff; } .project-switch-action-current { color: #16a34a; border-color: color-mix(in srgb, #16a34a 40%, var(--border-soft)); } .project-switch-action-current:hover { background: #16a34a; border-color: #16a34a; color: #fff; } .offcanvas { --bs-offcanvas-bg: var(--surface-1); } .offcanvas-backdrop { --bs-backdrop-opacity: 1; --overlay-t: var(--overlay-transparency, 55); background: rgba(15, 23, 42, calc((100 - var(--overlay-t)) / 100)); backdrop-filter: blur(calc((100 - var(--overlay-t)) * .15px)); -webkit-backdrop-filter: blur(calc((100 - var(--overlay-t)) * .15px)); } /* Modalele se pot repozitiona pe desktop tragand de header. */ @media (hover: hover) and (pointer: fine) { .modal-header { cursor: move; user-select: none; } } .modal-dialog.modal-dragging { transition: none; } .modal-dialog.modal-dragging .modal-content { box-shadow: 0 18px 50px rgba(0, 0, 0, .35); } /* ===== Navbar orizontal ===== */ .app-navbar { background: var(--navbar-bg); box-shadow: 0 2px 10px rgba(0, 0, 0, .18); } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: .55rem; background: rgba(255, 255, 255, .18); color: #fff; font-weight: 800; font-size: 15px; flex-shrink: 0; } .navbar-brand.btn { text-decoration: none; max-width: 220px; } .navbar-brand.btn:hover .brand-project { color: #fff; } .brand-title { color: #fff; font-weight: 700; font-size: .92rem; } .brand-project { color: rgba(255, 255, 255, .65); font-weight: 300; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; max-width: 100%; } .top-link { color: rgba(255, 255, 255, .78) !important; font-size: .92rem; font-weight: 500; border-radius: .5rem; padding: .5rem .85rem !important; margin: 0 .1rem; transition: background .15s ease, color .15s ease; } .top-link i { font-size: .95rem; margin-right: .15rem; } .top-link:hover { color: #fff !important; background: rgba(255, 255, 255, .12); } .top-link.active { color: #fff !important; background: rgba(255, 255, 255, .2); font-weight: 600; } .top-link.disabled { opacity: .5; cursor: not-allowed; } .top-link.disabled:hover { background: transparent; } .navbar-nav .avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .2); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; } .navbar-nav .dropdown-toggle { color: rgba(255, 255, 255, .9) !important; } .navbar-nav .dropdown-toggle::after { color: rgba(255, 255, 255, .6); } .navbar-toggler { border-color: rgba(255, 255, 255, .3); } .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25); } /* ===== Carduri ===== */ .card { --bs-card-bg: var(--surface-1); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); } .card-header { background: var(--header-bg); border-bottom: 1px solid var(--border-soft); padding: .7rem 1.25rem; } .card-header h2 { color: var(--text-heading); } .card-footer { background: var(--header-bg); border-top: 1px solid var(--border-soft); padding: .7rem 1.25rem; } .card.shadow-sm { box-shadow: var(--card-shadow) !important; } .stat-card { border-left: 4px solid var(--brand); } .stat-icon { width: 44px; height: 44px; border-radius: .65rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; background: var(--brand-soft); color: var(--brand-text); } .stat-card-amber { border-left-color: #d97706; } .stat-card-amber .stat-icon { background: color-mix(in srgb, #d97706 12%, var(--surface-1)); color: #d97706; } .stat-card-success { border-left-color: #16a34a; } .stat-card-success .stat-icon { background: color-mix(in srgb, #16a34a 12%, var(--surface-1)); color: #16a34a; } .stat-card-teal { border-left-color: #0891b2; } .stat-card-teal .stat-icon { background: color-mix(in srgb, #0891b2 12%, var(--surface-1)); color: #0891b2; } .stat-card-rose { border-left-color: #e11d48; } .stat-icon-rose { background: color-mix(in srgb, #e11d48 12%, var(--surface-1)); color: #e11d48; } .stat-value { font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em; } .project-card { text-decoration: none; color: inherit; transition: box-shadow .15s ease, transform .1s ease; overflow: hidden; } .project-card:hover { box-shadow: var(--card-shadow-hover) !important; transform: translateY(-2px); color: inherit; } /* Reseteaza stilul implicit de