Aucun enregistrement
Commencez par ajouter votre premier élément.
════════════════════════════════════════════════ */
.empty-state {
padding: 48px 24px;
text-align: center;
color: var(--text-secondary);
max-width: 420px;
margin: 0 auto;
}
.empty-state-icon {
font-size: 40px;
color: var(--text-secondary);
opacity: 0.5;
margin-bottom: 16px;
display: block;
}
.empty-state-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 8px;
}
.empty-state-hint {
font-size: var(--font-size-base);
color: var(--text-secondary);
margin: 0 0 20px;
line-height: 1.5;
}
.empty-state-action {
margin-top: 4px;
}
.btn, .btn-sm { border-radius: 7px; font-weight: 500; transition: background .15s, border-color .15s; }
.btn-sm { padding: 6px 12px; font-size: var(--font-size-base); }
.btn-primary { box-shadow: none; }
.btn-outline-primary:hover { box-shadow: none; }
.btn:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent) !important;
border-color: var(--accent) !important;
}
/* ════════════════════════════════════════════════
Respecte prefers-reduced-motion — a11y
Les utilisateurs avec vestibular disorders ou en mode économie
de batterie désactivent les animations système. On respecte.
════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
.ms-bar {
display: flex;
align-items: flex-start;
gap: 0;
padding: 20px 0 10px;
overflow-x: auto;
position: relative;
}
.ms-node {
flex: 1 1 0;
min-width: 140px;
text-align: center;
position: relative;
padding: 0 8px;
}
.ms-node::before {
content: '';
position: absolute;
top: 16px;
left: 50%;
right: -50%;
height: 2px;
background: #e2e8f0;
z-index: 0;
}
.ms-node:last-child::before { display: none; }
.ms-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, #00B4D8, #0891b2);
color: #fff;
font-weight: 600;
font-size: 14px;
position: relative;
z-index: 1;
box-shadow: 0 1px 3px rgba(0, 180, 216, 0.25);
}
.ms-label {
font-size: var(--font-size-base);
font-weight: 500;
color: #0f172a;
margin-top: 10px;
line-height: 1.3;
letter-spacing: -0.005em;
}
.ms-code {
display: block;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
color: #64748b;
margin-top: 3px;
}
.ms-desc {
font-size: 11.5px;
color: #64748b;
margin-top: 4px;
line-height: 1.4;
}
.ms-node.ms-done .ms-circle { background: linear-gradient(135deg, #10B981, #059669); box-shadow: 0 1px 3px rgba(16, 185, 129, 0.25); }
.ms-node.ms-active .ms-circle { background: linear-gradient(135deg, #00B4D8, #0891b2); }
.ms-node.ms-todo .ms-circle { background: #e2e8f0; color: #64748b; box-shadow: none; }
.ms-node.ms-done::before { background: #10B981; }
/* ════════════════════════════════════════════════
Print — règles canoniques iManage
Cache le chrome UI, neutralise les positions fixes, formate la page A4.
Les apps peuvent ajouter leurs règles spécifiques dans leur app.css.
════════════════════════════════════════════════ */
@media print {
.navbar,
#notification_box,
#page_header,
#busy_overlay,
.print_toolbar,
.form-actions,
.record_tools,
.session_controls,
.no-print {
display: none !important;
}
body {
background: #fff !important;
color: #000 !important;
padding-top: 0 !important;
font-size: 9pt !important;
}
#page, #page_content {
position: static !important;
overflow: visible !important;
padding: 0 !important;
margin: 0 !important;
background: #fff !important;
}
#requested_content,
#requested_content > div {
background: #fff !important;
padding: 0 !important;
}
table { width: 100%; }
td { vertical-align: top; }
a { text-decoration: none !important; color: #000 !important; }
.card-header { padding: 4px 8px !important; }
.card-body { padding: 0 !important; }
h5 { font-size: 11pt !important; }
.report-header { margin-bottom: 16px; }
.report-header img { width: 140px; }
.report-main-title { margin-top: 8px; }
@page { size: A4 landscape; margin: 15mm; }
}
/* ════════════════════════════════════════════════════════════════════════
RESPONSIVE — exploitation optimale de l'espace horizontal sur tous mobiles
════════════════════════════════════════════════════════════════════════ */
/* ─── container-fluid : cap visuel + paddings adaptatifs ─────────────────
Variable CSS --app-px définit le padding horizontal commun à TOUTES les
container-fluid de la page (navbar, header, breadcrumb, requested_content)
pour garantir un alignement parfait entre menu et contenu.
Bootstrap met par défaut padding-inline 12px sur container-fluid. On
l'augmente avec la taille de l'écran pour aérer sur grands écrans.
*/
:root {
--app-px: 12px;
/* Cap horizontal du contenu — appliqué à navbar, header, breadcrumb et
requested_content via .container-fluid. 1400px = largeur confortable
pour tableaux, dashboards et formulaires sans dispersion visuelle sur
les écrans 4K. Le contenu se centre automatiquement (margin: auto). */
--app-max-w: 1400px;
}
@media (min-width: 768px) { :root { --app-px: 20px; } }
@media (min-width: 1200px) { :root { --app-px: 28px; } }
@media (min-width: 1600px) { :root { --app-px: 40px; } }
.container-fluid {
max-width: var(--app-max-w);
margin-inline: auto;
padding-inline: var(--app-px);
}
/* La navbar n'a PAS de padding horizontal — c'est son .container-fluid
interne qui le porte (alignement parfait avec #requested_content). */
.navbar { padding-inline: 0; }
/* ─── Mobile : navbar plus compact + touch targets ≥ 44px ──────────────── */
@media (max-width: 767.98px) {
.navbar { padding-block: 8px; padding-inline: 0; }
.navbar-toggler { padding: 8px 10px; min-width: 44px; min-height: 44px; }
/* Le user account devient un avatar circulaire seul sur mobile pour
économiser l'espace — le nom complet et le rôle vont dans le panneau
qui s'ouvre au clic. */
@media (max-width: 575.98px) {
#user .ua-name,
#user .ua-job,
#user .ua-clinic { display: none !important; }
#user .ua-avatar-wrap { margin: 0; }
}
}
/* ─── Mobile : footer compact, items wrappent proprement ───────────────── */
@media (max-width: 575.98px) {
#page_footer { padding: 0 8px; height: auto; min-height: 48px; }
#page_footer .footer-row {
flex-wrap: wrap;
justify-content: center;
gap: 6px 12px;
padding: 6px 0;
}
#page_footer .footer-brand,
#page_footer .footer-datetime { flex: 1 1 auto; justify-content: center; }
body:has(#page_footer) { padding-bottom: 68px; } /* hauteur réelle augmentée */
}
/* ─── Modal Bootstrap : plein écran sous 576px (login, change-password) ── */
@media (max-width: 575.98px) {
.modal-dialog:not(.modal-fullscreen) {
margin: 0;
max-width: 100%;
min-height: 100vh;
}
.modal-dialog:not(.modal-fullscreen) .modal-content {
border-radius: 0;
min-height: 100vh;
}
}
/* ─── Tables responsives — scroll horizontal sur mobile au lieu d'écraser
Les tableaux Bootstrap (.table) qui ne sont pas dans un wrapper responsive
obtiennent un scroll horizontal natif sur petits écrans. */
@media (max-width: 767.98px) {
table.table:not(.table-borderless):not(.table-ticket) {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
/* ─── Form panels (record-detail, form-container) : fullscreen mobile ── */
@media (max-width: 575.98px) {
.form-panel,
.form-panel.form-panel-xl,
.form-panel.form-panel-xxl {
max-width: 100% !important;
width: 100% !important;
height: 100vh !important;
max-height: 100vh !important;
border-radius: 0 !important;
margin: 0 !important;
}
.record-detail {
max-width: 100% !important;
width: 100% !important;
border-radius: 0 !important;
}
}
/* ─── Dashboard sur tablette : KPIs en 2 colonnes au lieu de 1 large ───
Le grid auto-fit minmax(200px, 1fr) défini dans .g-kpis gère déjà la
plupart des cas. On force juste un comportement clean entre 576-900px. */
@media (min-width: 576px) and (max-width: 899.98px) {
.dashboard-v3 .g-kpis {
grid-template-columns: repeat(2, 1fr);
}
}
/* ─── Tile-view : déjà responsive via tile-view.css (1 col mobile,
2 cols tablette, 3-4 cols desktop). Rien à ajouter ici. */
/* ─── List-view : table compactée sur mobile ─────────────────────────── */
@media (max-width: 575.98px) {
.lv-actions { flex-wrap: wrap; gap: 8px; }
.lv-search { flex: 1 1 100%; }
.lv-footer {
flex-direction: column;
align-items: stretch;
gap: 8px;
text-align: center;
}
.lv-pager { justify-content: center; }
}
/* ─── Inputs : taille touch confortable sur mobile (≥ 16px évite zoom iOS) */
@media (max-width: 767.98px) {
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select {
font-size: 16px; /* évite le zoom auto sur iOS Safari */
}
.btn {
min-height: 40px; /* touch target accessibilité */
}
}
/* ─── Accessibilité — respect du prefers-reduced-motion ──────────────
Désactive toutes les animations/transitions pour les utilisateurs qui
l'ont configuré dans leur OS (WCAG 2.1 — 2.3.3 Animation from Interactions).
À appliquer globalement plutôt que dans chaque composant. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}