/* ============================================================================= DESIGN TOKENS & COMPONENTE — starter reutilizabil Fundația vizuală (navy enterprise). Include-l DUPĂ Bootstrap 5. Vezi LAYOUT_SYSTEM.md pentru descrierea completă. Re-branduiește schimbând doar variabilele din :root. ============================================================================= */ :root { /* ---- Brand ---- */ --c-primary: #134a6d; /* navy — butoane, header modale, accente, activ, focus */ --c-primary-hover: #0f3d5c; /* alternativ: filter: brightness(1.12) */ --c-primary-dark: #0f1b34; /* header email, titluri foarte închise */ --c-primary-soft: #eef2fb; /* fundal chip/pill info */ /* ---- Text ---- */ --c-heading: #1f2a44; --c-body: #455066; --c-label: #54607a; /* label câmp (uppercase) */ --c-muted: #6b7280; --c-muted-2: #8a94a6; --c-muted-3: #9aa3b2; /* ---- Suprafețe & borduri ---- */ --c-surface: #ffffff; /* card / conținut */ --c-surface-alt: #f4f7fa; /* fundal modal, section-head */ --c-surface-alt-2: #f8fafc; --c-page-bg: #eceff5; --c-border: #e7ebf3; /* border card */ --c-border-2: #e6ebf2; /* border secțiune / input */ --c-divider: #eef1f7; --c-row-line: #f3f5f9; /* linii rânduri tabel */ /* ---- Stări ---- */ --c-ok-fg: #1e7d43; --c-ok-bg: #e7f6ec; --c-warn-fg: #b76e00; --c-warn-bg: #fff4e5; --c-err-fg: #dc3545; --c-err-bg: #fdecec; --c-info-fg: #134a6d; --c-info-bg: #eef2fb; --c-off-fg: #8a94a6; --c-off-bg: #f1f2f5; /* ---- Antet de entitate (navy, aceeasi familie ca bara aplicatiei) ---- */ --hero-bg: linear-gradient(115deg, #143a5c 0%, #0f2b47 46%, #0b2038 100%); --hero-glow: radial-gradient(120% 150% at 8% -30%, rgba(76,159,224,.20) 0%, rgba(76,159,224,0) 55%); --hero-fg: #f2f7fb; --hero-muted: #9fb0c2; --hero-muted-2: rgba(255,255,255,.45); --hero-line: rgba(255,255,255,.12); --hero-accent: #6cb4ee; /* ---- Sidebar (navy profund) ---- */ --sb-gradient: linear-gradient(180deg, #113254 0%, #0b2038 55%, #081726 100%); --sb-accent: #4c9fe0; --sb-text: #9fb0c2; --sb-text-strong:#f2f7fb; --sb-heading: #64788c; --sb-hover-bg: rgba(255,255,255,0.05); --sb-active-bg: rgba(76,159,224,0.14); --sb-border: rgba(255,255,255,0.06); /* ---- Tooltip dark ---- */ --tip-bg: #1f2937; --tip-fg: #e5e7eb; --tip-title: #ffffff; --tip-sub: #93c5fd; --tip-muted: #9ca3af; /* ---- Tipografie ---- */ --font-sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; /* ---- Radii ---- */ --r-btn: 8px; --r-card: 12px; --r-section: 12px; --r-badge: 7px; --r-modal: 16px; --r-pill: 999px; --r-tip: 10px; /* ---- Umbre ---- */ --sh-card: 0 1px 2px rgba(16,24,40,.04); --sh-modal: 0 28px 80px rgba(8,20,35,.30); --sh-sidebar:6px 0 24px rgba(5,16,28,.32); --sh-tip: 0 12px 34px rgba(0,0,0,.32); /* ---- Focus ring ---- */ --focus-ring: 0 0 0 .18rem rgba(19,74,109,.12); } /* ============================================================================= PAGE HEADER (eyebrow → titlu → subtitlu) ============================================================================= */ .page-header { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem; } .page-eyebrow { display:inline-block; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--c-primary); font-weight:700; margin-bottom:.15rem; } .page-title { font-size:1.5rem; font-weight:700; margin:0; color:var(--c-heading); } .page-subtitle { margin:.25rem 0 0; color:var(--c-muted); font-size:.85rem; max-width:640px; } .page-header--compact { margin-bottom:.7rem; } .page-header--compact .page-title { font-size:1.2rem; } /* ============================================================================= CARD ============================================================================= */ .card-e { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-card); box-shadow:var(--sh-card); overflow:hidden; margin-bottom:1rem; } /* Card care contine un meniu derulant. `overflow:hidden` (necesar ca sa taie colturile tabelelor) RETEAZA meniul cand acesta depaseste cardul — se vad doar primele optiuni. Foloseste varianta asta pe orice card cu `.dropdown-menu` inauntru. */ .card-e--menu { overflow:visible; } /* Meniul mostenit de la Bootstrap 4 (basic.min.css) vine cu font-size:1rem si colturi de .25rem — le aducem la scara restului interfetei. */ .card-e--menu .dropdown-menu { font-size:.85rem; border-color:var(--c-border); border-radius:var(--r-btn); box-shadow:0 8px 24px rgba(15,27,52,.12); padding:.3rem; } .card-e--menu .dropdown-item { border-radius:6px; padding:.4rem .6rem; color:var(--c-body); } .card-e--menu .dropdown-item:hover, .card-e--menu .dropdown-item:focus { background:var(--c-surface-alt); color:var(--c-heading); } .card-e--menu .dropdown-item i { color:var(--c-muted-2); width:1rem; text-align:center; } .card-e__head { padding:.9rem 1.1rem; border-bottom:1px solid var(--c-divider); display:flex; justify-content:space-between; align-items:center; gap:.5rem; } .card-e__title { margin:0; font-size:1rem; font-weight:600; color:var(--c-heading); display:flex; align-items:center; gap:.5rem; } /* Subtitlu opțional sub titlul unui card — explică ce arată tabelul/graficul. */ .card-e__sub { margin:.15rem 0 0; font-size:.74rem; color:var(--c-muted-3); font-weight:400; } .card-e__body { padding:1rem 1.1rem; } .card-e__hint { font-size:.72rem; color:var(--c-muted-3); text-align:right; } /* ----------------------------------------------------------------------------- .card-e--table — card cu un tabel DataTables „full-bleed" (fără .card-e__body). Tabelul atinge marginile cardului, iar controalele DataTables (length / info / paginare) primesc padding și un separator. Tabelul NU se învelește în `.table-responsive`: DataTables își creează wrapper-ul în jurul lui, deci controalele ar ajunge în containerul cu scroll orizontal. Scroll-ul stă pe rândul tabelului din wrapper (`> .row:nth-child(2)`), potrivit `dom`-ului din integrarea Bootstrap 5 a DataTables: <'row'…l…f…><'row'…tr…><'row'…i…p…> ----------------------------------------------------------------------------- */ .card-e--table > .dataTables_wrapper > .row { margin:0; } .card-e--table > .dataTables_wrapper > .row > [class^="col-"] { padding-left:0; padding-right:0; } .card-e--table > .dataTables_wrapper > .row:first-child, .card-e--table > .dataTables_wrapper > .row:last-child { padding:.65rem 1.1rem; } .card-e--table > .dataTables_wrapper > .row:first-child { border-bottom:1px solid var(--c-divider); } .card-e--table > .dataTables_wrapper > .row:last-child { border-top:1px solid var(--c-divider); } .card-e--table > .dataTables_wrapper > .row:nth-child(2) > [class^="col-"] { overflow-x:auto; } .card-e--table > .dataTables_wrapper .dataTables_paginate { margin:0; } /* Cardul are deja `overflow:hidden`; tabelul nu trebuie să adauge margine dedesubt. */ .card-e--table table.table { margin-bottom:0; } /* ============================================================================= TABEL ============================================================================= */ .table-e { width:100%; border-collapse:collapse; } .table-e thead th { font-size:.72rem; letter-spacing:.03em; text-transform:uppercase; color:var(--c-muted); border-bottom:2px solid var(--c-divider); padding:.4rem .5rem; text-align:left; } .table-e tbody td { padding:.5rem; border-bottom:1px solid var(--c-row-line); vertical-align:middle; color:var(--c-body); } .table-e .num { text-align:right; } .table-e .code { font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:.04em; color:var(--c-label); } /* ----------------------------------------------------------------------------- .tbl-e — tabel enterprise pentru listele DataTables din `.card-e--table`. Se pune PE LÂNGĂ `.table` (Bootstrap), a cărei stilizare de bază o păstrăm. Antet tentat, fără zebră, linii de rând discrete, prima/ultima coloană aliniate cu marginea cardului. Fără `position: sticky` pe antet: body-ul are `layout-navbar-fixed`, iar un antet lipit de top:0 ar aluneca sub navbar. ----------------------------------------------------------------------------- */ .tbl-e { border-collapse:separate; border-spacing:0; } .tbl-e thead th { background:var(--c-surface-alt); text-transform:uppercase; letter-spacing:.04em; font-size:.68rem; font-weight:700; color:var(--c-muted); border-bottom:1px solid var(--c-divider); border-top:none; text-align:left; padding:.6rem .55rem; white-space:nowrap; vertical-align:middle; } .tbl-e tbody td { border-top:none; border-bottom:1px solid var(--c-row-line); vertical-align:middle; color:var(--c-body); font-size:.82rem; padding:.6rem .55rem; } .tbl-e thead th:first-child, .tbl-e tbody td:first-child { padding-left:1.1rem; } .tbl-e thead th:last-child, .tbl-e tbody td:last-child { padding-right:1.1rem; } .tbl-e tbody tr:last-child td { border-bottom:none; } .tbl-e tbody tr:hover td, .tbl-e tbody tr.highlight td { background-color:var(--c-surface-alt) !important; } /* Rândul „tabelul e gol" nu e un rând de date: fără cursor de click, cu aer în jur. */ .tbl-e tbody td.dataTables_empty { cursor:default; padding:1.25rem 1.1rem; } /* `--click`: rândul întreg deschide fișa entității (handler în JS-ul paginii). */ .tbl-e--click tbody tr { cursor:pointer; } .tbl-e--click tbody tr.highlight .act-btn { border-color:var(--c-border); } .act { cursor:pointer; color:var(--c-muted); padding:.15rem .35rem; } button.act { background:none; border:0; line-height:1; } /* Icon-buton de acțiune în tabele/liste — contur discret, accent la hover */ .act-btn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border:1px solid var(--c-border-2); border-radius:8px; background:var(--c-surface); color:var(--c-muted-2); font-size:.78rem; line-height:1; cursor:pointer; text-decoration:none; transition:border-color .12s, color .12s, background .12s; } .act-btn:hover, .act-btn:focus-visible { border-color:var(--c-primary); color:var(--c-primary); background:var(--c-primary-soft); } .act-btn--del:hover, .act-btn--del:focus-visible { border-color:var(--c-err-fg); color:var(--c-err-fg); background:var(--c-err-bg); } .act:hover { color:var(--c-primary); } .act--del:hover { color:var(--c-err-fg); } /* ============================================================================= CELULE DE TABEL (index în chip, nume + subtitlu, contact, gol) ============================================================================= */ /* Celule enterprise: index în chip, nume + localizare, contact cu iconiță */ .tbl-index { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px; background:var(--c-surface-alt); border:1px solid var(--c-border-2); color:var(--c-muted-2); font-size:.68rem; font-weight:700; } .tbl-cell { display:flex; flex-direction:column; gap:.15rem; min-width:0; } .tbl-cell__name { font-size:.84rem; font-weight:700; color:var(--c-heading); text-decoration:none; word-break:break-word; } .tbl-cell__name:hover { color:var(--c-primary); text-decoration:underline; } .tbl-cell__sub { display:inline-flex; align-items:center; gap:.3rem; font-size:.7rem; color:var(--c-muted-2); } /* Varianta stinsa: context, nu identitate — nu concureaza cu numele randului. */ .tbl-cell__sub--soft { color:var(--c-muted-3); font-variant-numeric:tabular-nums; } /* Valori tehnice aliniate pe coloană (IP, coduri) — cifre tabulare, ca să nu „danseze". */ .tbl-cell__mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:.78rem; letter-spacing:.02em; color:var(--c-label); } .tbl-contact { display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--c-body); } .tbl-contact i, .tbl-cell__sub i { color:var(--c-muted-3); font-size:.72rem; } /* Când sub-linia sau contactul e un link (mailto:/tel:), păstrează tonul celulei — altfel Bootstrap îl colorează albastru și rândul devine pestriț. */ a.tbl-contact, a.tbl-cell__sub { color:inherit; text-decoration:none; } a.tbl-contact:hover, a.tbl-cell__sub:hover { color:var(--c-primary); text-decoration:underline; } .tbl-empty { color:var(--c-muted-3); font-size:.8rem; } /* ============================================================================= BUTOANE ============================================================================= */ .btn-e { display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:600; line-height:1.2; padding:.45rem .9rem; border-radius:var(--r-btn); border:1px solid transparent; cursor:pointer; text-decoration:none; } .btn-e--primary { background:var(--c-primary); border-color:var(--c-primary); color:#fff; } .btn-e--primary:hover, .btn-e--primary:focus { filter:brightness(1.12); color:#fff; } .btn-e--xs { font-size:.74rem; padding:.3rem .6rem; } .btn-e--ghost { background:transparent; border-color:var(--c-border-2); color:var(--c-label); } .btn-e--ghost:hover { border-color:var(--c-primary); color:var(--c-primary); } /* ============================================================================= PILL / STATUS ============================================================================= */ .pill { display:inline-block; font-size:.68rem; padding:.15rem .55rem; border-radius:var(--r-pill); font-weight:600; } /* Grup de butoane-acțiune într-o celulă de tabel */ .tbl-actions { display:flex; align-items:center; justify-content:center; gap:.25rem; } .pill--ok { background:var(--c-ok-bg); color:var(--c-ok-fg); } .pill--warn { background:var(--c-warn-bg); color:var(--c-warn-fg); } .pill--err { background:var(--c-err-bg); color:var(--c-err-fg); } .pill--info { background:var(--c-info-bg); color:var(--c-info-fg); } .pill--off { background:var(--c-off-bg); color:var(--c-off-fg); } /* ============================================================================= ROLE CHIP (dot colorat + etichetă rol) — folosit în liste & antete ============================================================================= */ .role-chip { display:inline-flex; align-items:center; gap:.42rem; font-size:.72rem; font-weight:600; color:var(--c-heading); background:var(--c-surface-alt); border:1px solid var(--c-border-2); padding:.2rem .55rem; border-radius:var(--r-pill); line-height:1.3; white-space:nowrap; } .role-chip__dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 0 2px rgba(0,0,0,.03) inset; } /* ============================================================================= META LIST (dt/dd — sumar cont, detalii) ============================================================================= */ .meta-list { margin:0; } .meta-list__row { display:grid; grid-template-columns:130px 1fr; gap:.5rem 1rem; align-items:center; padding:.5rem 0; border-bottom:1px solid var(--c-divider); } .meta-list__row:last-child { border-bottom:none; } .meta-list dt { font-size:.72rem; font-weight:600; color:var(--c-label); text-transform:uppercase; letter-spacing:.02em; margin:0; } .meta-list dd { margin:0; font-size:.88rem; color:var(--c-heading); word-break:break-word; } .meta-list--2col { display:grid; grid-template-columns:1fr 1fr; gap:0 1.75rem; } @media (max-width:768px){ .meta-list--2col { grid-template-columns:1fr; } } /* ============================================================================= BANDĂ DE STATISTICI — rând de fapte-cheie sub antetul unei entități ============================================================================= */ .stat-band { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:.75rem; margin-bottom:1.25rem; } .stat-e { display:flex; align-items:flex-start; gap:.7rem; padding:.85rem 1rem; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-card); box-shadow:var(--sh-card); min-width:0; } .stat-e__ic { width:34px; height:34px; flex:0 0 auto; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:.85rem; background:var(--c-surface-alt); border:1px solid var(--c-border-2); color:var(--c-muted-2); } .stat-e--accent .stat-e__ic { background:var(--c-primary-soft); border-color:transparent; color:var(--c-primary); } .stat-e__body { display:flex; flex-direction:column; min-width:0; gap:.1rem; } .stat-e__label { font-size:.64rem; text-transform:uppercase; letter-spacing:.04em; color:var(--c-muted-2); font-weight:700; } .stat-e__value { font-size:.9rem; font-weight:700; color:var(--c-heading); word-break:break-word; } .stat-e__value a { color:var(--c-heading); text-decoration:none; } .stat-e__value a:hover { color:var(--c-primary); text-decoration:underline; } .stat-e__value.is-empty { color:var(--c-muted-3); font-weight:400; } .stat-e--accent .stat-e__value { font-size:1.05rem; color:var(--c-primary); } .stat-e__sub { display:inline-flex; align-items:center; gap:.3rem; font-size:.7rem; color:var(--c-muted-2); } .stat-e__sub i { color:var(--c-muted-3); font-size:.68rem; } /* ============================================================================= ANTET DE SUBSECȚIUNE — fără card/chenar; titlu la stânga, acțiuni la dreapta. Folosit în tab-urile paginilor de detaliu (client, firmă etc.). ============================================================================= */ .details-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem 1.5rem; flex-wrap:wrap; margin-bottom:1.1rem; } .details-head__txt { min-width:0; } .details-head__eyebrow { display:block; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--c-primary); } .details-head__title { margin:.15rem 0 0; font-size:1.15rem; font-weight:700; color:var(--c-heading); line-height:1.25; } .details-head__sub { margin:.2rem 0 0; font-size:.76rem; color:var(--c-muted-3); } .details-head__actions { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; } /* Perechea de jos a lui .details-head: bara de acțiuni la finalul unui formular lung, unde butonul de salvare e mai la îndemână decât în antet. Spre deosebire de `.wp-details-foot` (cuplat la marginile lui `.wp-details-frame`), aceasta nu iese din container, deci se poate folosi în orice secțiune. */ .details-foot { display:flex; align-items:center; justify-content:flex-end; gap:.55rem; flex-wrap:wrap; margin-top:1.1rem; padding-top:.9rem; border-top:1px solid var(--c-divider); } /* ============================================================================= Calendarul unui punct de lucru: frecventa contractata (chip-uri luna + saptamani) si ultimele programari. Randat de `_renderWorkPointCalendar()` din main.js, folosit in sumarul „De programat" si in modalul de solicitare noua. ============================================================================= */ .wp-cal { display:flex; flex-direction:column; gap:9px; } .wp-cal__section { display:flex; align-items:center; gap:7px; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--c-label); } .wp-cal__section > i { color:var(--c-primary); } .wp-cal__freq { display:flex; flex-wrap:wrap; gap:5px; } .wp-cal__chip { font-size:.72rem; padding:.16rem .5rem; border-radius:var(--r-badge); background:var(--c-surface-alt-2); color:var(--c-body); border:1px solid var(--c-border-2); white-space:nowrap; } .wp-cal__chip b { color:var(--c-heading); } .wp-cal__chip.is-current { background:var(--c-primary-soft); border-color:var(--c-primary); } .wp-cal__chip.is-current b { color:var(--c-primary); } .wp-cal__appts { display:flex; flex-direction:column; gap:4px; } .wp-cal__appt { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.79rem; padding:.2rem .45rem; border-radius:var(--r-badge); } .wp-cal__date { color:var(--c-heading); } /* programarea interventiei curente, ca sa nu fie confundata cu istoricul punctului de lucru */ .wp-cal__appt.is-current { background:var(--c-surface-alt-2); } .wp-cal__appt.is-current .wp-cal__date { font-weight:700; } .wp-cal__empty { font-size:.75rem; color:var(--c-muted); font-style:italic; } /* containerul e gol cat se incarca; fara inaltime minima waitMe nu are pe ce sa se aseze */ .wp-cal--loading { min-height:64px; } /* varianta orizontala (modalul de solicitare noua): cele doua sectiuni una langa alta */ .wp-cal--split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:9px 18px; align-items:start; } @media (max-width:767.98px){ .wp-cal--split { grid-template-columns:1fr; } } @media (max-width:575px){ .details-head__actions { width:100%; } .details-head__actions .btn-e, .details-head__actions .btn { flex:1 1 auto; justify-content:center; } } /* ============================================================================= NOTIFICĂRI (toast) — succes / eroare / atenționare / informare Stivă fixă în dreapta-sus, peste modale (z-index > 1055). ============================================================================= */ .toast-e-stack { position:fixed; top:1rem; right:1rem; z-index:1090; display:flex; flex-direction:column; gap:.6rem; width:min(390px, calc(100vw - 2rem)); pointer-events:none; } .toast-e { --toast-accent:var(--c-muted-2); --toast-soft:var(--c-surface-alt); pointer-events:auto; position:relative; display:flex; align-items:flex-start; gap:.7rem; padding:.8rem .75rem .8rem 1.1rem; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-card); box-shadow:0 10px 30px rgba(15,27,52,.14); overflow:hidden; animation:toast-e-in .18s ease-out; } .toast-e::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--toast-accent); } .toast-e--ok { --toast-accent:var(--c-ok-fg); --toast-soft:var(--c-ok-bg); } .toast-e--err { --toast-accent:var(--c-err-fg); --toast-soft:var(--c-err-bg); } .toast-e--warn { --toast-accent:var(--c-warn-fg); --toast-soft:var(--c-warn-bg); } .toast-e--info { --toast-accent:var(--c-info-fg); --toast-soft:var(--c-info-bg); } .toast-e__ic { width:30px; height:30px; flex:0 0 auto; border-radius:8px; background:var(--toast-soft); color:var(--toast-accent); display:flex; align-items:center; justify-content:center; font-size:.85rem; } .toast-e__body { flex:1 1 auto; min-width:0; } .toast-e__title { margin:0 0 .12rem; font-size:.8rem; font-weight:700; color:var(--c-heading); } .toast-e__msg { margin:0; font-size:.78rem; line-height:1.45; color:var(--c-muted); word-break:break-word; } .toast-e__msg + .toast-e__msg { margin-top:.15rem; } .toast-e__close { flex:0 0 auto; background:none; border:0; padding:.1rem .25rem; line-height:1; cursor:pointer; color:var(--c-muted-3); font-size:.8rem; border-radius:6px; } .toast-e__close:hover { color:var(--c-heading); background:var(--c-surface-alt); } .toast-e__bar { position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--toast-accent); opacity:.35; transform-origin:left center; animation:toast-e-bar linear forwards; } .toast-e.is-paused .toast-e__bar { animation-play-state:paused; } .toast-e.is-out { animation:toast-e-out .16s ease-in forwards; } @keyframes toast-e-in { from { opacity:0; transform:translateX(14px); } to { opacity:1; transform:none; } } @keyframes toast-e-out { to { opacity:0; transform:translateX(14px); } } @keyframes toast-e-bar { from { transform:scaleX(1); } to { transform:scaleX(0); } } @media (prefers-reduced-motion:reduce){ .toast-e, .toast-e.is-out { animation:none; } .toast-e__bar { animation:none; opacity:.2; } } @media (max-width:575px){ .toast-e-stack { top:auto; bottom:1rem; left:1rem; right:1rem; width:auto; } } /* ============================================================================= EMPTY STATE ============================================================================= */ .empty-e { text-align:center; padding:2.5rem 1rem; } .empty-e__ic { font-size:2rem; color:var(--c-muted-3); margin-bottom:.75rem; } .empty-e__text { color:var(--c-muted); font-size:.9rem; margin:0; } .empty-e__hint { color:var(--c-muted-3); font-size:.76rem; margin:.3rem 0 0; } /* Variantă „casetă" pentru listele goale din interiorul cardurilor */ .empty-e--box { border:1px dashed var(--c-border-2); border-radius:var(--r-card); background:var(--c-surface-alt); } .empty-e--sm { padding:1.4rem 1rem; } .empty-e__ic--chip { width:40px; height:40px; margin:0 auto .6rem; border-radius:50%; background:var(--c-surface); border:1px solid var(--c-border-2); display:flex; align-items:center; justify-content:center; font-size:.95rem; color:var(--c-muted-3); } /* ============================================================================= NOTĂ INLINE — iconiță pe același rând cu mesajul (stare de semnalat, nu eroare) Marcaj: .notice-e (+ .notice-e--warn / --info / --ok) > .notice-e__ic + .notice-e__txt ============================================================================= */ .notice-e { display:flex; align-items:center; gap:.65rem; padding:.7rem .9rem; border:1px solid var(--c-border-2); border-radius:var(--r-card); background:var(--c-surface-alt); color:var(--c-body); font-size:.85rem; } .notice-e__ic { flex:0 0 auto; display:flex; align-items:center; font-size:1rem; color:var(--c-muted-2); } .notice-e__txt { display:flex; align-items:baseline; flex-wrap:wrap; gap:.4rem; min-width:0; } .notice-e__text { font-weight:600; } .notice-e__hint { color:var(--c-muted-2); font-size:.78rem; } .notice-e--warn { background:var(--c-warn-bg); border-color:rgba(183,110,0,.28); color:var(--c-warn-fg); } .notice-e--warn .notice-e__ic { color:var(--c-warn-fg); } .notice-e--warn .notice-e__hint { color:var(--c-warn-fg); opacity:.8; } .notice-e--info { background:var(--c-info-bg); border-color:rgba(19,74,109,.2); color:var(--c-info-fg); } .notice-e--info .notice-e__ic { color:var(--c-info-fg); } .notice-e--ok { background:var(--c-ok-bg); border-color:rgba(30,125,67,.22); color:var(--c-ok-fg); } .notice-e--ok .notice-e__ic { color:var(--c-ok-fg); } /* ============================================================================= FORMULARE + GRILĂ CÂMPURI ============================================================================= */ .field { display:flex; flex-direction:column; gap:5px; min-width:0; } .field__label { font-size:.72rem; font-weight:600; color:var(--c-label); text-transform:uppercase; letter-spacing:.02em; } .field__req { color:var(--c-err-fg); } /* Mesaj de validare sub câmp. Ascuns implicit — JS îl afișează cu .text()+.show(). */ .field__error { display:none; font-size:.72rem; color:var(--c-err-fg); } /* text explicativ sub un câmp (era folosit în template-uri fără să fie stilizat) */ .field__hint { display:block; margin-top:.2rem; font-size:.72rem; line-height:1.35; color:var(--c-muted); } /* ============================================================================= Buton de informații + tooltip explicativ. Folosește tooltip-ul Bootstrap 5 cu tema `.tip-enterprise` deja definită în acest fișier (fundal închis, titlu, subtitluri) — nu inventăm alta. Componentă GLOBALĂ: folosită în /report și pe panoul principal. ============================================================================= */ .info-e { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; margin-left: .35rem; border: 0; border-radius: 50%; background: none; color: var(--c-muted-3); font-size: .74rem; line-height: 1; cursor: help; vertical-align: middle; transition: color .12s; } .info-e:hover, .info-e:focus-visible { color: var(--c-primary); } .info-e:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; } /* În antetul cardului butonul stă lipit de titlu, nu împins în dreapta. */ .card-e__title .info-e { margin-left: .1rem; } /* În banda de KPI, lângă eticheta scrisă cu majuscule. */ .stat-e__label .info-e { width: 15px; height: 15px; font-size: .66rem; margin-left: .25rem; } /* Tooltipul explicativ e mai lat decât unul obișnuit: conține definiție, sursă de date și mod de citire. */ .tooltip.tip-enterprise .tooltip-inner { max-width: 420px; } .tip-enterprise .tip-e-list { margin: .35rem 0 0; padding-left: 1.05rem; } .tip-enterprise .tip-e-list li { margin-bottom: .2rem; } .tip-enterprise b { color: var(--tip-title); } .field .input, .field input, .field select, .field textarea { font-size:.85rem; } .row-e { display:grid; grid-template-columns:1fr 1fr; gap:12px 13px; } .row-e--single { grid-template-columns:1fr; } .row-e--triple { grid-template-columns:1fr 1fr 1fr; } /* Camp cu unitate de masura alaturata (input + Select2) */ .field-unit { display:grid; grid-template-columns:1fr 96px; gap:8px; align-items:center; } .field-unit .select2-container { width:100% !important; min-width:0; } .check-e { display:flex; align-items:center; gap:8px; padding:2px 0; } .check-e input[type=checkbox] { width:1.05em; height:1.05em; margin:0; accent-color:var(--c-primary); } .check-e label { margin:0; cursor:pointer; font-size:.85rem; color:var(--c-heading); } /* Focus (pt. input/select/textarea generice) */ .field input:focus, .field select:focus, .field textarea:focus, .form-control:focus, .form-select:focus { border-color:var(--c-primary); box-shadow:var(--focus-ring); outline:none; } /* ============================================================================= MODAL ENTERPRISE (peste Bootstrap 5 .modal) Marcaj:
... header .modal-general-header ============================================================================= */ .ui-modal .modal-dialog { max-width:880px; } .ui-modal .modal-dialog.ui-modal--sm { max-width:560px; } .ui-modal .modal-dialog.ui-modal--lg { max-width:1060px; } /* Formulare late (multi-coloana): ~75% din viewport, cu limite de siguranta */ .ui-modal .modal-dialog.ui-modal--xl { max-width:clamp(960px, 75vw, 1720px); } @media (max-width:1023.98px) { .ui-modal .modal-dialog.ui-modal--xl { max-width:none; margin:.5rem; } } /* Dimensiune fixa, procent din viewport (latime SI inaltime), indiferent de continut. Marcaj:
`.modal-dialog-centered` e obligatoriu (el centreaza vertical continutul de inaltime fixa). Procentul se alege cu una din clasele de dimensiune de mai jos. */ .ui-modal .modal-dialog.ui-modal--fixed { --ui-modal-size:85; } .ui-modal .modal-dialog.ui-modal--75 { --ui-modal-size:75; } .ui-modal .modal-dialog.ui-modal--85 { --ui-modal-size:85; } .ui-modal .modal-dialog.ui-modal--90 { --ui-modal-size:90; } .ui-modal .modal-dialog.ui-modal--98 { --ui-modal-size:98; } .ui-modal .modal-dialog.ui-modal--fixed { width:calc(var(--ui-modal-size) * 1vw); max-width:calc(var(--ui-modal-size) * 1vw); } .ui-modal .modal-dialog.ui-modal--fixed .modal-content { height:calc(var(--ui-modal-size) * 1vh); max-height:calc(var(--ui-modal-size) * 1vh); display:flex; flex-direction:column; } .ui-modal .modal-dialog.ui-modal--fixed .modal-header, .ui-modal .modal-dialog.ui-modal--fixed .modal-footer { flex:0 0 auto; } .ui-modal .modal-dialog.ui-modal--fixed .modal-body { flex:1 1 auto; min-height:0; max-height:none; overflow-y:auto; } /* Corp cu tab-uri (`.modal-body--tabs`): banda de sus si nav-ul raman fixe, iar scroll-ul se face in panoul de tab, nu in corpul modalului. */ .ui-modal .modal-dialog.ui-modal--fixed .modal-body--tabs { display:flex; flex-direction:column; overflow:hidden; } .ui-modal .modal-dialog.ui-modal--fixed .modal-body--tabs > .tab-content { flex:1 1 auto; min-height:0; height:auto !important; overflow:hidden; } /* panourile fara `.auto-scroll-y` propriu (ex. frecventa interventiilor) fac scroll aici */ .ui-modal .modal-dialog.ui-modal--fixed .modal-body--tabs > .tab-content > .tab-pane.show { height:100%; overflow-y:auto; } @media (max-width:1023.98px) { .ui-modal .modal-dialog.ui-modal--fixed { width:auto; max-width:none; margin:.5rem; } .ui-modal .modal-dialog.ui-modal--fixed .modal-content { height:calc(100vh - 1rem); max-height:calc(100vh - 1rem); } } .ui-modal .modal-content { border:none; border-radius:var(--r-modal); overflow:hidden; box-shadow:var(--sh-modal); } .ui-modal .modal-body { padding:22px 24px 10px; background:var(--c-surface-alt); max-height:80vh; overflow-y:auto; } .ui-modal .modal-footer { padding:13px 24px; background:var(--c-surface); border-top:1px solid var(--c-divider); } /* Header albastru standard (aplică-l pe .modal-header) */ .modal-general-header { background:var(--c-primary) !important; color:#fff !important; padding:15px 24px; } .modal-general-header .modal-title { font-weight:700; font-size:15px; color:#fff; display:flex; align-items:center; gap:9px; } .modal-general-header .btn-close { filter:invert(1) grayscale(1) brightness(1.8); opacity:.9; } /* Layout secțiuni în modal */ .sec-form { display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; } .sec-col { flex:1 1 300px; min-width:0; display:flex; flex-direction:column; gap:16px; } /* coloana principala a unui formular (ex. lista de servicii) — mai lata decat cea de parametri */ .sec-col--wide { flex:2 1 420px; } /* coloana secundara, de parametri (ex. programare/recurenta) — nu creste peste latimea ei utila */ .sec-col--narrow { flex:0 1 300px; } .sec { background:var(--c-surface); border:1px solid var(--c-border-2); border-radius:var(--r-section); overflow:hidden; } .sec__head { display:flex; align-items:center; gap:9px; padding:11px 16px; border-bottom:1px solid var(--c-divider); background:var(--c-surface-alt-2); } .sec__ic { width:26px; height:26px; border-radius:var(--r-badge); background:var(--c-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; flex:0 0 auto; } .sec__title { font-size:.82rem; font-weight:700; color:var(--c-heading); letter-spacing:.01em; } .sec__body { padding:15px 16px; display:flex; flex-direction:column; gap:12px; } .sec__hint { margin:0; font-size:.75rem; color:var(--c-muted-2); line-height:1.35; } /* ----------------------------------------------------------------------------- .form-actions — bara de acțiuni de la baza unui formular (Salvează / Renunță). Alternativa la butonul din `.details-head__actions`: acțiunea stă la capătul formularului, unde ajunge privirea după completarea câmpurilor. ----------------------------------------------------------------------------- */ .form-actions { display:flex; align-items:center; justify-content:flex-end; gap:.5rem; flex-wrap:wrap; margin-top:18px; padding-top:14px; border-top:1px solid var(--c-divider); } /* text ajutător la stânga, butoanele rămân la dreapta */ .form-actions__note { margin:0 auto 0 0; font-size:.74rem; color:var(--c-muted-3); } /* în interiorul unei secțiuni (`.sec__body` are deja `gap`) bara stă mai strâns */ .sec__body > .form-actions { margin-top:2px; padding-top:12px; } @media (max-width:575.98px){ .form-actions { justify-content:stretch; } .form-actions .btn-e { flex:1 1 100%; justify-content:center; } } /* ============================================================================= SELECTOR DE SERVICII (serviciu bifabil → mai multe intervenții, fiecare cu suprafață + unitate de măsură proprie) Structură: .svc-list > .svc-item (.svc-item--on) > .svc-item__head + .svc-item__areas > .svc-area (.svc-area--on) ============================================================================= */ .svc-list { display:flex; flex-direction:column; gap:10px; } .svc-item { border:1px solid var(--c-border-2); border-radius:var(--r-card); background:var(--c-surface-alt-2); padding:11px 13px; display:flex; flex-direction:column; gap:10px; transition:border-color .15s ease, background .15s ease, box-shadow .15s ease; } .svc-item:hover { border-color:var(--c-muted-3); } .svc-item--on { border-color:var(--c-primary); background:var(--c-primary-soft); box-shadow:inset 3px 0 0 var(--c-primary); } .svc-item__head { display:flex; align-items:center; gap:8px; } .svc-item__head input[type=checkbox] { width:1.05em; height:1.05em; margin:0; flex:0 0 auto; accent-color:var(--c-primary); cursor:pointer; } .svc-item__name { margin:0; font-size:.85rem; font-weight:700; color:var(--c-heading); cursor:pointer; } .svc-item__count { margin-left:auto; font-size:.7rem; font-weight:600; color:var(--c-muted-2); } .svc-item__areas { display:flex; flex-direction:column; gap:6px; } .svc-area { display:grid; grid-template-columns:minmax(120px,1fr) 110px 118px; gap:8px; align-items:center; padding:6px 8px; border:1px solid transparent; border-radius:var(--r-badge); background:var(--c-surface); } .svc-area--on { border-color:var(--c-border-2); } .svc-area__pick { display:flex; align-items:center; gap:7px; min-width:0; } .svc-area__pick input[type=checkbox] { width:1em; height:1em; margin:0; flex:0 0 auto; accent-color:var(--c-primary); cursor:pointer; } .svc-area__pick label { margin:0; font-size:.8rem; color:var(--c-body); cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .svc-area input[type=text], .svc-area select { font-size:.8rem; } .svc-area input:disabled, .svc-area select:disabled { background:var(--c-surface-alt); color:var(--c-muted-3); cursor:not-allowed; } /* Unitatea de masura e un Select2 — il tinem in coloana lui si la aceeasi inaltime cu inputul */ .svc-area .select2-container { width:100% !important; min-width:0; } .svc-area .select2-container--default .select2-selection--single .select2-selection__rendered { font-size:.8rem; } .svc-area .select2-container--disabled .select2-selection--single { background:var(--c-surface-alt); cursor:not-allowed; } .svc-area .select2-container--disabled .select2-selection--single .select2-selection__rendered { color:var(--c-muted-3); } @media (max-width:767.98px) { .svc-area { grid-template-columns:1fr; } } /* ============================================================================= TAB-URI (peste Bootstrap 5 .nav-tabs) ============================================================================= */ .nav-tabs .nav-link.active { color:var(--c-primary); border-color:var(--c-primary) var(--c-primary) #fff; } /* ============================================================================= TABS ENTERPRISE (segmentat) —