@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css'; /* /Components/Layout/MainLayout.razor.rz.scp.css */ /* ── App Layout ── */ .app-layout[b-8rbixb9sdi] { display: flex; min-height: 100vh; } /* ── Sidebar ── */ .sidebar[b-8rbixb9sdi] { width: var(--sidebar-width); min-width: var(--sidebar-width); background-color: var(--color-sidebar); color: var(--color-sidebar-text); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; overflow-y: auto; } .sidebar-brand[b-8rbixb9sdi] { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-5); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .sidebar-logo[b-8rbixb9sdi] { height: 28px; width: auto; } .sidebar-title[b-8rbixb9sdi] { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--color-sidebar-text-active); letter-spacing: -0.01em; } /* ── Main area ── */ .main-area[b-8rbixb9sdi] { flex: 1; /* min-width: 0 casse le min-width:auto par défaut des flex-items : sans lui, une grille large gonfle .main-area au-delà du viewport → le scrolle horizontalement et le header sticky (calé verticalement seulement) part hors champ. Avec, l'overflow horizontal retombe dans le conteneur qui le gère (.ticket-grid-wrapper, overflow-x:auto), le body ne scrolle plus, le header reste en place. Cause racine unique du scroll horizontal + topbar clippée. */ min-width: 0; margin-left: var(--sidebar-width); display: flex; flex-direction: column; min-height: 100vh; } /* ── Header ── */ .app-header[b-8rbixb9sdi] { height: var(--header-height); min-height: var(--header-height); background-color: var(--color-surface); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-6); position: sticky; top: 0; z-index: 50; } .header-left[b-8rbixb9sdi] { display: flex; align-items: center; gap: var(--space-4); } .header-page-title[b-8rbixb9sdi] { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text); margin: 0; } .header-right[b-8rbixb9sdi] { display: flex; align-items: center; gap: var(--space-4); } .header-user-menu[b-8rbixb9sdi] { position: relative; } .header-user-btn[b-8rbixb9sdi] { display: flex; align-items: center; gap: var(--space-2); background: none; border: 1px solid transparent; border-radius: var(--radius-md); padding: var(--space-1) var(--space-2); cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast); } .header-user-btn:hover[b-8rbixb9sdi] { background-color: var(--color-bg-hover, rgba(0, 0, 0, 0.04)); border-color: var(--color-border); } .header-user-avatar[b-8rbixb9sdi] { width: 2rem; height: 2rem; border-radius: 50%; background-color: var(--color-accent); color: var(--color-accent-text); display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); font-weight: var(--weight-semibold); flex-shrink: 0; } .header-user-name[b-8rbixb9sdi] { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-secondary); } .header-user-chevron[b-8rbixb9sdi] { color: var(--color-text-muted); flex-shrink: 0; } .header-user-dropdown[b-8rbixb9sdi] { position: absolute; top: calc(100% + var(--space-1)); right: 0; min-width: 200px; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); z-index: 200; overflow: hidden; } .dropdown-user-info[b-8rbixb9sdi] { padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 2px; } .dropdown-user-name[b-8rbixb9sdi] { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); } .dropdown-user-role[b-8rbixb9sdi] { font-size: var(--text-xs); color: var(--color-text-muted); } .dropdown-divider[b-8rbixb9sdi] { height: 1px; background-color: var(--color-border); } .dropdown-item[b-8rbixb9sdi] { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2) var(--space-4); background: none; border: none; font-size: var(--text-sm); color: var(--color-text-secondary); cursor: pointer; transition: background-color var(--transition-fast); } .dropdown-item:hover[b-8rbixb9sdi] { background-color: var(--color-bg-hover, rgba(0, 0, 0, 0.04)); } .dropdown-logout[b-8rbixb9sdi] { color: var(--color-danger, #dc2626); } .dropdown-logout:hover[b-8rbixb9sdi] { background-color: rgba(220, 38, 38, 0.06); } /* ── Main Content ── */ .main-content[b-8rbixb9sdi] { flex: 1; padding: var(--space-6); background-color: var(--color-bg); } /* ── Blazor error ── */ #blazor-error-ui[b-8rbixb9sdi] { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss[b-8rbixb9sdi] { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } /* ── Responsive ── */ @media (max-width: 768px) { .sidebar[b-8rbixb9sdi] { transform: translateX(-100%); transition: transform var(--transition-normal); } .sidebar.open[b-8rbixb9sdi] { transform: translateX(0); } .main-area[b-8rbixb9sdi] { margin-left: 0; } .header-user-name[b-8rbixb9sdi] { display: none; } } /* /Components/Layout/NavMenu.razor.rz.scp.css */ /* Les styles de navigation sont GLOBAUX (voir wwwroot/app.css, section « Navigation latérale »). Ils ne peuvent pas vivre ici en CSS scoped : le est rendu par le composant , qui n'hérite pas de l'attribut de portée de ce composant — les règles ne l'atteindraient jamais (cause du rendu cassé de la sidebar). */ /* /Components/Layout/ReconnectModal.razor.rz.scp.css */ .components-reconnect-first-attempt-visible[b-9ggcx7zq1e], .components-reconnect-repeated-attempt-visible[b-9ggcx7zq1e], .components-reconnect-failed-visible[b-9ggcx7zq1e], .components-pause-visible[b-9ggcx7zq1e], .components-resume-failed-visible[b-9ggcx7zq1e], .components-rejoining-animation[b-9ggcx7zq1e] { display: none; } #components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-9ggcx7zq1e], #components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-9ggcx7zq1e], #components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-9ggcx7zq1e], #components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-9ggcx7zq1e], #components-reconnect-modal.components-reconnect-retrying[b-9ggcx7zq1e], #components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-9ggcx7zq1e], #components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-9ggcx7zq1e], #components-reconnect-modal.components-reconnect-failed[b-9ggcx7zq1e], #components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-9ggcx7zq1e] { display: block; } #components-reconnect-modal[b-9ggcx7zq1e] { background-color: var(--color-surface); width: 20rem; margin: 20vh auto; padding: 2rem; border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); opacity: 0; transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete; animation: components-reconnect-modal-fadeOutOpacity-b-9ggcx7zq1e 0.5s both; &[open] { animation: components-reconnect-modal-slideUp-b-9ggcx7zq1e 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-9ggcx7zq1e 0.5s ease-in-out 0.3s; animation-fill-mode: both; } } #components-reconnect-modal[b-9ggcx7zq1e]::backdrop { background-color: rgba(0, 0, 0, 0.4); animation: components-reconnect-modal-fadeInOpacity-b-9ggcx7zq1e 0.5s ease-in-out; opacity: 1; } @keyframes components-reconnect-modal-slideUp-b-9ggcx7zq1e { 0% { transform: translateY(30px) scale(0.95); } 100% { transform: translateY(0); } } @keyframes components-reconnect-modal-fadeInOpacity-b-9ggcx7zq1e { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes components-reconnect-modal-fadeOutOpacity-b-9ggcx7zq1e { 0% { opacity: 1; } 100% { opacity: 0; } } .components-reconnect-container[b-9ggcx7zq1e] { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); } #components-reconnect-modal p[b-9ggcx7zq1e] { margin: 0; text-align: center; } #components-reconnect-modal button[b-9ggcx7zq1e] { border: 0; background-color: var(--color-accent); color: var(--color-accent-text); padding: var(--space-1) var(--space-6); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; transition: background-color var(--transition-fast); } #components-reconnect-modal button:hover[b-9ggcx7zq1e] { background-color: var(--color-accent-hover); } #components-reconnect-modal button:active[b-9ggcx7zq1e] { background-color: var(--color-accent); } .components-rejoining-animation[b-9ggcx7zq1e] { position: relative; width: 80px; height: 80px; } .components-rejoining-animation div[b-9ggcx7zq1e] { position: absolute; border: 3px solid var(--color-accent); opacity: 1; border-radius: 50%; animation: components-rejoining-animation-b-9ggcx7zq1e 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite; } .components-rejoining-animation div:nth-child(2)[b-9ggcx7zq1e] { animation-delay: -0.5s; } @keyframes components-rejoining-animation-b-9ggcx7zq1e { 0% { top: 40px; left: 40px; width: 0; height: 0; opacity: 0; } 4.9% { top: 40px; left: 40px; width: 0; height: 0; opacity: 0; } 5% { top: 40px; left: 40px; width: 0; height: 0; opacity: 1; } 100% { top: 0px; left: 0px; width: 80px; height: 80px; opacity: 0; } } /* /Components/Pages/ForgotPasswordPage.razor.rz.scp.css */ .forgotpw-page[b-8hv43xow17] { min-height: 100vh; display: flex; align-items: center; justify-content: center; background-color: var(--color-bg); padding: var(--space-4); } .forgotpw-card[b-8hv43xow17] { width: 100%; max-width: 24rem; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-8); } .forgotpw-brand[b-8hv43xow17] { text-align: center; margin-bottom: var(--space-6); } .forgotpw-logo[b-8hv43xow17] { height: 36px; margin-bottom: var(--space-3); } .forgotpw-title[b-8hv43xow17] { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--color-text); margin: 0; } .forgotpw-subtitle[b-8hv43xow17] { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-4) 0; text-align: center; } .forgotpw-form[b-8hv43xow17] { display: flex; flex-direction: column; gap: var(--space-4); } .forgotpw-field[b-8hv43xow17] { display: flex; flex-direction: column; gap: var(--space-1); } .forgotpw-btn[b-8hv43xow17] { width: 100%; justify-content: center; padding: var(--space-3); font-size: var(--text-base); text-decoration: none; } .forgotpw-back[b-8hv43xow17] { text-align: center; margin-top: var(--space-4); } .forgotpw-link[b-8hv43xow17] { font-size: var(--text-sm); color: var(--color-accent); } .forgotpw-success[b-8hv43xow17] { text-align: center; color: var(--color-text); } .forgotpw-success p[b-8hv43xow17] { margin: 0 0 var(--space-3) 0; } .forgotpw-footer[b-8hv43xow17] { text-align: center; margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); } /* /Components/Pages/LoginPage.razor.rz.scp.css */ .login-page[b-fn0dq3cei3] { min-height: 100vh; display: flex; align-items: center; justify-content: center; background-color: var(--color-bg); padding: var(--space-4); } .login-card[b-fn0dq3cei3] { width: 100%; max-width: 24rem; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-8); } .login-brand[b-fn0dq3cei3] { text-align: center; margin-bottom: var(--space-6); } .login-logo[b-fn0dq3cei3] { height: 36px; margin-bottom: var(--space-3); } .login-title[b-fn0dq3cei3] { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--color-text); margin: 0 0 var(--space-1) 0; } .login-subtitle[b-fn0dq3cei3] { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; } .login-form[b-fn0dq3cei3] { display: flex; flex-direction: column; gap: var(--space-4); } .login-field[b-fn0dq3cei3] { display: flex; flex-direction: column; gap: var(--space-1); } .form-label[b-fn0dq3cei3] { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); } .login-options[b-fn0dq3cei3] { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-sm); } .login-remember[b-fn0dq3cei3] { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-secondary); cursor: pointer; } .login-remember input[b-fn0dq3cei3] { accent-color: var(--color-accent); } .login-forgot[b-fn0dq3cei3] { font-size: var(--text-sm); color: var(--color-accent); } .login-btn[b-fn0dq3cei3] { width: 100%; justify-content: center; padding: var(--space-3); font-size: var(--text-base); text-decoration: none; } .login-footer[b-fn0dq3cei3] { text-align: center; margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); } /* /Components/Pages/SetPasswordPage.razor.rz.scp.css */ .setpw-page[b-x2acti79x7] { min-height: 100vh; display: flex; align-items: center; justify-content: center; background-color: var(--color-bg); padding: var(--space-4); } .setpw-card[b-x2acti79x7] { width: 100%; max-width: 24rem; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-8); } .setpw-brand[b-x2acti79x7] { text-align: center; margin-bottom: var(--space-6); } .setpw-logo[b-x2acti79x7] { height: 36px; margin-bottom: var(--space-3); } .setpw-title[b-x2acti79x7] { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--color-text); margin: 0; } .setpw-subtitle[b-x2acti79x7] { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-4) 0; text-align: center; } .setpw-form[b-x2acti79x7] { display: flex; flex-direction: column; gap: var(--space-4); } .setpw-field[b-x2acti79x7] { display: flex; flex-direction: column; gap: var(--space-1); } .setpw-btn[b-x2acti79x7] { width: 100%; justify-content: center; padding: var(--space-3); font-size: var(--text-base); text-decoration: none; } .setpw-success[b-x2acti79x7] { text-align: center; color: var(--color-text); } .setpw-success p[b-x2acti79x7] { margin: 0 0 var(--space-3) 0; } .setpw-error[b-x2acti79x7] { text-align: center; color: var(--color-text-muted); } .setpw-error p[b-x2acti79x7] { margin: 0 0 var(--space-3) 0; } .setpw-footer[b-x2acti79x7] { text-align: center; margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); } /* /Features/Comptes/Components/AffectationClientPanel.razor.rz.scp.css */ .affectation-panel[b-mcl8mq0e8e] { background: var(--color-bg, #f8f9fb); border: 1px solid var(--color-border, #e2e5ea); border-radius: var(--radius-lg, 0.5rem); padding: var(--space-4, 1rem) var(--space-6, 1.5rem); margin: var(--space-3, 0.75rem) var(--space-4, 1rem); } /* --- Header --- */ .affectation-header[b-mcl8mq0e8e] { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3, 0.75rem); } .affectation-title[b-mcl8mq0e8e] { display: flex; align-items: center; gap: var(--space-2, 0.5rem); font-size: var(--text-sm, 0.8125rem); font-weight: var(--font-semibold, 600); color: var(--color-text, #1a1f2b); } .affectation-icon[b-mcl8mq0e8e] { width: 16px; height: 16px; color: var(--color-accent, #1a8a8a); flex-shrink: 0; } .affectation-count[b-mcl8mq0e8e] { font-size: var(--text-xs, 0.75rem); color: var(--color-text-muted, #6b7280); background: var(--color-surface, #ffffff); border: 1px solid var(--color-border, #e2e5ea); border-radius: 9999px; padding: 2px 10px; font-weight: var(--font-medium, 500); } /* --- Toast feedback --- */ .affectation-toast[b-mcl8mq0e8e] { display: flex; align-items: center; gap: var(--space-2, 0.5rem); padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem); border-radius: var(--radius-md, 0.375rem); font-size: var(--text-sm, 0.8125rem); font-weight: var(--font-medium, 500); margin-bottom: var(--space-3, 0.75rem); animation: toast-in-b-mcl8mq0e8e 200ms ease; } .toast-icon[b-mcl8mq0e8e] { width: 16px; height: 16px; flex-shrink: 0; } .toast-success[b-mcl8mq0e8e] { background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-border); } .toast-error[b-mcl8mq0e8e] { background: var(--color-error-bg); color: var(--color-error-text); border: 1px solid var(--color-error-border); } @keyframes toast-in-b-mcl8mq0e8e { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* --- Loading --- */ .affectation-loading[b-mcl8mq0e8e] { display: flex; align-items: center; justify-content: center; gap: 6px; padding: var(--space-4, 1rem) 0; } .loading-dot[b-mcl8mq0e8e] { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent, #1a8a8a); opacity: 0.4; animation: dot-pulse-b-mcl8mq0e8e 1.2s ease-in-out infinite; } .loading-dot:nth-child(2)[b-mcl8mq0e8e] { animation-delay: 0.15s; } .loading-dot:nth-child(3)[b-mcl8mq0e8e] { animation-delay: 0.3s; } @keyframes dot-pulse-b-mcl8mq0e8e { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } } /* --- Body --- */ .affectation-body[b-mcl8mq0e8e] { display: flex; flex-direction: column; gap: var(--space-3, 0.75rem); } /* --- Empty state --- */ .affectation-empty[b-mcl8mq0e8e] { display: flex; align-items: center; gap: var(--space-2, 0.5rem); color: var(--color-text-muted, #6b7280); font-size: var(--text-sm, 0.8125rem); font-style: italic; padding: var(--space-3, 0.75rem) 0; } .empty-icon[b-mcl8mq0e8e] { width: 20px; height: 20px; flex-shrink: 0; opacity: 0.5; } /* --- Chips (activites affectees) --- */ .affectation-chips[b-mcl8mq0e8e] { display: flex; flex-wrap: wrap; gap: var(--space-2, 0.5rem); } .affectation-chip[b-mcl8mq0e8e] { display: inline-flex; align-items: center; gap: 6px; background: var(--color-surface, #ffffff); border: 1px solid var(--color-border, #e2e5ea); border-radius: 9999px; padding: 4px 6px 4px 12px; font-size: var(--text-sm, 0.8125rem); color: var(--color-text, #1a1f2b); transition: border-color var(--transition-fast, 120ms ease), box-shadow var(--transition-fast, 120ms ease); } .affectation-chip:hover[b-mcl8mq0e8e] { border-color: var(--color-border-strong, #c9cdd4); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05)); } .chip-label[b-mcl8mq0e8e] { font-weight: var(--font-medium, 500); white-space: nowrap; } .chip-remove[b-mcl8mq0e8e] { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: none; background: transparent; color: var(--color-text-muted, #6b7280); cursor: pointer; padding: 0; transition: all var(--transition-fast, 120ms ease); flex-shrink: 0; } .chip-remove svg[b-mcl8mq0e8e] { width: 14px; height: 14px; } .chip-remove:hover[b-mcl8mq0e8e] { background: var(--color-error-bg); color: var(--color-error); } /* --- Add row --- */ .affectation-add[b-mcl8mq0e8e] { padding-top: var(--space-2, 0.5rem); border-top: 1px solid var(--color-border, #e2e5ea); } .add-row[b-mcl8mq0e8e] { display: flex; align-items: center; gap: var(--space-2, 0.5rem); } .add-select[b-mcl8mq0e8e] { flex: 1; max-width: 280px; padding: 6px 10px; font-size: var(--text-sm, 0.8125rem); border: 1px solid var(--color-border, #e2e5ea); border-radius: var(--radius-md, 0.375rem); background: var(--color-surface, #ffffff); color: var(--color-text, #1a1f2b); outline: none; transition: border-color var(--transition-fast, 120ms ease), box-shadow var(--transition-fast, 120ms ease); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3E%3Cpath d='M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 14px; padding-right: 28px; } .add-select:focus[b-mcl8mq0e8e] { border-color: var(--color-accent, #1a8a8a); box-shadow: 0 0 0 3px var(--color-accent-light, #e6f5f5); } .btn-add[b-mcl8mq0e8e] { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; font-size: var(--text-sm, 0.8125rem); font-weight: var(--font-medium, 500); color: var(--color-accent-text, #ffffff); background: var(--color-accent, #1a8a8a); border: none; border-radius: var(--radius-md, 0.375rem); cursor: pointer; white-space: nowrap; transition: background var(--transition-fast, 120ms ease), box-shadow var(--transition-fast, 120ms ease); } .btn-add svg[b-mcl8mq0e8e] { width: 14px; height: 14px; } .btn-add:hover:not(:disabled)[b-mcl8mq0e8e] { background: var(--color-accent-hover, #15706f); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05)); } .btn-add:disabled[b-mcl8mq0e8e] { opacity: 0.5; cursor: not-allowed; } /* --- All assigned message --- */ .all-assigned[b-mcl8mq0e8e] { display: flex; align-items: center; gap: var(--space-2, 0.5rem); font-size: var(--text-sm, 0.8125rem); color: var(--color-success-text); padding: var(--space-1, 0.25rem) 0; } .all-assigned-icon[b-mcl8mq0e8e] { width: 14px; height: 14px; flex-shrink: 0; } /* /Features/Comptes/Components/CompteList.razor.rz.scp.css */ /* ============================================================ CompteList — Design aligné sur TicketListeGrid ============================================================ */ /* ── Table ── */ .comptes-table[b-qpj7msgyt2] { width: 100%; font-size: var(--text-base); } .comptes-table thead th[b-qpj7msgyt2] { text-transform: none; letter-spacing: normal; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-text-secondary); background-color: var(--color-surface); } .comptes-table tbody tr:last-child td[b-qpj7msgyt2] { border-bottom: none; } .row-disabled[b-qpj7msgyt2] { opacity: 0.55; } /* ── Badges statut (même pattern que StatusBadge / PriorityBadge) ── */ .statut-badge[b-qpj7msgyt2] { white-space: nowrap; } .statut-actif[b-qpj7msgyt2] { background: var(--color-success-bg); color: var(--color-success-text); } .statut-desactive[b-qpj7msgyt2] { background: var(--color-error-bg); color: var(--color-error-text); } .statut-enattentevalidation[b-qpj7msgyt2] { background: var(--color-warning-bg); color: var(--color-warning-text); } .statut-anonymise[b-qpj7msgyt2] { background: var(--color-p4-bg); color: var(--color-p4); } /* ── Badges rôle ── */ .role-badge[b-qpj7msgyt2] { white-space: nowrap; } .role-operateur[b-qpj7msgyt2] { background: var(--color-accent-light); color: var(--color-accent); } .role-ingenieur[b-qpj7msgyt2] { background: var(--color-info-bg); color: var(--color-info); } .role-clientsuperviseur[b-qpj7msgyt2] { background: var(--color-warning-bg); color: var(--color-warning-text); } .role-clientfinal[b-qpj7msgyt2] { background: var(--color-p4-bg); color: var(--color-text-secondary); } /* ── Actions ── */ .actions-cell[b-qpj7msgyt2] { display: flex; gap: var(--space-1); flex-wrap: wrap; align-items: center; } .confirm-group[b-qpj7msgyt2] { display: inline-flex; align-items: center; gap: var(--space-1); } /* ── Boutons contextuels (soft, même pattern que le reste de l'app) ── */ .btn-warning[b-qpj7msgyt2] { background: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid var(--color-warning-border); } .btn-success[b-qpj7msgyt2] { background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-border); } .btn-danger[b-qpj7msgyt2] { background: var(--color-error-bg); color: var(--color-error-text); border: 1px solid var(--color-error-border); } /* ── Feedback messages ── */ .form-success[b-qpj7msgyt2] { padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); border-radius: var(--radius-md); background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-border); font-size: var(--text-sm); font-weight: var(--weight-medium); } /* ── Formulaire de création ── */ .creation-form[b-qpj7msgyt2] { padding: var(--space-5) var(--space-6); margin-bottom: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); } .creation-form h3[b-qpj7msgyt2] { margin: 0 0 var(--space-4) 0; font-size: var(--text-md); font-weight: var(--weight-semibold); } .form-grid[b-qpj7msgyt2] { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); } .form-group[b-qpj7msgyt2] { display: flex; flex-direction: column; gap: var(--space-1); } .form-group label[b-qpj7msgyt2] { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-secondary); } .required[b-qpj7msgyt2] { color: var(--color-error); } .optional[b-qpj7msgyt2] { font-weight: var(--weight-normal); color: var(--color-text-muted); font-size: var(--text-xs); } .activites-group[b-qpj7msgyt2] { margin-bottom: var(--space-4); } .activites-checkboxes[b-qpj7msgyt2] { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-1); } .checkbox-label[b-qpj7msgyt2] { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); cursor: pointer; } .checkbox-label input[type="checkbox"][b-qpj7msgyt2] { width: 1rem; height: 1rem; accent-color: var(--color-accent); } .form-actions[b-qpj7msgyt2] { display: flex; gap: var(--space-2); } /* /Features/Dashboard/Components/Dashboard.razor.rz.scp.css */ .dash-header[b-yp84t4ot65] { margin-bottom: var(--space-5); } .dash-title[b-yp84t4ot65] { font-size: var(--text-xl); font-weight: var(--weight-bold); margin: 0; } .dash-subtitle[b-yp84t4ot65] { font-size: var(--text-sm); } /* ── Filters ── */ .filter-date[b-yp84t4ot65] { width: 10rem; } /* ── KPI Cards ── */ .dash-kpis[b-yp84t4ot65] { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); } .kpi-card[b-yp84t4ot65] { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); border-top: 3px solid var(--color-border); } .kpi-accent[b-yp84t4ot65] { border-top-color: var(--color-accent); } .kpi-warning[b-yp84t4ot65] { border-top-color: var(--color-nouveau); } .kpi-danger[b-yp84t4ot65] { border-top-color: var(--color-p1); } .kpi-success[b-yp84t4ot65] { border-top-color: var(--color-success); } .kpi-violet[b-yp84t4ot65] { border-top-color: var(--color-nouveau); } .kpi-orange[b-yp84t4ot65] { border-top-color: var(--color-p2); } .kpi-value[b-yp84t4ot65] { font-size: var(--text-2xl); font-weight: var(--weight-bold); font-family: var(--font-mono); color: var(--color-text); line-height: 1; } .kpi-unit[b-yp84t4ot65] { font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--color-text-muted); } .kpi-label[b-yp84t4ot65] { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: var(--weight-medium); } /* ── Section title ── */ .dash-section-title[b-yp84t4ot65] { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text); margin-bottom: var(--space-3); } /* ── Attente cards ── */ .dash-attente-cards[b-yp84t4ot65] { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-4); } .attente-card[b-yp84t4ot65] { cursor: default; } /* ── Support detail card ── */ .support-detail-card[b-yp84t4ot65] { margin-bottom: var(--space-6); } /* ── Charts Grid ── */ .dash-charts[b-yp84t4ot65] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .chart-card[b-yp84t4ot65] { min-height: 14rem; } .chart-title[b-yp84t4ot65] { font-size: var(--text-base); font-weight: var(--weight-semibold); margin: 0; } /* ── Bar Chart ── */ .bar-chart[b-yp84t4ot65] { display: flex; flex-direction: column; gap: var(--space-3); } .bar-row[b-yp84t4ot65] { display: flex; align-items: center; gap: var(--space-3); } .bar-label[b-yp84t4ot65] { width: 2rem; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-secondary); flex-shrink: 0; text-align: right; } .bar-label-wide[b-yp84t4ot65] { width: 6rem; } .bar-track[b-yp84t4ot65] { flex: 1; height: 1.5rem; background-color: var(--color-bg); border-radius: var(--radius-sm); overflow: hidden; } .bar-fill[b-yp84t4ot65] { height: 100%; border-radius: var(--radius-sm); transition: width 0.4s ease; min-width: 0.25rem; } .bar-p1[b-yp84t4ot65] { background-color: var(--color-p1); } .bar-p2[b-yp84t4ot65] { background-color: var(--color-p2); } .bar-p3[b-yp84t4ot65] { background-color: var(--color-p3); } .bar-p4[b-yp84t4ot65] { background-color: var(--color-p4); } .bar-accent[b-yp84t4ot65] { background-color: var(--color-accent); } .bar-danger[b-yp84t4ot65] { background-color: var(--color-p1); } .bar-violet[b-yp84t4ot65] { background-color: var(--color-nouveau); } .bar-warning[b-yp84t4ot65] { background-color: var(--color-p2); } .bar-value[b-yp84t4ot65] { width: 2rem; font-size: var(--text-sm); font-weight: var(--weight-bold); font-family: var(--font-mono); color: var(--color-text); text-align: right; flex-shrink: 0; } /* ── Donut Chart ── */ .donut-chart[b-yp84t4ot65] { display: flex; align-items: center; gap: var(--space-6); } .donut-svg[b-yp84t4ot65] { width: 8rem; height: 8rem; flex-shrink: 0; transform: rotate(-90deg); } .donut-segment[b-yp84t4ot65] { transition: stroke-dasharray 0.4s ease; } .donut-center-text[b-yp84t4ot65] { font-size: 0.5rem; font-weight: 700; fill: var(--color-text); transform: rotate(90deg); transform-origin: 18px 18px; } .donut-legend[b-yp84t4ot65] { display: flex; flex-direction: column; gap: var(--space-2); } .legend-item[b-yp84t4ot65] { display: flex; align-items: center; gap: var(--space-2); } .legend-dot[b-yp84t4ot65] { width: 0.625rem; height: 0.625rem; border-radius: 50%; flex-shrink: 0; } .legend-label[b-yp84t4ot65] { font-size: var(--text-sm); color: var(--color-text-secondary); min-width: 4rem; } .legend-value[b-yp84t4ot65] { font-size: var(--text-sm); font-weight: var(--weight-bold); font-family: var(--font-mono); color: var(--color-text); } @media (max-width: 768px) { .dash-charts[b-yp84t4ot65] { grid-template-columns: 1fr; } .dash-attente-cards[b-yp84t4ot65] { grid-template-columns: 1fr; } .donut-chart[b-yp84t4ot65] { flex-direction: column; } } /* /Features/Notifications/Components/NotificationCloche.razor.rz.scp.css */ .cloche[b-95enay3tvx] { position: relative; } .cloche-bouton[b-95enay3tvx] { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; } .cloche-bouton:hover[b-95enay3tvx] { background-color: var(--color-bg); border-color: var(--color-border-strong); } .cloche--ouvert .cloche-bouton[b-95enay3tvx] { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-light); } .cloche-icone[b-95enay3tvx] { font-size: 1.05rem; line-height: 1; } .cloche-badge[b-95enay3tvx] { position: absolute; top: -0.3rem; right: -0.3rem; min-width: 1.05rem; height: 1.05rem; padding: 0 0.25rem; display: inline-flex; align-items: center; justify-content: center; font-size: 0.625rem; font-weight: var(--weight-bold); color: #fff; background-color: var(--color-error); border-radius: 9999px; } .cloche-volet[b-95enay3tvx] { position: absolute; top: calc(100% + var(--space-2)); right: 0; width: 20rem; max-height: 24rem; overflow-y: auto; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); z-index: 50; } .cloche-entete[b-95enay3tvx] { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-text); border-bottom: 1px solid var(--color-border); } .cloche-vide[b-95enay3tvx] { padding: var(--space-4) var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; } .cloche-liste[b-95enay3tvx] { list-style: none; margin: 0; padding: 0; } .cloche-item[b-95enay3tvx] { border-bottom: 1px solid var(--color-border); } .cloche-item:last-child[b-95enay3tvx] { border-bottom: none; } .cloche-item--nonlu[b-95enay3tvx] { background-color: var(--color-accent-light); } .cloche-lien[b-95enay3tvx] { display: flex; flex-direction: column; gap: 0.125rem; padding: var(--space-2) var(--space-3); text-decoration: none; color: var(--color-text); } .cloche-lien:hover[b-95enay3tvx] { background-color: var(--color-bg); } .cloche-item-texte[b-95enay3tvx] { font-size: var(--text-sm); font-weight: var(--weight-medium); } .cloche-item-meta[b-95enay3tvx] { font-size: var(--text-xs); color: var(--color-text-muted); } /* /Features/Shared/Components/EnAttenteBadge.razor.rz.scp.css */ .attente-support[b-25wisgchpg] { background-color: var(--color-attente-support-bg); color: var(--color-attente-support); } .attente-client[b-25wisgchpg] { background-color: var(--color-attente-client-bg); color: var(--color-attente-client); } .attente-superviseur[b-25wisgchpg] { background-color: var(--color-attente-superviseur-bg); color: var(--color-attente-superviseur); } /* /Features/Shared/Components/PriorityBadge.razor.rz.scp.css */ .priority-p1[b-pjnboo2e97] { background-color: var(--color-p1-bg); color: var(--color-p1); } .priority-p2[b-pjnboo2e97] { background-color: var(--color-p2-bg); color: var(--color-p2); } .priority-p3[b-pjnboo2e97] { background-color: var(--color-p3-bg); color: var(--color-p3); } .priority-p4[b-pjnboo2e97] { background-color: var(--color-p4-bg); color: var(--color-p4); } /* /Features/Shared/Components/StatusBadge.razor.rz.scp.css */ .status-nouveau[b-jiqbyuwpcm] { background-color: var(--color-nouveau-bg); color: var(--color-nouveau); } .status-en-cours[b-jiqbyuwpcm] { background-color: var(--color-en-cours-bg); color: var(--color-en-cours); } .status-reouvert[b-jiqbyuwpcm] { background-color: var(--color-reouvert-bg); color: var(--color-reouvert); } .status-clos[b-jiqbyuwpcm] { background-color: var(--color-clos-bg); color: var(--color-clos); } /* /Features/Tickets/Components/BackOffice/CreationManuelleTicket.razor.rz.scp.css */ /* ============================================================ CreationManuelleTicket — Design premium back-office ============================================================ */ /* ── Page ── */ .cm-page[b-nqx1e86hsp] { max-width: 48rem; margin: 0 auto; } /* ── Header ── */ .cm-header[b-nqx1e86hsp] { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-6); } .cm-header-icon[b-nqx1e86hsp] { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; flex-shrink: 0; background-color: var(--color-accent-light); color: var(--color-accent); border-radius: var(--radius-xl); } .cm-title[b-nqx1e86hsp] { font-size: var(--text-xl); font-weight: var(--weight-bold); letter-spacing: -0.02em; margin: 0; } .cm-subtitle[b-nqx1e86hsp] { font-size: var(--text-sm); color: var(--color-text-muted); margin: var(--space-1) 0 0; } /* ── Form card ── */ .cm-form-card[b-nqx1e86hsp] { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; } /* ── Section ── */ .cm-section[b-nqx1e86hsp] { padding: var(--space-6); border-bottom: 1px solid var(--color-border); } .cm-section:last-of-type[b-nqx1e86hsp] { border-bottom: none; } .cm-section-header[b-nqx1e86hsp] { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text); } .cm-section-header svg[b-nqx1e86hsp] { color: var(--color-accent); flex-shrink: 0; } /* ── Field ── */ .cm-field[b-nqx1e86hsp] { margin-bottom: var(--space-4); } .cm-field:last-child[b-nqx1e86hsp] { margin-bottom: 0; } .cm-label[b-nqx1e86hsp] { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); margin-bottom: var(--space-2); } .cm-label-sm[b-nqx1e86hsp] { font-size: var(--text-xs); margin-bottom: var(--space-1); } .cm-required[b-nqx1e86hsp] { color: var(--color-p1); } .cm-field-footer[b-nqx1e86hsp] { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-1); } .cm-hint[b-nqx1e86hsp] { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); } .cm-char-count[b-nqx1e86hsp] { font-size: var(--text-xs); font-family: var(--font-mono); color: var(--color-text-muted); transition: color var(--transition-fast); } .cm-char-warn[b-nqx1e86hsp] { color: var(--color-warning); font-weight: var(--weight-medium); } /* ── Loading inline ── */ .cm-loading-inline[b-nqx1e86hsp] { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); padding: var(--space-3) 0; } .cm-spinner-sm[b-nqx1e86hsp] { width: 1rem; height: 1rem; border: 2px solid var(--color-border); border-top-color: var(--color-accent); border-radius: 50%; animation: cm-spin-b-nqx1e86hsp 0.7s linear infinite; } @keyframes cm-spin-b-nqx1e86hsp { to { transform: rotate(360deg); } } /* ── Inline warnings / info ── */ .cm-inline-warning[b-nqx1e86hsp] { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); color: var(--color-warning); background-color: var(--color-warning-bg); border: 1px solid var(--color-warning-border); border-radius: var(--radius-md); } .cm-inline-info[b-nqx1e86hsp] { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--text-xs); color: var(--color-info); background-color: var(--color-info-bg); border: 1px solid var(--color-info-border); border-radius: var(--radius-md); margin-top: var(--space-3); } /* ── Segmented control ── */ .cm-segmented[b-nqx1e86hsp] { display: inline-flex; padding: 3px; gap: 2px; background-color: var(--color-surface-hover); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-4); } .cm-seg[b-nqx1e86hsp] { appearance: none; border: none; background: transparent; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-4); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-secondary); border-radius: calc(var(--radius-md) - 2px); cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; } .cm-seg:hover:not(.cm-seg-active)[b-nqx1e86hsp] { color: var(--color-text); } .cm-seg-active[b-nqx1e86hsp] { background-color: var(--color-surface); color: var(--color-accent); font-weight: var(--weight-semibold); box-shadow: var(--shadow-sm); } /* ── Search bar ── */ .cm-search-bar[b-nqx1e86hsp] { display: flex; align-items: center; gap: var(--space-2); position: relative; margin-bottom: var(--space-1); } .cm-search-hint[b-nqx1e86hsp] { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-3); } .cm-search-icon[b-nqx1e86hsp] { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; } .cm-search-input[b-nqx1e86hsp] { padding-left: 2.25rem !important; flex: 1; } .cm-search-empty[b-nqx1e86hsp] { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); background-color: var(--color-bg); border-radius: var(--radius-md); } /* ── Client list ── */ .cm-client-list[b-nqx1e86hsp] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .cm-client-item[b-nqx1e86hsp] { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); } .cm-client-item:hover[b-nqx1e86hsp] { border-color: var(--color-border-strong); background-color: var(--color-surface-hover); } .cm-client-selected[b-nqx1e86hsp] { border-color: var(--color-accent) !important; background-color: var(--color-accent-light) !important; } .cm-client-avatar[b-nqx1e86hsp] { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; background-color: var(--color-accent-light); color: var(--color-accent); font-size: var(--text-xs); font-weight: var(--weight-bold); border-radius: 50%; letter-spacing: -0.02em; } .cm-client-info[b-nqx1e86hsp] { flex: 1; min-width: 0; } .cm-client-name[b-nqx1e86hsp] { display: block; font-weight: var(--weight-medium); font-size: var(--text-sm); } .cm-client-meta[b-nqx1e86hsp] { display: block; font-size: var(--text-xs); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm-client-check[b-nqx1e86hsp] { color: var(--color-accent); flex-shrink: 0; } /* ── New client grid ── */ .cm-new-client-grid[b-nqx1e86hsp] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } /* ── Priority row (urgence + importance + preview) ── */ .cm-priority-row[b-nqx1e86hsp] { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--space-4); align-items: end; } .cm-priority-preview[b-nqx1e86hsp] { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); min-width: 7rem; } .cm-priority-label[b-nqx1e86hsp] { font-size: 0.6875rem; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); } .cm-priority-badge[b-nqx1e86hsp] { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; font-size: var(--text-md); font-weight: var(--weight-bold); border-radius: 50%; transition: all var(--transition-normal); } .cm-priority-1[b-nqx1e86hsp] { background-color: var(--color-p1-bg); color: var(--color-p1); box-shadow: 0 0 0 3px var(--color-error-border); } .cm-priority-2[b-nqx1e86hsp] { background-color: var(--color-p2-bg); color: var(--color-p2); box-shadow: 0 0 0 3px var(--color-warning-border); } .cm-priority-3[b-nqx1e86hsp] { background-color: var(--color-p3-bg); color: var(--color-p3); box-shadow: 0 0 0 3px var(--color-info-border); } .cm-priority-4[b-nqx1e86hsp] { background-color: var(--color-p4-bg); color: var(--color-p4); box-shadow: 0 0 0 3px var(--color-border); } /* ── Error ── */ .cm-error[b-nqx1e86hsp] { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0 var(--space-6) var(--space-4); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-p1); background-color: var(--color-p1-bg); border: 1px solid var(--color-error-border); border-radius: var(--radius-md); } .cm-error svg[b-nqx1e86hsp] { flex-shrink: 0; margin-top: 1px; } /* ── Actions ── */ .cm-actions[b-nqx1e86hsp] { display: flex; justify-content: flex-end; padding: var(--space-4) var(--space-6); background-color: var(--color-bg); border-top: 1px solid var(--color-border); } .cm-submit[b-nqx1e86hsp] { min-width: 10rem; justify-content: center; padding: var(--space-2) var(--space-6); font-size: var(--text-sm); font-weight: var(--weight-semibold); } .cm-btn-spinner[b-nqx1e86hsp] { width: 1rem; height: 1rem; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: cm-spin-b-nqx1e86hsp 0.6s linear infinite; } /* ── Success card ── */ .cm-success-card[b-nqx1e86hsp] { text-align: center; padding: var(--space-12) var(--space-8); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .cm-success-icon[b-nqx1e86hsp] { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; margin-bottom: var(--space-4); background-color: var(--color-success-bg); color: var(--color-success); border-radius: 50%; animation: cm-pop-b-nqx1e86hsp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes cm-pop-b-nqx1e86hsp { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .cm-success-title[b-nqx1e86hsp] { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-text); margin-bottom: var(--space-2); } .cm-success-number[b-nqx1e86hsp] { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--color-accent); margin-bottom: var(--space-2); letter-spacing: 0.02em; } .cm-success-detail[b-nqx1e86hsp] { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-6); } .cm-success-warning[b-nqx1e86hsp] { display: inline-flex; align-items: flex-start; gap: var(--space-3); text-align: left; padding: var(--space-3) var(--space-5); margin-bottom: var(--space-6); background-color: var(--color-warning-bg); border: 1px solid var(--color-warning-border); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--color-text); } .cm-success-warning svg[b-nqx1e86hsp] { color: var(--color-warning); flex-shrink: 0; margin-top: 2px; } .cm-success-warning strong[b-nqx1e86hsp] { display: block; color: var(--color-warning); margin-bottom: var(--space-1); } .cm-success-warning span[b-nqx1e86hsp] { color: var(--color-text-secondary); } /* ── Responsive ── */ @media (max-width: 640px) { .cm-header[b-nqx1e86hsp] { flex-direction: column; gap: var(--space-3); } .cm-section[b-nqx1e86hsp] { padding: var(--space-4); } .cm-new-client-grid[b-nqx1e86hsp] { grid-template-columns: 1fr; } .cm-priority-row[b-nqx1e86hsp] { grid-template-columns: 1fr 1fr; } .cm-priority-preview[b-nqx1e86hsp] { grid-column: 1 / -1; flex-direction: row; justify-content: center; } .cm-actions[b-nqx1e86hsp] { padding: var(--space-4); } .cm-submit[b-nqx1e86hsp] { width: 100%; } .cm-success-card[b-nqx1e86hsp] { padding: var(--space-8) var(--space-4); } } /* /Features/Tickets/Components/BackOffice/FicheTicket.razor.rz.scp.css */ /* ============================================================ FicheTicket — Layout professionnel deux colonnes Inspiration : Zendesk / Linear / Intercom ============================================================ */ /* ── État vide / chargement ── */ .fiche-etat[b-ps35m4bzdi] { display: flex; align-items: center; justify-content: center; min-height: 50vh; } .loading-skeleton[b-ps35m4bzdi] { width: 100%; max-width: 40rem; } .skeleton-header[b-ps35m4bzdi] { height: 2rem; width: 60%; background: linear-gradient(90deg, var(--color-surface-hover) 25%, var(--color-bg) 50%, var(--color-surface-hover) 75%); background-size: 200% 100%; animation: shimmer-b-ps35m4bzdi 1.5s infinite; border-radius: var(--radius-md); margin-bottom: var(--space-4); } .skeleton-body[b-ps35m4bzdi] { display: flex; flex-direction: column; gap: var(--space-3); } .skeleton-line[b-ps35m4bzdi] { height: 1rem; background: linear-gradient(90deg, var(--color-surface-hover) 25%, var(--color-bg) 50%, var(--color-surface-hover) 75%); background-size: 200% 100%; animation: shimmer-b-ps35m4bzdi 1.5s infinite; border-radius: var(--radius-sm); } .skeleton-line.w-75[b-ps35m4bzdi] { width: 75%; } .skeleton-line.w-60[b-ps35m4bzdi] { width: 60%; } .skeleton-line.w-50[b-ps35m4bzdi] { width: 50%; } @keyframes shimmer-b-ps35m4bzdi { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .empty-state[b-ps35m4bzdi] { text-align: center; color: var(--color-text-muted); } .empty-state-icon[b-ps35m4bzdi] { margin-bottom: var(--space-3); opacity: 0.4; } .empty-state p[b-ps35m4bzdi] { font-size: var(--text-md); } /* ── En-tête sticky ── */ .fiche-sticky-header[b-ps35m4bzdi] { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; margin-bottom: var(--space-2); position: sticky; top: 0; z-index: 20; background-color: var(--color-bg); border-bottom: 1px solid transparent; transition: border-color var(--transition-normal), box-shadow var(--transition-normal); } .fiche-sticky-left[b-ps35m4bzdi] { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } .btn-back[b-ps35m4bzdi] { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); flex-shrink: 0; } .btn-back:hover[b-ps35m4bzdi] { background: var(--color-surface-hover); color: var(--color-text); border-color: var(--color-border-strong); } .header-ticket-info[b-ps35m4bzdi] { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; } .fiche-sticky-actions[b-ps35m4bzdi] { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } .actions-group[b-ps35m4bzdi] { display: flex; align-items: center; gap: var(--space-1); } .actions-separator[b-ps35m4bzdi] { width: 1px; height: 1.25rem; background-color: var(--color-border); margin: 0 var(--space-1); } .btn-close-ticket[b-ps35m4bzdi] { color: var(--color-text-muted); } .suivi-tel-badge[b-ps35m4bzdi] { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.125rem var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-p2); background-color: var(--color-p2-bg); border-radius: 9999px; } /* ── Sujet ── */ .fiche-sujet[b-ps35m4bzdi] { font-size: var(--text-xl); font-weight: var(--weight-bold); margin: 0 0 var(--space-4) 0; line-height: var(--leading-tight); letter-spacing: -0.01em; color: var(--color-text); } /* ── Feedback ── */ .fiche-feedback[b-ps35m4bzdi] { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: var(--space-4); animation: feedback-in-b-ps35m4bzdi 0.25s ease-out; } @keyframes feedback-in-b-ps35m4bzdi { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .feedback-error[b-ps35m4bzdi] { background-color: #fef2f2; border: 1px solid #fecaca; color: #dc2626; } .feedback-success[b-ps35m4bzdi] { background-color: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; } /* ── Bandeaux scission / fusion ── */ .bandeau[b-ps35m4bzdi] { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); border-radius: var(--radius-md); margin-bottom: var(--space-3); } .bandeau a[b-ps35m4bzdi] { font-weight: var(--weight-semibold); color: var(--color-accent); text-decoration: none; margin-left: var(--space-1); } .bandeau a:hover[b-ps35m4bzdi] { text-decoration: underline; } .bandeau-scission[b-ps35m4bzdi] { background-color: rgba(14, 165, 233, 0.06); border: 1px solid rgba(14, 165, 233, 0.2); color: var(--color-text); } .bandeau-scission svg[b-ps35m4bzdi] { color: #0ea5e9; flex-shrink: 0; } .bandeau-fusion[b-ps35m4bzdi] { background-color: rgba(168, 85, 247, 0.06); border: 1px solid rgba(168, 85, 247, 0.2); color: var(--color-text); } .bandeau-fusion svg[b-ps35m4bzdi] { color: #a855f7; flex-shrink: 0; } /* ── Panneau inline (réassignation) ── */ .inline-panel[b-ps35m4bzdi] { background: var(--color-surface); border: 1px solid var(--color-accent); border-radius: var(--radius-lg); margin-bottom: var(--space-4); box-shadow: 0 0 0 3px var(--color-accent-light); overflow: hidden; animation: panel-in-b-ps35m4bzdi 0.2s ease-out; } @keyframes panel-in-b-ps35m4bzdi { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .inline-panel-header[b-ps35m4bzdi] { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-4); background: var(--color-accent-light); border-bottom: 1px solid var(--color-border); } .inline-panel-title[b-ps35m4bzdi] { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-accent); } .btn-panel-close[b-ps35m4bzdi] { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--color-text-muted); cursor: pointer; transition: all var(--transition-fast); } .btn-panel-close:hover[b-ps35m4bzdi] { background: rgba(0, 0, 0, 0.06); color: var(--color-text); } .inline-panel-body[b-ps35m4bzdi] { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); } .inline-panel-body select[b-ps35m4bzdi] { min-width: 16rem; } /* ── LAYOUT DEUX COLONNES ── */ .fiche-layout[b-ps35m4bzdi] { display: grid; grid-template-columns: 1fr 20rem; gap: var(--space-6); align-items: start; } @media (max-width: 960px) { .fiche-layout[b-ps35m4bzdi] { grid-template-columns: 1fr; } } /* ── COLONNE GAUCHE : conversation ── */ .fiche-main[b-ps35m4bzdi] { min-width: 0; } .conversation-section[b-ps35m4bzdi] { margin-bottom: var(--space-5); } .conversation-header[b-ps35m4bzdi] { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); } .conversation-header .section-title[b-ps35m4bzdi] { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); font-weight: var(--weight-semibold); margin: 0; color: var(--color-text); } .conversation-header .section-title svg[b-ps35m4bzdi] { color: var(--color-text-muted); } .message-count[b-ps35m4bzdi] { font-size: var(--text-xs); color: var(--color-text-muted); padding: 0.125rem var(--space-2); background: var(--color-surface-hover); border-radius: 9999px; } .empty-conversation[b-ps35m4bzdi] { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-10) 0; color: var(--color-text-muted); } .empty-conversation svg[b-ps35m4bzdi] { opacity: 0.3; } .empty-conversation p[b-ps35m4bzdi] { font-size: var(--text-sm); } /* ── Fil de messages (style timeline) ── */ .message-thread[b-ps35m4bzdi] { display: flex; flex-direction: column; } .message[b-ps35m4bzdi] { display: flex; gap: var(--space-3); padding: 0; position: relative; } .message-gutter[b-ps35m4bzdi] { display: flex; flex-direction: column; align-items: center; width: 2rem; flex-shrink: 0; } .message-avatar[b-ps35m4bzdi] { width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: var(--weight-bold); flex-shrink: 0; color: #fff; z-index: 1; } .msg-client .message-avatar[b-ps35m4bzdi] { background: linear-gradient(135deg, #3b82f6, #2563eb); } .msg-support .message-avatar[b-ps35m4bzdi] { background: linear-gradient(135deg, #1a8a8a, #15706f); } .msg-note .message-avatar[b-ps35m4bzdi] { background: linear-gradient(135deg, #f59e0b, #d97706); } .message-line[b-ps35m4bzdi] { flex: 1; width: 2px; background-color: var(--color-border); margin: var(--space-1) 0; } .message:last-child .message-line[b-ps35m4bzdi] { display: none; } .message-content[b-ps35m4bzdi] { flex: 1; min-width: 0; padding-bottom: var(--space-5); } .message:last-child .message-content[b-ps35m4bzdi] { padding-bottom: 0; } .message-header[b-ps35m4bzdi] { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); } .message-meta[b-ps35m4bzdi] { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .message-author-name[b-ps35m4bzdi] { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); } .message-type-badge[b-ps35m4bzdi] { font-size: 0.6875rem; font-weight: var(--weight-semibold); padding: 0.0625rem var(--space-2); border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.03em; } .msg-client .message-type-badge[b-ps35m4bzdi] { background: rgba(59, 130, 246, 0.1); color: #2563eb; } .msg-support .message-type-badge[b-ps35m4bzdi] { background: rgba(26, 138, 138, 0.1); color: var(--color-accent); } .msg-note .message-type-badge[b-ps35m4bzdi] { background: rgba(217, 119, 6, 0.1); color: #b45309; } .message-canal[b-ps35m4bzdi] { display: inline-flex; align-items: center; gap: 3px; font-size: var(--text-xs); color: var(--color-text-muted); font-style: italic; } .message-date[b-ps35m4bzdi] { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; } /* ── Bulle de message ── */ .message-bubble[b-ps35m4bzdi] { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text); word-break: break-word; box-shadow: var(--shadow-sm); } .msg-client .message-bubble[b-ps35m4bzdi] { border-left: 3px solid #3b82f6; } .msg-support .message-bubble[b-ps35m4bzdi] { border-left: 3px solid var(--color-accent); background: rgba(26, 138, 138, 0.03); } .msg-note .message-bubble[b-ps35m4bzdi] { border: 1px dashed var(--color-msg-note-border); border-left: 3px solid var(--color-msg-note-border); background: rgba(245, 158, 11, 0.04); } .message-body-vide[b-ps35m4bzdi] { font-style: italic; color: var(--color-text-muted); } /* ── Pièces jointes ── */ .message-attachments[b-ps35m4bzdi] { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); } .attachment-chip[b-ps35m4bzdi] { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); font-size: var(--text-xs); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 9999px; color: var(--color-text-secondary); transition: all var(--transition-fast); } .attachment-chip:hover[b-ps35m4bzdi] { border-color: var(--color-border-strong); background: var(--color-surface-hover); } .attachment-chip svg[b-ps35m4bzdi] { color: var(--color-text-muted); } .attachment-name[b-ps35m4bzdi] { font-weight: var(--weight-medium); max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attachment-size[b-ps35m4bzdi] { color: var(--color-text-muted); } /* ── Composer ── */ .composer-section[b-ps35m4bzdi] { position: sticky; bottom: 0; z-index: 10; background: var(--color-bg); padding-top: var(--space-3); padding-bottom: var(--space-3); } /* ── COLONNE DROITE : sidebar propriétés ── */ .fiche-sidebar[b-ps35m4bzdi] { position: sticky; top: 4.5rem; max-height: calc(100vh - 5rem); overflow-y: auto; display: flex; flex-direction: column; gap: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } /* scrollbar discrète */ .fiche-sidebar[b-ps35m4bzdi]::-webkit-scrollbar { width: 4px; } .fiche-sidebar[b-ps35m4bzdi]::-webkit-scrollbar-track { background: transparent; } .fiche-sidebar[b-ps35m4bzdi]::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; } .sidebar-section[b-ps35m4bzdi] { padding: var(--space-4); border-bottom: 1px solid var(--color-border); } .sidebar-section:last-child[b-ps35m4bzdi] { border-bottom: none; } .sidebar-section-title[b-ps35m4bzdi] { font-size: 0.6875rem; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin: 0 0 var(--space-3) 0; display: flex; align-items: center; gap: var(--space-2); } /* ── Property list (dl/dt/dd) ── */ .property-list[b-ps35m4bzdi] { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; } .property-row[b-ps35m4bzdi] { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); } .property-row dt[b-ps35m4bzdi] { font-size: var(--text-xs); color: var(--color-text-muted); flex-shrink: 0; padding-top: 2px; } .property-row dd[b-ps35m4bzdi] { margin: 0; text-align: right; } .property-value[b-ps35m4bzdi] { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); } /* ── Person info ── */ .person-info[b-ps35m4bzdi] { display: flex; align-items: center; gap: var(--space-2); } .person-avatar[b-ps35m4bzdi] { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.625rem; font-weight: var(--weight-bold); color: #fff; background: linear-gradient(135deg, var(--color-sidebar), #374151); flex-shrink: 0; } .client-avatar[b-ps35m4bzdi] { background: linear-gradient(135deg, #3b82f6, #2563eb); } .person-details[b-ps35m4bzdi] { display: flex; flex-direction: column; text-align: right; } .person-name[b-ps35m4bzdi] { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); line-height: 1.2; } .person-role[b-ps35m4bzdi] { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.2; } .non-assigne[b-ps35m4bzdi] { font-size: var(--text-sm); color: var(--color-text-muted); font-style: italic; } /* ── Sidebar action buttons ── */ .sidebar-action-btn[b-ps35m4bzdi] { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2) var(--space-2); margin-top: var(--space-3); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-accent); background: transparent; border: 1px dashed var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); } .sidebar-action-btn:hover:not(:disabled)[b-ps35m4bzdi] { background: var(--color-accent-light); border-color: var(--color-accent); border-style: solid; } .sidebar-action-btn:disabled[b-ps35m4bzdi] { opacity: 0.5; cursor: not-allowed; } /* ── Sidebar edit forms ── */ .sidebar-edit-form[b-ps35m4bzdi] { margin-top: var(--space-3); padding: var(--space-3); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-3); animation: panel-in-b-ps35m4bzdi 0.15s ease-out; } .sidebar-form-row[b-ps35m4bzdi] { display: flex; flex-direction: column; gap: var(--space-1); } .sidebar-form-label[b-ps35m4bzdi] { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); } .sidebar-form-actions[b-ps35m4bzdi] { display: flex; gap: var(--space-2); } .sidebar-search-row[b-ps35m4bzdi] { display: flex; gap: var(--space-2); } .sidebar-search-hint[b-ps35m4bzdi] { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); } .sidebar-search-row .input[b-ps35m4bzdi] { flex: 1; min-width: 0; } .sidebar-empty-hint[b-ps35m4bzdi] { font-size: var(--text-xs); color: var(--color-text-muted); font-style: italic; margin: 0; } /* ── Client results (sidebar) ── */ .client-results[b-ps35m4bzdi] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .client-results li[b-ps35m4bzdi] { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2); background: var(--color-surface); cursor: pointer; font-size: var(--text-xs); transition: background-color var(--transition-fast); } .client-results li:hover[b-ps35m4bzdi] { background: var(--color-surface-hover); } .client-results li.selected[b-ps35m4bzdi] { background: var(--color-accent-light); box-shadow: inset 2px 0 0 var(--color-accent); } /* ── History count badge ── */ .history-count[b-ps35m4bzdi] { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 var(--space-1); font-size: 0.625rem; font-weight: var(--weight-bold); color: var(--color-text-muted); background: var(--color-surface-hover); border-radius: 9999px; } /* ── Timeline (historique) ── */ .timeline[b-ps35m4bzdi] { display: flex; flex-direction: column; position: relative; } .timeline[b-ps35m4bzdi]::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--color-border); } .timeline-item[b-ps35m4bzdi] { display: flex; gap: var(--space-3); padding: var(--space-1) 0; position: relative; } .timeline-dot[b-ps35m4bzdi] { width: 11px; height: 11px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-border-strong); flex-shrink: 0; margin-top: 2px; z-index: 1; } .timeline-item.timeline-interne .timeline-dot[b-ps35m4bzdi] { border-color: var(--color-msg-note-border); background: rgba(245, 158, 11, 0.15); } .timeline-content[b-ps35m4bzdi] { flex: 1; min-width: 0; padding-bottom: var(--space-2); } .timeline-top[b-ps35m4bzdi] { display: flex; align-items: center; gap: var(--space-2); } .timeline-action[b-ps35m4bzdi] { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text); } .timeline-badge-interne[b-ps35m4bzdi] { font-size: 0.625rem; font-weight: var(--weight-semibold); padding: 0 var(--space-1); border-radius: 9999px; background: rgba(245, 158, 11, 0.1); color: #b45309; } .timeline-detail[b-ps35m4bzdi] { font-size: var(--text-xs); color: var(--color-text-muted); display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; } .timeline-values[b-ps35m4bzdi] { display: inline-flex; align-items: center; gap: 3px; } .timeline-old[b-ps35m4bzdi] { text-decoration: line-through; opacity: 0.7; } .timeline-new[b-ps35m4bzdi] { font-weight: var(--weight-medium); color: var(--color-text-secondary); } .timeline-date[b-ps35m4bzdi] { font-size: 0.625rem; color: var(--color-text-muted); opacity: 0.7; } /* ============================================================ Overlay panels (scission / fusion) ============================================================ */ .overlay-backdrop[b-ps35m4bzdi] { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 50; animation: fade-in-b-ps35m4bzdi 0.2s ease; } @keyframes fade-in-b-ps35m4bzdi { from { opacity: 0; } to { opacity: 1; } } .overlay-panel[b-ps35m4bzdi] { position: fixed; top: 0; right: 0; bottom: 0; width: min(36rem, 90vw); background: var(--color-surface); z-index: 51; display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12); animation: slide-in-b-ps35m4bzdi 0.25s ease-out; } @keyframes slide-in-b-ps35m4bzdi { from { transform: translateX(100%); } to { transform: translateX(0); } } .overlay-header[b-ps35m4bzdi] { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .overlay-title[b-ps35m4bzdi] { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); font-weight: var(--weight-semibold); margin: 0; } .overlay-body[b-ps35m4bzdi] { flex: 1; overflow-y: auto; padding: var(--space-6); } .overlay-hint[b-ps35m4bzdi] { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); line-height: var(--leading-normal); } .overlay-footer[b-ps35m4bzdi] { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border); background: var(--color-bg); flex-shrink: 0; } /* ── Scission messages (réutilisé dans l'overlay) ── */ .scission-messages[b-ps35m4bzdi] { display: flex; flex-direction: column; gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-3); } .scission-msg-row[b-ps35m4bzdi] { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--color-surface); cursor: pointer; transition: background-color var(--transition-fast); } .scission-msg-row:hover[b-ps35m4bzdi] { background: var(--color-surface-hover); } .scission-msg-row.selected[b-ps35m4bzdi] { background: rgba(14, 165, 233, 0.06); } .scission-msg-row input[type="checkbox"][b-ps35m4bzdi] { flex-shrink: 0; accent-color: var(--color-accent); } .scission-msg-type[b-ps35m4bzdi] { flex-shrink: 0; font-size: var(--text-xs); font-weight: var(--weight-semibold); padding: 0.0625rem var(--space-2); border-radius: 9999px; min-width: 3.5rem; text-align: center; } .scission-msg-type.msg-client[b-ps35m4bzdi] { background: rgba(59, 130, 246, 0.12); color: #2563eb; } .scission-msg-type.msg-support[b-ps35m4bzdi] { background: rgba(16, 185, 129, 0.12); color: #059669; } .scission-msg-type.msg-note[b-ps35m4bzdi] { background: rgba(217, 119, 6, 0.12); color: #b45309; } .scission-msg-auteur[b-ps35m4bzdi] { font-size: var(--text-sm); font-weight: var(--weight-medium); flex-shrink: 0; min-width: 5rem; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .scission-msg-extrait[b-ps35m4bzdi] { font-size: var(--text-sm); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .scission-msg-date[b-ps35m4bzdi] { flex-shrink: 0; white-space: nowrap; } .scission-msg-pj[b-ps35m4bzdi] { display: inline-flex; align-items: center; gap: 2px; font-size: var(--text-xs); color: var(--color-text-muted); flex-shrink: 0; } .scission-compteur[b-ps35m4bzdi] { font-size: var(--text-sm); margin-bottom: var(--space-4); color: var(--color-text-muted); } .scission-ok[b-ps35m4bzdi] { color: #059669; font-weight: var(--weight-medium); } .scission-erreur[b-ps35m4bzdi] { color: var(--color-p1); font-weight: var(--weight-medium); } .scission-config[b-ps35m4bzdi] { margin-bottom: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); } .scission-config summary[b-ps35m4bzdi] { cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-secondary); } .scission-config-grid[b-ps35m4bzdi] { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--space-3); margin-top: var(--space-3); } .scission-field[b-ps35m4bzdi] { display: flex; flex-direction: column; gap: var(--space-1); } /* ── Fusion (dans overlay) ── */ .fusion-search[b-ps35m4bzdi] { margin-bottom: var(--space-4); } .fusion-search .sidebar-form-label[b-ps35m4bzdi] { margin-bottom: var(--space-1); display: block; } .fusion-resume[b-ps35m4bzdi] { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); background: var(--color-bg); } .fusion-compare[b-ps35m4bzdi] { display: flex; align-items: stretch; gap: var(--space-3); margin-bottom: var(--space-3); } .fusion-col[b-ps35m4bzdi] { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .fusion-col-target[b-ps35m4bzdi] { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-light); } .fusion-col-title[b-ps35m4bzdi] { font-size: 0.625rem; font-weight: var(--weight-bold); text-transform: uppercase; color: var(--color-text-muted); letter-spacing: 0.06em; } .fusion-col-numero[b-ps35m4bzdi] { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-accent); } .fusion-arrow[b-ps35m4bzdi] { display: flex; align-items: center; color: var(--color-text-muted); flex-shrink: 0; } .fusion-warning[b-ps35m4bzdi] { display: flex; align-items: flex-start; gap: var(--space-2); background: rgba(245, 158, 11, 0.06); border: 1px solid rgba(245, 158, 11, 0.2); border-radius: var(--radius-md); padding: var(--space-3); font-size: var(--text-sm); color: var(--color-text); } .fusion-warning svg[b-ps35m4bzdi] { color: #d97706; flex-shrink: 0; margin-top: 1px; } /* ── Helpers repris ── */ .search-row[b-ps35m4bzdi] { display: flex; align-items: center; gap: var(--space-2); } /* /Features/Tickets/Components/BackOffice/TicketListeGrid.razor.rz.scp.css */ .ticket-grid-wrapper[b-xq92d0mlj3] { overflow-x: auto; padding: 0; } [b-xq92d0mlj3] .ticket-grid { width: 100%; font-size: var(--text-base); } /* En-tête de colonne collant : reste visible au défilement de la liste. */ [b-xq92d0mlj3] .ticket-grid thead th { position: sticky; top: 0; background-color: var(--color-surface); z-index: 1; } /* Tri QuickGrid : curseur + affordance sur les colonnes triables. */ [b-xq92d0mlj3] .ticket-grid th.sortable { cursor: pointer; } [b-xq92d0mlj3] .ticket-grid tbody tr:last-child td { border-bottom: none; } [b-xq92d0mlj3] .ticket-number { font-weight: 600; white-space: nowrap; } [b-xq92d0mlj3] .ticket-number.clickable { color: var(--color-accent); cursor: pointer; } [b-xq92d0mlj3] .ticket-number.clickable:hover { text-decoration: underline; } [b-xq92d0mlj3] .suivi-tel-icon { display: inline-flex; margin-left: 0.35rem; color: var(--color-warning); vertical-align: middle; } [b-xq92d0mlj3] .col-sujet { max-width: 22ch; } [b-xq92d0mlj3] .assigne-name { display: block; line-height: 1.2; } [b-xq92d0mlj3] .assigne-role { display: block; } [b-xq92d0mlj3] .non-assigne { color: var(--color-text-muted); font-style: italic; } /* /Features/Tickets/Components/Client/ClientCreateTicket.razor.rz.scp.css */ /* ============================================================ ClientCreateTicket — Design premium portail client ============================================================ */ /* ── Page wrapper ── */ .ct-page[b-p0ojhbq1qt] { max-width: 48rem; margin: 0 auto; padding: var(--space-2) 0; } /* ── Header ── */ .ct-header[b-p0ojhbq1qt] { margin-bottom: var(--space-6); } .ct-header > .btn[b-p0ojhbq1qt] { margin-bottom: var(--space-4); } .ct-header-content[b-p0ojhbq1qt] { display: flex; align-items: flex-start; gap: var(--space-4); } .ct-header-icon[b-p0ojhbq1qt] { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; flex-shrink: 0; background-color: var(--color-accent-light); color: var(--color-accent); border-radius: var(--radius-xl); } .ct-title[b-p0ojhbq1qt] { font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: -0.02em; margin: 0; color: var(--color-text); } .ct-subtitle[b-p0ojhbq1qt] { font-size: var(--text-sm); color: var(--color-text-muted); margin: var(--space-1) 0 0; } /* ── Loading ── */ .ct-loading[b-p0ojhbq1qt] { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-12) 0; color: var(--color-text-muted); font-size: var(--text-sm); } .ct-spinner[b-p0ojhbq1qt] { width: 1.25rem; height: 1.25rem; border: 2px solid var(--color-border); border-top-color: var(--color-accent); border-radius: 50%; animation: ct-spin-b-p0ojhbq1qt 0.7s linear infinite; } @keyframes ct-spin-b-p0ojhbq1qt { to { transform: rotate(360deg); } } /* ── Empty state ── */ .ct-empty-state[b-p0ojhbq1qt] { text-align: center; padding: var(--space-12) var(--space-6); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .ct-empty-icon[b-p0ojhbq1qt] { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; margin-bottom: var(--space-4); background-color: var(--color-bg); color: var(--color-text-muted); border-radius: 50%; } .ct-empty-title[b-p0ojhbq1qt] { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text); margin-bottom: var(--space-2); } .ct-empty-desc[b-p0ojhbq1qt] { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 28rem; margin: 0 auto; } /* ── Form card ── */ .ct-form-card[b-p0ojhbq1qt] { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; } /* ── Section ── */ .ct-section[b-p0ojhbq1qt] { padding: var(--space-6); border-bottom: 1px solid var(--color-border); } .ct-section:last-of-type[b-p0ojhbq1qt] { border-bottom: none; } .ct-section-header[b-p0ojhbq1qt] { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); text-transform: uppercase; letter-spacing: 0.04em; } .ct-section-header svg[b-p0ojhbq1qt] { color: var(--color-accent); flex-shrink: 0; } .ct-section-optional[b-p0ojhbq1qt] { margin-left: auto; font-size: var(--text-xs); font-weight: var(--weight-normal); text-transform: none; letter-spacing: normal; color: var(--color-text-muted); background-color: var(--color-bg); padding: 0.125rem var(--space-2); border-radius: 9999px; } /* ── Field ── */ .ct-field[b-p0ojhbq1qt] { margin-bottom: var(--space-5); } .ct-field:last-child[b-p0ojhbq1qt] { margin-bottom: 0; } .ct-label[b-p0ojhbq1qt] { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); margin-bottom: var(--space-2); } .ct-required[b-p0ojhbq1qt] { color: var(--color-p1); } .ct-field-footer[b-p0ojhbq1qt] { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-1); } .ct-hint[b-p0ojhbq1qt] { font-size: var(--text-xs); color: var(--color-text-muted); } .ct-char-count[b-p0ojhbq1qt] { font-size: var(--text-xs); font-family: var(--font-mono); color: var(--color-text-muted); transition: color var(--transition-fast); } .ct-char-warn[b-p0ojhbq1qt] { color: var(--color-warning); font-weight: var(--weight-medium); } .ct-textarea[b-p0ojhbq1qt] { resize: vertical; min-height: 10rem; line-height: var(--leading-normal); } /* ── Upload zone ── */ .ct-upload-zone[b-p0ojhbq1qt] { position: relative; display: flex; align-items: center; justify-content: center; padding: var(--space-8) var(--space-6); border: 2px dashed var(--color-border); border-radius: var(--radius-lg); background-color: var(--color-bg); cursor: pointer; transition: all var(--transition-normal); } .ct-upload-zone:hover[b-p0ojhbq1qt] { border-color: var(--color-accent); background-color: var(--color-accent-light); } .ct-upload-zone[b-p0ojhbq1qt] input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .ct-upload-content[b-p0ojhbq1qt] { text-align: center; pointer-events: none; } .ct-upload-icon[b-p0ojhbq1qt] { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin-bottom: var(--space-3); background-color: var(--color-surface); color: var(--color-accent); border-radius: 50%; box-shadow: var(--shadow-sm); } .ct-upload-text[b-p0ojhbq1qt] { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-1); } .ct-upload-text strong[b-p0ojhbq1qt] { color: var(--color-accent); } .ct-upload-hint[b-p0ojhbq1qt] { font-size: var(--text-xs); color: var(--color-text-muted); } /* ── File list ── */ .ct-file-list[b-p0ojhbq1qt] { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: flex; flex-direction: column; gap: var(--space-2); } .ct-file-item[b-p0ojhbq1qt] { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-sm); } .ct-file-item svg[b-p0ojhbq1qt] { color: var(--color-accent); flex-shrink: 0; } .ct-file-name[b-p0ojhbq1qt] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-medium); } .ct-file-size[b-p0ojhbq1qt] { font-size: var(--text-xs); color: var(--color-text-muted); font-family: var(--font-mono); flex-shrink: 0; } /* ── Error ── */ .ct-error[b-p0ojhbq1qt] { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0 var(--space-6) var(--space-4); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-p1); background-color: var(--color-p1-bg); border: 1px solid var(--color-error-border); border-radius: var(--radius-md); } .ct-error svg[b-p0ojhbq1qt] { flex-shrink: 0; margin-top: 1px; } /* ── Actions ── */ .ct-actions[b-p0ojhbq1qt] { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-6); background-color: var(--color-bg); border-top: 1px solid var(--color-border); } .ct-submit[b-p0ojhbq1qt] { min-width: 10rem; justify-content: center; padding: var(--space-2) var(--space-6); font-size: var(--text-sm); font-weight: var(--weight-semibold); } /* ── Button spinner ── */ .ct-btn-spinner[b-p0ojhbq1qt] { width: 1rem; height: 1rem; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: ct-spin-b-p0ojhbq1qt 0.6s linear infinite; } /* ── Responsive ── */ @media (max-width: 640px) { .ct-page[b-p0ojhbq1qt] { padding: 0; } .ct-header-content[b-p0ojhbq1qt] { flex-direction: column; gap: var(--space-3); } .ct-section[b-p0ojhbq1qt] { padding: var(--space-4); } .ct-actions[b-p0ojhbq1qt] { padding: var(--space-4); flex-direction: column-reverse; } .ct-submit[b-p0ojhbq1qt] { width: 100%; } } /* /Features/Tickets/Components/Client/ClientTicketDetail.razor.rz.scp.css */ .client-detail-header[b-f0d02tcw64] { margin-bottom: var(--space-4); } .client-detail-top[b-f0d02tcw64] { margin-bottom: var(--space-4); } .client-detail-title-row[b-f0d02tcw64] { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); } .client-detail-sujet[b-f0d02tcw64] { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 0 0 var(--space-4) 0; line-height: var(--leading-tight); } .client-detail-meta[b-f0d02tcw64] { display: flex; flex-wrap: wrap; gap: var(--space-6); } .client-meta-item[b-f0d02tcw64] { display: flex; flex-direction: column; gap: var(--space-1); } .client-meta-label[b-f0d02tcw64] { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .client-meta-value[b-f0d02tcw64] { font-size: var(--text-sm); font-weight: var(--weight-medium); } .client-detail-section[b-f0d02tcw64] { margin-bottom: var(--space-6); } .client-section-title[b-f0d02tcw64] { font-size: var(--text-md); font-weight: var(--weight-semibold); margin: 0 0 var(--space-4) 0; } .client-composer[b-f0d02tcw64] { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background-color: var(--color-surface); padding: var(--space-4); } .client-composer-textarea[b-f0d02tcw64] { resize: vertical; min-height: 5rem; } .client-composer-footer[b-f0d02tcw64] { display: flex; justify-content: flex-end; margin-top: var(--space-3); } .client-feedback[b-f0d02tcw64] { padding: var(--space-3) var(--space-4); background-color: var(--color-accent-light); color: var(--color-accent); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--weight-medium); margin-top: var(--space-4); } /* Fil de conversation côté client */ .client-thread[b-f0d02tcw64] { display: flex; flex-direction: column; gap: var(--space-3); } .client-msg[b-f0d02tcw64] { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); background-color: var(--color-surface); } .client-msg-mine[b-f0d02tcw64] { border-left: 3px solid var(--color-accent); } .client-msg-support[b-f0d02tcw64] { background-color: var(--color-surface-muted, var(--color-surface)); border-left: 3px solid var(--color-border); } .client-msg-head[b-f0d02tcw64] { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); } .client-msg-author[b-f0d02tcw64] { font-weight: var(--weight-semibold); font-size: var(--text-sm); } .client-msg-role[b-f0d02tcw64] { font-size: var(--text-xs); color: var(--color-text-muted); background-color: var(--color-accent-light); padding: 0 var(--space-2); border-radius: var(--radius-sm); } .client-msg-head time[b-f0d02tcw64] { margin-left: auto; } .client-msg-body[b-f0d02tcw64] { font-size: var(--text-sm); line-height: var(--leading-normal); white-space: normal; } .client-msg-pj[b-f0d02tcw64] { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); } .client-composer-pj[b-f0d02tcw64] { margin-top: var(--space-3); display: flex; align-items: center; gap: var(--space-2); } /* /Features/Tickets/Components/Client/ClientTicketList.razor.rz.scp.css */ .client-list-header[b-gh77i1t0xf] { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); } .client-list-title[b-gh77i1t0xf] { font-size: var(--text-xl); font-weight: var(--weight-bold); margin: 0; } .client-list-filter[b-gh77i1t0xf] { margin-bottom: var(--space-4); } .client-search[b-gh77i1t0xf] { max-width: 24rem; } .client-empty[b-gh77i1t0xf] { text-align: center; padding: var(--space-10); } .client-empty .card-body[b-gh77i1t0xf] { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); } .client-tickets[b-gh77i1t0xf] { display: flex; flex-direction: column; gap: var(--space-3); } .client-ticket-card[b-gh77i1t0xf] { cursor: pointer; transition: box-shadow var(--transition-fast), border-color var(--transition-fast); } .client-ticket-card:hover[b-gh77i1t0xf] { box-shadow: var(--shadow-md); border-color: var(--color-accent); } .client-ticket-top[b-gh77i1t0xf] { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); } .client-ticket-date[b-gh77i1t0xf] { margin-left: auto; } .client-ticket-sujet[b-gh77i1t0xf] { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-text); margin-bottom: var(--space-1); } .client-ticket-meta[b-gh77i1t0xf] { display: flex; gap: var(--space-3); } /* /Features/Tickets/Components/MessageComposer.razor.rz.scp.css */ .composer[b-szzo5mv6zm] { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background-color: var(--color-surface); overflow: hidden; box-shadow: var(--shadow-md); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .composer:focus-within[b-szzo5mv6zm] { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-light), var(--shadow-md); } .composer-tabs[b-szzo5mv6zm] { display: flex; border-bottom: 1px solid var(--color-border); background: var(--color-bg); } .composer-tab[b-szzo5mv6zm] { padding: var(--space-2) var(--space-4); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: all var(--transition-fast); } .composer-tab:hover[b-szzo5mv6zm] { color: var(--color-text); background: var(--color-surface-hover); } .composer-tab.active[b-szzo5mv6zm] { color: var(--color-accent); border-bottom-color: var(--color-accent); background: var(--color-surface); } .composer-tab-note.active[b-szzo5mv6zm] { color: var(--color-msg-note); border-bottom-color: var(--color-msg-note); background: var(--color-msg-note-bg); } .composer-body[b-szzo5mv6zm] { padding: var(--space-3) var(--space-4); } .composer-textarea[b-szzo5mv6zm] { resize: vertical; min-height: 4.5rem; border: none !important; padding: var(--space-2) 0 !important; box-shadow: none !important; background: transparent !important; } .composer-textarea:focus[b-szzo5mv6zm] { outline: none; } .composer-footer[b-szzo5mv6zm] { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--color-border); } .composer-warning[b-szzo5mv6zm] { display: flex; align-items: center; gap: var(--space-1); color: var(--color-msg-note); margin-right: auto; font-size: var(--text-xs); } /* /Features/Tickets/Components/MessageThread.razor.rz.scp.css */ .message-thread[b-m5vgnsy0rn] { display: flex; flex-direction: column; gap: var(--space-4); } .message[b-m5vgnsy0rn] { border-radius: var(--radius-lg); padding: var(--space-4); border-left: 3px solid transparent; } .msg-client[b-m5vgnsy0rn] { background-color: var(--color-msg-client-bg); border-left-color: var(--color-msg-client); } .msg-support[b-m5vgnsy0rn] { background-color: var(--color-msg-support-bg); border-left-color: var(--color-msg-support); } .msg-note[b-m5vgnsy0rn] { background-color: var(--color-msg-note-bg); border-left-color: var(--color-msg-note-border); border: 1px dashed var(--color-msg-note-border); border-left: 3px solid var(--color-msg-note-border); } .message-header[b-m5vgnsy0rn] { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); } .message-author[b-m5vgnsy0rn] { display: flex; align-items: center; gap: var(--space-2); } .message-avatar[b-m5vgnsy0rn] { width: 1.75rem; height: 1.75rem; border-radius: 50%; background-color: var(--color-sidebar); color: var(--color-text-inverse); display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: var(--weight-semibold); flex-shrink: 0; } .msg-client .message-avatar[b-m5vgnsy0rn] { background-color: var(--color-msg-client); } .msg-support .message-avatar[b-m5vgnsy0rn] { background-color: var(--color-msg-support); } .msg-note .message-avatar[b-m5vgnsy0rn] { background-color: var(--color-msg-note); } .message-author-name[b-m5vgnsy0rn] { font-size: var(--text-sm); font-weight: var(--weight-semibold); } .message-type-badge[b-m5vgnsy0rn] { font-size: var(--text-xs); font-weight: var(--weight-medium); padding: 0.0625rem var(--space-2); border-radius: 9999px; background-color: var(--color-surface-hover); } .msg-note .message-type-badge[b-m5vgnsy0rn] { background-color: var(--color-warning-bg); color: var(--color-msg-note); } .message-canal[b-m5vgnsy0rn] { font-style: italic; } .message-date[b-m5vgnsy0rn] { white-space: nowrap; } .message-body[b-m5vgnsy0rn] { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text); } .message-attachments[b-m5vgnsy0rn] { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); } .attachment-chip[b-m5vgnsy0rn] { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); font-size: var(--text-xs); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); } /* /Features/Tickets/Components/Superviseur/SuperviseurCreateTicket.razor.rz.scp.css */ /* ============================================================ SuperviseurCreateTicket — Design premium (même base que Client) + composants spécifiques : segmented, search, client list ============================================================ */ /* ── Page & Header (partagés avec Client) ── */ .ct-page[b-ez9kilxlw1] { max-width: 48rem; margin: 0 auto; padding: var(--space-2) 0; } .ct-header[b-ez9kilxlw1] { margin-bottom: var(--space-6); } .ct-header > .btn[b-ez9kilxlw1] { margin-bottom: var(--space-4); } .ct-header-content[b-ez9kilxlw1] { display: flex; align-items: flex-start; gap: var(--space-4); } .ct-header-icon[b-ez9kilxlw1] { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; flex-shrink: 0; background-color: var(--color-accent-light); color: var(--color-accent); border-radius: var(--radius-xl); } .ct-title[b-ez9kilxlw1] { font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: -0.02em; margin: 0; } .ct-subtitle[b-ez9kilxlw1] { font-size: var(--text-sm); color: var(--color-text-muted); margin: var(--space-1) 0 0; } /* ── Loading & Empty ── */ .ct-loading[b-ez9kilxlw1] { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-12) 0; color: var(--color-text-muted); font-size: var(--text-sm); } .ct-spinner[b-ez9kilxlw1] { width: 1.25rem; height: 1.25rem; border: 2px solid var(--color-border); border-top-color: var(--color-accent); border-radius: 50%; animation: ct-spin-b-ez9kilxlw1 0.7s linear infinite; } @keyframes ct-spin-b-ez9kilxlw1 { to { transform: rotate(360deg); } } .ct-empty-state[b-ez9kilxlw1] { text-align: center; padding: var(--space-12) var(--space-6); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .ct-empty-icon[b-ez9kilxlw1] { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; margin-bottom: var(--space-4); background-color: var(--color-bg); color: var(--color-text-muted); border-radius: 50%; } .ct-empty-title[b-ez9kilxlw1] { font-size: var(--text-md); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); } .ct-empty-desc[b-ez9kilxlw1] { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 28rem; margin: 0 auto; } /* ── Form card ── */ .ct-form-card[b-ez9kilxlw1] { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; } /* ── Section ── */ .ct-section[b-ez9kilxlw1] { padding: var(--space-6); border-bottom: 1px solid var(--color-border); } .ct-section:last-of-type[b-ez9kilxlw1] { border-bottom: none; } .ct-section-header[b-ez9kilxlw1] { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text); } .ct-section-header svg[b-ez9kilxlw1] { color: var(--color-accent); flex-shrink: 0; } .ct-section-optional[b-ez9kilxlw1] { margin-left: auto; font-size: var(--text-xs); font-weight: var(--weight-normal); text-transform: none; letter-spacing: normal; color: var(--color-text-muted); background-color: var(--color-bg); padding: 0.125rem var(--space-2); border-radius: 9999px; } /* ── Field ── */ .ct-field[b-ez9kilxlw1] { margin-bottom: var(--space-5); } .ct-field:last-child[b-ez9kilxlw1] { margin-bottom: 0; } .ct-label[b-ez9kilxlw1] { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); margin-bottom: var(--space-2); } .ct-label-sm[b-ez9kilxlw1] { font-size: var(--text-xs); margin-bottom: var(--space-1); } .ct-required[b-ez9kilxlw1] { color: var(--color-p1); } .ct-field-footer[b-ez9kilxlw1] { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-1); } .ct-hint[b-ez9kilxlw1] { font-size: var(--text-xs); color: var(--color-text-muted); } .ct-char-count[b-ez9kilxlw1] { font-size: var(--text-xs); font-family: var(--font-mono); color: var(--color-text-muted); transition: color var(--transition-fast); } .ct-char-warn[b-ez9kilxlw1] { color: var(--color-warning); font-weight: var(--weight-medium); } .ct-textarea[b-ez9kilxlw1] { resize: vertical; min-height: 10rem; } /* ── Segmented control (Rechercher / Nouveau) ── */ .ct-segmented[b-ez9kilxlw1] { display: inline-flex; padding: 3px; gap: 2px; background-color: var(--color-surface-hover); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-4); } .ct-seg[b-ez9kilxlw1] { appearance: none; border: none; background: transparent; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-4); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-secondary); border-radius: calc(var(--radius-md) - 2px); cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; } .ct-seg:hover:not(.ct-seg-active)[b-ez9kilxlw1] { color: var(--color-text); } .ct-seg-active[b-ez9kilxlw1] { background-color: var(--color-surface); color: var(--color-accent); font-weight: var(--weight-semibold); box-shadow: var(--shadow-sm); } /* ── Search bar ── */ .ct-search-bar[b-ez9kilxlw1] { display: flex; align-items: center; gap: var(--space-2); position: relative; margin-bottom: var(--space-1); } .ct-search-hint[b-ez9kilxlw1] { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-3); } .ct-search-icon[b-ez9kilxlw1] { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; } .ct-search-input[b-ez9kilxlw1] { padding-left: 2.25rem !important; flex: 1; } /* ── Search empty ── */ .ct-search-empty[b-ez9kilxlw1] { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); background-color: var(--color-bg); border-radius: var(--radius-md); } /* ── Client list ── */ .ct-client-list[b-ez9kilxlw1] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .ct-client-item[b-ez9kilxlw1] { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); } .ct-client-item:hover[b-ez9kilxlw1] { border-color: var(--color-border-strong); background-color: var(--color-surface-hover); } .ct-client-selected[b-ez9kilxlw1] { border-color: var(--color-accent) !important; background-color: var(--color-accent-light) !important; } .ct-client-avatar[b-ez9kilxlw1] { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; background-color: var(--color-accent-light); color: var(--color-accent); font-size: var(--text-xs); font-weight: var(--weight-bold); border-radius: 50%; letter-spacing: -0.02em; } .ct-client-info[b-ez9kilxlw1] { flex: 1; min-width: 0; } .ct-client-name[b-ez9kilxlw1] { display: block; font-weight: var(--weight-medium); font-size: var(--text-sm); color: var(--color-text); } .ct-client-detail[b-ez9kilxlw1] { display: block; font-size: var(--text-xs); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ct-client-check[b-ez9kilxlw1] { color: var(--color-accent); flex-shrink: 0; } /* ── New client grid ── */ .ct-new-client-grid[b-ez9kilxlw1] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } /* ── Upload zone ── */ .ct-upload-zone[b-ez9kilxlw1] { position: relative; display: flex; align-items: center; justify-content: center; padding: var(--space-8) var(--space-6); border: 2px dashed var(--color-border); border-radius: var(--radius-lg); background-color: var(--color-bg); cursor: pointer; transition: all var(--transition-normal); } .ct-upload-zone:hover[b-ez9kilxlw1] { border-color: var(--color-accent); background-color: var(--color-accent-light); } .ct-upload-zone[b-ez9kilxlw1] input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .ct-upload-content[b-ez9kilxlw1] { text-align: center; pointer-events: none; } .ct-upload-icon[b-ez9kilxlw1] { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin-bottom: var(--space-3); background-color: var(--color-surface); color: var(--color-accent); border-radius: 50%; box-shadow: var(--shadow-sm); } .ct-upload-text[b-ez9kilxlw1] { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-1); } .ct-upload-text strong[b-ez9kilxlw1] { color: var(--color-accent); } .ct-upload-hint[b-ez9kilxlw1] { font-size: var(--text-xs); color: var(--color-text-muted); } /* ── File list ── */ .ct-file-list[b-ez9kilxlw1] { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: flex; flex-direction: column; gap: var(--space-2); } .ct-file-item[b-ez9kilxlw1] { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-sm); } .ct-file-item svg[b-ez9kilxlw1] { color: var(--color-accent); flex-shrink: 0; } .ct-file-name[b-ez9kilxlw1] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-medium); } .ct-file-size[b-ez9kilxlw1] { font-size: var(--text-xs); color: var(--color-text-muted); font-family: var(--font-mono); flex-shrink: 0; } /* ── Error ── */ .ct-error[b-ez9kilxlw1] { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0 var(--space-6) var(--space-4); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-p1); background-color: var(--color-p1-bg); border: 1px solid #fecaca; border-radius: var(--radius-md); } .ct-error svg[b-ez9kilxlw1] { flex-shrink: 0; margin-top: 1px; } /* ── Actions ── */ .ct-actions[b-ez9kilxlw1] { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-6); background-color: var(--color-bg); border-top: 1px solid var(--color-border); } .ct-submit[b-ez9kilxlw1] { min-width: 10rem; justify-content: center; padding: var(--space-2) var(--space-6); font-size: var(--text-sm); font-weight: var(--weight-semibold); } .ct-btn-spinner[b-ez9kilxlw1] { width: 1rem; height: 1rem; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: ct-spin-b-ez9kilxlw1 0.6s linear infinite; } /* ── Responsive ── */ @media (max-width: 640px) { .ct-page[b-ez9kilxlw1] { padding: 0; } .ct-header-content[b-ez9kilxlw1] { flex-direction: column; gap: var(--space-3); } .ct-section[b-ez9kilxlw1] { padding: var(--space-4); } .ct-new-client-grid[b-ez9kilxlw1] { grid-template-columns: 1fr; } .ct-actions[b-ez9kilxlw1] { padding: var(--space-4); flex-direction: column-reverse; } .ct-submit[b-ez9kilxlw1] { width: 100%; } } /* /Features/Tickets/Components/Superviseur/SuperviseurTicketDetail.razor.rz.scp.css */ .sup-detail-header[b-1xygl4nb5k] { margin-bottom: 0.75rem; } .sup-detail-top[b-1xygl4nb5k] { margin-bottom: 1rem; } .sup-detail-title-row[b-1xygl4nb5k] { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .sup-detail-sujet[b-1xygl4nb5k] { margin: 0.5rem 0 1rem; font-size: 1.25rem; font-weight: 600; } .sup-meta-grid[b-1xygl4nb5k] { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.9rem 1.25rem; } .sup-meta-item[b-1xygl4nb5k] { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .sup-meta-label[b-1xygl4nb5k] { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted, #64748b); } .sup-meta-value[b-1xygl4nb5k] { font-weight: 500; } .sup-actions[b-1xygl4nb5k] { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0 0.75rem; } .sup-inline-panel[b-1xygl4nb5k] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.75rem; margin-bottom: 0.75rem; background: var(--surface-2, #f8fafc); border: 1px solid var(--border, #e2e8f0); border-radius: 0.5rem; } .sup-inline-col[b-1xygl4nb5k] { flex-direction: column; align-items: stretch; } .search-row[b-1xygl4nb5k] { display: flex; gap: 0.5rem; flex-wrap: wrap; } .sup-client-results[b-1xygl4nb5k] { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; } .sup-client-results li[b-1xygl4nb5k] { padding: 0.4rem 0.6rem; border: 1px solid var(--border, #e2e8f0); border-radius: 0.375rem; cursor: pointer; } .sup-client-results li:hover[b-1xygl4nb5k] { background: var(--surface, #fff); } .sup-client-results li.selected[b-1xygl4nb5k] { border-color: var(--primary, #2563eb); background: var(--primary-soft, #eff6ff); } .sup-section[b-1xygl4nb5k] { margin-top: 1.5rem; } .sup-section-title[b-1xygl4nb5k] { font-size: 1rem; font-weight: 600; margin: 0 0 0.75rem; } .sup-thread[b-1xygl4nb5k] { display: flex; flex-direction: column; gap: 0.75rem; } .sup-msg[b-1xygl4nb5k] { padding: 0.75rem 0.9rem; border-radius: 0.6rem; border: 1px solid var(--border, #e2e8f0); } .sup-msg-client[b-1xygl4nb5k] { background: var(--surface-2, #f8fafc); } .sup-msg-support[b-1xygl4nb5k] { background: var(--primary-soft, #eff6ff); border-color: #dbeafe; } .sup-msg-head[b-1xygl4nb5k] { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; flex-wrap: wrap; } .sup-msg-author[b-1xygl4nb5k] { font-weight: 600; } .sup-msg-role[b-1xygl4nb5k] { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted, #64748b); } .sup-msg-body[b-1xygl4nb5k] { line-height: 1.5; word-break: break-word; } .sup-msg-pj[b-1xygl4nb5k] { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem; } .sup-reply[b-1xygl4nb5k] { width: 100%; resize: vertical; } .sup-reply-footer[b-1xygl4nb5k] { margin-top: 0.5rem; display: flex; justify-content: flex-end; } .sup-audit[b-1xygl4nb5k] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .sup-audit-item[b-1xygl4nb5k] { display: flex; align-items: center; gap: 0.6rem; } .sup-audit-dot[b-1xygl4nb5k] { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--primary, #2563eb); flex: 0 0 auto; } .sup-audit-label[b-1xygl4nb5k] { font-size: 0.9rem; } /* /Features/Tickets/Components/Superviseur/SuperviseurTicketList.razor.rz.scp.css */ .sup-list-header[b-fkgf2p8xo0] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .sup-list-title[b-fkgf2p8xo0] { margin: 0; font-size: 1.35rem; font-weight: 600; } .sup-list-toolbar[b-fkgf2p8xo0] { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; } .sup-search[b-fkgf2p8xo0] { flex: 1 1 16rem; min-width: 0; max-width: 24rem; } .sup-toggle[b-fkgf2p8xo0] { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; cursor: pointer; } .sup-table-wrap[b-fkgf2p8xo0] { overflow-x: auto; border: 1px solid var(--border, #e2e8f0); border-radius: 0.5rem; } .sup-table[b-fkgf2p8xo0] { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .sup-table thead th[b-fkgf2p8xo0] { text-align: left; padding: 0.6rem 0.75rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted, #64748b); background: var(--surface-2, #f8fafc); border-bottom: 1px solid var(--border, #e2e8f0); white-space: nowrap; } .sup-table tbody td[b-fkgf2p8xo0] { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border, #eef2f7); vertical-align: middle; } .sup-row[b-fkgf2p8xo0] { cursor: pointer; } .sup-row:hover[b-fkgf2p8xo0] { background: var(--surface-2, #f8fafc); } .sup-cell-sujet[b-fkgf2p8xo0] { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* /Features/Tickets/Components/TicketDetail.razor.rz.scp.css */ .detail-header[b-h6q5dynizv] { margin-bottom: var(--space-4); } .detail-top[b-h6q5dynizv] { margin-bottom: var(--space-4); } .detail-title-row[b-h6q5dynizv] { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); } .detail-sujet[b-h6q5dynizv] { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 0 0 var(--space-5) 0; line-height: var(--leading-tight); } .detail-meta-grid[b-h6q5dynizv] { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--space-4); } .meta-item[b-h6q5dynizv] { display: flex; flex-direction: column; gap: var(--space-1); } .meta-label[b-h6q5dynizv] { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .meta-value[b-h6q5dynizv] { font-size: var(--text-base); font-weight: var(--weight-medium); } .meta-sub[b-h6q5dynizv] { margin-top: -2px; } .non-assigne-text[b-h6q5dynizv] { color: var(--color-text-muted); font-style: italic; } .suivi-tel-badge[b-h6q5dynizv] { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.125rem var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-p2); background-color: var(--color-p2-bg); border-radius: 9999px; } .detail-actions[b-h6q5dynizv] { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-5); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .btn-danger-outline[b-h6q5dynizv] { color: var(--color-error); border-color: var(--color-error-border); background-color: var(--color-surface); } .btn-danger-outline:hover:not(:disabled)[b-h6q5dynizv] { background-color: var(--color-error-bg); border-color: var(--color-error); } .action-feedback[b-h6q5dynizv] { padding: var(--space-3) var(--space-4); background-color: var(--color-accent-light); color: var(--color-accent); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: var(--space-4); } .detail-section[b-h6q5dynizv] { margin-bottom: var(--space-6); } .section-title[b-h6q5dynizv] { font-size: var(--text-md); font-weight: var(--weight-semibold); margin: 0 0 var(--space-4) 0; } /* ── Historique / Audit trail ── */ .historique-list[b-h6q5dynizv] { overflow: hidden; } .historique-empty[b-h6q5dynizv] { padding: var(--space-4) var(--space-6); color: var(--color-text-muted); font-style: italic; } .historique-entry[b-h6q5dynizv] { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--color-border); } .historique-entry:last-child[b-h6q5dynizv] { border-bottom: none; } .historique-entry.historique-interne[b-h6q5dynizv] { background-color: var(--color-msg-note-bg); border-left: 3px solid var(--color-msg-note-border); } .historique-date[b-h6q5dynizv] { min-width: 8.5rem; white-space: nowrap; padding-top: 0.1rem; } .historique-content[b-h6q5dynizv] { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); } .historique-action[b-h6q5dynizv] { font-size: var(--text-sm); font-weight: var(--weight-semibold); } .historique-values[b-h6q5dynizv] { display: inline-flex; align-items: baseline; gap: var(--space-1); } .historique-old[b-h6q5dynizv] { text-decoration: line-through; color: var(--color-text-muted); } .historique-new[b-h6q5dynizv] { font-weight: var(--weight-medium); color: var(--color-accent); } .historique-interne-badge[b-h6q5dynizv] { display: inline-flex; padding: 0.0625rem var(--space-2); background-color: var(--color-msg-note-bg); color: var(--color-msg-note); border: 1px dashed var(--color-msg-note-border); border-radius: 9999px; font-weight: var(--weight-semibold); } /* /Features/Tickets/Components/TicketFilters.razor.rz.scp.css */ .filters-bar[b-furubtwovo] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-5); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-4); } .filter-group[b-furubtwovo] { display: flex; flex-direction: column; gap: var(--space-1); } .filter-label[b-furubtwovo] { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .filter-group-preset[b-furubtwovo] { min-width: 12rem; } .filter-select-preset[b-furubtwovo] { font-weight: var(--weight-medium); color: var(--color-accent); border-color: var(--color-accent); background-color: var(--color-accent-light); } .filters-separator[b-furubtwovo] { width: 1px; height: 2rem; background-color: var(--color-border); align-self: flex-end; margin-bottom: var(--space-1); } .filter-input[b-furubtwovo] { width: 14rem; } .filter-select[b-furubtwovo] { width: auto; min-width: 8rem; } .filter-group-check[b-furubtwovo] { justify-content: flex-end; padding-bottom: var(--space-1); } .filter-check-label[b-furubtwovo] { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); cursor: pointer; color: var(--color-text-secondary); } .filter-check-label input[type="checkbox"][b-furubtwovo] { width: 1rem; height: 1rem; accent-color: var(--color-accent); }