/* ========================================================================== CRM Psychometrics — demo modulo Pubblica Amministrazione Colori campionati direttamente da logo-psychometrics-png.png: teal #39818B (logo, sidebar attiva, titoli) lime #A5CE44 (tagline, intestazioni tabelle, accenti) ========================================================================== */ :root { --teal: #39818b; --teal-dark: #2c666e; --teal-darker: #1f4a50; --teal-soft: #e6f0f1; --teal-softer: #f3f8f9; --lime: #a5ce44; --lime-dark: #8db336; --lime-soft: #f0f7dc; --white: #ffffff; --grey-50: #f7f8f9; --grey-100: #eef0f2; --grey-200: #e0e3e7; --grey-300: #c9ced4; --grey-500: #7a838d; --grey-700: #454d55; --grey-900: #22282d; --danger: #c0392b; --danger-soft: #fdecea; --warning: #b8860b; --warning-soft: #fdf5e2; --radius: 8px; --radius-sm: 5px; --shadow-sm: 0 1px 2px rgba(31, 74, 80, .06), 0 1px 3px rgba(31, 74, 80, .08); --shadow-md: 0 4px 12px rgba(31, 74, 80, .1); --shadow-lg: 0 18px 45px rgba(31, 74, 80, .22); /* Espansa di default. La classe .sidebar-collassata su la riduce a sole icone. */ --sidebar-w: 220px; --sidebar-w-ridotta: 82px; --font: "Segoe UI", "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--grey-900); background: var(--white); } h1, h2, h3, h4 { margin: 0; font-weight: 600; color: var(--teal-darker); } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } a { color: var(--teal); text-decoration: none; } a:hover { color: var(--teal-dark); text-decoration: underline; } code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9em; background: var(--grey-100); padding: 1px 5px; border-radius: 4px; } .icon { width: 18px; height: 18px; flex: none; } /* ------------------------------------------------------------------ layout */ .app { display: flex; min-height: 100vh; } .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); background: var(--teal-darker); display: flex; flex-direction: column; align-items: stretch; padding: 14px 0; z-index: 30; transition: width .18s ease; overflow: hidden; } html.sidebar-collassata { --sidebar-w: var(--sidebar-w-ridotta); } .sidebar__brand { display: flex; align-items: center; justify-content: center; height: 44px; margin-bottom: 22px; text-decoration: none; } .sidebar__brand:hover { text-decoration: none; } .sidebar__mark { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--lime); color: var(--teal-darker); font-weight: 700; font-size: 20px; } .sidebar__nav { display: flex; flex-direction: column; gap: 4px; flex: 1; } .sidebar__foot { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 10px; } .sidebar__toggle { display: flex; align-items: center; gap: 14px; width: 100%; height: 42px; padding: 0 32px; background: none; border: none; border-left: 3px solid transparent; font: inherit; color: rgba(255, 255, 255, .45); cursor: pointer; white-space: nowrap; } .sidebar__toggle:hover { background: rgba(255, 255, 255, .07); color: var(--white); } .sidebar__toggle .icon { width: 20px; height: 20px; transition: transform .18s ease; } html.sidebar-collassata .sidebar__toggle .icon { transform: rotate(180deg); } .sidebar__link { display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 32px; flex: none; color: rgba(255, 255, 255, .72); white-space: nowrap; border-left: 3px solid transparent; text-decoration: none; } .sidebar__link .icon { width: 20px; height: 20px; } .sidebar__link:hover { background: rgba(255, 255, 255, .07); color: var(--white); text-decoration: none; } .sidebar__link.is-active { background: var(--teal); color: var(--white); border-left-color: var(--lime); } .sidebar__link.is-muted { color: rgba(255, 255, 255, .35); cursor: default; } .sidebar__label { font-size: 13.5px; font-weight: 500; transition: opacity .12s ease; } html.sidebar-collassata .sidebar__label { opacity: 0; pointer-events: none; } .main { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-width: 0; } .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 28px; background: var(--white); border-bottom: 1px solid var(--grey-200); } .topbar__logo img { height: 34px; display: block; } .topbar__logo:hover { text-decoration: none; } .topbar__right { display: flex; align-items: center; gap: 16px; } .user { display: flex; align-items: center; gap: 10px; } .user__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--teal-soft); color: var(--teal-dark); display: grid; place-items: center; font-weight: 700; font-size: 12.5px; } .user__meta { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; } .user__name { font-weight: 600; font-size: 13px; } .content { padding: 24px 28px 60px; flex: 1; } /* ------------------------------------------------------------------ intestazioni pagina */ .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; } .page-title { font-size: 22px; letter-spacing: -.2px; } .page-sub { color: var(--grey-500); font-size: 13px; margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .page-head__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .link-back { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--grey-500); margin-bottom: 6px; } .link-back:hover { color: var(--teal); text-decoration: none; } .link-back .icon { width: 15px; height: 15px; } /* ------------------------------------------------------------------ card generiche */ .card { background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; } .card--narrow { max-width: 720px; } .card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--grey-200); background: var(--teal-softer); } .card__head h2 { font-size: 15px; display: flex; align-items: center; gap: 8px; } .card__body { padding: 18px; } .grid { display: grid; gap: 18px; } .grid--2 { grid-template-columns: 1fr 1fr; } .grid--sidebar { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } .stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; } @media (max-width: 1100px) { .grid--2, .grid--sidebar { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ statistiche dashboard */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; } @media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } } .stat { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 16px; background: var(--white); border: 1px solid var(--grey-200); border-left: 3px solid var(--lime); border-radius: var(--radius); box-shadow: var(--shadow-sm); color: inherit; transition: transform .12s ease, box-shadow .12s ease; } .stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; color: inherit; } .stat__icon { grid-row: 1 / 3; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; } .stat__icon .icon { width: 22px; height: 22px; } .stat__icon--teal { background: var(--teal-soft); color: var(--teal); } .stat__icon--lime { background: var(--lime-soft); color: var(--lime-dark); } .stat__value { font-size: 24px; font-weight: 700; color: var(--teal-darker); line-height: 1.1; } .stat__label { font-size: 12.5px; color: var(--grey-500); } .bar { display: grid; grid-template-columns: 170px 1fr 36px; align-items: center; gap: 12px; margin-bottom: 12px; } .bar:last-child { margin-bottom: 0; } .bar__label { display: flex; align-items: center; gap: 8px; font-size: 13px; } .bar__track { height: 8px; background: var(--grey-100); border-radius: 99px; overflow: hidden; } .bar__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--lime)); border-radius: 99px; } .bar__value { text-align: right; font-weight: 600; color: var(--teal-dark); } /* ------------------------------------------------------------------ riga azioni sopra le tabelle */ .actions-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 14px; background: var(--teal-softer); border: 1px solid var(--grey-200); border-radius: var(--radius); } .actions-bar__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--teal-dark); margin-right: 4px; } .actions-bar__hint { margin-left: auto; font-size: 12px; color: var(--grey-500); } .action { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; border: none; cursor: pointer; color: var(--white); box-shadow: var(--shadow-sm); transition: transform .1s ease, opacity .1s ease; padding: 0; } .action:hover { transform: translateY(-1px); text-decoration: none; color: var(--white); } .action .icon { width: 17px; height: 17px; } .action--sm { width: 28px; height: 28px; } .action--sm .icon { width: 15px; height: 15px; } .action--add { background: var(--lime); color: var(--teal-darker); } .action--add:hover { background: var(--lime-dark); color: var(--teal-darker); } .action--view { background: var(--teal); } .action--edit { background: var(--teal-dark); } .action--delete { background: var(--danger); } .action.is-disabled { opacity: .35; pointer-events: none; } .action.is-locked { opacity: .3; cursor: not-allowed; } /* ------------------------------------------------------------------ toolbar in stile DataTables */ .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--grey-200); } .toolbar__left, .toolbar__right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .toolbar__perpage, .toolbar__filter { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--grey-700); } .toolbar__filter span { color: var(--grey-500); } .search { position: relative; display: flex; align-items: center; } .search .icon { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--grey-500); pointer-events: none; } /* Selettore a specificita' alta: la regola generica su input[type="search"] piu' sotto azzererebbe il padding sinistro, facendo finire il testo sotto la lente. */ .search input[type="search"] { width: auto; min-width: 230px; padding: 8px 10px 8px 36px; appearance: none; -webkit-appearance: none; } .search input[type="search"]::-webkit-search-decoration, .search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } /* ------------------------------------------------------------------ campi */ input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="search"], input[type="file"], select, textarea { width: 100%; font: inherit; font-size: 13.5px; color: var(--grey-900); padding: 8px 10px; background: var(--white); border: 1px solid var(--grey-300); border-radius: var(--radius-sm); transition: border-color .12s ease, box-shadow .12s ease; } select { min-width: 130px; cursor: pointer; } .toolbar select { width: auto; } textarea { resize: vertical; min-height: 72px; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(57, 129, 139, .15); } .form { display: flex; flex-direction: column; gap: 16px; } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 700px) { .form__row { grid-template-columns: 1fr; } } .form__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 4px; } .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .field--half { max-width: calc(50% - 8px); } @media (max-width: 700px) { .field--half { max-width: 100%; } } .field > label { font-size: 12.5px; font-weight: 600; color: var(--grey-700); } .field__hint { font-size: 11.5px; color: var(--grey-500); } .field__error { font-size: 12px; color: var(--danger); font-weight: 500; } .field[hidden] { display: none; } .checkbox { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; font-weight: 500; } .checkbox input { width: 16px; height: 16px; accent-color: var(--teal); } .segmented { display: flex; gap: 8px; flex-wrap: wrap; } .segmented__item { position: relative; cursor: pointer; } .segmented__item input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .segmented__item span { display: flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 13px; font-weight: 500; border: 1px solid var(--grey-300); border-radius: 99px; color: var(--grey-700); background: var(--white); } .segmented__item input:checked + span { border-color: var(--teal); background: var(--teal-soft); color: var(--teal-dark); font-weight: 600; } .segmented__item input:focus-visible + span { box-shadow: 0 0 0 3px rgba(57, 129, 139, .18); } /* ------------------------------------------------------------------ bottoni */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; font: inherit; font-size: 13px; font-weight: 600; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; transition: background .12s ease, box-shadow .12s ease; } .btn:hover { text-decoration: none; } .btn .icon { width: 16px; height: 16px; } .btn--sm { padding: 5px 10px; font-size: 12px; } .btn--block { width: 100%; padding: 10px; } .btn--teal { background: var(--teal); color: var(--white); } .btn--teal:hover { background: var(--teal-dark); color: var(--white); } .btn--lime { background: var(--lime); color: var(--teal-darker); } .btn--lime:hover { background: var(--lime-dark); color: var(--teal-darker); } .btn--ghost { background: var(--white); color: var(--grey-700); border-color: var(--grey-300); } .btn--ghost:hover { background: var(--grey-50); color: var(--grey-900); } .btn--danger { background: var(--white); color: var(--danger); border-color: #e8b5ae; } .btn--danger:hover { background: var(--danger-soft); } .inline-form { display: inline; } .link-danger { background: none; border: none; padding: 0; font: inherit; font-size: 12px; color: var(--danger); cursor: pointer; text-decoration: underline; } .link-strong { font-weight: 600; color: var(--teal-dark); } .link-muted { color: var(--grey-700); } .link-attach { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; } .link-attach .icon { width: 14px; height: 14px; } /* ------------------------------------------------------------------ tabelle */ .table-wrap { overflow-x: auto; } .table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .table thead th { background: var(--lime); color: var(--teal-darker); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; text-align: left; padding: 11px 14px; white-space: nowrap; border-bottom: 1px solid var(--lime-dark); } .table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--grey-100); vertical-align: middle; } .table tbody tr:hover { background: var(--teal-softer); } .table tbody tr.is-selected { background: var(--lime-soft); } .table tbody tr:last-child td { border-bottom: none; } .table__pick { width: 40px; text-align: center; } .table__pick input { width: 16px; height: 16px; accent-color: var(--teal); cursor: pointer; } .td-muted { color: var(--grey-500); } .ta-center { text-align: center; } .ta-right { text-align: right; } .empty { padding: 26px 14px; text-align: center; color: var(--grey-500); font-size: 13px; } .chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap; } .chip--teal { background: var(--teal-soft); color: var(--teal-dark); } .chip--lime { background: var(--lime-soft); color: #5f7a1c; } .chip--grey { background: var(--grey-100); color: var(--grey-700); } .badge { display: inline-block; padding: 1px 7px; border-radius: 99px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; width: fit-content; } .badge--teal { background: var(--teal); color: var(--white); } .badge--grey { background: var(--grey-200); color: var(--grey-700); } /* ------------------------------------------------------------------ paginazione */ .pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--grey-200); } .pagination__info { font-size: 12.5px; color: var(--grey-500); } .pagination__pages { display: flex; gap: 4px; } .page { min-width: 32px; height: 32px; padding: 0 9px; display: inline-grid; place-items: center; border: 1px solid var(--grey-200); border-radius: var(--radius-sm); font-size: 12.5px; color: var(--grey-700); background: var(--white); } .page:hover { background: var(--teal-softer); color: var(--teal-dark); text-decoration: none; } .page.is-active { background: var(--teal); border-color: var(--teal); color: var(--white); font-weight: 600; } .page.is-disabled { opacity: .4; pointer-events: none; } .page.is-gap { border: none; background: none; } /* ------------------------------------------------------------------ dettaglio anagrafiche */ .datalist { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; } @media (max-width: 700px) { .datalist { grid-template-columns: 1fr; } } .datalist dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--grey-500); font-weight: 600; } .datalist dd { margin: 2px 0 0; font-size: 14px; color: var(--grey-900); word-break: break-word; } .linked-cards { display: flex; flex-direction: column; gap: 8px; } .linked-cards a { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--grey-200); border-radius: var(--radius-sm); color: var(--grey-900); background: var(--white); } .linked-cards a:hover { border-color: var(--teal); background: var(--teal-softer); text-decoration: none; } .linked-cards__type { color: var(--teal); display: inline-flex; } .linked-cards strong { font-size: 13px; flex: 1; min-width: 0; } /* ------------------------------------------------------------------ timeline azioni */ .timeline { display: flex; flex-direction: column; gap: 2px; } .timeline__item { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--grey-100); } .timeline__item:last-child { border-bottom: none; } .timeline--compact .timeline__item { padding: 9px 0; } .timeline__icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; } .timeline__icon .icon { width: 16px; height: 16px; } .timeline__icon--telefonata { background: var(--teal-soft); color: var(--teal); } .timeline__icon--email { background: var(--lime-soft); color: var(--lime-dark); } .timeline__icon--whatsapp { background: #e3f6e8; color: #2f9e57; } .timeline__icon--appuntamento { background: #efe7f7; color: #6f4fa1; } .timeline__body { min-width: 0; } .timeline__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; } .timeline__date { font-size: 12px; color: var(--grey-500); } .timeline__note { margin-top: 3px; font-size: 13px; color: var(--grey-700); } .timeline__meta { margin-top: 5px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--grey-500); } /* ------------------------------------------------------------------ pipeline kanban */ .board { display: flex; gap: 16px; align-items: flex-start; overflow-x: auto; padding-bottom: 20px; min-height: 60vh; } .column { flex: 0 0 300px; display: flex; flex-direction: column; background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: var(--radius); max-height: calc(100vh - 190px); } .column__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 2px solid var(--lime); background: var(--white); border-radius: var(--radius) var(--radius) 0 0; } .column__title { font-size: 13.5px; display: flex; align-items: center; gap: 8px; } .column__count { min-width: 22px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; background: var(--teal-soft); color: var(--teal-dark); border-radius: 99px; font-size: 11.5px; font-weight: 700; } .column__menu { position: relative; } .column__menu summary { list-style: none; cursor: pointer; color: var(--grey-500); padding: 0 6px; font-size: 17px; line-height: 1; } .column__menu summary::-webkit-details-marker { display: none; } .column__menu[open] summary { color: var(--teal); } .column__menu-panel { position: absolute; right: 0; top: 26px; z-index: 15; width: 230px; background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 12px; display: flex; flex-direction: column; gap: 10px; } .column__rename { display: flex; gap: 6px; } .column__rename input { font-size: 12.5px; padding: 6px 8px; } .column__cards { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 60px; } .column__add { margin: 0 12px 12px; padding: 9px; display: flex; align-items: center; justify-content: center; gap: 6px; background: transparent; border: 1px dashed var(--grey-300); border-radius: var(--radius-sm); color: var(--grey-500); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; } .column__add:hover { border-color: var(--teal); color: var(--teal); background: var(--white); } .kcard { background: var(--white); border: 1px solid var(--grey-200); border-left: 4px solid var(--grey-300); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); transition: box-shadow .12s ease, transform .12s ease; } .kcard:hover { box-shadow: var(--shadow-md); } .kcard--ente { border-left-color: var(--teal); } .kcard--nominativo { border-left-color: var(--lime); } .kcard--categoria { border-left-color: #6f4fa1; } .kcard__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px 0; } .kcard__type { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 2px 8px; border-radius: 99px; background: var(--grey-100); color: var(--grey-700); } .kcard__type .icon { width: 13px; height: 13px; } .kcard--ente .kcard__type, .kcard__type--ente { background: var(--teal-soft); color: var(--teal-dark); } .kcard--nominativo .kcard__type, .kcard__type--nominativo { background: var(--lime-soft); color: #5f7a1c; } .kcard--categoria .kcard__type, .kcard__type--categoria { background: #efe7f7; color: #6f4fa1; } .kcard__tools { display: flex; gap: 2px; opacity: 0; transition: opacity .12s ease; } .kcard:hover .kcard__tools, .kcard__tools:focus-within { opacity: 1; } .kcard__tool { width: 24px; height: 24px; display: grid; place-items: center; background: none; border: none; border-radius: 4px; cursor: pointer; color: var(--grey-500); padding: 0; } .kcard__tool:hover { background: var(--grey-100); color: var(--teal); } .kcard__tool .icon { width: 14px; height: 14px; } .kcard__tool--danger:hover { background: var(--danger-soft); color: var(--danger); } .kcard__open { display: block; width: 100%; text-align: left; background: none; border: none; font: inherit; cursor: pointer; padding: 6px 12px 12px; } .kcard__title { font-size: 13.5px; font-weight: 600; color: var(--grey-900); line-height: 1.35; } .kcard__target { margin-top: 6px; font-size: 12px; color: var(--grey-700); display: flex; flex-direction: column; } .kcard__target span { color: var(--grey-500); font-size: 11.5px; } .kcard__desc { margin-top: 6px; font-size: 12px; color: var(--grey-500); } .kcard__due { margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--teal-dark); background: var(--teal-soft); padding: 2px 8px; border-radius: 99px; } .kcard__due .icon { width: 13px; height: 13px; } .kcard__due.is-overdue { background: var(--danger-soft); color: var(--danger); } /* stati SortableJS */ .kcard.sortable-ghost { opacity: .35; border-style: dashed; } .kcard.sortable-chosen { transform: rotate(-1deg); box-shadow: var(--shadow-lg); } .column__cards.is-dropzone { background: var(--teal-soft); border-radius: var(--radius-sm); } .kcard.is-saving { opacity: .6; } .kcard.is-flash { animation: flash 1.4s ease; } @keyframes flash { 0%, 100% { box-shadow: var(--shadow-sm); } 30% { box-shadow: 0 0 0 3px var(--lime); } } /* ------------------------------------------------------------------ pannello dettaglio card */ .pannello__head { padding-bottom: 16px; border-bottom: 1px solid var(--grey-200); } .pannello__title { font-size: 18px; margin-top: 8px; } .pannello__target { margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; } .pannello__desc { margin-top: 10px; font-size: 13px; color: var(--grey-700); } .pannello__head .kcard__due { margin-top: 10px; } .pannello__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; padding-top: 16px; } @media (max-width: 900px) { .pannello__grid { grid-template-columns: 1fr; } } .pannello__col { min-width: 0; } .pannello__col--form { background: var(--teal-softer); border: 1px solid var(--grey-200); border-radius: var(--radius); padding: 16px; } .pannello__sub { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--grey-500); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .pannello__sub:not(:first-child) { margin-top: 20px; } .pannello__people { display: flex; flex-direction: column; gap: 6px; max-height: 210px; overflow-y: auto; } .pannello__people li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border: 1px solid var(--grey-200); border-radius: var(--radius-sm); } .pannello__people a { display: flex; flex-direction: column; color: var(--grey-900); } .pannello__people a:hover { text-decoration: none; color: var(--teal); } .pannello__people strong { font-size: 13px; } .pannello__people span { font-size: 11.5px; color: var(--grey-500); } .notice { padding: 10px 12px; background: var(--lime-soft); border-left: 3px solid var(--lime); border-radius: var(--radius-sm); font-size: 12.5px; color: var(--grey-700); } /* ------------------------------------------------------------------ modali */ .modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; } .modal[hidden] { display: none; } .modal__backdrop { position: absolute; inset: 0; background: rgba(31, 74, 80, .5); backdrop-filter: blur(2px); } .modal__panel { position: relative; width: 100%; max-width: 620px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg); animation: pop .14s ease; } .modal__panel--wide { max-width: 940px; } .modal__panel--small { max-width: 420px; } @keyframes pop { from { transform: translateY(8px); opacity: 0; } } .modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--grey-200); } .modal__head h2 { font-size: 16px; } .modal__close { background: none; border: none; cursor: pointer; color: var(--grey-500); padding: 4px; border-radius: 4px; display: grid; } .modal__close:hover { background: var(--grey-100); color: var(--grey-900); } .modal__body { padding: 20px; overflow-y: auto; } /* ------------------------------------------------------------------ alert */ .alert { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; margin-bottom: 16px; border-radius: var(--radius-sm); font-size: 13px; border-left: 3px solid; } .alert--success { background: var(--lime-soft); border-color: var(--lime-dark); color: #48611a; } .alert--error { background: var(--danger-soft); border-color: var(--danger); color: #8c2419; } .alert--warning { background: var(--warning-soft); border-color: var(--warning); color: #7a5b06; } .alert__close { background: none; border: none; font-size: 20px; line-height: 1; cursor: pointer; color: inherit; opacity: .6; padding: 0 4px; } .alert__close:hover { opacity: 1; } /* ------------------------------------------------------------------ login ed errori */ .body--centered { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(160deg, var(--teal-softer), var(--white) 55%); padding: 24px; } .login { width: 100%; display: grid; place-items: center; } .login__card { width: 100%; max-width: 420px; padding: 32px; background: var(--white); border: 1px solid var(--grey-200); border-top: 4px solid var(--lime); border-radius: var(--radius); box-shadow: var(--shadow-md); } .login__card--wide { max-width: 760px; } .login__card--error { text-align: center; } .login__logo { width: 100%; max-width: 260px; display: block; margin: 0 auto 22px; } .login__title { font-size: 15px; text-align: center; margin-bottom: 22px; color: var(--grey-700); font-weight: 500; } .login__demo { margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--grey-200); } .login__demo-title { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--grey-500); font-weight: 700; margin-bottom: 8px; } .login__demo ul { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--grey-700); } .error__code { font-size: 46px; font-weight: 700; color: var(--lime); line-height: 1; } .error__detail { text-align: left; margin: 16px 0; } .error__message { font-size: 14px; color: var(--grey-900); font-weight: 500; margin-bottom: 6px; } .error__file { font-size: 12px; color: var(--grey-500); font-family: ui-monospace, Menlo, monospace; margin-bottom: 10px; } .error__trace { max-height: 240px; overflow: auto; background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: var(--radius-sm); padding: 12px; font-size: 11.5px; color: var(--grey-700); } .error__hint { font-size: 12px; color: var(--grey-500); margin-bottom: 16px; } /* ------------------------------------------------------------------ tablet */ @media (max-width: 820px) { .content { padding: 18px 16px 48px; } .topbar { padding: 10px 16px; } .user__meta { display: none; } .actions-bar__hint { display: none; } } /* ------------------------------------------------------------------ modale di conferma */ .conferma__testo { font-size: 14px; color: var(--grey-700); } .conferma__box { margin-top: 14px; padding: 14px 16px; background: var(--danger-soft); border-left: 3px solid var(--danger); border-radius: var(--radius-sm); } .conferma__box-titolo { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #8c2419; margin-bottom: 8px; } .conferma__lista { display: flex; flex-direction: column; gap: 5px; } .conferma__lista li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #8c2419; font-weight: 500; } .conferma__lista li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--danger); flex: none; } .conferma__nota { margin-top: 12px; font-size: 12.5px; color: var(--grey-500); } /* ------------------------------------------------------------------ cestino */ .table td .inline-form { margin-left: 6px; } .table td .inline-form:first-of-type { margin-left: 0; } .table td .field__error { margin-top: 6px; text-align: right; }