/* =========================================================
ICEKOM CRM — APP.CSS
Nouvelle base propre
---------------------------------------------------------
Ce fichier remplace les anciens CSS internes du CRM.
Typographie minimum : 12px pour les informations secondaires.
========================================================= */
:root {
--navy-dark: #10142b;
--navy-darker: #0b0e1f;
--primary: #4f67df;
--primary-hover: #4259d1;
--primary-soft: #edf1ff;
--success: #21835b;
--success-soft: #edf9f3;
--warning: #b97619;
--warning-soft: #fff7e8;
--danger: #c6414d;
--danger-soft: #fff0f2;
--text: #253047;
--text-strong: #182237;
--text-muted: #758196;
--text-soft: #929cab;
--page-bg: #f6f8fc;
--card-bg: #ffffff;
--input-bg: #ffffff;
--border: #e1e6ef;
--border-soft: #edf0f5;
--shadow-sm: 0 3px 12px rgba(27, 39, 64, .05);
--shadow-md: 0 12px 35px rgba(27, 39, 64, .10);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--sidebar-width: 220px;
--font-xs: 12px;
--font-sm: 13px;
--font-base: 14px;
--font-md: 15px;
--font-lg: 18px;
--font-xl: 24px;
--font-2xl: 30px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
min-width: 320px;
font-size: 16px;
}
body {
margin: 0;
font-family:
"Segoe UI",
Roboto,
Helvetica,
Arial,
sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body.app-body {
min-height: 100vh;
background: var(--page-bg);
color: var(--text);
font-size: var(--font-base);
line-height: 1.5;
}
a {
color: inherit;
}
button,
input,
select,
textarea {
font-family: inherit;
}
button {
color: inherit;
}
img,
svg {
max-width: 100%;
}
[hidden] {
display: none !important;
}
/* =========================================================
STRUCTURE APPLICATION
========================================================= */
.app-shell {
display: flex;
width: 100%;
min-height: 100vh;
background: var(--page-bg);
}
.sidebar {
position: sticky;
top: 0;
z-index: 100;
display: flex;
width: var(--sidebar-width);
min-width: var(--sidebar-width);
height: 100vh;
flex-direction: column;
flex-shrink: 0;
overflow-y: auto;
background:
linear-gradient(
180deg,
#151d3a 0%,
#0d1228 100%
);
color: #dce4f8;
}
.sidebar-logo {
display: flex;
min-height: 72px;
align-items: center;
gap: 10px;
padding: 0 17px;
color: #fff;
font-size: 19px;
font-weight: 800;
letter-spacing: .02em;
}
.hex-icon-sm {
width: 28px;
height: 28px;
flex: 0 0 28px;
}
.sidebar-nav {
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px 10px;
}
.nav-item {
display: flex;
min-height: 42px;
align-items: center;
gap: 10px;
padding: 0 12px;
border-radius: 9px;
color: #b9c5df;
font-size: 14px;
font-weight: 500;
line-height: 1.2;
text-decoration: none;
transition:
background .14s ease,
color .14s ease,
transform .14s ease;
}
.nav-item:hover {
background: rgba(255, 255, 255, .06);
color: #fff;
}
.nav-item.active {
background:
linear-gradient(
135deg,
#5479f0,
#4ba0ed
);
color: #fff;
font-weight: 650;
}
.nav-icon {
display: inline-flex;
width: 18px;
min-width: 18px;
align-items: center;
justify-content: center;
font-size: 15px;
}
.sidebar-section {
margin-top: auto;
padding: 16px 10px 8px;
border-top: 1px solid rgba(255, 255, 255, .09);
}
.section-title {
display: block;
margin: 0 8px 8px;
color: #75a1ff;
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.sidebar-footer {
padding: 8px 10px 16px;
}
.nav-item.logout {
color: #ff8c94;
}
.nav-item.logout:hover {
background: rgba(213, 67, 79, .10);
color: #ff9ba2;
}
/* =========================================================
TOPBAR
========================================================= */
.app-topbar {
position: sticky;
top: 0;
z-index: 5000;
display: flex;
min-height: 64px;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 10px 18px;
border-bottom: 1px solid var(--border);
background: rgba(255, 255, 255, .96);
backdrop-filter: blur(10px);
}
.topbar-actions {
display: flex;
align-items: center;
gap: 8px;
}
.topbar-chat-link,
.notification-bell {
position: relative;
display: inline-flex;
width: 42px;
height: 42px;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 11px;
background: #fff;
color: #566277;
font-size: 17px;
cursor: pointer;
box-shadow: var(--shadow-sm);
}
.topbar-chat-link:hover,
.notification-bell:hover {
background: #f8faff;
color: var(--primary);
}
/* =========================================================
CONTENU
========================================================= */
.main-content {
flex: 1;
min-width: 0;
width: 100%;
padding: clamp(20px, 2vw, 34px);
overflow-x: hidden;
}
.main-content > * {
max-width: 100%;
}
.main-content h1 {
color: var(--text-strong);
font-size: clamp(27px, 2.1vw, 32px);
line-height: 1.2;
}
.main-content h2 {
color: var(--text-strong);
font-size: 19px;
line-height: 1.3;
}
.main-content h3 {
font-size: 16px;
line-height: 1.35;
}
.main-content p {
font-size: 14px;
}
.main-content small {
font-size: 12px;
}
/* =========================================================
COMPOSANTS COMMUNS
========================================================= */
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-filter,
.small-action {
display: inline-flex;
min-height: 42px;
align-items: center;
justify-content: center;
padding: 0 15px;
border-radius: 9px;
font-size: 13px;
font-weight: 650;
text-decoration: none;
cursor: pointer;
transition:
background .14s ease,
border-color .14s ease,
color .14s ease,
transform .14s ease;
}
.btn-primary,
.btn-filter {
border: 1px solid var(--primary);
background: var(--primary);
color: #fff;
}
.btn-primary:hover,
.btn-filter:hover {
transform: translateY(-1px);
border-color: var(--primary-hover);
background: var(--primary-hover);
}
.btn-secondary,
.small-action {
border: 1px solid #dce2ec;
background: #fff;
color: #4e596d;
}
.btn-secondary:hover,
.small-action:hover {
background: #f8faff;
border-color: #cfd7e5;
}
.btn-danger {
border: 1px solid #efc8cd;
background: var(--danger-soft);
color: var(--danger);
}
.btn-danger:hover {
background: #ffe4e7;
}
.form-group {
margin-bottom: 16px;
}
.form-group label,
.input > label {
display: block;
margin-bottom: 7px;
color: #505b70;
font-size: 13px;
font-weight: 650;
}
.form-group input,
.form-group select,
.form-group textarea,
.main-content input[type="text"],
.main-content input[type="email"],
.main-content input[type="password"],
.main-content input[type="tel"],
.main-content input[type="number"],
.main-content input[type="date"],
.main-content input[type="datetime-local"],
.main-content input[type="search"],
.main-content select,
.main-content textarea {
max-width: 100%;
border: 1px solid #dce2ec;
border-radius: 9px;
background: #fff;
color: #253047;
font-family: inherit;
font-size: 14px;
outline: none;
}
.form-group input,
.form-group select,
.main-content input[type="text"],
.main-content input[type="email"],
.main-content input[type="password"],
.main-content input[type="tel"],
.main-content input[type="number"],
.main-content input[type="date"],
.main-content input[type="datetime-local"],
.main-content input[type="search"],
.main-content select {
min-height: 44px;
padding: 0 12px;
}
.form-group textarea,
.main-content textarea {
padding: 11px 12px;
resize: vertical;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.main-content input:focus,
.main-content select:focus,
.main-content textarea:focus {
border-color: #5870e8;
box-shadow:
0 0 0 3px rgba(88, 112, 232, .10);
}
.form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.form-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--border-soft);
}
.card-heading h2 {
font-size: 17px;
}
.card-heading p {
font-size: 13px;
}
/* Tables globales */
.main-content table {
width: 100%;
}
.main-content table th {
font-size: 11px;
}
.main-content table td {
font-size: 13px;
}
.main-content table td small {
font-size: 11px;
}
/* États */
.empty-state {
color: var(--text-muted);
font-size: 13px;
}
.empty-state strong {
color: #465166;
font-size: 15px;
}
/* Flash */
.flash-message {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 18px;
padding: 12px 14px;
border-radius: 10px;
font-size: 14px;
font-weight: 550;
line-height: 1.45;
}
.flash-success {
border: 1px solid #c3e6cb;
background: #e9f9ef;
color: #1e8449;
}
.flash-error {
border: 1px solid #f5c6cb;
background: #fdedee;
color: #c0392b;
}
/* =========================================================
RESPONSIVE GÉNÉRAL
========================================================= */
@media (max-width: 900px) {
.main-content {
padding: 20px 18px;
}
.form-row {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.app-shell {
flex-direction: column;
}
.sidebar {
position: relative;
width: 100%;
min-width: 0;
height: auto;
overflow: visible;
}
.sidebar-logo {
min-height: 62px;
}
.sidebar-nav {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sidebar-section {
margin-top: 0;
}
.main-content {
padding: 18px 14px;
}
.form-actions {
align-items: stretch;
flex-direction: column-reverse;
}
.form-actions > * {
width: 100%;
}
}
/* =========================================================
MODULES MÉTIER EXISTANTS — NETTOYÉS
========================================================= */
:root {
\--navy-dark: #10142B;
\--navy-darker: #0B0E1F;
\--accent-blue: #4EA8FF;
\--accent-purple: #6C7CF6;
\--text-light: #F5F6FA;
\--text-muted: #8A8FA3;
\--border-color: #E4E6EF;
\--bg-page: #F7F8FC;
\--card-bg: #FFFFFF;
}
* { box-sizing: border-box; }
body.app-body {
margin: 0;
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background: var(--bg-page);
color: #1B1E2E;
}
:root {
\--navy-dark: #10142B;
\--navy-darker: #0B0E1F;
\--accent-blue: #4EA8FF;
\--accent-purple: #6C7CF6;
\--text-light: #F5F6FA;
\--text-muted: #9AA0B4;
\--border-color: #E4E6EF;
\--bg-page: #FFFFFF;
\--input-bg: #F7F8FC;
}
* {
box-sizing: border-box;
}
body.auth-body {
margin: 0;
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background: var(--bg-page);
}
.auth-wrapper {
display: flex;
min-height: 100vh;
}
/* Colonne gauche : branding */
.auth-brand {
flex: 1 1 45%;
background: radial-gradient(circle at 30% 20%, #1A2040 0%, var(--navy-dark) 45%, var(--navy-darker) 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.auth-brand::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
background-size: 26px 26px;
opacity: 0.4;
}
.auth-brand-content {
position: relative;
text-align: center;
padding: 40px;
}
.auth-logo {
width: 90px;
margin: 0 auto 24px;
}
.hex-icon {
width: 100%;
height: auto;
filter: drop-shadow(0 0 18px rgba(108, 124, 246, 0.45));
}
.auth-brand-title {
color: var(--text-light);
font-size: 32px;
font-weight: 700;
letter-spacing: 2px;
margin: 0 0 12px;
}
.auth-brand-subtitle {
color: var(--text-muted);
font-size: 14px;
line-height: 1.6;
margin: 0;
}
/* Colonne droite : formulaire */
.auth-form-side {
flex: 1 1 55%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 24px;
background: var(--bg-page);
}
.auth-form-box {
width: 100%;
max-width: 380px;
}
.auth-title {
font-size: 24px;
font-weight: 700;
color: #1B1E2E;
margin: 0 0 28px;
}
.form-group {
margin-bottom: 18px;
}
.form-group label {
display: block;
font-size: 14px;
font-weight: 600;
color: #4B4F5E;
margin-bottom: 6px;
}
.form-input {
width: 100%;
padding: 11px 14px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--input-bg);
font-size: 14px;
color: #1B1E2E;
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-input:focus {
border-color: var(--accent-purple);
box-shadow: 0 0 0 3px rgba(108, 124, 246, 0.15);
background: #fff;
}
.password-field {
position: relative;
}
.toggle-password {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
padding: 4px;
display: flex;
}
.form-row-between {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 22px;
font-size: 14px;
}
.checkbox-label {
display: flex;
align-items: center;
gap: 6px;
color: #4B4F5E;
cursor: pointer;
}
.form-checkbox {
accent-color: var(--accent-purple);
width: 15px;
height: 15px;
}
.forgot-link {
color: var(--accent-purple);
text-decoration: none;
font-weight: 500;
}
.forgot-link:hover {
text-decoration: underline;
}
.btn-submit {
width: 100%;
padding: 12px;
border: none;
border-radius: 8px;
background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: opacity 0.15s ease, transform 0.1s ease;
}
.btn-submit:hover {
opacity: 0.92;
}
.btn-submit:active {
transform: translateY(1px);
}
.auth-footer {
margin-top: 28px;
font-size: 14px;
color: var(--text-muted);
text-align: center;
}
/* Messages flash */
.flash-message {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 20px;
padding: 12px 14px;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
animation: flash-in 0.3s ease-out;
}
.flash-icon {
flex-shrink: 0;
}
.flash-error {
background: #FDEDEE;
color: #C0392B;
border: 1px solid #F5C6CB;
animation: flash-in 0.3s ease-out, flash-shake 0.4s ease-in-out 0.3s;
}
.flash-success {
background: #E9F9EF;
color: #1E8449;
border: 1px solid #C3E6CB;
}
/* ===== CALENDRIER ICEKOM ===== */
.calendar-page,
.calendar-form-page {
width: 100%;
}
.calendar-form-page {
max-width: 900px;
}
.calendar-header,
.page-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 22px;
}
.calendar-header h1,
.page-heading h1 {
margin: 0 0 5px;
font-size: 26px;
color: #151b2f;
}
.calendar-header p,
.page-heading p {
margin: 0;
color: #788195;
font-size: 14px;
}
.calendar-header-actions {
display: flex;
align-items: flex-end;
gap: 12px;
}
.calendar-user-form {
display: flex;
flex-direction: column;
gap: 6px;
}
.calendar-user-form label {
font-size: 14px;
font-weight: 600;
color: #6f788b;
}
.calendar-user-form select {
min-width: 230px;
height: 42px;
padding: 0 12px;
background: #fff;
border: 1px solid #dfe3ec;
border-radius: 9px;
color: #273046;
font-size: 14px;
font-family: inherit;
}
.calendar-type-legend {
display: flex;
flex-wrap: wrap;
gap: 10px 16px;
margin-bottom: 16px;
padding: 12px 15px;
background: #fff;
border: 1px solid #eceef4;
border-radius: 12px;
}
.calendar-type-item {
display: inline-flex;
align-items: center;
gap: 7px;
color: #596276;
font-size: 14px;
}
.calendar-type-dot {
width: 9px;
height: 9px;
border-radius: 50%;
flex: 0 0 9px;
}
.calendar-card,
.calendar-form-card {
background: #fff;
border: 1px solid #eceef4;
border-radius: 14px;
}
.calendar-card {
padding: 20px;
}
.calendar-form-card {
padding: 25px;
}
.btn-primary,
.btn-secondary,
.btn-danger {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0 17px;
border-radius: 9px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.btn-primary {
border: 0;
background: linear-gradient(135deg, #4966ed, #3151db);
color: #fff;
}
.btn-primary:hover {
opacity: .92;
}
.btn-secondary {
border: 1px solid #dfe3ec;
background: #fff;
color: #50596b;
}
.btn-danger {
border: 0;
background: #fff0f1;
color: #d83546;
}
.btn-danger:hover {
background: #ffe2e5;
}
.form-group {
margin-bottom: 16px;
}
.form-group label {
display: block;
margin-bottom: 7px;
color: #4f586b;
font-size: 14px;
font-weight: 600;
}
.form-group input[type="text"],
.form-group input[type="datetime-local"],
.form-group select,
.form-group textarea {
width: 100%;
border: 1px solid #dfe3ec;
border-radius: 9px;
background: #fff;
color: #232b3d;
font-family: inherit;
font-size: 14px;
}
.form-group input[type="text"],
.form-group input[type="datetime-local"],
.form-group select {
min-height: 44px;
padding: 0 12px;
}
.form-group textarea {
padding: 12px;
resize: vertical;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #5870e8;
box-shadow: 0 0 0 3px rgba(88,112,232,.1);
}
.form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.checkbox-group label {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.form-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid #edf0f5;
}
.delete-event-zone {
margin-top: 16px;
}
.delete-event-zone form {
display: inline-block;
}
/* FullCalendar */
.fc {
font-family: Inter, Arial, sans-serif;
}
.fc .fc-toolbar-title {
font-size: 18px;
font-weight: 600;
color: #1a2134;
}
.fc .fc-button {
border: 0 !important;
background: #f0f3f9 !important;
color: #414b61 !important;
box-shadow: none !important;
}
.fc .fc-button:hover {
background: #e7ebf4 !important;
}
.fc .fc-button-primary:not(:disabled).fc-button-active {
background: #4562e6 !important;
color: #fff !important;
}
.fc-theme-standard td,
.fc-theme-standard th {
border-color: #edf0f5;
}
.fc .fc-col-header-cell-cushion {
padding: 12px;
color: #697287;
text-decoration: none;
}
.fc .fc-daygrid-day-number {
padding: 9px;
color: #323a4d;
text-decoration: none;
}
.fc-event {
cursor: grab;
border: 0 !important;
border-radius: 6px !important;
padding: 3px 5px !important;
font-size: 14px;
}
.fc-event:active {
cursor: grabbing;
}
/* Toast AJAX */
.calendar-success-message {
position: fixed;
right: 25px;
bottom: 25px;
z-index: 5000;
padding: 12px 18px;
background: #172033;
color: #fff;
border-radius: 9px;
font-size: 14px;
font-weight: 600;
opacity: 0;
pointer-events: none;
transform: translateY(10px);
transition: opacity .2s ease, transform .2s ease;
}
.calendar-success-message.error {
background: #b42333;
}
.calendar-success-message.show {
opacity: 1;
transform: translateY(0);
}
.calendar-app {
width: 100%;
}
.calendar-topbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
margin-bottom: 18px;
}
.calendar-topbar h1 {
margin: 0 0 4px;
font-size: 26px;
}
.calendar-topbar p {
margin: 0;
color: #7a8395;
font-size: 14px;
}
.calendar-toolbar {
display: grid;
grid-template-columns: repeat(3, minmax(150px, 1fr)) minmax(220px, 1.6fr) auto;
gap: 12px;
align-items: end;
margin-bottom: 14px;
padding: 14px;
background: #fff;
border: 1px solid #eceef4;
border-radius: 12px;
}
.toolbar-field {
min-width: 0;
}
.toolbar-field label {
display: block;
margin-bottom: 6px;
color: #667085;
font-size: 14px;
font-weight: 600;
}
.toolbar-field input,
.toolbar-field select {
width: 100%;
min-height: 42px;
padding: 0 11px;
border: 1px solid #dfe3ec;
border-radius: 8px;
background: #fff;
font: inherit;
font-size: 14px;
}
.calendar-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-bottom: 14px;
}
.calendar-summary > div {
display: flex;
flex-direction: column;
gap: 2px;
padding: 12px 14px;
background: #fff;
border: 1px solid #eceef4;
border-radius: 10px;
}
.calendar-summary strong {
font-size: 20px;
color: #1e2638;
}
.calendar-summary span {
font-size: 14px;
color: #7b8496;
}
.calendar-card,
.calendar-reminders {
background: #fff;
border: 1px solid #eceef4;
border-radius: 14px;
}
.calendar-card {
padding: 18px;
}
.calendar-reminders {
margin-top: 14px;
padding: 16px;
}
.reminders-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.reminders-head h2 {
margin: 0 0 3px;
font-size: 15px;
}
.reminders-head p {
margin: 0;
color: #8790a1;
font-size: 14px;
}
.reminders-list {
display: grid;
gap: 8px;
}
.reminder-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
width: 100%;
padding: 10px 12px;
border: 1px solid #edf0f4;
border-radius: 9px;
background: #fbfcfe;
text-align: left;
cursor: pointer;
}
.reminder-item strong {
font-size: 14px;
color: #273047;
}
.reminder-item span {
font-size: 14px;
color: #7c8495;
}
.calendar-modal {
position: fixed;
inset: 0;
z-index: 6000;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}
.calendar-modal.open {
display: flex;
}
.calendar-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, .45);
}
.calendar-modal-dialog {
position: relative;
z-index: 1;
width: min(760px, 100%);
max-height: 90vh;
overflow-y: auto;
padding: 22px;
border-radius: 16px;
background: #fff;
box-shadow: 0 25px 70px rgba(22, 30, 50, .18);
}
.calendar-modal-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 15px;
margin-bottom: 18px;
}
.calendar-modal-head h2 {
margin: 0 0 4px;
font-size: 20px;
}
.calendar-modal-head p {
margin: 0;
color: #7e8798;
font-size: 14px;
}
.modal-close {
width: 38px;
height: 38px;
border: 0;
border-radius: 8px;
background: #f4f6fa;
color: #5c6577;
font-size: 22px;
cursor: pointer;
}
.form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.form-group {
margin-bottom: 14px;
}
.form-group label {
display: block;
margin-bottom: 6px;
color: #566074;
font-size: 14px;
font-weight: 600;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
border: 1px solid #dfe3ec;
border-radius: 8px;
background: #fff;
font: inherit;
font-size: 14px;
}
.form-group input,
.form-group select {
min-height: 42px;
padding: 0 11px;
}
.form-group textarea {
padding: 10px 11px;
resize: vertical;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: 0;
border-color: #5870e8;
box-shadow: 0 0 0 3px rgba(88, 112, 232, .1);
}
.form-check {
display: flex;
align-items: center;
gap: 8px;
margin: 4px 0 14px;
}
.modal-actions {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid #edf0f4;
}
.modal-left-actions,
.modal-right-actions {
display: flex;
gap: 8px;
}
.btn-primary,
.btn-secondary,
.btn-danger,
.small-action {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 14px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.btn-primary {
border: 0;
background: #4260df;
color: #fff;
}
.btn-secondary,
.small-action {
border: 1px solid #dde2eb;
background: #fff;
color: #4f596c;
}
.btn-danger {
border: 1px solid #f4c8cc;
background: #fdefef;
color: #bf303d;
}
.empty-state {
padding: 12px;
color: #7d8698;
font-size: 14px;
text-align: center;
}
.fc-event {
cursor: pointer;
border: 0 !important;
border-radius: 6px !important;
}
.fc .fc-toolbar-title {
font-size: 17px;
}
.flash-message {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 20px;
padding: 12px 14px;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
animation: flash-in 0.3s ease-out;
}
.flash-icon {
flex-shrink: 0;
}
.flash-error {
background: #FDEDEE;
color: #C0392B;
border: 1px solid #F5C6CB;
animation: flash-in 0.3s ease-out, flash-shake 0.4s ease-in-out 0.3s;
}
.flash-success {
background: #E9F9EF;
color: #1E8449;
border: 1px solid #C3E6CB;
}
.flash-leave {
opacity: 0;
transform: translateY(-6px);
transition: opacity .25s ease, transform .25s ease;
}
@keyframes flash-in {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes flash-shake {
0%, 100% {
transform: translateX(0);
}
25% {
transform: translateX(-4px);
}
50% {
transform: translateX(4px);
}
75% {
transform: translateX(-2px);
}
}
@media (max-width: 1000px) {
.calendar-toolbar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.toolbar-search {
grid-column: span 2;
}
}
@media (max-width: 700px) {
.calendar-topbar {
flex-direction: column;
align-items: stretch;
}
.calendar-toolbar,
.calendar-summary,
.form-row {
grid-template-columns: 1fr;
}
.toolbar-search {
grid-column: auto;
}
.calendar-card {
padding: 10px;
overflow-x: auto;
}
.calendar-modal {
padding: 10px;
}
.calendar-modal-dialog {
padding: 16px;
}
.modal-actions {
flex-direction: column-reverse;
}
.modal-left-actions,
.modal-right-actions {
width: 100%;
}
.modal-left-actions > *,
.modal-right-actions > * {
flex: 1;
}
}
/* ================================
PROSPECTS / ICEKOM CRM
\================================ */
.prospects-page,
.prospect-detail-page,
.prospect-form-page {
width: 100%;
}
.prospects-header,
.prospect-detail-header,
.prospect-form-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 18px;
}
.prospects-header h1,
.prospect-detail-header h1,
.prospect-form-header h1 {
margin: 0 0 4px;
color: #1d2433;
font-size: 26px;
}
.prospects-header p,
.prospect-detail-header p,
.prospect-form-header p {
margin: 0;
color: #80899a;
font-size: 14px;
}
.btn-primary,
.btn-secondary,
.btn-danger,
.small-action {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 14px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.btn-primary {
border: 0;
background: #4260df;
color: #fff;
}
.btn-secondary,
.small-action {
border: 1px solid #dde2eb;
background: #fff;
color: #4f596c;
}
.btn-danger {
border: 1px solid #f4c8cc;
background: #fdefef;
color: #bf303d;
}
.full-button {
width: 100%;
}
.prospect-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-bottom: 14px;
}
.stat-card {
display: flex;
flex-direction: column;
gap: 2px;
padding: 13px 15px;
background: #fff;
border: 1px solid #eceef4;
border-radius: 10px;
}
.stat-card strong {
color: #21293b;
font-size: 20px;
}
.stat-card span {
color: #7e8798;
font-size: 14px;
}
.prospect-filters {
display: grid;
grid-template-columns:
minmax(220px, 1.5fr)
repeat(3, minmax(140px, 1fr))
auto
auto;
gap: 10px;
align-items: end;
margin-bottom: 14px;
padding: 14px;
background: #fff;
border: 1px solid #eceef4;
border-radius: 12px;
}
.prospect-filters label {
display: block;
margin-bottom: 6px;
color: #687184;
font-size: 14px;
font-weight: 600;
}
.prospect-filters input[type="search"],
.prospect-filters select {
width: 100%;
min-height: 40px;
padding: 0 10px;
border: 1px solid #dfe3ec;
border-radius: 8px;
background: #fff;
font: inherit;
font-size: 14px;
}
.favorite-filter {
display: flex !important;
align-items: center;
gap: 7px;
min-height: 40px;
margin: 0 !important;
}
.filter-actions {
display: flex;
align-items: center;
gap: 8px;
}
.filter-reset {
color: #737c8e;
font-size: 14px;
text-decoration: none;
}
.prospects-card,
.prospect-card,
.prospect-form-card {
background: #fff;
border: 1px solid #eceef4;
border-radius: 14px;
}
.prospects-card {
overflow: hidden;
}
.prospects-table-wrap {
overflow-x: auto;
}
.prospects-table {
width: 100%;
border-collapse: collapse;
}
.prospects-table th {
padding: 11px 12px;
background: #fafbfc;
border-bottom: 1px solid #eceef4;
color: #7b8495;
font-size: 14px;
font-weight: 700;
text-align: left;
text-transform: uppercase;
letter-spacing: .03em;
}
.prospects-table td {
padding: 12px;
border-bottom: 1px solid #f0f2f6;
color: #4d5668;
font-size: 14px;
vertical-align: middle;
}
.prospects-table tbody tr:hover {
background: #fbfcfe;
}
.prospect-name {
display: block;
color: #222b3d;
font-weight: 650;
text-decoration: none;
}
.prospect-contact,
.prospects-table td small {
display: block;
margin-top: 2px;
color: #8a92a2;
font-size: 14px;
}
.favorite-button {
border: 0;
background: transparent;
color: #c6cbd5;
font-size: 18px;
cursor: pointer;
}
.favorite-button.active {
color: #f4b740;
}
.status-badge,
.tag,
.score-badge {
display: inline-flex;
align-items: center;
border-radius: 999px;
font-size: 14px;
font-weight: 650;
}
.status-badge {
padding: 5px 8px;
background: color-mix(
in srgb,
var(--status-color) 13%,
white
);
color: var(--status-color);
border: 1px solid color-mix(
in srgb,
var(--status-color) 25%,
white
);
}
.score-badge {
padding: 5px 8px;
background: #f2f4f8;
color: #4f596d;
}
.tag-list,
.detail-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 6px;
}
.tag {
padding: 3px 7px;
background: color-mix(
in srgb,
var(--tag-color) 12%,
white
);
color: var(--tag-color);
border: 1px solid color-mix(
in srgb,
var(--tag-color) 22%,
white
);
}
.table-actions {
text-align: right;
}
.pagination {
display: flex;
justify-content: center;
gap: 5px;
padding: 14px;
}
.pagination a,
.pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
min-height: 32px;
border: 1px solid #e2e6ed;
border-radius: 7px;
color: #596275;
font-size: 14px;
text-decoration: none;
}
.pagination .active a {
background: #4260df;
color: #fff;
border-color: #4260df;
}
.empty-state {
padding: 28px;
color: #818a9b;
font-size: 14px;
text-align: center;
}
.empty-state strong {
display: block;
margin-bottom: 5px;
color: #424b5d;
font-size: 14px;
}
.empty-state p {
margin: 0;
}
/* DETAIL */
.prospect-title-row {
display: flex;
align-items: center;
gap: 10px;
}
.detail-favorite {
font-size: 24px;
}
.detail-actions {
display: flex;
gap: 8px;
}
.prospect-detail-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 310px;
gap: 14px;
align-items: start;
}
.prospect-detail-main,
.prospect-detail-sidebar {
display: grid;
gap: 14px;
}
.prospect-card {
padding: 18px;
}
.card-heading {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 15px;
}
.card-heading h2 {
margin: 0 0 3px;
color: #273044;
font-size: 15px;
}
.card-heading p {
margin: 0;
color: #8a92a2;
font-size: 14px;
}
.info-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.info-item {
padding: 11px 12px;
background: #fafbfc;
border: 1px solid #eff1f5;
border-radius: 9px;
}
.info-item span {
display: block;
margin-bottom: 3px;
color: #8a92a3;
font-size: 14px;
}
.info-item strong {
color: #353e50;
font-size: 14px;
}
.notes-panel {
margin-top: 14px;
padding: 12px;
background: #fbfcfe;
border-radius: 9px;
}
.notes-panel strong {
display: block;
margin-bottom: 6px;
font-size: 14px;
}
.notes-panel p {
margin: 0;
color: #60697a;
font-size: 14px;
line-height: 1.55;
}
.timeline {
display: grid;
gap: 0;
}
.timeline-item {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
gap: 10px;
padding-bottom: 16px;
}
.timeline-dot {
width: 9px;
height: 9px;
margin-top: 4px;
border-radius: 50%;
background: #718096;
}
.timeline-note {
background: #4260df;
}
.timeline-status {
background: #f59e0b;
}
.timeline-created {
background: #10b981;
}
.timeline-converted {
background: #8b5cf6;
}
.timeline-body {
min-width: 0;
}
.timeline-meta {
display: flex;
justify-content: space-between;
gap: 10px;
}
.timeline-meta strong {
color: #333c4e;
font-size: 14px;
}
.timeline-meta time {
color: #949bab;
font-size: 14px;
}
.timeline-body p {
margin: 5px 0;
color: #5f6879;
font-size: 14px;
line-height: 1.45;
}
.timeline-body small {
color: #959dad;
font-size: 14px;
}
.quick-note-form {
margin-top: 12px;
padding-top: 14px;
border-top: 1px solid #edf0f4;
}
.quick-note-form label {
display: block;
margin-bottom: 7px;
color: #596275;
font-size: 14px;
font-weight: 600;
}
.quick-note-form textarea {
width: 100%;
padding: 10px;
border: 1px solid #dfe3ec;
border-radius: 8px;
resize: vertical;
font: inherit;
font-size: 14px;
}
.quick-note-form > div {
display: flex;
justify-content: flex-end;
margin-top: 8px;
}
.appointments-list {
display: grid;
gap: 7px;
}
.appointment-item {
display: grid;
grid-template-columns: 5px minmax(0, 1fr);
gap: 10px;
padding: 10px;
border: 1px solid #edf0f4;
border-radius: 8px;
color: inherit;
text-decoration: none;
}
.appointment-color {
border-radius: 99px;
}
.appointment-item strong {
display: block;
color: #394255;
font-size: 14px;
}
.appointment-item span {
color: #8790a0;
font-size: 14px;
}
.status-control label {
display: block;
margin-bottom: 6px;
color: #687184;
font-size: 14px;
font-weight: 600;
}
.status-control select {
width: 100%;
min-height: 40px;
margin-bottom: 8px;
padding: 0 10px;
border: 1px solid #dfe3ec;
border-radius: 8px;
background: #fff;
font: inherit;
font-size: 14px;
}
.metric-list {
display: grid;
gap: 9px;
margin-top: 15px;
}
.metric-list > div {
display: flex;
justify-content: space-between;
gap: 8px;
padding-bottom: 9px;
border-bottom: 1px solid #f0f2f5;
}
.metric-list span {
color: #828a9a;
font-size: 14px;
}
.metric-list strong {
color: #3c4557;
font-size: 14px;
text-align: right;
}
.next-rdv-title,
.next-rdv-date,
.next-rdv-card small {
display: block;
}
.next-rdv-title {
color: #353e50;
font-size: 14px;
}
.next-rdv-date {
margin-top: 5px;
color: #4260df;
font-size: 14px;
font-weight: 600;
}
.next-rdv-card small {
margin-top: 4px;
color: #858e9e;
}
.conversion-card p {
color: #7e8798;
font-size: 14px;
}
.danger-zone {
padding: 12px;
border: 1px solid #f3d4d7;
border-radius: 12px;
background: #fffafa;
}
/* FORM */
.prospect-form-page {
max-width: 950px;
}
.prospect-form-card {
padding: 20px;
}
.form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.form-row-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.form-group {
margin-bottom: 14px;
}
.form-group label {
display: block;
margin-bottom: 6px;
color: #5e6779;
font-size: 14px;
font-weight: 600;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
border: 1px solid #dfe3ec;
border-radius: 8px;
background: #fff;
font: inherit;
font-size: 14px;
}
.form-group input,
.form-group select {
min-height: 42px;
padding: 0 10px;
}
.form-group textarea {
padding: 10px;
resize: vertical;
}
.form-group select[multiple] {
min-height: 120px;
padding: 8px;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #5870e8;
box-shadow: 0 0 0 3px rgba(88, 112, 232, .1);
}
.form-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid #edf0f4;
}
/* FLASH */
.flash-message {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 20px;
padding: 12px 14px;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
animation: flash-in 0.3s ease-out;
}
.flash-icon {
flex-shrink: 0;
}
.flash-error {
background: #FDEDEE;
color: #C0392B;
border: 1px solid #F5C6CB;
animation: flash-in 0.3s ease-out, flash-shake 0.4s ease-in-out 0.3s;
}
.flash-success {
background: #E9F9EF;
color: #1E8449;
border: 1px solid #C3E6CB;
}
.flash-leave {
opacity: 0;
transform: translateY(-6px);
transition: opacity .25s ease, transform .25s ease;
}
@keyframes flash-in {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes flash-shake {
0%, 100% {
transform: translateX(0);
}
25% {
transform: translateX(-4px);
}
50% {
transform: translateX(4px);
}
75% {
transform: translateX(-2px);
}
}
@media (max-width: 1050px) {
.prospect-filters {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.filter-search {
grid-column: span 2;
}
}
@media (max-width: 850px) {
.prospect-detail-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 650px) {
.prospects-header,
.prospect-detail-header,
.prospect-form-header {
flex-direction: column;
align-items: stretch;
}
.detail-actions {
flex-direction: column;
}
.prospect-stats,
.prospect-filters,
.info-grid,
.form-row,
.form-row-3 {
grid-template-columns: 1fr;
}
.filter-search {
grid-column: auto;
}
.form-actions {
flex-direction: column-reverse;
}
}
/* ================================
CLIENTS / ICEKOM CRM
\================================ */
.clients-page,
.client-detail-page,
.client-form-page {
width: 100%;
}
.clients-header,
.client-detail-header,
.client-form-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 18px;
}
.clients-header h1,
.client-detail-header h1,
.client-form-header h1 {
margin: 0 0 4px;
color: #1d2433;
font-size: 26px;
}
.clients-header p,
.client-detail-header p,
.client-form-header p {
margin: 0;
color: #80899a;
font-size: 14px;
}
.btn-primary,
.btn-secondary,
.btn-danger,
.small-action {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 14px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.btn-primary {
border: 0;
background: #4260df;
color: #fff;
}
.btn-secondary,
.small-action {
border: 1px solid #dde2eb;
background: #fff;
color: #4f596c;
}
.btn-danger {
border: 1px solid #f4c8cc;
background: #fdefef;
color: #bf303d;
}
.full-button {
width: 100%;
}
.client-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-bottom: 14px;
}
.stat-card {
display: flex;
flex-direction: column;
gap: 2px;
padding: 13px 15px;
background: #fff;
border: 1px solid #eceef4;
border-radius: 10px;
}
.stat-card strong {
color: #21293b;
font-size: 20px;
}
.stat-card span {
color: #7e8798;
font-size: 14px;
}
.client-filters {
display: grid;
grid-template-columns:
minmax(220px, 1.5fr)
repeat(3, minmax(140px, 1fr))
auto
auto;
gap: 10px;
align-items: end;
margin-bottom: 14px;
padding: 14px;
background: #fff;
border: 1px solid #eceef4;
border-radius: 12px;
}
.client-filters label {
display: block;
margin-bottom: 6px;
color: #687184;
font-size: 14px;
font-weight: 600;
}
.client-filters input[type="search"],
.client-filters select {
width: 100%;
min-height: 40px;
padding: 0 10px;
border: 1px solid #dfe3ec;
border-radius: 8px;
background: #fff;
font: inherit;
font-size: 14px;
}
.favorite-filter {
display: flex !important;
align-items: center;
gap: 7px;
min-height: 40px;
margin: 0 !important;
}
.filter-actions {
display: flex;
align-items: center;
gap: 8px;
}
.filter-reset {
color: #737c8e;
font-size: 14px;
text-decoration: none;
}
.clients-card,
.client-card,
.client-form-card {
background: #fff;
border: 1px solid #eceef4;
border-radius: 14px;
}
.clients-card {
overflow: hidden;
}
.clients-table-wrap {
overflow-x: auto;
}
.clients-table {
width: 100%;
border-collapse: collapse;
}
.clients-table th {
padding: 11px 12px;
background: #fafbfc;
border-bottom: 1px solid #eceef4;
color: #7b8495;
font-size: 14px;
font-weight: 700;
text-align: left;
text-transform: uppercase;
letter-spacing: .03em;
}
.clients-table td {
padding: 12px;
border-bottom: 1px solid #f0f2f6;
color: #4d5668;
font-size: 14px;
vertical-align: middle;
}
.clients-table tbody tr:hover {
background: #fbfcfe;
}
.client-name {
display: block;
color: #222b3d;
font-weight: 650;
text-decoration: none;
}
.client-contact,
.clients-table td small {
display: block;
margin-top: 2px;
color: #8a92a2;
font-size: 14px;
}
.favorite-button {
border: 0;
background: transparent;
color: #c6cbd5;
font-size: 18px;
cursor: pointer;
}
.favorite-button.active {
color: #f4b740;
}
.status-badge,
.tag {
display: inline-flex;
align-items: center;
border-radius: 999px;
font-size: 14px;
font-weight: 650;
}
.status-badge {
padding: 5px 8px;
background: color-mix(
in srgb,
var(--status-color) 13%,
white
);
color: var(--status-color);
border: 1px solid color-mix(
in srgb,
var(--status-color) 25%,
white
);
}
.tag-list,
.detail-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 6px;
}
.tag {
padding: 3px 7px;
background: color-mix(
in srgb,
var(--tag-color) 12%,
white
);
color: var(--tag-color);
border: 1px solid color-mix(
in srgb,
var(--tag-color) 22%,
white
);
}
.table-actions {
text-align: right;
}
.pagination {
display: flex;
justify-content: center;
gap: 5px;
padding: 14px;
}
.pagination a,
.pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
min-height: 32px;
border: 1px solid #e2e6ed;
border-radius: 7px;
color: #596275;
font-size: 14px;
text-decoration: none;
}
.empty-state {
padding: 28px;
color: #818a9b;
font-size: 14px;
text-align: center;
}
.client-title-row {
display: flex;
align-items: center;
gap: 10px;
}
.detail-favorite {
font-size: 24px;
}
.detail-actions {
display: flex;
gap: 8px;
}
.client-detail-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 310px;
gap: 14px;
align-items: start;
}
.client-detail-main,
.client-detail-sidebar {
display: grid;
gap: 14px;
}
.client-card {
padding: 18px;
}
.card-heading {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 15px;
}
.card-heading h2 {
margin: 0 0 3px;
color: #273044;
font-size: 15px;
}
.card-heading p {
margin: 0;
color: #8a92a2;
font-size: 14px;
}
.info-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.info-item {
padding: 11px 12px;
background: #fafbfc;
border: 1px solid #eff1f5;
border-radius: 9px;
}
.info-item span {
display: block;
margin-bottom: 3px;
color: #8a92a3;
font-size: 14px;
}
.info-item strong {
color: #353e50;
font-size: 14px;
}
.notes-panel {
margin-top: 14px;
padding: 12px;
background: #fbfcfe;
border-radius: 9px;
}
.notes-panel strong {
display: block;
margin-bottom: 6px;
font-size: 14px;
}
.notes-panel p {
margin: 0;
color: #60697a;
font-size: 14px;
line-height: 1.55;
}
.timeline {
display: grid;
gap: 0;
}
.timeline-item {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
gap: 10px;
padding-bottom: 16px;
}
.timeline-dot {
width: 9px;
height: 9px;
margin-top: 4px;
border-radius: 50%;
background: #718096;
}
.timeline-note {
background: #4260df;
}
.timeline-status {
background: #f59e0b;
}
.timeline-created {
background: #10b981;
}
.timeline-body {
min-width: 0;
}
.timeline-meta {
display: flex;
justify-content: space-between;
gap: 10px;
}
.timeline-meta strong {
color: #333c4e;
font-size: 14px;
}
.timeline-meta time {
color: #949bab;
font-size: 14px;
}
.timeline-body p {
margin: 5px 0;
color: #5f6879;
font-size: 14px;
line-height: 1.45;
}
.timeline-body small {
color: #959dad;
font-size: 14px;
}
.quick-note-form {
margin-top: 12px;
padding-top: 14px;
border-top: 1px solid #edf0f4;
}
.quick-note-form label {
display: block;
margin-bottom: 7px;
color: #596275;
font-size: 14px;
font-weight: 600;
}
.quick-note-form textarea {
width: 100%;
padding: 10px;
border: 1px solid #dfe3ec;
border-radius: 8px;
resize: vertical;
font: inherit;
font-size: 14px;
}
.quick-note-form > div {
display: flex;
justify-content: flex-end;
margin-top: 8px;
}
.appointments-list {
display: grid;
gap: 7px;
}
.appointment-item {
display: grid;
grid-template-columns: 5px minmax(0, 1fr);
gap: 10px;
padding: 10px;
border: 1px solid #edf0f4;
border-radius: 8px;
color: inherit;
text-decoration: none;
}
.appointment-color {
border-radius: 99px;
}
.appointment-item strong {
display: block;
color: #394255;
font-size: 14px;
}
.appointment-item span {
color: #8790a0;
font-size: 14px;
}
.status-control label {
display: block;
margin-bottom: 6px;
color: #687184;
font-size: 14px;
font-weight: 600;
}
.status-control select {
width: 100%;
min-height: 40px;
margin-bottom: 8px;
padding: 0 10px;
border: 1px solid #dfe3ec;
border-radius: 8px;
background: #fff;
font: inherit;
font-size: 14px;
}
.metric-list {
display: grid;
gap: 9px;
margin-top: 15px;
}
.metric-list > div {
display: flex;
justify-content: space-between;
gap: 8px;
padding-bottom: 9px;
border-bottom: 1px solid #f0f2f5;
}
.metric-list span {
color: #828a9a;
font-size: 14px;
}
.metric-list strong {
color: #3c4557;
font-size: 14px;
text-align: right;
}
.next-rdv-title,
.next-rdv-date,
.next-rdv-card small {
display: block;
}
.next-rdv-title {
color: #353e50;
font-size: 14px;
}
.next-rdv-date {
margin-top: 5px;
color: #4260df;
font-size: 14px;
font-weight: 600;
}
.next-rdv-card small {
margin-top: 4px;
color: #858e9e;
}
.danger-zone {
padding: 12px;
border: 1px solid #f3d4d7;
border-radius: 12px;
background: #fffafa;
}
/* FORM */
.client-form-page {
max-width: 950px;
}
.client-form-card {
padding: 20px;
}
.form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.form-row-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.form-group {
margin-bottom: 14px;
}
.form-group label {
display: block;
margin-bottom: 6px;
color: #5e6779;
font-size: 14px;
font-weight: 600;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
border: 1px solid #dfe3ec;
border-radius: 8px;
background: #fff;
font: inherit;
font-size: 14px;
}
.form-group input,
.form-group select {
min-height: 42px;
padding: 0 10px;
}
.form-group textarea {
padding: 10px;
resize: vertical;
}
.form-group select[multiple] {
min-height: 120px;
padding: 8px;
}
.form-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid #edf0f4;
}
/* FLASH */
.flash-message {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 20px;
padding: 12px 14px;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
animation: flash-in 0.3s ease-out;
}
.flash-icon {
flex-shrink: 0;
}
.flash-error {
background: #FDEDEE;
color: #C0392B;
border: 1px solid #F5C6CB;
animation: flash-in 0.3s ease-out, flash-shake 0.4s ease-in-out 0.3s;
}
.flash-success {
background: #E9F9EF;
color: #1E8449;
border: 1px solid #C3E6CB;
}
.flash-leave {
opacity: 0;
transform: translateY(-6px);
transition: opacity .25s ease, transform .25s ease;
}
@keyframes flash-in {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes flash-shake {
0%, 100% {
transform: translateX(0);
}
25% {
transform: translateX(-4px);
}
50% {
transform: translateX(4px);
}
75% {
transform: translateX(-2px);
}
}
@media (max-width: 1050px) {
.client-filters {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.filter-search {
grid-column: span 2;
}
.client-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 850px) {
.client-detail-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 650px) {
.clients-header,
.client-detail-header,
.client-form-header {
flex-direction: column;
align-items: stretch;
}
.detail-actions {
flex-direction: column;
}
.client-stats,
.client-filters,
.info-grid,
.form-row,
.form-row-3 {
grid-template-columns: 1fr;
}
.filter-search {
grid-column: auto;
}
.form-actions {
flex-direction: column-reverse;
}
}
/* ==========================================
ACCOUNT SETTINGS
\========================================== */
.account-settings-page {
width: 100%;
}
.settings-header {
margin-bottom: 18px;
}
.settings-header h1 {
margin: 0 0 4px;
color: #1d2433;
font-size: 26px;
}
.settings-header p {
margin: 0;
color: #80899a;
font-size: 14px;
}
/* TABS */
.settings-tabs {
display: flex;
gap: 8px;
margin-bottom: 16px;
padding: 6px;
background: #f2f4f8;
border-radius: 12px;
}
.settings-tab {
display: flex;
align-items: center;
gap: 10px;
min-width: 190px;
padding: 10px 14px;
border: 0;
border-radius: 9px;
background: transparent;
color: #697386;
text-align: left;
cursor: pointer;
}
.settings-tab.active {
background: #fff;
color: #2d3748;
box-shadow: 0 2px 8px rgba(20, 30, 50, .06);
}
.tab-icon {
font-size: 17px;
}
.settings-tab strong,
.settings-tab small {
display: block;
}
.settings-tab strong {
font-size: 14px;
}
.settings-tab small {
margin-top: 2px;
color: #929aaa;
font-size: 14px;
}
.settings-tab-panel {
display: none;
}
.settings-tab-panel.active {
display: block;
}
/* LAYOUT */
.settings-grid,
.security-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 310px;
gap: 14px;
align-items: start;
}
.settings-main,
.settings-sidebar,
.security-sidebar {
display: grid;
gap: 14px;
}
.settings-card {
padding: 18px;
background: #fff;
border: 1px solid #eceef4;
border-radius: 14px;
}
.card-heading {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
}
.card-heading h2 {
margin: 0 0 4px;
color: #273044;
font-size: 15px;
}
.card-heading p {
margin: 0;
color: #8a92a2;
font-size: 14px;
}
/* PROFILE */
.approval-alert {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
padding: 14px;
border: 1px solid #f3d79a;
border-radius: 12px;
background: #fff9e9;
}
.approval-alert-content {
flex: 1;
}
.approval-alert-content strong {
display: block;
margin-bottom: 3px;
color: #7d5c11;
font-size: 14px;
}
.approval-alert-content p {
margin: 0;
color: #8f722e;
font-size: 14px;
}
.form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.form-group {
position: relative;
margin-bottom: 14px;
}
.form-group label,
.settings-card label {
display: block;
margin-bottom: 6px;
color: #5e6779;
font-size: 14px;
font-weight: 600;
}
.form-group input,
.form-group textarea,
.settings-card input,
.settings-card textarea {
width: 100%;
border: 1px solid #dfe3ec;
border-radius: 8px;
background: #fff;
font: inherit;
font-size: 14px;
box-sizing: border-box;
}
.form-group input,
.settings-card input {
min-height: 42px;
padding: 0 10px;
}
.form-group textarea,
.settings-card textarea {
padding: 10px;
resize: vertical;
}
.form-group input:focus,
.form-group textarea:focus {
outline: 0;
border-color: #5870e8;
box-shadow: 0 0 0 3px rgba(88, 112, 232, .1);
}
input:disabled,
textarea:disabled {
background: #f7f8fa;
color: #8c94a3;
cursor: not-allowed;
}
.form-actions {
display: flex;
justify-content: flex-end;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid #edf0f4;
}
.btn-primary,
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 14px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.btn-primary {
border: 0;
background: #4260df;
color: #fff;
}
.btn-primary:disabled {
background: #b6bfda;
cursor: not-allowed;
}
.btn-secondary {
border: 1px solid #dde2eb;
background: #fff;
color: #4f596c;
}
.profile-summary {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.profile-avatar {
display: flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
margin-bottom: 10px;
border-radius: 50%;
background: #eef1ff;
color: #4260df;
font-size: 17px;
font-weight: 700;
}
.profile-summary strong {
color: #30394b;
font-size: 14px;
}
.profile-summary > span {
margin-top: 3px;
color: #858e9e;
font-size: 14px;
}
.role-badge {
display: inline-flex;
padding: 4px 8px;
border-radius: 99px;
background: #f1f3f8;
}
.information-card strong {
display: block;
margin-bottom: 7px;
color: #384153;
font-size: 14px;
}
.information-card p {
color: #7a8394;
font-size: 14px;
line-height: 1.5;
}
.request-history {
display: grid;
gap: 8px;
}
.history-item {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 11px;
border: 1px solid #eef0f4;
border-radius: 9px;
}
.history-item strong {
color: #424b5d;
font-size: 14px;
}
.history-item p {
margin: 4px 0 0;
color: #7b8495;
font-size: 14px;
}
.status-badge {
display: inline-flex;
align-items: center;
flex-shrink: 0;
padding: 5px 8px;
border-radius: 999px;
font-size: 14px;
font-weight: 650;
}
.status-pending {
background: #fff7df;
color: #9a6a00;
}
.status-approved {
background: #eaf8ef;
color: #198754;
}
.status-rejected {
background: #fdecee;
color: #c0392b;
}
.status-cancelled {
background: #f0f2f5;
color: #737c8d;
}
/* SECURITY */
.security-card {
max-width: 760px;
}
.password-field input {
padding-right: 48px;
}
.password-toggle {
position: absolute;
right: 8px;
bottom: 7px;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 30px;
padding: 0;
border: 0;
border-radius: 6px;
background: #f4f6f9;
cursor: pointer;
}
.password-security-badge {
display: inline-flex;
padding: 5px 9px;
border-radius: 999px;
background: #f1f3f6;
color: #7b8495;
font-size: 14px;
font-weight: 700;
}
.password-security-badge[data-level="secure"] {
background: #e8f8ef;
color: #14824d;
}
.password-security-badge[data-level="good"] {
background: #eef4ff;
color: #4260df;
}
.password-security-badge[data-level="medium"] {
background: #fff5da;
color: #9a6b00;
}
.password-security-badge[data-level="weak"],
.password-security-badge[data-level="very-weak"] {
background: #fdecee;
color: #c0392b;
}
.password-strength {
margin: -2px 0 15px;
}
.strength-header {
display: flex;
justify-content: space-between;
margin-bottom: 6px;
color: #798294;
font-size: 14px;
}
.strength-track {
height: 7px;
overflow: hidden;
border-radius: 99px;
background: #eceff4;
}
.strength-fill {
width: 0;
height: 100%;
border-radius: inherit;
background: #d7dce5;
transition: width .2s ease, background .2s ease;
}
.strength-fill[data-level="very-weak"],
.strength-fill[data-level="weak"] {
background: #df4c58;
}
.strength-fill[data-level="medium"] {
background: #e5a925;
}
.strength-fill[data-level="good"] {
background: #4b72e8;
}
.strength-fill[data-level="secure"] {
background: #25a866;
}
.password-requirements {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px 12px;
margin-bottom: 17px;
padding: 13px;
border: 1px solid #edf0f4;
border-radius: 10px;
background: #fafbfc;
}
.password-rule {
display: flex;
align-items: center;
gap: 6px;
color: #8992a2;
font-size: 14px;
}
.password-rule.valid {
color: #198754;
}
.password-rule.invalid {
color: #bd4450;
}
.rule-icon {
width: 14px;
font-weight: 700;
}
.password-match {
min-height: 18px;
margin-top: -5px;
font-size: 14px;
}
.password-match.valid {
color: #198754;
}
.password-match.invalid {
color: #c0392b;
}
.security-info-card {
text-align: center;
}
.security-icon {
margin-bottom: 8px;
font-size: 28px;
}
.security-info-card h3 {
margin: 0 0 8px;
color: #343d4f;
font-size: 14px;
}
.security-info-card p,
.security-tip-card p {
color: #7d8697;
font-size: 14px;
line-height: 1.55;
}
.security-tip-card strong {
color: #3e4759;
font-size: 14px;
}
/* FLASH */
.flash-message {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 20px;
padding: 12px 14px;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
}
.flash-error {
background: #FDEDEE;
color: #C0392B;
border: 1px solid #F5C6CB;
}
.flash-success {
background: #E9F9EF;
color: #1E8449;
border: 1px solid #C3E6CB;
}
@media (max-width: 850px) {
.settings-grid,
.security-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 650px) {
.settings-tabs {
flex-direction: column;
}
.settings-tab {
width: 100%;
}
.form-row,
.password-requirements {
grid-template-columns: 1fr;
}
}
/* =============================
ADMIN USERS
\============================= */
.admin-users-page,
.admin-user-detail-page,
.admin-user-form-page {
width: 100%;
}
.admin-page-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
margin-bottom: 16px;
}
.admin-page-header h1 {
margin: 0 0 4px;
color: #1f2736;
font-size: 25px;
}
.admin-page-header p {
margin: 0;
color: #8790a0;
font-size: 14px;
}
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-success {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 39px;
padding: 0 14px;
border-radius: 8px;
font-size: 14px;
font-weight: 650;
text-decoration: none;
cursor: pointer;
}
.btn-primary {
border: 0;
background: #4260df;
color: #fff;
}
.btn-secondary {
border: 1px solid #dfe3eb;
background: #fff;
color: #536074;
}
.btn-danger {
border: 1px solid #f0c8cd;
background: #fdeef0;
color: #ba3542;
}
.btn-success {
border: 1px solid #c9e7d6;
background: #ecf9f2;
color: #198754;
}
/* STATS */
.admin-stats-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.admin-stat-card {
padding: 13px;
border: 1px solid #eceef3;
border-radius: 12px;
background: #fff;
}
.admin-stat-card span,
.admin-stat-card small {
display: block;
color: #8c94a3;
font-size: 14px;
}
.admin-stat-card strong {
display: block;
margin: 5px 0 2px;
color: #2f384a;
font-size: 22px;
}
.admin-stat-card.highlight {
border-color: #f1d89f;
background: #fffaf0;
}
/* FILTERS */
.admin-user-filters {
display: grid;
grid-template-columns: minmax(250px, 1fr) 180px 160px 170px auto;
gap: 10px;
align-items: end;
margin-bottom: 14px;
padding: 13px;
border: 1px solid #eceef3;
border-radius: 12px;
background: #fff;
}
.admin-user-filters label {
display: block;
margin-bottom: 5px;
color: #687386;
font-size: 14px;
font-weight: 600;
}
.admin-user-filters input,
.admin-user-filters select {
width: 100%;
min-height: 39px;
padding: 0 10px;
border: 1px solid #dfe3eb;
border-radius: 8px;
background: #fff;
font: inherit;
font-size: 14px;
box-sizing: border-box;
}
/* TABLE */
.admin-users-card,
.admin-card {
background: #fff;
border: 1px solid #eceef3;
border-radius: 13px;
}
.admin-users-card {
overflow: hidden;
}
.admin-users-table-wrap {
overflow-x: auto;
}
.admin-users-table {
width: 100%;
border-collapse: collapse;
}
.admin-users-table th {
padding: 10px 12px;
border-bottom: 1px solid #eceef3;
background: #fafbfc;
color: #828b9b;
font-size: 14px;
font-weight: 650;
text-align: left;
text-transform: uppercase;
}
.admin-users-table td {
padding: 11px 12px;
border-bottom: 1px solid #f0f2f5;
color: #566074;
font-size: 14px;
}
.user-cell {
display: flex;
align-items: center;
gap: 9px;
}
.user-avatar {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: #edf0ff;
color: #4862d7;
font-size: 14px;
font-weight: 700;
}
.user-avatar.large {
width: 52px;
height: 52px;
font-size: 14px;
}
.user-cell strong,
.user-cell span,
.user-cell small {
display: block;
}
.user-cell strong {
color: #30394b;
font-size: 14px;
}
.user-cell span,
.user-cell small {
margin-top: 2px;
color: #8b93a2;
font-size: 14px;
}
.role-pill,
.status-pill,
.warning-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 8px;
border-radius: 99px;
font-size: 14px;
font-weight: 650;
}
.role-pill.admin {
background: #f0edff;
color: #6e50cc;
}
.role-pill.commercial {
background: #edf5ff;
color: #3f6aa6;
}
.status-pill.active {
background: #eaf8ef;
color: #198754;
}
.status-pill.inactive {
background: #f2f3f5;
color: #727c8d;
}
.status-pill i {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.warning-pill {
background: #fff7df;
color: #976800;
}
.row-actions {
white-space: nowrap;
text-align: right;
}
.action-link,
.small-link {
margin-left: 8px;
color: #536fdc;
font-size: 14px;
font-weight: 600;
text-decoration: none;
}
.action-link.danger {
color: #ba3d49;
}
.action-link.success {
color: #198754;
}
.pagination-wrap {
padding: 12px;
text-align: center;
}
.empty-state {
padding: 28px;
color: #8992a1;
font-size: 14px;
text-align: center;
}
/* DETAIL */
.user-title {
display: flex;
align-items: center;
gap: 11px;
}
.header-actions {
display: flex;
gap: 8px;
}
.detail-status-row {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-bottom: 14px;
}
.settings-tabs {
display: flex;
gap: 6px;
margin-bottom: 14px;
padding: 5px;
border-radius: 10px;
background: #f3f5f8;
}
.settings-tab {
padding: 8px 12px;
border: 0;
border-radius: 7px;
background: transparent;
color: #7b8494;
font-size: 14px;
font-weight: 650;
cursor: pointer;
}
.settings-tab.active {
background: #fff;
color: #374155;
box-shadow: 0 2px 7px rgba(20, 30, 45, .05);
}
.admin-user-panel {
display: none;
}
.admin-user-panel.active {
display: block;
}
.detail-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.detail-stat-card {
padding: 13px;
border: 1px solid #eceef3;
border-radius: 11px;
background: #fff;
}
.detail-stat-card span {
color: #8a93a2;
font-size: 14px;
}
.detail-stat-card strong {
display: block;
margin-top: 4px;
color: #30394a;
font-size: 20px;
}
.detail-grid,
.user-form-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 290px;
gap: 14px;
align-items: start;
}
.detail-main,
.detail-grid > main,
.user-form-grid > main {
display: grid;
gap: 14px;
}
.detail-grid > aside,
.user-form-grid > aside {
display: grid;
gap: 14px;
}
.admin-card {
padding: 17px;
}
.card-heading {
display: flex;
justify-content: space-between;
gap: 10px;
margin-bottom: 14px;
}
.card-heading h2 {
margin: 0 0 3px;
color: #323b4d;
font-size: 14px;
}
.card-heading p {
margin: 0;
color: #8992a2;
font-size: 14px;
}
.info-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.info-grid > div {
padding: 10px;
border: 1px solid #eff1f4;
border-radius: 8px;
}
.info-grid span,
.info-grid strong {
display: block;
}
.info-grid span {
color: #8b94a3;
font-size: 14px;
text-transform: uppercase;
}
.info-grid strong {
margin-top: 4px;
color: #454f61;
font-size: 14px;
}
.appointment-list,
.request-list {
display: grid;
gap: 7px;
}
.appointment-item,
.request-item {
display: flex;
align-items: center;
gap: 9px;
padding: 9px;
border: 1px solid #eff1f4;
border-radius: 8px;
}
.appointment-item strong,
.appointment-item span,
.request-item strong,
.request-item span {
display: block;
}
.appointment-item strong,
.request-item strong {
color: #485264;
font-size: 14px;
}
.appointment-item span,
.request-item span {
margin-top: 2px;
color: #8c94a2;
font-size: 14px;
}
.request-item {
justify-content: space-between;
}
.event-type-dot {
width: 8px;
height: 8px;
flex-shrink: 0;
border-radius: 50%;
}
.helper-card strong,
.danger-zone strong {
display: block;
margin-bottom: 6px;
color: #414b5e;
font-size: 14px;
}
.helper-card p,
.danger-zone p {
color: #7f8999;
font-size: 14px;
line-height: 1.5;
}
.danger-zone {
border-color: #f1d4d7;
}
/* FORMS */
.form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 11px;
}
.admin-card label {
display: block;
margin-bottom: 5px;
color: #626d80;
font-size: 14px;
font-weight: 600;
}
.admin-card input,
.admin-card select {
width: 100%;
min-height: 40px;
padding: 0 9px;
border: 1px solid #dfe3eb;
border-radius: 8px;
background: #fff;
font: inherit;
font-size: 14px;
box-sizing: border-box;
}
.admin-card .input {
margin-bottom: 13px;
}
.toggle-field {
margin-bottom: 13px;
}
.switch-row {
display: flex !important;
align-items: center;
gap: 7px;
min-height: 40px;
padding: 0 10px;
border: 1px solid #e3e6ed;
border-radius: 8px;
background: #fafbfc;
}
.switch-row input {
width: auto;
min-height: 0;
margin: 0;
}
.switch-row span {
font-size: 14px;
color: #596477;
}
.password-section {
margin-top: 4px;
padding-top: 14px;
border-top: 1px solid #edf0f4;
}
.card-subheading {
margin-bottom: 10px;
color: #404a5c;
font-size: 14px;
font-weight: 650;
}
.form-actions {
display: flex;
justify-content: flex-end;
margin-top: 15px;
padding-top: 14px;
border-top: 1px solid #edf0f4;
}
.password-policy {
padding: 10px;
border-radius: 8px;
background: #f7f9fc;
}
.password-policy strong,
.password-policy span {
display: block;
}
.password-policy strong {
color: #485366;
font-size: 14px;
}
.password-policy span {
margin-top: 3px;
color: #87909f;
font-size: 14px;
}
/* FLASH */
.flash-message {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 20px;
padding: 12px 14px;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
}
.flash-error {
background: #FDEDEE;
color: #C0392B;
border: 1px solid #F5C6CB;
}
.flash-success {
background: #E9F9EF;
color: #1E8449;
border: 1px solid #C3E6CB;
}
@media (max-width: 1000px) {
.admin-stats-grid {
grid-template-columns: repeat(3, 1fr);
}
.admin-user-filters {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 800px) {
.detail-grid,
.user-form-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.admin-page-header {
flex-direction: column;
align-items: stretch;
}
.header-actions {
flex-wrap: wrap;
}
.admin-stats-grid,
.detail-stats,
.form-row,
.info-grid,
.admin-user-filters {
grid-template-columns: 1fr;
}
}
/* Première connexion / mot de passe temporaire */
.first-password-box {
width: min(500px, 100%);
}
.first-password-heading {
margin-bottom: 18px;
}
.first-password-heading p {
margin: 7px 0 0;
color: #7e8798;
font-size: 14px;
line-height: 1.5;
}
.first-login-badge {
display: inline-flex;
margin-bottom: 8px;
padding: 5px 9px;
border-radius: 999px;
background: #edf1ff;
color: #5269d9;
font-size: 14px;
font-weight: 700;
}
.security-shield {
margin-bottom: 14px;
font-size: 52px;
}
.password-field {
position: relative;
}
.password-field .form-input {
padding-right: 48px;
}
.toggle-password {
position: absolute;
top: 50%;
right: 8px;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 30px;
padding: 0;
transform: translateY(-50%);
border: 0;
border-radius: 6px;
background: #f2f4f8;
cursor: pointer;
}
.password-strength {
margin: -3px 0 13px;
}
.strength-header {
display: flex;
justify-content: space-between;
margin-bottom: 6px;
color: #7c8596;
font-size: 14px;
}
.strength-track {
height: 7px;
overflow: hidden;
border-radius: 99px;
background: #e9edf3;
}
.strength-fill {
width: 0;
height: 100%;
border-radius: inherit;
background: #d7dce5;
transition: width .2s ease;
}
.strength-fill[data-level="weak"] {
background: #dc4f5b;
}
.strength-fill[data-level="medium"] {
background: #e3a929;
}
.strength-fill[data-level="good"] {
background: #4e72e4;
}
.strength-fill[data-level="secure"] {
background: #24a763;
}
.password-requirements {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px 10px;
margin-bottom: 15px;
padding: 12px;
border: 1px solid #e9edf3;
border-radius: 9px;
background: #fafbfc;
}
.password-rule {
display: flex;
align-items: center;
gap: 5px;
color: #8992a2;
font-size: 14px;
}
.password-rule.valid {
color: #198754;
}
.password-rule.invalid {
color: #be3f4c;
}
.password-rule span {
width: 13px;
font-weight: 700;
}
.password-match {
min-height: 17px;
margin: -5px 0 8px;
font-size: 14px;
}
.password-match.valid {
color: #198754;
}
.password-match.invalid {
color: #c0392b;
}
.btn-submit:disabled {
opacity: .55;
cursor: not-allowed;
}
.forced-change-note {
margin-top: 14px;
padding: 10px;
border-radius: 8px;
background: #fff8e7;
color: #84671f;
font-size: 14px;
line-height: 1.45;
}
@media (max-width: 600px) {
.password-requirements {
grid-template-columns: 1fr;
}
}
@media (max-width: 850px) {
.calendar-header,
.page-heading {
flex-direction: column;
align-items: stretch;
}
.calendar-header-actions {
flex-direction: column;
align-items: stretch;
}
.calendar-user-form select {
width: 100%;
}
.form-row {
grid-template-columns: 1fr;
}
.calendar-card {
padding: 12px;
overflow-x: auto;
}
.form-actions {
flex-direction: column-reverse;
align-items: stretch;
}
}
@keyframes flash-in {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes flash-shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-4px); }
40% { transform: translateX(4px); }
60% { transform: translateX(-3px); }
80% { transform: translateX(3px); }
}
/* Responsive */
@media (max-width: 860px) {
.auth-wrapper {
flex-direction: column;
}
.auth-brand {
flex: 0 0 auto;
padding: 40px 20px;
}
.auth-form-side {
flex: 0 0 auto;
padding: 40px 20px;
}
}
.app-shell {
display: flex;
min-height: 100vh;
}
/* Sidebar */
.sidebar {
width: 240px;
flex-shrink: 0;
background: radial-gradient(circle at 30% 0%, #1A2040 0%, var(--navy-dark) 45%, var(--navy-darker) 100%);
display: flex;
flex-direction: column;
padding: 24px 16px;
}
.sidebar-logo {
display: flex;
align-items: center;
gap: 10px;
padding: 0 8px 24px;
color: var(--text-light);
font-weight: 700;
font-size: 18px;
letter-spacing: 1px;
}
.hex-icon-sm {
width: 28px;
height: 28px;
flex-shrink: 0;
}
.sidebar-nav {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.nav-item {
display: block;
padding: 10px 12px;
border-radius: 8px;
color: var(--text-muted);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: background 0.15s ease, color 0.15s ease;
}
.nav-item:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--text-light);
}
.nav-item.active {
background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
color: #fff;
}
.sidebar-footer {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 12px;
}
.nav-item.logout {
color: #FF8A8A;
}
.nav-item.logout:hover {
background: rgba(255, 138, 138, 0.1);
color: #FF8A8A;
}
.sidebar-section{
margin-top:20px;
padding-top:18px;
border-top:1px solid rgba(255,255,255,.08);
}
.section-title{
display:block;
padding:0 12px 10px;
font-size:14px;
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
color:#7ea5ff;
}
/* Main content */
.main-content {
flex: 1;
padding: 32px 40px;
}
.page-header h1 {
font-size: 24px;
margin: 0 0 4px;
}
.text-muted {
color: #8A8FA3;
font-size: 14px;
}
/* Stats grid */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 16px;
margin: 28px 0;
}
.stat-card {
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 6px;
}
.stat-label {
font-size: 14px;
color: var(--text-muted);
}
.stat-value {
font-size: 26px;
font-weight: 700;
color: #1B1E2E;
}
/* Content card */
.content-card {
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 24px;
}
.content-card h2 {
margin-top: 0;
font-size: 17px;
}
/* Data table */
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.data-table th {
text-align: left;
padding: 10px 12px;
color: var(--text-muted);
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid var(--border-color);
}
.data-table td {
padding: 12px;
border-bottom: 1px solid var(--border-color);
vertical-align: middle;
}
.data-table tr:last-child td {
border-bottom: none;
}
/* Statut en ligne (pastille) */
.status-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
}
.status-online {
background: #2ECC71;
box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2);
}
.status-offline {
background: #C7CAD9;
}
.text-online {
color: #2ECC71;
font-weight: 600;
}
/* Badge de rôle */
.role-badge {
display: inline-block;
padding: 4px 10px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
}
.role-badge.role-administrateur {
background: rgba(108, 124, 246, 0.12);
color: var(--accent-purple);
}
.role-badge.role-commercial {
background: rgba(78, 168, 255, 0.12);
color: var(--accent-blue);
}
/* Calendar */
.calendar-page {
width: 100%;
}
/* HEADER */
.calendar-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 24px;
}
.calendar-header h1 {
margin: 0 0 5px;
font-size: 26px;
color: #151b2f;
}
.calendar-header p {
margin: 0;
color: #788195;
font-size: 14px;
}
.calendar-header-actions {
display: flex;
align-items: flex-end;
gap: 12px;
}
/* COMMERCIAL SELECT */
.commercial-selector {
display: flex;
flex-direction: column;
gap: 6px;
}
.commercial-selector label {
font-size: 14px;
font-weight: 600;
color: #7a8396;
}
.commercial-selector select {
min-width: 210px;
height: 42px;
padding: 0 12px;
border: 1px solid #e1e5ee;
border-radius: 9px;
background: #fff;
color: #222b3d;
}
/* BUTTON */
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
height: 42px;
padding: 0 17px;
border: 0;
border-radius: 9px;
background: linear-gradient(
135deg,
#4966ed,
#3151db
);
color: white;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.btn-primary:hover {
opacity: .92;
}
.btn-secondary {
height: 42px;
padding: 0 17px;
border: 1px solid #dfe3ec;
border-radius: 9px;
background: white;
color: #50596b;
cursor: pointer;
}
.btn-danger {
height: 42px;
padding: 0 17px;
border: 0;
border-radius: 9px;
background: #fff0f1;
color: #d83546;
font-weight: 600;
cursor: pointer;
}
/* STATS */
.calendar-stats {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 15px;
margin-bottom: 18px;
}
.calendar-stat {
padding: 18px 20px;
background: #fff;
border: 1px solid #eceef4;
border-radius: 12px;
}
.stat-label {
display: block;
margin-bottom: 10px;
color: #727b90;
font-size: 14px;
}
.calendar-stat strong {
display: inline-block;
margin-right: 6px;
font-size: 25px;
color: #192138;
}
.stat-description {
color: #9097a7;
font-size: 14px;
}
/* CALENDAR CARD */
.calendar-card {
padding: 20px;
background: white;
border: 1px solid #eceef4;
border-radius: 14px;
}
/* FULL CALENDAR */
.fc {
font-family:
Inter,
Arial,
sans-serif;
}
.fc .fc-toolbar-title {
font-size: 18px;
font-weight: 600;
color: #1a2134;
}
.fc .fc-button {
border: 0 !important;
background: #f0f3f9 !important;
color: #414b61 !important;
box-shadow: none !important;
}
.fc .fc-button:hover {
background: #e7ebf4 !important;
}
.fc .fc-button-primary:not(:disabled).fc-button-active {
background: #4562e6 !important;
color: #fff !important;
}
.fc-theme-standard td,
.fc-theme-standard th {
border-color: #edf0f5;
}
.fc .fc-col-header-cell-cushion {
padding: 12px;
text-decoration: none;
color: #697287;
}
.fc .fc-daygrid-day-number {
padding: 9px;
text-decoration: none;
color: #323a4d;
}
.fc-event {
border: 0 !important;
border-radius: 5px !important;
padding: 3px 5px !important;
cursor: pointer;
}
/* MODAL */
.calendar-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.calendar-modal.open {
display: flex;
}
.calendar-modal-overlay {
position: absolute;
inset: 0;
background: rgba(6, 16, 38, .58);
backdrop-filter: blur(3px);
}
.calendar-modal-content {
position: relative;
z-index: 2;
width: min(610px, 100%);
max-height: 90vh;
overflow-y: auto;
padding: 25px;
background: #fff;
border-radius: 16px;
box-shadow:
0 25px 60px rgba(0,0,0,.18);
}
/* MODAL HEADER */
.modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 22px;
}
.modal-header h2 {
margin: 3px 0 0;
font-size: 21px;
}
.modal-small-title {
color: #4d65df;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .8px;
}
.modal-close {
width: 36px;
height: 36px;
border: 0;
border-radius: 50%;
background: #f3f5f9;
color: #657086;
font-size: 23px;
cursor: pointer;
}
/* FORM */
.form-group {
margin-bottom: 16px;
}
.form-group label {
display: block;
margin-bottom: 7px;
color: #4f586b;
font-size: 14px;
font-weight: 600;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
border: 1px solid #dfe3ec;
border-radius: 9px;
background: #fff;
color: #232b3d;
font-family: inherit;
font-size: 14px;
}
.form-group input,
.form-group select {
height: 43px;
padding: 0 12px;
}
.form-group textarea {
padding: 12px;
resize: vertical;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #5870e8;
box-shadow:
0 0 0 3px rgba(88,112,232,.1);
}
.form-row {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 14px;
}
/* MESSAGE */
.form-message {
display: none;
margin-bottom: 15px;
padding: 10px 12px;
border-radius: 7px;
font-size: 14px;
}
.form-message.error {
display: block;
background: #fff0f1;
color: #c93242;
}
.form-message.success {
display: block;
background: #eaf9ef;
color: #27844c;
}
/* ACTION */
.modal-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
margin-top: 25px;
padding-top: 18px;
border-top: 1px solid #edf0f4;
}
.modal-actions-right {
display: flex;
gap: 10px;
margin-left: auto;
}
/* ============================
ICEKOM - AUDIT LOGS
\============================ */
.audit-page,
.audit-detail-page {
width: 100%;
}
.audit-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 16px;
}
.audit-header h1 {
margin: 0 0 4px;
color: #1d2433;
font-size: 25px;
}
.audit-header p {
margin: 0;
color: #80899a;
font-size: 14px;
}
.audit-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.audit-stat {
padding: 13px 15px;
border: 1px solid #eceef4;
border-radius: 11px;
background: #fff;
}
.audit-stat span,
.audit-stat small {
display: block;
color: #858e9e;
font-size: 14px;
}
.audit-stat strong {
display: block;
margin: 4px 0 2px;
color: #283145;
font-size: 21px;
}
.audit-stat.danger {
border-color: #f0d2d6;
background: #fff9fa;
}
.audit-stat.danger strong {
color: #bc3947;
}
.audit-filters {
display: grid;
grid-template-columns:
minmax(210px, 1.4fr)
minmax(170px, 1fr)
140px
150px
120px
135px
135px
auto
auto;
gap: 8px;
align-items: end;
margin-bottom: 14px;
padding: 12px;
border: 1px solid #eceef4;
border-radius: 12px;
background: #fff;
}
.audit-filters label {
display: block;
margin-bottom: 5px;
color: #697386;
font-size: 14px;
font-weight: 650;
}
.audit-filters input,
.audit-filters select {
width: 100%;
min-height: 38px;
padding: 0 9px;
border: 1px solid #dfe3ec;
border-radius: 7px;
background: #fff;
font: inherit;
font-size: 14px;
box-sizing: border-box;
}
.btn-primary,
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 0 12px;
border-radius: 8px;
font-size: 14px;
font-weight: 650;
text-decoration: none;
cursor: pointer;
}
.btn-primary {
border: 0;
background: #4260df;
color: #fff;
}
.btn-secondary {
border: 1px solid #dde2eb;
background: #fff;
color: #4f596c;
}
.audit-card,
.audit-detail-card {
border: 1px solid #eceef4;
border-radius: 13px;
background: #fff;
}
.audit-card {
overflow: hidden;
}
.audit-table-wrap {
overflow-x: auto;
}
.audit-table {
width: 100%;
border-collapse: collapse;
}
.audit-table th {
padding: 10px 11px;
border-bottom: 1px solid #eceef4;
background: #fafbfc;
color: #7f8899;
font-size: 14px;
text-align: left;
text-transform: uppercase;
}
.audit-table td {
padding: 10px 11px;
border-bottom: 1px solid #f0f2f5;
color: #566074;
font-size: 14px;
vertical-align: middle;
}
.audit-user strong,
.audit-user small,
.audit-table td small,
.audit-description {
display: block;
}
.audit-user strong {
color: #374054;
font-size: 14px;
}
.audit-user small,
.audit-table td small {
margin-top: 2px;
color: #9199a8;
font-size: 14px;
}
.action-pill {
display: inline-flex;
padding: 4px 7px;
border-radius: 99px;
background: #eef1ff;
color: #5068d6;
font-size: 14px;
font-weight: 700;
}
.audit-description {
max-width: 230px;
overflow: hidden;
margin-top: 3px;
text-overflow: ellipsis;
white-space: nowrap;
}
.route-name {
display: block;
max-width: 260px;
overflow: hidden;
color: #3c4659;
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
}
.http-status {
display: inline-flex;
min-width: 34px;
justify-content: center;
padding: 4px 6px;
border-radius: 6px;
font-size: 14px;
font-weight: 700;
}
.http-status.success {
background: #eaf8ef;
color: #198754;
}
.http-status.redirect {
background: #fff7df;
color: #946600;
}
.http-status.error {
background: #fdecee;
color: #c0392b;
}
.audit-actions {
text-align: right;
}
.small-link {
color: #526dd9;
font-size: 14px !important;
font-weight: 650;
text-decoration: none;
}
.pagination-wrap {
padding: 12px;
text-align: center;
}
.empty-state {
padding: 26px;
color: #858e9e;
font-size: 14px;
text-align: center;
}
/* DETAIL */
.audit-detail-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 310px;
gap: 14px;
align-items: start;
}
.audit-detail-grid main,
.audit-detail-grid aside {
display: grid;
gap: 14px;
}
.audit-detail-card {
padding: 17px;
}
.audit-detail-card h2 {
margin: 0 0 13px;
color: #333c4f;
font-size: 14px;
}
.detail-info-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
.detail-info-grid > div {
padding: 9px;
border: 1px solid #eff1f5;
border-radius: 8px;
background: #fbfcfd;
}
.detail-info-grid span,
.detail-info-grid strong {
display: block;
}
.detail-info-grid span,
.side-detail span {
color: #8a93a3;
font-size: 14px;
text-transform: uppercase;
}
.detail-info-grid strong {
margin-top: 3px;
color: #455064;
font-size: 14px;
word-break: break-word;
}
.audit-json {
max-height: 520px;
overflow: auto;
margin: 0;
padding: 13px;
border-radius: 9px;
background: #151a28;
color: #e8ecf5;
font-family: Consolas, Monaco, monospace;
font-size: 14px;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
}
.side-detail {
padding: 9px 0;
border-bottom: 1px solid #f0f2f5;
}
.side-detail strong {
display: block;
margin-top: 4px;
color: #455064;
font-size: 14px;
}
.wrap-text {
word-break: break-word;
}
.security-note strong {
display: block;
margin-bottom: 6px;
color: #365244;
font-size: 14px;
}
.security-note p {
margin: 0;
color: #768477;
font-size: 14px;
line-height: 1.5;
}
@media (max-width: 1150px) {
.audit-filters {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 850px) {
.audit-detail-grid {
grid-template-columns: 1fr;
}
.audit-stats {
grid-template-columns: repeat(2, 1fr);
}
.detail-info-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.audit-header {
flex-direction: column;
align-items: stretch;
}
.audit-stats,
.audit-filters,
.detail-info-grid {
grid-template-columns: 1fr;
}
}
/* ======================================
ICEKOM CHAT
\====================================== */
.chat-app {
display: grid;
grid-template-columns: 300px minmax(0, 1fr);
width: 100%;
max-width: 1400px;
height: calc(100vh - 125px);
min-height: 560px;
max-height: 780px;
overflow: hidden;
border: 1px solid #e6eaf2;
border-radius: 14px;
background: #fff;
box-shadow: 0 8px 24px rgba(24, 38, 68, 0.05);
}
/* IMPORTANT : empêche le CSS d'annuler l'attribut HTML hidden */
.chat-empty[hidden],
.chat-conversation[hidden],
.chat-modal[hidden],
[data-new-chat-panel][hidden] {
display: none !important;
}
/* =========================================================
SIDEBAR
\========================================================= */
.chat-sidebar {
display: flex;
min-width: 0;
flex-direction: column;
border-right: 1px solid #edf0f4;
background: #fbfcfe;
}
.chat-sidebar-head {
display: flex;
min-height: 64px;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid #edf0f4;
}
.chat-sidebar-head h1 {
margin: 0;
color: #222b3e;
font-size: 17px;
}
.chat-sidebar-head p {
margin: 3px 0 0;
color: #8992a2;
font-size: 14px;
}
.chat-icon-button {
display: inline-flex;
width: 34px;
height: 34px;
align-items: center;
justify-content: center;
border: 0;
border-radius: 9px;
background: #4260df;
color: #fff;
font-size: 20px;
cursor: pointer;
}
.chat-search {
padding: 10px;
border-bottom: 1px solid #edf0f4;
}
.chat-search input {
width: 100%;
min-height: 38px;
padding: 0 10px;
border: 1px solid #dfe3ec;
border-radius: 8px;
background: #fff;
font: inherit;
font-size: 14px;
box-sizing: border-box;
}
.chat-room-list {
flex: 1;
min-height: 0;
overflow-y: auto;
}
.chat-room-item {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 10px 12px;
border: 0;
border-bottom: 1px solid #f0f2f5;
background: transparent;
text-align: left;
cursor: pointer;
}
.chat-room-item:hover,
.chat-room-item.active {
background: #eef2ff;
}
.chat-avatar {
display: inline-flex;
flex: 0 0 36px;
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #e9edff;
color: #4a61d5;
font-size: 14px;
font-weight: 700;
}
.chat-room-content {
min-width: 0;
flex: 1;
}
.chat-room-content strong,
.chat-room-content small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chat-room-content strong {
color: #364055;
font-size: 14px;
}
.chat-room-content small {
margin-top: 3px;
color: #9098a7;
font-size: 14px;
}
.chat-unread-badge {
display: inline-flex;
min-width: 19px;
height: 19px;
align-items: center;
justify-content: center;
padding: 0 5px;
border-radius: 999px;
background: #4260df;
color: #fff;
font-size: 14px;
font-weight: 700;
}
/* =========================================================
ZONE PRINCIPALE
\========================================================= */
.chat-main {
position: relative;
min-width: 0;
min-height: 0;
background: #fff;
}
.chat-empty {
display: flex;
height: 100%;
min-height: 0;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30px;
color: #8790a0;
text-align: center;
box-sizing: border-box;
}
.chat-empty-icon {
margin-bottom: 8px;
font-size: 34px;
}
.chat-empty strong {
color: #3c4557;
font-size: 14px;
}
.chat-empty p {
max-width: 330px;
margin: 6px 0 0;
font-size: 14px;
}
/* =========================================================
CONVERSATION
\========================================================= */
.chat-conversation {
display: grid;
height: 100%;
min-height: 0;
grid-template-rows: 64px minmax(0, 1fr) auto auto;
background: #fff;
}
.chat-conversation-head {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 64px;
padding: 0 18px;
border-bottom: 1px solid #edf0f4;
background: #fff;
}
.chat-conversation-head strong {
display: block;
color: #30394c;
font-size: 14px;
}
.chat-conversation-head small {
display: block;
margin-top: 3px;
color: #8992a2;
font-size: 14px;
}
/* =========================================================
MESSAGES
\========================================================= */
.chat-messages {
min-height: 0;
overflow-y: auto;
padding: 16px 18px;
background: #f8fafe;
scroll-behavior: smooth;
}
.chat-message {
display: flex;
width: 100%;
margin-bottom: 10px;
}
.chat-message.mine {
justify-content: flex-end;
}
.chat-message-body {
display: flex;
width: auto;
max-width: 60%;
flex-direction: column;
align-items: flex-start;
}
.chat-message.mine .chat-message-body {
align-items: flex-end;
}
.chat-message-author {
display: block;
margin: 0 5px 3px;
color: #858e9f;
font-size: 14px;
line-height: 1.2;
}
.chat-message.mine .chat-message-author {
text-align: right;
}
.chat-bubble {
display: inline-block;
width: auto;
min-width: 0;
max-width: 100%;
padding: 7px 10px;
border: 1px solid #e1e6ee;
border-radius: 11px 11px 11px 4px;
background: #fff;
color: #3d4658;
font-size: 14px;
line-height: 1.3;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.chat-message.mine .chat-bubble {
border-color: #4260df;
border-radius: 11px 11px 4px 11px;
background: #4260df;
color: #fff;
}
.chat-message-meta {
display: flex;
align-items: center;
gap: 7px;
margin-top: 3px;
padding: 0 4px;
color: #969dac;
font-size: 14px;
line-height: 1.2;
}
.chat-message.mine .chat-message-meta {
justify-content: flex-end;
}
.chat-message-actions button {
padding: 0;
border: 0;
background: transparent;
color: #7081c4;
font: inherit;
cursor: pointer;
}
.chat-message.mine .chat-message-actions button {
color: #8993ad;
}
.chat-reply-box {
margin-bottom: 6px;
padding: 5px 7px;
border-left: 3px solid #8798e8;
border-radius: 5px;
background: #eef1ff;
color: #5e6780;
font-size: 14px;
line-height: 1.35;
}
.chat-message.mine .chat-reply-box {
border-left-color: #cfd6ff;
background: rgba(255,255,255,.15);
color: #eef1ff;
}
/* =========================================================
RÉPONSE / COMPOSER
\========================================================= */
.chat-reply-preview {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 7px 14px;
border-top: 1px solid #edf0f4;
background: #f6f8fc;
}
.chat-reply-preview small,
.chat-reply-preview strong {
display: block;
}
.chat-reply-preview small {
color: #8b94a4;
font-size: 14px;
}
.chat-reply-preview strong {
max-width: 600px;
overflow: hidden;
color: #4a5467;
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
}
.chat-reply-preview button {
border: 0;
background: transparent;
color: #717b8d;
font-size: 18px;
cursor: pointer;
}
.chat-compose {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 9px;
padding: 10px 12px;
border-top: 1px solid #edf0f4;
background: #fff;
}
.chat-compose textarea {
width: 100%;
min-height: 40px;
max-height: 110px;
padding: 9px 11px;
border: 1px solid #dfe3ec;
border-radius: 9px;
resize: none;
font: inherit;
font-size: 14px;
line-height: 1.35;
box-sizing: border-box;
}
.chat-compose textarea:focus {
border-color: #9aaaf2;
outline: none;
box-shadow: 0 0 0 3px rgba(66, 96, 223, .08);
}
.chat-send-button {
min-height: 40px;
padding: 0 15px;
border: 0;
border-radius: 9px;
background: #4260df;
color: #fff;
font-size: 14px;
font-weight: 650;
cursor: pointer;
}
.chat-send-button.full {
width: 100%;
}
/* =========================================================
MODAL NOUVELLE CONVERSATION
\========================================================= */
.chat-modal {
position: fixed;
inset: 0;
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.chat-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(20, 27, 42, .45);
}
.chat-modal-dialog {
position: relative;
z-index: 1;
width: min(520px, 100%);
max-height: 80vh;
overflow-y: auto;
padding: 17px;
border-radius: 14px;
background: #fff;
box-shadow: 0 20px 60px rgba(15, 25, 45, .18);
}
.chat-modal-head {
display: flex;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.chat-modal-head h2 {
margin: 0;
color: #30394b;
font-size: 15px;
}
.chat-modal-head p {
margin: 3px 0 0;
color: #8a93a3;
font-size: 14px;
}
.chat-modal-head > button {
width: 32px;
height: 32px;
border: 0;
border-radius: 7px;
background: #f2f4f7;
color: #646e80;
font-size: 18px;
cursor: pointer;
}
.chat-new-tabs {
display: flex;
gap: 5px;
margin-bottom: 12px;
padding: 4px;
border-radius: 8px;
background: #f2f4f7;
}
.chat-new-tabs button {
flex: 1;
padding: 8px;
border: 0;
border-radius: 6px;
background: transparent;
color: #7c8596;
font-size: 14px;
cursor: pointer;
}
.chat-new-tabs button.active {
background: #fff;
color: #3f4a5d;
}
.chat-user-list {
display: grid;
gap: 5px;
}
.chat-user-choice {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 9px;
border: 1px solid #eceef3;
border-radius: 8px;
background: #fff;
text-align: left;
cursor: pointer;
}
.chat-user-choice:hover {
background: #f7f9fd;
}
.chat-user-choice strong,
.chat-user-choice small {
display: block;
}
.chat-user-choice strong {
color: #3f495b;
font-size: 14px;
}
.chat-user-choice small {
margin-top: 2px;
color: #8d95a5;
font-size: 14px;
}
.chat-form-group {
margin-bottom: 12px;
}
.chat-form-group > label {
display: block;
margin-bottom: 5px;
color: #626c7f;
font-size: 14px;
font-weight: 600;
}
.chat-form-group > input {
width: 100%;
min-height: 40px;
padding: 0 9px;
border: 1px solid #dfe3ec;
border-radius: 8px;
font: inherit;
box-sizing: border-box;
}
.chat-member-select {
display: grid;
gap: 5px;
max-height: 260px;
overflow-y: auto;
}
.chat-member-select label {
display: flex;
align-items: center;
gap: 7px;
padding: 8px;
border: 1px solid #eef0f4;
border-radius: 7px;
font-size: 14px;
}
/* FORCE LES BULLES CHAT À ÉPOUSER LE TEXTE */
.chat-message {
align-items: flex-start !important;
}
.chat-message.mine {
align-items: flex-end !important;
}
.chat-message-body {
flex: 0 0 auto !important;
width: max-content !important;
max-width: 60% !important;
min-width: 0 !important;
}
.chat-message.mine .chat-message-body {
margin-left: auto !important;
}
.chat-bubble {
display: block !important;
width: max-content !important;
min-width: 0 !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
padding: 6px 9px !important;
line-height: 1.3 !important;
text-align: left !important;
}
.chat-message.mine .chat-bubble {
width: max-content !important;
}
/* =========================================================
ICEKOM - FIX BULLES CHAT
À AJOUTER TOUT À LA FIN DU CSS CHARGÉ SUR LE CHAT
\========================================================= */
.chat-message-body {
flex: 0 1 auto !important;
width: auto !important;
max-width: min(70%, 560px) !important;
}
.chat-message.mine .chat-message-body {
margin-left: auto !important;
}
.chat-bubble {
display: inline-block !important;
width: auto !important;
min-width: 0 !important;
max-width: 100% !important;
min-height: 0 !important;
height: auto !important;
padding: 6px 10px !important;
white-space: normal !important;
line-height: 1.35 !important;
text-align: left !important;
}
.chat-message-text {
display: inline !important;
white-space: pre-wrap !important;
overflow-wrap: anywhere !important;
}
.chat-reply-box {
white-space: normal !important;
}
.chat-reply-box strong,
.chat-reply-box span {
display: block;
}
* Plus aucun bouton d'action sous les messages */
.chat-message-actions {
display: none !important;
}
/* Un léger retour visuel indique qu'un clic droit est possible */
.chat-message .chat-bubble {
transition:
transform .12s ease,
box-shadow .12s ease;
}
.chat-message:hover .chat-bubble {
box-shadow: 0 4px 13px rgba(25, 37, 65, .07);
}
/* MENU CLIC DROIT */
.chat-message-context-menu {
position: fixed;
z-index: 12000;
width: 160px;
padding: 5px;
border: 1px solid #e4e8f0;
border-radius: 10px;
background: rgba(255,255,255,.98);
box-shadow:
0 14px 40px
rgba(25, 35, 55, .16);
backdrop-filter: blur(8px);
animation:
chat-context-in
.12s ease-out;
}
.chat-message-context-menu[hidden] {
display: none !important;
}
.chat-message-context-menu button {
display: flex;
width: 100%;
min-height: 34px;
align-items: center;
gap: 9px;
padding: 0 10px;
border: 0;
border-radius: 7px;
background: transparent;
color: #3f495c;
font: inherit;
font-size: 14px;
font-weight: 600;
text-align: left;
cursor: pointer;
}
.chat-message-context-menu button:hover {
background: #f2f5fb;
}
.chat-message-context-menu button.danger {
color: #c43c49;
}
.chat-message-context-menu button.danger:hover {
background: #fff0f1;
}
.chat-message-context-menu button[hidden] {
display: none !important;
}
.chat-message-context-menu button:disabled {
opacity: .5;
cursor: default;
}
.context-icon {
display: inline-flex;
width: 18px;
justify-content: center;
font-size: 14px;
}
/* =========================================================
APERÇU "RÉPONSE À"
\========================================================= */
/*
* Important :
* le bandeau n'existe visuellement que lorsqu'une réponse
* a réellement été sélectionnée.
*/
.chat-reply-preview[hidden] {
display: none !important;
}
.chat-reply-preview {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 13px;
border-top: 1px solid #e8edf5;
border-left: 3px solid #5870e8;
background: #f7f9ff;
animation:
chat-reply-in
.16s ease-out;
}
.chat-reply-preview::before {
content: "↩";
display: inline-flex;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
flex: 0 0 25px;
border-radius: 7px;
background: #e9edff;
color: #5268d8;
font-size: 14px;
}
.chat-reply-preview > div {
min-width: 0;
flex: 1;
}
.chat-reply-preview small {
display: block;
margin-bottom: 2px;
color: #7d8799;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .03em;
}
.chat-reply-preview strong {
display: block;
overflow: hidden;
color: #3f4a5d;
font-size: 14px;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.chat-reply-preview > button {
display: inline-flex;
width: 28px;
height: 28px;
align-items: center;
justify-content: center;
flex: 0 0 28px;
padding: 0;
border: 0;
border-radius: 7px;
background: transparent;
color: #778196;
font-size: 17px;
cursor: pointer;
}
.chat-reply-preview > button:hover {
background: #e9edf6;
color: #485266;
}
/* =========================================================
RÉPONSE CITÉE DANS UNE BULLE
\========================================================= */
.chat-reply-box {
margin: 0 0 6px;
padding: 6px 8px;
border: 0;
border-left: 3px solid #8798e8;
border-radius: 6px;
background: #f1f4ff;
white-space: normal !important;
}
.chat-message.mine .chat-reply-box {
border-left-color: #cbd4ff;
background: rgba(255,255,255,.14);
}
.chat-reply-box strong {
display: block;
margin-bottom: 2px;
color: #5367c7;
font-size: 14px;
}
.chat-message.mine .chat-reply-box strong {
color: #fff;
}
.chat-reply-box span {
display: block;
overflow: hidden;
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ANIMATIONS */
@keyframes chat-context-in {
from {
opacity: 0;
transform:
translateY(-3px)
scale(.97);
}
to {
opacity: 1;
transform:
translateY(0)
scale(1);
}
}
@keyframes chat-reply-in {
from {
opacity: 0;
transform:
translateY(4px);
}
to {
opacity: 1;
transform:
translateY(0);
}
}
/* ICEKOM — DOSSIERS / PRODUCTION */
.projects-page,
.project-form-page,
.project-detail-page {
width: 100%;
max-width: 1600px;
margin: 0 auto;
}
.projects-header,
.project-form-header,
.project-detail-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
margin-bottom: 16px;
}
.page-kicker,
.panel-kicker {
display: block;
margin-bottom: 4px;
color: #5269d8;
font-size: 14px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
}
.projects-header h1,
.project-form-header h1,
.project-detail-header h1 {
margin: 0;
color: #202a3d;
font-size: 24px;
}
.projects-header p,
.project-form-header p,
.project-detail-header p {
margin: 5px 0 0;
color: #858fa1;
font-size: 14px;
}
.projects-header-actions,
.project-detail-actions {
display: flex;
align-items: center;
gap: 8px;
}
.btn-primary,
.btn-secondary,
.btn-filter {
display: inline-flex;
min-height: 38px;
align-items: center;
justify-content: center;
padding: 0 13px;
border-radius: 9px;
font-size: 14px;
font-weight: 650;
text-decoration: none;
cursor: pointer;
}
.btn-primary,
.btn-filter {
border: 0;
background: #4965e4;
color: #fff;
}
.btn-secondary {
border: 1px solid #dfe4ec;
background: #fff;
color: #566174;
}
.btn-primary.full {
width: 100%;
}
.view-toggle {
display: flex;
gap: 3px;
padding: 4px;
border-radius: 10px;
background: #eef1f6;
}
.view-toggle-button {
padding: 7px 10px;
border-radius: 7px;
color: #727c8e;
font-size: 14px;
font-weight: 650;
text-decoration: none;
}
.view-toggle-button.active {
background: #fff;
color: #4960ca;
box-shadow: 0 2px 7px rgba(25,35,55,.07);
}
.project-stats {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 9px;
margin-bottom: 13px;
}
.project-stat {
padding: 12px 13px;
border: 1px solid #e7ebf2;
border-radius: 12px;
background: #fff;
}
.project-stat span,
.project-stat strong,
.project-stat small {
display: block;
}
.project-stat span {
color: #838d9e;
font-size: 14px;
}
.project-stat strong {
margin: 4px 0 2px;
color: #303a4e;
font-size: 19px;
}
.project-stat small {
color: #9aa2b0;
font-size: 14px;
}
.project-stat.blue strong { color: #4f66d8; }
.project-stat.green strong { color: #208657; }
.project-stat.orange strong { color: #bc751b; }
.project-stat.danger {
background: #fffafa;
border-color: #f0d6d9;
}
.project-stat.danger strong { color: #ca3f4d; }
.project-filters {
display: grid;
grid-template-columns:
minmax(220px, 1.4fr)
150px
130px
150px
150px
150px
auto
auto;
gap: 7px;
align-items: end;
margin-bottom: 13px;
padding: 11px;
border: 1px solid #e7ebf2;
border-radius: 12px;
background: #fff;
}
.project-filters label {
display: block;
margin-bottom: 4px;
color: #7b8596;
font-size: 14px;
font-weight: 650;
}
.project-filters input,
.project-filters select {
width: 100%;
min-height: 36px;
padding: 0 9px;
border: 1px solid #dfe4ec;
border-radius: 8px;
background: #fff;
font: inherit;
font-size: 14px;
box-sizing: border-box;
}
.filter-reset {
display: inline-flex;
min-height: 36px;
align-items: center;
color: #747f91;
font-size: 14px;
text-decoration: none;
}
.production-board {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(245px, 270px);
gap: 9px;
overflow-x: auto;
padding-bottom: 10px;
}
.production-column {
min-height: 540px;
overflow: hidden;
border: 1px solid #e8ecf3;
border-radius: 12px;
background: #f7f9fc;
}
.production-column-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 11px;
border-bottom: 1px solid #e8ecf3;
background: #fff;
}
.production-column-head > div {
display: flex;
min-width: 0;
align-items: center;
gap: 6px;
}
.production-column-head strong {
overflow: hidden;
color: #445064;
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
}
.production-column-head > span {
display: inline-flex;
min-width: 21px;
height: 21px;
align-items: center;
justify-content: center;
border-radius: 7px;
background: #f0f2f6;
color: #7b8596;
font-size: 14px;
font-weight: 700;
}
.status-dot {
width: 7px;
height: 7px;
flex: 0 0 7px;
border-radius: 50%;
background: var(--status-color);
}
.production-column-body {
display: grid;
align-content: start;
gap: 7px;
padding: 8px;
}
.empty-column {
padding: 30px 10px;
color: #9aa3b2;
font-size: 14px;
text-align: center;
}
.project-card {
display: block;
padding: 10px;
border: 1px solid #e5e9f0;
border-radius: 10px;
background: #fff;
color: inherit;
text-decoration: none;
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.project-card:hover {
transform: translateY(-1px);
border-color: #d4dbe7;
box-shadow: 0 7px 20px rgba(30,40,65,.07);
}
.project-card.overdue { border-color: #efcdd1; }
.project-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 7px;
}
.project-reference {
color: #929baa;
font-size: 14px;
font-weight: 650;
}
.priority-pill {
padding: 3px 5px;
border-radius: 99px;
background: #f0f2f6;
color: #747f90;
font-size: 14px;
font-weight: 650;
}
.priority-pill.priority-high {
background: #fff4df;
color: #ad6d14;
}
.priority-pill.priority-urgent {
background: #ffedef;
color: #c33d4a;
}
.project-card h3 {
margin: 7px 0 3px;
color: #303b50;
font-size: 14px;
line-height: 1.35;
}
.project-client {
margin: 0;
color: #8993a4;
font-size: 14px;
}
.project-progress { margin-top: 9px; }
.progress-row {
display: flex;
justify-content: space-between;
gap: 8px;
margin-bottom: 4px;
color: #8c95a5;
font-size: 14px;
}
.progress-row strong { color: #5b6578; }
.progress-track {
height: 5px;
overflow: hidden;
border-radius: 99px;
background: #eceff4;
}
.progress-track span {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #526de7, #55a4ee);
}
.project-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 7px;
margin-top: 9px;
color: #8b95a5;
font-size: 14px;
}
.project-card-footer strong {
color: #47546b;
font-size: 14px;
}
.project-alert,
.project-waiting {
margin-top: 7px;
padding: 5px 6px;
border-radius: 6px;
background: #fff0f1;
color: #bd3d49;
font-size: 14px;
font-weight: 650;
}
.project-waiting {
background: #fff6e7;
color: #a76b18;
}
.projects-table-card {
overflow: hidden;
border: 1px solid #e7ebf2;
border-radius: 12px;
background: #fff;
}
.projects-table {
width: 100%;
border-collapse: collapse;
}
.projects-table th {
padding: 9px 10px;
border-bottom: 1px solid #e8ecf3;
background: #fafbfc;
color: #7e899a;
font-size: 14px;
text-align: left;
text-transform: uppercase;
}
.projects-table td {
padding: 9px 10px;
border-bottom: 1px solid #f0f2f6;
color: #596477;
font-size: 14px;
}
.projects-table td strong,
.projects-table td small {
display: block;
}
.projects-table td small {
margin-top: 2px;
color: #9aa2af;
font-size: 14px;
}
.status-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 7px;
border-radius: 99px;
background: color-mix(in srgb, var(--status-color) 12%, white);
color: var(--status-color);
font-size: 14px;
font-weight: 700;
}
.status-chip::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--status-color);
}
.table-progress {
display: flex;
min-width: 120px;
align-items: center;
gap: 6px;
}
.table-progress > span {
width: 80px;
height: 5px;
overflow: hidden;
border-radius: 99px;
background: #edf0f4;
}
.table-progress i {
display: block;
height: 100%;
background: #536ce3;
}
.project-form-page { max-width: 1050px; }
.project-form-card,
.project-panel {
border: 1px solid #e6eaf2;
border-radius: 14px;
background: #fff;
}
.project-form-card { padding: 18px; }
.form-section {
padding: 0 0 18px;
margin-bottom: 18px;
border-bottom: 1px solid #edf0f5;
}
.form-section-title { margin-bottom: 12px; }
.form-section-title strong,
.form-section-title span {
display: block;
}
.form-section-title strong {
color: #303b50;
font-size: 14px;
}
.form-section-title span {
margin-top: 2px;
color: #929baa;
font-size: 14px;
}
.form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 11px;
}
.form-grid.three {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.form-group { min-width: 0; }
.form-group.span-2 { grid-column: span 2; }
.form-group label,
.project-form-card .input > label {
display: block;
margin-bottom: 5px;
color: #596477;
font-size: 14px;
font-weight: 650;
}
.form-group input,
.form-group select,
.form-group textarea,
.project-form-card input,
.project-form-card select,
.project-form-card textarea {
width: 100%;
min-height: 40px;
padding: 8px 10px;
border: 1px solid #dfe4ec;
border-radius: 8px;
background: #fff;
font: inherit;
font-size: 14px;
box-sizing: border-box;
}
.project-form-card textarea { resize: vertical; }
.project-form-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 16px;
}
.project-title-meta {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 6px;
}
.project-reference-large {
color: #8490a2;
font-size: 14px;
font-weight: 700;
}
.danger-chip {
padding: 5px 7px;
border-radius: 99px;
background: #fff0f1;
color: #c43e4b;
font-size: 14px;
font-weight: 700;
}
.project-command-strip {
display: grid;
grid-template-columns: minmax(300px, 1fr) 220px 180px;
gap: 11px;
margin-bottom: 13px;
padding: 13px;
border: 1px solid #e6eaf2;
border-radius: 13px;
background: #fff;
}
.command-progress-head {
display: flex;
justify-content: space-between;
gap: 8px;
margin-bottom: 6px;
color: #778195;
font-size: 14px;
}
.command-progress-head strong { color: #4a566d; }
.command-progress input[type="range"] { width: 100%; }
.command-status label,
.command-deadline span {
display: block;
margin-bottom: 5px;
color: #858fa0;
font-size: 14px;
}
.command-status select {
width: 100%;
min-height: 34px;
padding: 0 8px;
border: 1px solid #dfe4ec;
border-radius: 8px;
background: #fff;
font-size: 14px;
}
.command-deadline strong {
color: #414c62;
font-size: 14px;
}
.deadline-overdue,
.danger-text {
color: #c43f4c !important;
}
.project-detail-grid {
display: grid;
grid-template-columns: minmax(0, 1.55fr) 350px;
gap: 13px;
align-items: start;
}
.project-detail-grid main,
.project-detail-grid aside {
display: grid;
gap: 13px;
}
.project-panel { padding: 15px; }
.panel-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
}
.panel-head h2 {
margin: 0;
color: #303a4e;
font-size: 14px;
}
.project-info-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 7px;
}
.project-info-grid > div {
padding: 9px;
border: 1px solid #edf0f5;
border-radius: 9px;
background: #fafbfc;
}
.project-info-grid span,
.project-info-grid strong {
display: block;
}
.project-info-grid span {
color: #929baa;
font-size: 14px;
text-transform: uppercase;
}
.project-info-grid strong {
margin-top: 3px;
color: #475268;
font-size: 14px;
}
.next-action-card,
.blocked-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 11px;
padding: 10px;
border-radius: 9px;
background: #f4f7ff;
}
.next-action-card span,
.next-action-card strong {
display: block;
}
.next-action-card span {
color: #7e899b;
font-size: 14px;
}
.next-action-card strong {
margin-top: 2px;
color: #445168;
font-size: 14px;
}
.next-action-card time {
flex-shrink: 0;
color: #526ad5;
font-size: 14px;
font-weight: 650;
}
.blocked-card {
display: block;
background: #fff3f4;
color: #9b3740;
}
.blocked-card strong { font-size: 14px; }
.blocked-card p {
margin: 5px 0 0;
font-size: 14px;
line-height: 1.5;
}
.project-description { margin-top: 12px; }
.project-description h3 {
margin: 0 0 5px;
color: #4a556b;
font-size: 14px;
}
.project-description p {
margin: 0;
color: #737e90;
font-size: 14px;
line-height: 1.55;
}
.task-summary {
color: #7d8798;
font-size: 14px;
}
.task-progress {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.task-progress > span {
flex: 1;
height: 5px;
overflow: hidden;
border-radius: 99px;
background: #edf0f4;
}
.task-progress i {
display: block;
height: 100%;
background: #42a071;
}
.task-progress strong {
color: #6e788b;
font-size: 14px;
}
.quick-task-form {
display: grid;
grid-template-columns: minmax(0, 1fr) 100px 130px auto;
gap: 6px;
margin-bottom: 10px;
}
.quick-task-form input,
.quick-task-form select {
width: 100%;
min-height: 35px;
padding: 0 8px;
border: 1px solid #dfe4ec;
border-radius: 8px;
font: inherit;
font-size: 14px;
box-sizing: border-box;
}
.project-task-list {
display: grid;
gap: 5px;
}
.task-empty {
padding: 20px;
color: #929baa;
font-size: 14px;
text-align: center;
}
.project-task {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 8px;
border: 1px solid #edf0f4;
border-radius: 8px;
cursor: pointer;
}
.project-task.done {
opacity: .6;
background: #f8faf9;
}
.project-task.done strong { text-decoration: line-through; }
.project-task-content { min-width: 0; }
.project-task-content strong,
.project-task-content small {
display: block;
}
.project-task-content strong {
color: #465166;
font-size: 14px;
}
.project-task-content small {
margin-top: 2px;
color: #939cab;
font-size: 14px;
}
.health-list {
display: grid;
gap: 5px;
}
.health-list > div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 7px 0;
border-bottom: 1px solid #f0f2f6;
}
.health-list span {
color: #8993a4;
font-size: 14px;
}
.health-list strong {
color: #4b566b;
font-size: 14px;
}
#projectNoteForm textarea {
width: 100%;
margin-bottom: 7px;
padding: 9px;
border: 1px solid #dfe4ec;
border-radius: 8px;
font: inherit;
font-size: 14px;
resize: vertical;
box-sizing: border-box;
}
.project-timeline {
display: grid;
gap: 0;
}
.timeline-item {
position: relative;
display: grid;
grid-template-columns: 14px minmax(0, 1fr);
gap: 7px;
padding-bottom: 12px;
}
.timeline-item::before {
content: "";
position: absolute;
top: 11px;
bottom: -1px;
left: 5px;
width: 1px;
background: #e6eaf0;
}
.timeline-item:last-child::before { display: none; }
.timeline-dot {
position: relative;
z-index: 1;
width: 9px;
height: 9px;
margin-top: 2px;
border: 2px solid #fff;
border-radius: 50%;
background: #6077e5;
box-shadow: 0 0 0 1px #cfd7f4;
}
.timeline-item strong {
display: block;
color: #465166;
font-size: 14px;
}
.timeline-item p {
margin: 3px 0;
color: #788294;
font-size: 14px;
line-height: 1.45;
}
.timeline-item small {
color: #9ba3b1;
font-size: 14px;
}
.timeline-empty {
padding: 15px;
color: #929baa;
font-size: 14px;
text-align: center;
}
@media (max-width: 1250px) {
.project-stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.project-filters {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 1000px) {
.project-detail-grid,
.project-command-strip,
.form-grid.three {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.projects-header,
.project-form-header,
.project-detail-header {
flex-direction: column;
}
.projects-header-actions,
.project-detail-actions {
width: 100%;
}
.project-stats,
.project-filters,
.form-grid,
.project-info-grid,
.quick-task-form {
grid-template-columns: 1fr;
}
.form-group.span-2 {
grid-column: auto;
}
}
/* RESPONSIVE */
@media (max-width: 1300px) {
.dashboard-kpis {
grid-template-columns:
repeat(3, minmax(0, 1fr));
}
.secondary-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.communication-card {
grid-column: span 2;
}
}
@media (max-width: 1050px) {
.dashboard-hero {
align-items: flex-start;
flex-direction: column;
}
.dashboard-hero-actions {
width: 100%;
justify-content: space-between;
}
.primary-grid,
.analytics-grid {
grid-template-columns: 1fr;
}
.admin-alert-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.dashboard-hero-actions {
align-items: stretch;
flex-direction: column;
}
.dashboard-view-switch,
.dashboard-quick-actions {
width: 100%;
}
.view-switch-button,
.dashboard-action {
flex: 1;
}
.dashboard-kpis,
.secondary-grid,
.admin-alert-grid {
grid-template-columns: 1fr;
}
.communication-card {
grid-column: auto;
}
.communication-summary {
grid-template-columns: 1fr;
}
.team-search-wrap input {
width: 100%;
}
.team-performance-card
.dashboard-card-head {
align-items: stretch;
flex-direction: column;
}
}
/* ======================================
ICEKOM NOTIFICATIONS
\====================================== */
.notification-center {
position: relative;
}
.notification-bell {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid #e4e7ed;
border-radius: 10px;
background: #fff;
color: #596376;
cursor: pointer;
}
.notification-bell:hover {
background: #f7f9fc;
}
.notification-count {
position: absolute;
top: -5px;
right: -5px;
min-width: 19px;
height: 19px;
padding: 0 5px;
border: 2px solid #fff;
border-radius: 999px;
background: #d83d4b;
color: #fff;
font-size: 14px;
font-weight: 700;
line-height: 15px;
text-align: center;
}
.notification-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 8000;
width: min(380px, calc(100vw - 30px));
overflow: hidden;
border: 1px solid #e5e8ef;
border-radius: 12px;
background: #fff;
box-shadow: 0 14px 45px rgba(25, 35, 55, .14);
}
.notification-dropdown[hidden] {
display: none;
}
.notification-dropdown-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 13px;
border-bottom: 1px solid #edf0f4;
}
.notification-dropdown-head strong,
.notification-dropdown-head small {
display: block;
}
.notification-dropdown-head strong {
color: #313a4d;
font-size: 14px;
}
.notification-dropdown-head small {
margin-top: 2px;
color: #8b94a3;
font-size: 14px;
}
.notification-dropdown-head button {
border: 0;
background: transparent;
color: #526bd7;
font-size: 14px;
font-weight: 650;
cursor: pointer;
}
.notification-list {
max-height: 440px;
overflow-y: auto;
}
.notification-item {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 9px;
width: 100%;
padding: 10px 12px;
border: 0;
border-bottom: 1px solid #f0f2f5;
background: #fff;
color: inherit;
text-align: left;
cursor: pointer;
}
.notification-item.unread {
background: #f5f7ff;
}
.notification-item:hover {
background: #f7f9fc;
}
.notification-icon {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: #edf1ff;
color: #5268d8;
font-size: 15px;
}
.notification-content {
min-width: 0;
}
.notification-content strong,
.notification-content span,
.notification-content small {
display: block;
}
.notification-content strong {
color: #394356;
font-size: 14px;
}
.notification-content span {
margin-top: 2px;
color: #747e90;
font-size: 14px;
line-height: 1.4;
}
.notification-content small {
margin-top: 4px;
color: #9aa1af;
font-size: 14px;
}
.notification-empty {
padding: 25px;
color: #8c95a5;
font-size: 14px;
text-align: center;
}
/* =========================================================
ICEKOM - CORRECTIONS LAYOUT + TOPBAR + CLOCHE
À mettre dans webroot/css/notifications.css
\========================================================= */
/* ----- Structure générale ----- */
.app-shell {
display: flex;
min-height: 100vh;
width: 100%;
background: #F6F8FC;
}
.sidebar {
width: 220px;
min-width: 220px;
flex-shrink: 0;
}
.app-content-column {
display: flex;
flex: 1;
min-width: 0;
min-height: 100vh;
flex-direction: column;
}
/* ----- Barre du haut ----- */
.app-topbar {
position: sticky;
top: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: flex-end;
min-height: 68px;
padding: 14px 24px;
border-bottom: 1px solid #E7ECF5;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(10px);
box-sizing: border-box;
}
.app-topbar-spacer {
flex: 1;
min-width: 0;
}
.app-topbar-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
margin-left: auto;
}
/* ----- Bouton chat + cloche ----- */
.topbar-chat-link,
.notification-bell {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
padding: 0;
border: 1px solid #DCE3EF;
border-radius: 12px;
background: #FFFFFF;
color: #4C5C7A;
font-size: 18px;
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(26, 41, 72, 0.06);
box-sizing: border-box;
}
.topbar-chat-link:hover,
.notification-bell:hover {
transform: translateY(-1px);
border-color: #C8D4EA;
background: #F8FAFF;
}
.notification-center {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.notification-bell {
appearance: none;
outline: none;
}
.notification-count {
position: absolute;
top: -4px;
right: -4px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border: 2px solid #FFFFFF;
border-radius: 999px;
background: #E04355;
color: #FFFFFF;
font-size: 14px;
font-weight: 700;
line-height: 1;
box-sizing: border-box;
}
/* ----- Dropdown notifications ----- */
.notification-dropdown {
position: absolute;
top: calc(100% + 10px);
right: 0;
z-index: 200;
width: min(390px, calc(100vw - 40px));
overflow: hidden;
border: 1px solid #E4EAF3;
border-radius: 16px;
background: #FFFFFF;
box-shadow: 0 18px 50px rgba(18, 32, 61, 0.16);
}
.notification-dropdown[hidden] {
display: none;
}
.notification-dropdown-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border-bottom: 1px solid #EEF2F8;
}
.notification-dropdown-head strong {
display: block;
color: #162238;
font-size: 15px;
font-weight: 700;
line-height: 1.2;
}
.notification-dropdown-head small {
display: block;
margin-top: 3px;
color: #7C879C;
font-size: 14px;
line-height: 1.3;
}
.notification-dropdown-head button {
padding: 0;
border: 0;
background: transparent;
color: #4E67E8;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.notification-list {
max-height: 430px;
overflow-y: auto;
}
.notification-item {
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
gap: 10px;
width: 100%;
padding: 12px 14px;
border: 0;
border-bottom: 1px solid #F1F4F9;
background: #FFFFFF;
text-align: left;
cursor: pointer;
box-sizing: border-box;
}
.notification-item.unread {
background: #F5F8FF;
}
.notification-item:hover {
background: #F8FAFD;
}
.notification-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 12px;
background: #EEF3FF;
color: #506CE8;
font-size: 18px;
}
.notification-content {
min-width: 0;
}
.notification-content strong {
display: block;
color: #1F2D45;
font-size: 14px;
font-weight: 700;
line-height: 1.3;
}
.notification-content span {
display: block;
margin-top: 4px;
color: #69768D;
font-size: 14px;
line-height: 1.45;
}
.notification-content small {
display: block;
margin-top: 5px;
color: #98A1B2;
font-size: 14px;
}
.notification-empty {
padding: 30px 20px;
color: #8B95A8;
font-size: 14px;
text-align: center;
}
/* ----- Contenu principal ----- */
.main-content {
flex: 1;
min-width: 0;
width: 100%;
padding: 28px;
box-sizing: border-box;
}
/* Empêche les pages trop étroites sur grands écrans */
.main-content > * {
max-width: 100%;
}
/* ----- Réglages spécifiques pour la page Settings ----- */
.settings-page,
.account-settings-page,
#accountSettingsPage {
width: 100%;
max-width: 1180px;
}
.settings-header,
.page-heading {
margin-bottom: 22px;
}
.settings-tabs,
.settings-tab-nav {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 18px;
}
.settings-overview,
.settings-grid,
.settings-content-grid {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
gap: 16px;
align-items: start;
}
.settings-card,
.profile-card,
.security-card,
.validation-card,
.history-card {
width: 100%;
box-sizing: border-box;
}
/* Force les formulaires à occuper toute la largeur */
.settings-card form,
.account-form,
.security-form {
width: 100%;
}
.form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.form-group {
min-width: 0;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
box-sizing: border-box;
}
/* ----- Responsive ----- */
@media (max-width: 1100px) {
.settings-overview,
.settings-grid,
.settings-content-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 900px) {
.main-content {
padding: 22px 18px;
}
}
@media (max-width: 700px) {
.app-topbar {
padding: 12px 16px;
}
.main-content {
padding: 18px 14px;
}
.form-row {
grid-template-columns: 1fr;
}
.notification-dropdown {
right: -6px;
width: min(360px, calc(100vw - 20px));
}
}
/* RESPONSIVE */
@media (max-width: 850px) {
.calendar-header {
align-items: stretch;
flex-direction: column;
}
.calendar-header-actions {
align-items: stretch;
flex-direction: column;
}
.commercial-selector select {
width: 100%;
}
.calendar-stats {
grid-template-columns: 1fr;
}
.form-row {
grid-template-columns: 1fr;
}
.calendar-card {
overflow-x: auto;
}
}
.calendar-form-page {
max-width: 900px;
}
.page-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 22px;
}
.page-heading h1 {
margin: 0 0 5px;
font-size: 26px;
color: #151b2f;
}
.page-heading p {
margin: 0;
font-size: 14px;
color: #7d8597;
}
.calendar-form-card {
padding: 25px;
background: #fff;
border: 1px solid #e9ecf2;
border-radius: 14px;
}
.calendar-form-card label {
display: block;
margin-bottom: 7px;
font-size: 14px;
font-weight: 600;
color: #4c566a;
}
.calendar-form-card input[type="text"],
.calendar-form-card input[type="datetime-local"],
.calendar-form-card select,
.calendar-form-card textarea {
width: 100%;
border: 1px solid #dfe3ec;
border-radius: 9px;
background: white;
font-family: inherit;
font-size: 14px;
color: #232b3d;
}
.calendar-form-card input[type="text"],
.calendar-form-card select {
height: 44px;
padding: 0 12px;
}
.calendar-form-card input[type="datetime-local"] {
min-height: 44px;
padding: 0 12px;
}
.calendar-form-card textarea {
padding: 12px;
resize: vertical;
}
.calendar-form-card input:focus,
.calendar-form-card select:focus,
.calendar-form-card textarea:focus {
outline: none;
border-color: #5067e8;
box-shadow:
0 0 0 3px rgba(80, 103, 232, .1);
}
.form-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid #edf0f5;
}
.checkbox-group label {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.calendar-user-form {
display: flex;
flex-direction: column;
gap: 6px;
}
.calendar-user-form label {
font-size: 14px;
font-weight: 600;
color: #6f788b;
}
.calendar-user-form select {
min-width: 220px;
height: 42px;
padding: 0 12px;
background: #fff;
border: 1px solid #dfe3ec;
border-radius: 9px;
color: #273046;
font-size: 14px;
font-family: inherit;
}
.calendar-user-form select:focus {
outline: none;
border-color: #5067e8;
box-shadow:
0 0 0 3px rgba(80, 103, 232, .1);
}
.delete-event-zone {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #edf0f5;
}
.delete-event-zone form {
display: inline-block;
}
.btn-danger {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0 17px;
border: 0;
border-radius: 9px;
background: #fff0f1;
color: #d83546;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.btn-danger:hover {
background: #ffe2e5;
}
@media (max-width: 700px) {
.page-heading {
flex-direction: column;
align-items: stretch;
}
.form-actions {
flex-direction: column-reverse;
align-items: stretch;
}
.form-actions .btn-primary,
.form-actions .btn-secondary {
width: 100%;
text-align: center;
}
}
/* Responsive */
@media (max-width: 768px) {
.app-shell { flex-direction: column; }
.sidebar { width: 100%; flex-direction: row; align-items: center; overflow-x: auto; }
.sidebar-nav { flex-direction: row; }
.sidebar-footer { border-top: none; padding-top: 0; }
.main-content { padding: 20px; }
}
/* =========================================================
COHÉRENCE TYPOGRAPHIQUE DES MODULES
========================================================= */
.calendar-page,
.calendar-app,
.prospects-page,
.prospect-detail-page,
.prospect-form-page,
.clients-page,
.client-detail-page,
.client-form-page,
.account-settings-page,
.settings-page,
.admin-users-page,
.admin-user-detail-page,
.admin-user-form-page,
.audit-page,
.audit-detail-page,
.chat-app,
.projects-page,
.project-detail-page,
.project-form-page {
font-size: 14px;
}
.calendar-header h1,
.calendar-topbar h1,
.page-heading h1,
.prospects-header h1,
.prospect-detail-header h1,
.prospect-form-header h1,
.clients-header h1,
.client-detail-header h1,
.client-form-header h1,
.settings-header h1,
.admin-page-header h1,
.audit-header h1,
.projects-header h1,
.project-form-header h1,
.project-detail-header h1 {
font-size: clamp(26px, 2vw, 31px);
}
.calendar-header p,
.calendar-topbar p,
.page-heading p,
.prospects-header p,
.prospect-detail-header p,
.prospect-form-header p,
.clients-header p,
.client-detail-header p,
.client-form-header p,
.settings-header p,
.admin-page-header p,
.audit-header p,
.projects-header p,
.project-form-header p,
.project-detail-header p {
font-size: 14px;
}
.stat-card span,
.detail-stat-card span,
.admin-stat-card span,
.calendar-summary span,
.project-stat span,
.info-item span,
.info-grid span,
.metric-list span {
font-size: 12px;
}
.stat-card strong,
.detail-stat-card strong,
.admin-stat-card strong,
.calendar-summary strong,
.project-stat strong {
font-size: 22px;
}
.status-badge,
.score-badge,
.tag,
.role-pill,
.status-pill,
.warning-pill,
.status-chip {
font-size: 11px;
}
.prospects-table th,
.clients-table th,
.admin-users-table th,
.audit-table th,
.projects-table th,
.team-performance-table th,
.performance-table th {
font-size: 11px;
}
.prospects-table td,
.clients-table td,
.admin-users-table td,
.audit-table td,
.projects-table td,
.team-performance-table td,
.performance-table td {
font-size: 13px;
}
.prospect-contact,
.client-contact,
.user-cell span,
.user-cell small,
.audit-table td small,
.projects-table td small {
font-size: 11px;
}
/* Chat lisible sans agrandir artificiellement les bulles */
.chat-sidebar-head h2,
.chat-conversation-head h2 {
font-size: 16px;
}
.chat-room-item strong,
.chat-message-author,
.chat-message-text,
.chat-composer textarea,
.chat-form-group > label,
.chat-user-choice strong {
font-size: 13px;
}
.chat-room-item small,
.chat-message-meta,
.chat-user-choice small {
font-size: 11px;
}
.chat-bubble {
font-size: 13px;
line-height: 1.45;
}
/* Notifications */
.notification-dropdown-head strong,
.notification-content strong {
font-size: 13px;
}
.notification-dropdown-head small,
.notification-content small {
font-size: 11px;
}
.notification-content span {
font-size: 12px;
}
.notification-dropdown-head button {
font-size: 12px;
}
.notification-count {
font-size: 10px;
}
/* Dossiers */
.panel-head h2 {
font-size: 17px;
}
.project-info-grid span,
.next-action-card span,
.task-summary {
font-size: 11px;
}
.project-info-grid strong,
.next-action-card strong,
.project-description p,
.project-task-content strong {
font-size: 13px;
}
.project-description h3 {
font-size: 14px;
}
.project-task-content small,
.timeline-item small {
font-size: 11px;
}
/* =========================================================
ICEKOM CRM — COMMAND CENTER
Version lisible / responsive
Remplace complètement webroot/css/command-center.css
========================================================= */
/* ---------------------------------------------------------
BASE
--------------------------------------------------------- */
.command-center {
width: 100%;
max-width: 1800px;
margin: 0 auto;
color: #263247;
font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.45;
}
.command-center *,
.command-center *::before,
.command-center *::after {
box-sizing: border-box;
}
.command-center a {
text-decoration: none;
}
/* ---------------------------------------------------------
HERO
--------------------------------------------------------- */
.command-hero {
display: grid;
grid-template-columns: minmax(320px, 1fr) auto;
align-items: center;
gap: 24px;
margin-bottom: 18px;
padding: 24px 26px;
border: 1px solid #dde5f2;
border-radius: 18px;
background:
radial-gradient(
circle at 92% 20%,
rgba(95, 123, 242, .18),
transparent 32%
),
linear-gradient(
135deg,
#ffffff 0%,
#f5f7ff 100%
);
}
.command-eyebrow {
display: block;
margin-bottom: 7px;
color: #4f66d6;
font-size: 11px;
font-weight: 800;
line-height: 1.2;
letter-spacing: .09em;
text-transform: uppercase;
}
.command-hero h1 {
margin: 0;
color: #1d273b;
font-size: clamp(28px, 2vw, 34px);
font-weight: 750;
line-height: 1.15;
}
.command-hero p {
margin: 8px 0 0;
color: #748095;
font-size: 14px;
line-height: 1.5;
}
.command-hero-side {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
min-width: 0;
}
.command-date {
flex: 0 0 auto;
color: #788397;
font-size: 12px;
font-weight: 650;
white-space: nowrap;
}
/* ---------------------------------------------------------
BASCULE DE VUES
--------------------------------------------------------- */
.command-view-controls {
position: relative;
display: flex;
align-items: center;
flex: 0 0 auto;
}
.command-view-switch {
display: flex;
align-items: center;
gap: 4px;
padding: 4px;
border-radius: 11px;
background: #e9edf5;
}
.command-switch,
button.command-switch {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 13px;
border: 0;
border-radius: 8px;
background: transparent;
color: #697589;
font-family: inherit;
font-size: 13px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition:
background .15s ease,
color .15s ease,
box-shadow .15s ease;
}
.command-switch:hover,
button.command-switch:hover {
background: rgba(255, 255, 255, .65);
color: #465dcc;
}
.command-switch.active,
button.command-switch.active {
background: #ffffff;
color: #465dcc;
box-shadow:
0 3px 10px rgba(30, 40, 65, .09);
}
/* Sélecteur de membre :
il s'ouvre sous le bouton et ne déforme jamais le hero */
.member-view-picker {
position: absolute;
top: calc(100% + 9px);
right: 0;
z-index: 9000;
display: none;
width: 310px;
padding: 10px;
border: 1px solid #dce3ee;
border-radius: 12px;
background: #ffffff;
box-shadow:
0 16px 42px rgba(26, 36, 60, .16);
}
.member-view-picker.open {
display: block;
}
.member-view-picker select {
display: block;
width: 100%;
min-height: 44px;
padding: 0 12px;
border: 1px solid #dbe1eb;
border-radius: 9px;
background: #ffffff;
color: #39465b;
font-family: inherit;
font-size: 13px;
font-weight: 600;
outline: none;
}
.member-view-picker select:focus {
border-color: #5870e8;
box-shadow:
0 0 0 3px rgba(88, 112, 232, .10);
}
.member-view-badge {
display: inline-flex;
margin: 0 0 7px;
padding: 6px 9px;
border-radius: 999px;
background: #edf1ff;
color: #4e65d5;
font-size: 11px;
font-weight: 800;
line-height: 1;
letter-spacing: .04em;
text-transform: uppercase;
}
/* ---------------------------------------------------------
ACTIONS RAPIDES
--------------------------------------------------------- */
.command-actions {
display: flex;
align-items: center;
gap: 7px;
flex: 0 0 auto;
}
.command-action {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 13px;
border: 1px solid #dce3ee;
border-radius: 9px;
background: #ffffff;
color: #4d596e;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
transition:
transform .12s ease,
background .12s ease,
border-color .12s ease;
}
.command-action:hover {
transform: translateY(-1px);
border-color: #cfd7e6;
background: #f9faff;
}
.command-action.primary {
border-color: #4c64dc;
background: #4c64dc;
color: #ffffff;
}
.command-action.primary:hover {
background: #4058d4;
}
/* ---------------------------------------------------------
KPI
--------------------------------------------------------- */
.command-kpis {
display: grid;
grid-template-columns: repeat(6, minmax(150px, 1fr));
gap: 12px;
margin-bottom: 18px;
}
.command-kpi {
display: flex;
min-width: 0;
min-height: 108px;
flex-direction: column;
justify-content: center;
padding: 16px 17px;
border: 1px solid #e1e6ef;
border-radius: 14px;
background: #ffffff;
color: inherit;
transition:
transform .12s ease,
box-shadow .12s ease;
}
a.command-kpi:hover {
transform: translateY(-1px);
box-shadow:
0 8px 24px rgba(34, 45, 68, .07);
}
.command-kpi.dark {
border-color: transparent;
background:
linear-gradient(
140deg,
#192541,
#2b3f78
);
}
.command-kpi.success {
border-color: #d8eee3;
background: #fbfffd;
}
.command-kpi.danger {
border-color: #efd4d8;
background: #fffafa;
}
.kpi-label,
.command-kpi strong,
.command-kpi small {
display: block;
}
.kpi-label {
color: #727d91;
font-size: 12px;
font-weight: 600;
line-height: 1.3;
}
.command-kpi strong {
margin: 7px 0 5px;
color: #273247;
font-size: clamp(24px, 1.8vw, 30px);
font-weight: 750;
line-height: 1;
}
.command-kpi small {
color: #8d97a8;
font-size: 11px;
line-height: 1.35;
}
.command-kpi.dark .kpi-label,
.command-kpi.dark small {
color: rgba(255, 255, 255, .76);
}
.command-kpi.dark strong {
color: #ffffff;
}
.command-kpi.danger strong {
color: #c7414e;
}
/* ---------------------------------------------------------
GRILLES PRINCIPALES
--------------------------------------------------------- */
.command-layout {
display: grid;
gap: 14px;
margin-bottom: 14px;
}
.today-layout {
grid-template-columns:
minmax(0, 1.15fr)
minmax(0, 1fr)
minmax(320px, .95fr);
}
.business-layout {
grid-template-columns:
minmax(0, 1.65fr)
minmax(340px, .75fr);
}
.footer-layout {
grid-template-columns:
minmax(0, 1.35fr)
minmax(340px, .65fr);
}
/* ---------------------------------------------------------
PANNEAUX
--------------------------------------------------------- */
.command-panel {
min-width: 0;
padding: 19px 20px;
border: 1px solid #e3e8f0;
border-radius: 15px;
background: #ffffff;
}
.command-panel-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
margin-bottom: 16px;
}
.command-panel-head > div {
min-width: 0;
}
.command-panel-head > div > span,
.command-panel-head > span:first-child {
display: block;
margin-bottom: 4px;
color: #7d889a;
font-size: 10px;
font-weight: 800;
line-height: 1.2;
letter-spacing: .06em;
text-transform: uppercase;
}
.command-panel-head h2 {
margin: 0;
color: #283348;
font-size: 18px;
font-weight: 750;
line-height: 1.25;
}
.command-panel-head p {
margin: 5px 0 0;
color: #8994a5;
font-size: 12px;
line-height: 1.4;
}
.command-link {
flex: 0 0 auto;
color: #4c65d5;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.command-link:hover {
text-decoration: underline;
}
.panel-count {
display: inline-flex;
min-width: 28px;
height: 28px;
align-items: center;
justify-content: center;
border-radius: 8px;
background: #edf1ff;
color: #5167cf;
font-size: 12px;
font-weight: 750;
}
/* ---------------------------------------------------------
ÉTATS VIDES
--------------------------------------------------------- */
.command-empty {
display: flex;
min-height: 145px;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 18px;
color: #8994a5;
text-align: center;
}
.command-empty strong {
color: #4e596e;
font-size: 14px;
font-weight: 700;
}
.command-empty span {
margin-top: 5px;
font-size: 12px;
}
.command-empty.good strong {
color: #268158;
}
/* ---------------------------------------------------------
AGENDA
--------------------------------------------------------- */
.today-agenda,
.command-priorities,
.project-alert-list,
.delivery-list,
.command-activity {
display: grid;
gap: 7px;
}
.today-agenda-item {
display: grid;
grid-template-columns: 62px minmax(0, 1fr);
gap: 11px;
align-items: center;
padding: 10px 11px;
border-radius: 9px;
color: inherit;
transition: background .12s ease;
}
.today-agenda-item:hover {
background: #f7f9fd;
}
.today-agenda-item time {
color: #4e65d1;
font-size: 14px;
font-weight: 800;
}
.today-agenda-item span {
min-width: 0;
}
.today-agenda-item strong,
.today-agenda-item small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.today-agenda-item strong {
color: #3f4c62;
font-size: 14px;
font-weight: 700;
}
.today-agenda-item small {
margin-top: 3px;
color: #8c96a6;
font-size: 11px;
}
/* ---------------------------------------------------------
PRIORITÉS
--------------------------------------------------------- */
.command-priority {
display: grid;
grid-template-columns: 9px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 10px 11px;
border-radius: 9px;
color: inherit;
}
.command-priority:hover {
background: #f8fafe;
}
.command-priority.overdue {
background: #fff7f8;
}
.priority-light {
width: 8px;
height: 8px;
border-radius: 50%;
background: #e6a13d;
}
.command-priority.overdue .priority-light {
background: #d74753;
}
.command-priority strong,
.command-priority small {
display: block;
}
.command-priority strong {
color: #414d62;
font-size: 13px;
font-weight: 700;
}
.command-priority small {
margin-top: 2px;
color: #8b95a6;
font-size: 11px;
}
.command-priority time {
color: #758095;
font-size: 11px;
font-weight: 650;
white-space: nowrap;
}
/* ---------------------------------------------------------
ALERTES PROJETS
--------------------------------------------------------- */
.project-risk {
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
gap: 10px;
align-items: center;
padding: 10px 11px;
border-radius: 9px;
color: inherit;
}
.project-risk.danger {
background: #fff5f6;
}
.project-risk.warning {
background: #fff9ef;
}
.risk-icon {
display: inline-flex;
width: 34px;
height: 34px;
align-items: center;
justify-content: center;
border-radius: 9px;
background: #ffecee;
color: #c63f4c;
font-size: 14px;
font-weight: 800;
}
.project-risk.warning .risk-icon {
background: #fff0d4;
color: #a86c15;
}
.project-risk strong,
.project-risk small {
display: block;
}
.project-risk strong {
color: #414d62;
font-size: 13px;
font-weight: 700;
}
.project-risk small {
margin-top: 3px;
color: #8590a1;
font-size: 11px;
}
/* ---------------------------------------------------------
FLUX DE PRODUCTION
--------------------------------------------------------- */
.production-command {
margin-bottom: 14px;
}
.production-flow {
display: grid;
grid-template-columns: repeat(11, minmax(125px, 1fr));
gap: 9px;
overflow-x: auto;
padding-bottom: 4px;
}
.production-flow-stage {
min-width: 125px;
min-height: 105px;
padding: 12px 13px;
border: 1px solid #e5e9f1;
border-radius: 11px;
background: #fafbfc;
color: inherit;
transition:
transform .12s ease,
box-shadow .12s ease;
}
.production-flow-stage:hover {
transform: translateY(-1px);
box-shadow:
0 6px 18px rgba(34, 45, 68, .06);
}
.production-flow-stage.blocked {
background: #fff5f6;
}
.production-flow-stage.waiting {
background: #fff9ef;
}
.flow-stage-head {
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
}
.flow-stage-head > span {
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: var(--stage-color);
}
.flow-stage-head strong {
overflow: hidden;
color: #58657a;
font-size: 11px;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.flow-stage-count {
margin: 12px 0 4px;
color: #29354a;
font-size: 25px;
font-weight: 800;
line-height: 1;
}
.production-flow-stage small {
color: #8d97a8;
font-size: 11px;
}
/* ---------------------------------------------------------
PIPELINE COMMERCIAL
--------------------------------------------------------- */
.pipeline-summary {
color: #788397;
font-size: 12px;
}
.pipeline-summary strong {
color: #424f65;
}
.sales-pipeline {
display: grid;
grid-template-columns: repeat(7, minmax(130px, 1fr));
gap: 9px;
overflow-x: auto;
padding-bottom: 3px;
}
.sales-stage {
min-width: 130px;
min-height: 110px;
padding: 13px 14px;
border: 1px solid
color-mix(
in srgb,
var(--stage-color) 18%,
#e6eaf1
);
border-radius: 11px;
background:
color-mix(
in srgb,
var(--stage-color) 7%,
#ffffff
);
color: inherit;
}
.sales-stage.won {
background: #f1fbf6;
}
.sales-stage.lost {
opacity: .72;
}
.sales-stage span,
.sales-stage strong,
.sales-stage small {
display: block;
}
.sales-stage span {
overflow: hidden;
color: #657187;
font-size: 11px;
font-weight: 650;
text-overflow: ellipsis;
white-space: nowrap;
}
.sales-stage strong {
margin: 10px 0 4px;
color: #303c51;
font-size: 24px;
font-weight: 800;
line-height: 1;
}
.sales-stage small {
color: #8d97a7;
font-size: 11px;
}
/* ---------------------------------------------------------
LIVRAISONS
--------------------------------------------------------- */
.delivery-item {
display: grid;
grid-template-columns: 54px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 10px 11px;
border-radius: 9px;
color: inherit;
}
.delivery-item:hover {
background: #f8fafe;
}
.delivery-item time {
color: #5269d5;
font-size: 13px;
font-weight: 800;
}
.delivery-item span {
min-width: 0;
}
.delivery-item strong,
.delivery-item small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.delivery-item strong {
color: #414d62;
font-size: 13px;
font-weight: 700;
}
.delivery-item small {
margin-top: 3px;
color: #8b95a6;
font-size: 11px;
}
.delivery-progress {
color: #39825d;
font-size: 12px;
font-weight: 750;
}
/* ---------------------------------------------------------
DIRECTION / ADMIN
--------------------------------------------------------- */
.direction-section {
margin: 26px 0 14px;
padding-top: 22px;
border-top: 1px solid #dfe5ee;
}
.direction-header {
margin-bottom: 14px;
}
.direction-header > span {
color: #5068d6;
font-size: 11px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.direction-header h2 {
margin: 5px 0;
color: #273247;
font-size: 23px;
font-weight: 750;
}
.direction-header p {
margin: 0;
color: #7f8a9e;
font-size: 13px;
}
.direction-grid {
display: grid;
grid-template-columns:
minmax(0, 1.4fr)
minmax(330px, .6fr);
gap: 14px;
margin-bottom: 14px;
}
/* ---------------------------------------------------------
CHARGE ÉQUIPE
--------------------------------------------------------- */
.team-load-list {
display: grid;
gap: 10px;
}
.team-load-item {
padding: 9px 0;
}
.team-load-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 7px;
}
.team-load-head span strong,
.team-load-head span small {
display: block;
}
.team-load-head span strong {
color: #3e4a60;
font-size: 13px;
font-weight: 700;
}
.team-load-head span small {
margin-top: 3px;
color: #8994a5;
font-size: 11px;
}
.team-load-head > strong {
color: #5267c9;
font-size: 13px;
font-weight: 800;
}
.team-load-track {
height: 8px;
overflow: hidden;
border-radius: 999px;
background: #edf0f4;
}
.team-load-track span {
display: block;
height: 100%;
border-radius: inherit;
background:
linear-gradient(
90deg,
#54a7e7,
#5369dd
);
}
.team-risk {
display: block;
margin-top: 5px;
color: #c4404d;
font-size: 11px;
font-weight: 650;
}
/* ---------------------------------------------------------
CONTRÔLES ADMIN
--------------------------------------------------------- */
.admin-control-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
}
.admin-control-grid > div {
min-height: 100px;
padding: 13px;
border: 1px solid #e8ecf2;
border-radius: 10px;
background: #fafbfc;
}
.admin-control-grid span,
.admin-control-grid strong {
display: block;
}
.admin-control-grid span {
color: #748095;
font-size: 11px;
font-weight: 600;
}
.admin-control-grid strong {
margin-top: 7px;
color: #303c51;
font-size: 25px;
font-weight: 800;
}
/* ---------------------------------------------------------
TABLE PERFORMANCE
--------------------------------------------------------- */
.performance-panel {
padding: 0;
overflow: hidden;
}
.performance-panel .command-panel-head {
padding: 18px 20px 0;
}
#commandTeamSearch {
width: 230px;
min-height: 40px;
padding: 0 11px;
border: 1px solid #dce2ec;
border-radius: 9px;
background: #ffffff;
color: #39465b;
font: inherit;
font-size: 12px;
outline: none;
}
#commandTeamSearch:focus {
border-color: #5870e8;
box-shadow:
0 0 0 3px rgba(88, 112, 232, .10);
}
.performance-table-wrap {
overflow-x: auto;
}
.performance-table {
width: 100%;
border-collapse: collapse;
}
.performance-table th {
padding: 12px 14px;
border-bottom: 1px solid #e5e9f0;
background: #fafbfc;
color: #6f7a8f;
font-size: 11px;
font-weight: 750;
text-align: left;
text-transform: uppercase;
white-space: nowrap;
}
.performance-table td {
padding: 13px 14px;
border-bottom: 1px solid #edf0f4;
color: #4d596e;
font-size: 13px;
white-space: nowrap;
}
.performance-table td strong {
color: #364257;
}
.table-danger {
color: #c43f4c;
font-weight: 800;
}
.member-view-link {
display: inline-flex;
min-height: 34px;
align-items: center;
justify-content: center;
padding: 0 10px;
border: 1px solid #dce3ee;
border-radius: 8px;
background: #ffffff;
color: #4e65d5;
font-size: 11px;
font-weight: 700;
white-space: nowrap;
}
.member-view-link:hover {
background: #f5f7ff;
}
/* ---------------------------------------------------------
ACTIVITÉ
--------------------------------------------------------- */
.command-activity-item {
display: grid;
grid-template-columns: 10px minmax(0, 1fr);
gap: 9px;
padding: 9px 10px;
border-radius: 8px;
color: inherit;
}
.command-activity-item:hover {
background: #f8fafe;
}
.activity-mark {
width: 8px;
height: 8px;
margin-top: 5px;
border-radius: 50%;
background: #6076df;
}
.command-activity-item strong,
.command-activity-item small {
display: block;
}
.command-activity-item strong {
color: #414d62;
font-size: 13px;
font-weight: 700;
}
.command-activity-item small {
margin-top: 3px;
color: #8b95a6;
font-size: 11px;
}
/* ---------------------------------------------------------
COMMUNICATION
--------------------------------------------------------- */
.communication-command {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
.communication-command > * {
min-width: 0;
min-height: 100px;
padding: 13px;
border: 1px solid #e6eaf1;
border-radius: 10px;
color: inherit;
}
.communication-command > a:hover {
background: #f8faff;
}
.communication-command span,
.communication-command strong,
.communication-command small {
display: block;
}
.communication-command span {
color: #6f7b90;
font-size: 11px;
font-weight: 650;
}
.communication-command strong {
margin: 7px 0 3px;
color: #303c51;
font-size: 24px;
font-weight: 800;
}
.communication-command small {
color: #8d97a7;
font-size: 11px;
}
/* =========================================================
RESPONSIVE
Important :
on change la disposition, PAS la lisibilité.
Les polices ne descendent jamais à 7/8/9 px.
========================================================= */
@media (max-width: 1550px) {
.command-hero {
grid-template-columns: 1fr;
}
.command-hero-side {
justify-content: flex-start;
flex-wrap: wrap;
}
.command-kpis {
grid-template-columns:
repeat(3, minmax(190px, 1fr));
}
.today-layout {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.attention-panel {
grid-column: span 2;
}
}
@media (max-width: 1150px) {
.business-layout,
.direction-grid,
.footer-layout {
grid-template-columns: 1fr;
}
.command-kpis {
grid-template-columns:
repeat(2, minmax(200px, 1fr));
}
.command-panel {
padding: 18px;
}
}
@media (max-width: 850px) {
.command-hero {
padding: 20px;
}
.command-hero-side {
width: 100%;
align-items: stretch;
flex-direction: column;
}
.command-view-controls,
.command-view-switch,
.command-actions {
width: 100%;
}
.command-view-switch {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.command-switch,
button.command-switch {
width: 100%;
font-size: 13px;
}
.member-view-picker {
position: static;
width: 100%;
margin-top: 8px;
box-shadow: none;
}
.command-actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.command-action {
width: 100%;
font-size: 13px;
}
.today-layout {
grid-template-columns: 1fr;
}
.attention-panel {
grid-column: auto;
}
.admin-control-grid,
.communication-command {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 620px) {
.command-center {
font-size: 14px;
}
.command-hero {
padding: 18px;
border-radius: 14px;
}
.command-hero h1 {
font-size: 28px;
}
.command-hero p {
font-size: 14px;
}
.command-view-switch,
.command-actions {
grid-template-columns: 1fr;
}
.command-kpis {
grid-template-columns: 1fr;
}
.command-kpi {
min-height: 105px;
}
.command-panel {
padding: 16px;
}
.command-panel-head {
align-items: stretch;
flex-direction: column;
}
.command-panel-head h2 {
font-size: 18px;
}
.command-link {
font-size: 12px;
}
.admin-control-grid,
.communication-command {
grid-template-columns: 1fr;
}
#commandTeamSearch {
width: 100%;
}
.production-flow-stage,
.sales-stage {
min-width: 150px;
}
}
/* =========================================================
ACCESSIBILITÉ / CONFORT
========================================================= */
@media (prefers-reduced-motion: reduce) {
.command-center *,
.command-center *::before,
.command-center *::after {
scroll-behavior: auto !important;
transition: none !important;
animation: none !important;
}
}
/* =========================================================
ICEKOM — DASHBOARD DIRECTION
Vue admin orientée finances / production / management
========================================================= */
.direction-dashboard {
width: 100%;
max-width: 1800px;
margin: 0 auto;
}
.direction-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
margin-bottom: 22px;
padding: 22px 24px;
border: 1px solid #dfe5ef;
border-radius: 16px;
background:
radial-gradient(
circle at 92% 20%,
rgba(79, 103, 223, .13),
transparent 32%
),
#fff;
}
.direction-eyebrow {
display: block;
margin-bottom: 5px;
color: #5068d6;
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.direction-hero h1 {
margin: 0;
color: #172238;
font-size: 30px;
line-height: 1.15;
}
.direction-hero p {
margin: 7px 0 0;
color: #758196;
font-size: 14px;
}
.direction-hero-tools {
position: relative;
display: flex;
align-items: center;
gap: 10px;
}
.direction-date {
color: #7d8798;
font-size: 12px;
font-weight: 650;
}
.direction-view-controls {
position: relative;
display: flex;
gap: 4px;
padding: 4px;
border-radius: 11px;
background: #edf0f6;
}
.direction-view-tab {
display: inline-flex;
min-height: 40px;
align-items: center;
justify-content: center;
padding: 0 13px;
border: 0;
border-radius: 8px;
background: transparent;
color: #687489;
font: inherit;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
}
.direction-view-tab:hover {
background: rgba(255, 255, 255, .65);
}
.direction-view-tab.active {
background: #fff;
color: #465dcc;
box-shadow:
0 3px 10px rgba(30, 40, 65, .08);
}
.direction-view-controls .member-view-picker {
top: calc(100% + 8px);
right: 0;
}
/* SECTION */
.direction-section-block {
margin-bottom: 22px;
}
.direction-section-title {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
margin-bottom: 12px;
}
.direction-section-title > div > span,
.direction-panel-head > div > span {
display: block;
margin-bottom: 3px;
color: #718097;
font-size: 11px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.direction-section-title h2 {
margin: 0;
color: #202c42;
font-size: 21px;
}
.direction-section-title > small {
max-width: 620px;
color: #8b95a5;
font-size: 12px;
line-height: 1.4;
text-align: right;
}
/* FINANCE KPI */
.direction-finance-grid {
display: grid;
grid-template-columns:
repeat(4, minmax(190px, 1fr));
gap: 12px;
}
.direction-kpi {
min-height: 118px;
padding: 17px 18px;
border: 1px solid #e1e6ef;
border-radius: 13px;
background: #fff;
}
.direction-kpi > span,
.direction-kpi > strong,
.direction-kpi > small {
display: block;
}
.direction-kpi > span {
color: #707d91;
font-size: 12px;
font-weight: 650;
}
.direction-kpi > strong {
margin: 8px 0 5px;
color: #283449;
font-size: 27px;
line-height: 1;
}
.direction-kpi > small {
color: #8d97a7;
font-size: 11px;
}
.direction-kpi.primary {
border-color: transparent;
background:
linear-gradient(
140deg,
#1b294b,
#324987
);
}
.direction-kpi.primary > span,
.direction-kpi.primary > small {
color: rgba(255, 255, 255, .72);
}
.direction-kpi.primary > strong {
color: #fff;
}
.direction-kpi.success {
border-color: #d8eee3;
background: #f8fdfb;
}
.direction-kpi.success > strong {
color: #21835b;
}
.direction-kpi.warning {
border-color: #f1dfbe;
background: #fffaf1;
}
.direction-kpi.warning > strong {
color: #a96a15;
}
.direction-kpi.danger,
.direction-kpi.danger-soft {
border-color: #efd5d9;
background: #fff8f9;
}
.direction-kpi.danger > strong,
.direction-kpi.danger-soft > strong {
color: #c6414d;
}
/* PANELS */
.direction-panel {
min-width: 0;
padding: 18px;
border: 1px solid #e2e7ef;
border-radius: 14px;
background: #fff;
}
.direction-panel-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.direction-panel-head h3 {
margin: 0;
color: #273348;
font-size: 17px;
}
.direction-link {
color: #4f66d6;
font-size: 12px;
font-weight: 700;
text-decoration: none;
}
/* COMMUNICATION */
.direction-communication-grid {
display: grid;
grid-template-columns:
minmax(0, 1.2fr)
minmax(390px, .8fr);
gap: 14px;
}
.communication-main {
display: flex;
align-items: stretch;
}
.communication-summary {
display: grid;
width: 100%;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 10px;
}
.communication-summary-card {
display: flex;
min-width: 0;
min-height: 120px;
flex-direction: column;
justify-content: center;
padding: 15px;
border: 1px solid #e7ebf2;
border-radius: 11px;
background: #fafbfc;
color: inherit;
text-decoration: none;
}
a.communication-summary-card:hover {
background: #f5f7ff;
}
.communication-summary-card > span,
.communication-summary-card > strong,
.communication-summary-card > small {
display: block;
}
.communication-summary-card > span {
color: #667389;
font-size: 12px;
font-weight: 650;
}
.communication-summary-card > strong {
margin: 7px 0 4px;
color: #2c384d;
font-size: 26px;
}
.communication-summary-card > small {
color: #8994a5;
font-size: 11px;
}
.communication-summary-card.online {
border-color: #d9eee4;
background: #f7fcf9;
}
.communication-summary-card.online > strong {
color: #21835b;
}
/* ONLINE MEMBERS */
.online-members-panel {
max-height: 330px;
}
.live-badge {
display: inline-flex;
min-height: 25px;
align-items: center;
padding: 0 8px;
border-radius: 999px;
background: #e9f9f0;
color: #21835b;
font-size: 10px;
font-weight: 800;
letter-spacing: .06em;
}
.online-member-list {
display: grid;
gap: 6px;
max-height: 250px;
overflow-y: auto;
}
.online-member-row {
display: grid;
grid-template-columns:
38px
minmax(0, 1fr)
auto;
gap: 9px;
align-items: center;
padding: 8px;
border-radius: 9px;
background: #fafbfc;
}
.online-avatar {
display: inline-flex;
width: 38px;
height: 38px;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #edf1ff;
color: #5067d5;
font-size: 12px;
font-weight: 800;
}
.online-member-info {
min-width: 0;
}
.online-member-info strong,
.online-member-info small {
display: block;
}
.online-member-info strong {
overflow: hidden;
color: #3d4960;
font-size: 13px;
text-overflow: ellipsis;
white-space: nowrap;
}
.online-member-info small {
margin-top: 2px;
color: #8994a5;
font-size: 11px;
}
.online-member-actions {
display: flex;
gap: 5px;
}
.online-action {
display: inline-flex;
min-height: 31px;
align-items: center;
justify-content: center;
padding: 0 8px;
border: 1px solid #dfe5ee;
border-radius: 7px;
background: #fff;
color: #4f66d6;
font-size: 11px;
font-weight: 700;
text-decoration: none;
}
.online-action.primary {
border-color: #5067d8;
background: #5067d8;
color: #fff;
}
.online-empty {
padding: 28px 10px;
color: #8994a5;
font-size: 13px;
text-align: center;
}
/* LAYOUT */
.direction-two-columns {
display: grid;
grid-template-columns:
minmax(0, 1.55fr)
minmax(360px, .7fr);
gap: 14px;
margin-bottom: 22px;
}
.direction-three-columns {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 14px;
margin-bottom: 22px;
}
.direction-commercial-layout {
display: grid;
grid-template-columns:
minmax(0, 1.55fr)
minmax(360px, .7fr);
gap: 14px;
}
/* PRODUCTION */
.direction-production-flow {
display: grid;
grid-template-columns:
repeat(4, minmax(130px, 1fr));
gap: 8px;
}
.direction-production-stage {
min-width: 0;
padding: 12px;
border: 1px solid #e7ebf2;
border-radius: 10px;
background: #fafbfc;
color: inherit;
text-decoration: none;
}
.production-stage-label {
display: flex;
align-items: center;
gap: 6px;
color: #687489;
font-size: 11px;
font-weight: 650;
}
.production-stage-label i {
display: inline-block;
width: 7px;
height: 7px;
flex: 0 0 7px;
border-radius: 50%;
background: var(--stage-color);
}
.direction-production-stage > strong {
display: block;
margin: 8px 0 3px;
color: #2d394e;
font-size: 22px;
}
.direction-production-stage > small {
color: #8d97a7;
font-size: 11px;
}
/* ALERTS */
.direction-alert-summary {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 8px;
}
.direction-alert {
display: flex;
min-height: 74px;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 11px;
border: 1px solid #e6eaf1;
border-radius: 10px;
background: #fafbfc;
color: inherit;
text-decoration: none;
}
.direction-alert > span {
color: #647085;
font-size: 12px;
font-weight: 650;
}
.direction-alert > strong {
color: #303b50;
font-size: 21px;
}
.direction-alert.danger {
border-color: #f0d5d9;
background: #fff7f8;
}
.direction-alert.danger > strong {
color: #c6414d;
}
.direction-alert.warning {
border-color: #f1dfbd;
background: #fffaf1;
}
.direction-alert.warning > strong {
color: #ad6d14;
}
.direction-alert.info {
border-color: #dbe3fb;
background: #f7f9ff;
}
.direction-alert.info > strong {
color: #5067d5;
}
/* COMMERCIAL SUMMARY */
.commercial-summary-kpis {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 8px;
margin-bottom: 12px;
}
.commercial-summary-kpis > div {
padding: 12px;
border: 1px solid #e7ebf2;
border-radius: 10px;
background: #fafbfc;
}
.commercial-summary-kpis span,
.commercial-summary-kpis strong {
display: block;
}
.commercial-summary-kpis span {
color: #748095;
font-size: 11px;
}
.commercial-summary-kpis strong {
margin-top: 5px;
color: #313d52;
font-size: 20px;
}
.direction-sales-flow {
display: grid;
grid-template-columns:
repeat(7, minmax(105px, 1fr));
gap: 7px;
overflow-x: auto;
}
.direction-sales-flow > a {
min-width: 105px;
padding: 11px;
border: 1px solid
color-mix(
in srgb,
var(--stage-color)
18%,
#e7ebf2
);
border-radius: 9px;
background:
color-mix(
in srgb,
var(--stage-color)
6%,
white
);
color: inherit;
text-decoration: none;
}
.direction-sales-flow span,
.direction-sales-flow strong,
.direction-sales-flow small {
display: block;
}
.direction-sales-flow span {
color: #687489;
font-size: 11px;
}
.direction-sales-flow strong {
margin: 7px 0 3px;
color: #303c51;
font-size: 21px;
}
.direction-sales-flow small {
color: #8d97a7;
font-size: 11px;
}
/* DELIVERIES */
.direction-delivery-list {
display: grid;
gap: 5px;
}
.direction-delivery-list > a {
display: grid;
grid-template-columns:
48px
minmax(0, 1fr)
auto;
gap: 9px;
align-items: center;
padding: 9px;
border-radius: 8px;
color: inherit;
text-decoration: none;
}
.direction-delivery-list > a:hover {
background: #f7f9fd;
}
.direction-delivery-list time {
color: #5067d5;
font-size: 12px;
font-weight: 800;
}
.direction-delivery-list span {
min-width: 0;
}
.direction-delivery-list strong,
.direction-delivery-list small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.direction-delivery-list strong {
color: #414d62;
font-size: 12px;
}
.direction-delivery-list small {
margin-top: 2px;
color: #8c96a6;
font-size: 11px;
}
.direction-delivery-list b {
color: #21835b;
font-size: 12px;
}
.direction-empty {
padding: 35px 12px;
color: #8994a5;
font-size: 13px;
text-align: center;
}
/* TEAM TABLE */
.direction-team-table-wrap {
overflow-x: auto;
border: 1px solid #e2e7ef;
border-radius: 13px;
background: #fff;
}
.direction-team-table {
width: 100%;
border-collapse: collapse;
}
.direction-team-table th {
padding: 12px 13px;
border-bottom: 1px solid #e7ebf2;
background: #fafbfc;
color: #6f7b8f;
font-size: 11px;
font-weight: 750;
text-align: left;
text-transform: uppercase;
white-space: nowrap;
}
.direction-team-table td {
padding: 12px 13px;
border-bottom: 1px solid #edf0f4;
color: #4e596d;
font-size: 13px;
white-space: nowrap;
}
.direction-team-table tbody tr:last-child td {
border-bottom: 0;
}
.direction-team-table td strong {
color: #354157;
}
.direction-table-danger {
color: #c6414d;
font-weight: 800;
}
.direction-member-link {
display: inline-flex;
min-height: 31px;
align-items: center;
padding: 0 9px;
border: 1px solid #dfe5ee;
border-radius: 7px;
color: #5067d5;
font-size: 11px;
font-weight: 700;
text-decoration: none;
}
/* OTHER VIEWS */
.direction-compact-kpis {
display: grid;
grid-template-columns:
repeat(5, minmax(150px, 1fr));
gap: 10px;
margin-bottom: 18px;
}
.direction-compact-kpis > article {
padding: 14px;
border: 1px solid #e2e7ef;
border-radius: 11px;
background: #fff;
}
.direction-compact-kpis span,
.direction-compact-kpis strong {
display: block;
}
.direction-compact-kpis span {
color: #748095;
font-size: 11px;
}
.direction-compact-kpis strong {
margin-top: 5px;
color: #2e3a4f;
font-size: 22px;
}
.direction-compact-kpis article.danger strong {
color: #c6414d;
}
.direction-agenda,
.direction-priorities,
.direction-load-list {
display: grid;
gap: 6px;
}
.direction-agenda > div {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
gap: 8px;
padding: 8px;
}
.direction-agenda time {
color: #5067d5;
font-size: 12px;
font-weight: 800;
}
.direction-agenda strong,
.direction-agenda small {
display: block;
}
.direction-agenda strong {
color: #3e4a60;
font-size: 12px;
}
.direction-agenda small,
.direction-priorities small {
color: #8c96a6;
font-size: 11px;
}
.direction-priorities > div {
padding: 9px;
border-radius: 8px;
background: #fafbfc;
}
.direction-priorities strong {
display: block;
color: #3f4b61;
font-size: 12px;
}
.direction-load-row {
display: grid;
grid-template-columns:
minmax(0, 1fr)
auto;
gap: 7px;
padding: 8px 0;
}
.direction-load-row strong,
.direction-load-row small {
display: block;
}
.direction-load-row strong {
color: #3e4a60;
font-size: 12px;
}
.direction-load-row small {
color: #8b95a5;
font-size: 11px;
}
.direction-load-row > span {
color: #5067d5;
font-size: 12px;
font-weight: 800;
}
.direction-load-bar {
grid-column: 1 / -1;
height: 7px;
overflow: hidden;
border-radius: 999px;
background: #edf0f4;
}
.direction-load-bar i {
display: block;
height: 100%;
border-radius: inherit;
background:
linear-gradient(
90deg,
#54a7e7,
#5369dd
);
}
/* RESPONSIVE */
@media (max-width: 1450px) {
.direction-finance-grid {
grid-template-columns:
repeat(4, minmax(170px, 1fr));
}
.direction-production-flow {
grid-template-columns:
repeat(3, minmax(130px, 1fr));
}
}
@media (max-width: 1150px) {
.direction-hero {
align-items: flex-start;
flex-direction: column;
}
.direction-hero-tools {
width: 100%;
justify-content: space-between;
}
.direction-finance-grid {
grid-template-columns:
repeat(2, minmax(190px, 1fr));
}
.direction-communication-grid,
.direction-two-columns,
.direction-commercial-layout {
grid-template-columns: 1fr;
}
.direction-three-columns {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.direction-hero-tools {
align-items: stretch;
flex-direction: column;
}
.direction-view-controls {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
}
.direction-view-tab {
width: 100%;
}
.direction-view-controls .member-view-picker {
position: static;
grid-column: 1 / -1;
width: 100%;
margin-top: 4px;
box-shadow: none;
}
.direction-section-title {
align-items: flex-start;
flex-direction: column;
}
.direction-section-title > small {
text-align: left;
}
.direction-finance-grid,
.communication-summary,
.commercial-summary-kpis,
.direction-three-columns,
.direction-compact-kpis {
grid-template-columns: 1fr;
}
.direction-production-flow {
grid-template-columns:
repeat(2, minmax(130px, 1fr));
}
.online-member-row {
grid-template-columns:
38px
minmax(0, 1fr);
}
.online-member-actions {
grid-column: 1 / -1;
padding-left: 47px;
}
}
@media (max-width: 520px) {
.direction-hero {
padding: 18px;
}
.direction-hero h1 {
font-size: 27px;
}
.direction-production-flow {
grid-template-columns: 1fr;
}
.direction-alert-summary {
grid-template-columns: 1fr;
}
}
/* =========================================================
ICEKOM — DASHBOARDS PAR RÔLE
========================================================= */
.role-dashboard-kpis {
display: grid;
grid-template-columns: repeat(6, minmax(160px, 1fr));
gap: 11px;
margin-bottom: 16px;
}
.role-dashboard-kpis > article {
min-height: 112px;
padding: 15px 16px;
border: 1px solid #e1e6ef;
border-radius: 13px;
background: #fff;
}
.role-dashboard-kpis > article > span,
.role-dashboard-kpis > article > strong,
.role-dashboard-kpis > article > small {
display: block;
}
.role-dashboard-kpis > article > span {
color: #6e7a8f;
font-size: 12px;
font-weight: 650;
}
.role-dashboard-kpis > article > strong {
margin: 8px 0 4px;
color: #29354a;
font-size: 25px;
line-height: 1;
}
.role-dashboard-kpis > article > small {
color: #8b95a6;
font-size: 11px;
}
.role-dashboard-kpis > article.primary {
border-color: transparent;
background: linear-gradient(140deg, #1b294b, #324987);
}
.role-dashboard-kpis > article.primary > span,
.role-dashboard-kpis > article.primary > small {
color: rgba(255,255,255,.73);
}
.role-dashboard-kpis > article.primary > strong {
color: #fff;
}
.role-dashboard-kpis > article.success {
border-color: #d9eee4;
background: #f8fdfb;
}
.role-dashboard-kpis > article.success > strong {
color: #21835b;
}
.role-dashboard-kpis > article.warning {
border-color: #f0dfbf;
background: #fffaf1;
}
.role-dashboard-kpis > article.warning > strong {
color: #a96a15;
}
.role-dashboard-kpis > article.danger {
border-color: #efd5d9;
background: #fff7f8;
}
.role-dashboard-kpis > article.danger > strong {
color: #c6414d;
}
/* Communication commune commercial / développeur */
.role-communication-strip {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-bottom: 16px;
}
.role-communication-strip > * {
min-height: 86px;
padding: 13px 15px;
border: 1px solid #e4e9f1;
border-radius: 11px;
background: #fff;
color: inherit;
text-decoration: none;
}
.role-communication-strip > a:hover {
background: #f7f9ff;
}
.role-communication-strip span,
.role-communication-strip strong,
.role-communication-strip small {
display: block;
}
.role-communication-strip span {
color: #69758a;
font-size: 12px;
font-weight: 650;
}
.role-communication-strip strong {
margin: 5px 0 2px;
color: #2f3b50;
font-size: 22px;
}
.role-communication-strip small {
color: #8b95a6;
font-size: 11px;
}
/* =========================================================
COMMERCIAL
========================================================= */
.commercial-today-grid {
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr)
minmax(330px, .85fr);
gap: 13px;
margin-bottom: 20px;
}
.commercial-followup-list,
.commercial-project-alerts {
display: grid;
gap: 6px;
}
.commercial-followup-list > a,
.commercial-project-alerts > a {
display: flex;
min-height: 52px;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 10px;
border-radius: 8px;
background: #fafbfc;
color: inherit;
text-decoration: none;
}
.commercial-followup-list > a:hover,
.commercial-project-alerts > a:hover {
background: #f5f7ff;
}
.commercial-followup-list > a.late {
background: #fff7f8;
}
.commercial-followup-list strong,
.commercial-followup-list small,
.commercial-project-alerts strong,
.commercial-project-alerts small {
display: block;
}
.commercial-followup-list strong,
.commercial-project-alerts strong {
color: #3f4b61;
font-size: 13px;
}
.commercial-followup-list small,
.commercial-project-alerts small {
margin-top: 2px;
color: #8a94a5;
font-size: 11px;
}
.commercial-followup-list time {
color: #687489;
font-size: 11px;
font-weight: 700;
white-space: nowrap;
}
.commercial-project-alerts b {
color: #a96a15;
font-size: 11px;
text-align: right;
}
.commercial-project-alerts a.danger b {
color: #c6414d;
}
.commercial-sales-flow {
grid-template-columns: repeat(7, minmax(130px, 1fr));
}
/* =========================================================
DÉVELOPPEUR
========================================================= */
.developer-main-grid {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(350px, .7fr);
gap: 13px;
margin-bottom: 18px;
}
.developer-project-list,
.developer-task-list {
display: grid;
gap: 7px;
}
.developer-project-row {
display: grid;
grid-template-columns:
135px
minmax(0, 1fr)
120px
92px;
gap: 11px;
align-items: center;
min-height: 65px;
padding: 10px 11px;
border: 1px solid #e8ecf2;
border-radius: 9px;
background: #fafbfc;
color: inherit;
text-decoration: none;
}
.developer-project-row:hover {
border-color: #d7deea;
background: #f7f9fd;
}
.developer-project-row.late {
border-color: #efcfd4;
background: #fff8f9;
}
.developer-project-status {
display: flex;
align-items: center;
gap: 6px;
color: #667287;
font-size: 11px;
font-weight: 700;
}
.developer-project-status i {
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: var(--dev-status-color);
}
.developer-project-main {
min-width: 0;
}
.developer-project-main strong,
.developer-project-main small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.developer-project-main strong {
color: #344056;
font-size: 13px;
}
.developer-project-main small {
margin-top: 2px;
color: #8b95a5;
font-size: 11px;
}
.developer-project-progress > strong {
display: block;
margin-bottom: 5px;
color: #4b576d;
font-size: 12px;
text-align: right;
}
.developer-project-progress > i {
display: block;
height: 6px;
overflow: hidden;
border-radius: 999px;
background: #e9edf3;
}
.developer-project-progress > i > b {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #516adf, #55a4e9);
}
.developer-project-row time {
color: #687489;
font-size: 11px;
font-weight: 650;
text-align: right;
}
.developer-task-count {
display: inline-flex;
min-width: 28px;
height: 28px;
align-items: center;
justify-content: center;
border-radius: 8px;
background: #edf1ff;
color: #5067d5;
font-size: 12px;
font-weight: 800;
}
.developer-task-row {
display: grid;
grid-template-columns: 8px minmax(0, 1fr);
gap: 9px;
align-items: start;
padding: 10px;
border-radius: 8px;
background: #fafbfc;
}
.developer-task-row.late {
background: #fff7f8;
}
.developer-task-priority {
width: 8px;
height: 8px;
margin-top: 5px;
border-radius: 50%;
background: #94a0b3;
}
.developer-task-priority.priority-high {
background: #e39a31;
}
.developer-task-priority.priority-urgent {
background: #d94653;
}
.developer-task-row strong,
.developer-task-row small {
display: block;
}
.developer-task-row strong {
color: #3d4960;
font-size: 13px;
}
.developer-task-row small {
margin-top: 2px;
color: #8b95a5;
font-size: 11px;
}
/* Developer role badge */
.role-pill.developpeur,
.role-pill.developer {
background: #eef4ff;
color: #3568c8;
}
/* Responsive */
@media (max-width: 1350px) {
.role-dashboard-kpis {
grid-template-columns: repeat(3, minmax(180px, 1fr));
}
.commercial-today-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.commercial-today-grid > :last-child {
grid-column: span 2;
}
}
@media (max-width: 1050px) {
.developer-main-grid {
grid-template-columns: 1fr;
}
.developer-project-row {
grid-template-columns: 120px minmax(0, 1fr) 100px;
}
.developer-project-row time {
grid-column: 2 / -1;
text-align: left;
}
}
@media (max-width: 760px) {
.role-dashboard-kpis,
.role-communication-strip,
.commercial-today-grid {
grid-template-columns: 1fr;
}
.commercial-today-grid > :last-child {
grid-column: auto;
}
.developer-project-row {
grid-template-columns: 1fr;
gap: 7px;
}
.developer-project-progress > strong,
.developer-project-row time {
text-align: left;
}
.developer-project-row time {
grid-column: auto;
}
}
/* =========================================================
ICEKOM — LAYOUT ADAPTÉ AUX RÔLES
========================================================= */
.app-content-column {
display: flex;
flex: 1;
min-width: 0;
min-height: 100vh;
flex-direction: column;
}
.sidebar-menu-label {
display: block;
margin: 17px 10px 6px;
padding: 0 2px;
color: #7082aa;
font-size: 10px;
font-weight: 800;
line-height: 1.2;
letter-spacing: .08em;
text-transform: uppercase;
}
.sidebar-nav > .sidebar-menu-label:first-of-type {
margin-top: 12px;
}
.sidebar-user {
display: flex;
align-items: center;
gap: 10px;
margin: 10px 10px 0;
padding: 11px;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 10px;
background: rgba(255, 255, 255, .035);
}
.sidebar-user-avatar,
.topbar-user-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
linear-gradient(
135deg,
#5d72e9,
#4aa5e9
);
color: #fff;
font-weight: 800;
}
.sidebar-user-avatar {
width: 38px;
height: 38px;
flex: 0 0 38px;
font-size: 12px;
}
.sidebar-user-info {
min-width: 0;
}
.sidebar-user-info > strong {
display: block;
overflow: hidden;
color: #f3f6ff;
font-size: 12px;
font-weight: 650;
text-overflow: ellipsis;
white-space: nowrap;
}
.sidebar-role-badge {
display: inline-flex;
margin-top: 4px;
padding: 3px 6px;
border-radius: 999px;
font-size: 9px;
font-weight: 750;
line-height: 1.1;
}
.sidebar-role-badge.role-admin {
background: rgba(119, 138, 255, .15);
color: #9ba9ff;
}
.sidebar-role-badge.role-developer {
background: rgba(70, 165, 234, .14);
color: #79c2f5;
}
.sidebar-role-badge.role-commercial {
background: rgba(65, 181, 123, .14);
color: #74d7a5;
}
/* TOPBAR */
.app-topbar {
justify-content: space-between;
}
.topbar-left {
display: flex;
min-width: 0;
align-items: center;
gap: 11px;
}
.topbar-page-context {
min-width: 0;
}
.topbar-page-context strong,
.topbar-page-context span {
display: block;
}
.topbar-page-context strong {
overflow: hidden;
color: #253047;
font-size: 14px;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.topbar-page-context span {
margin-top: 2px;
color: #8a94a5;
font-size: 11px;
}
.topbar-user {
display: flex;
min-height: 42px;
align-items: center;
gap: 8px;
padding: 4px 9px 4px 5px;
border: 1px solid #dce3ef;
border-radius: 11px;
background: #fff;
color: inherit;
text-decoration: none;
box-shadow:
0 4px 12px rgba(26, 41, 72, .05);
}
.topbar-user:hover {
background: #f8faff;
}
.topbar-user-avatar {
width: 32px;
height: 32px;
flex: 0 0 32px;
font-size: 10px;
}
.topbar-user-copy {
min-width: 0;
}
.topbar-user-copy strong,
.topbar-user-copy small {
display: block;
}
.topbar-user-copy strong {
max-width: 150px;
overflow: hidden;
color: #3b475d;
font-size: 12px;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.topbar-user-copy small {
margin-top: 1px;
color: #8a94a5;
font-size: 10px;
}
/* MOBILE BUTTONS */
.mobile-nav-toggle,
.sidebar-close {
appearance: none;
border: 0;
cursor: pointer;
}
.mobile-nav-toggle {
display: none;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
border: 1px solid #dce3ef;
border-radius: 10px;
background: #fff;
color: #4d596e;
font-size: 19px;
}
.sidebar-close {
display: none;
width: 34px;
height: 34px;
margin-left: auto;
align-items: center;
justify-content: center;
border-radius: 8px;
background: rgba(255, 255, 255, .07);
color: #fff;
font-size: 22px;
line-height: 1;
}
.sidebar-backdrop {
position: fixed;
inset: 0;
z-index: 8900;
border: 0;
background: rgba(10, 15, 30, .48);
cursor: pointer;
}
.sidebar-backdrop[hidden] {
display: none;
}
/* =========================================================
RESPONSIVE LAYOUT
========================================================= */
@media (max-width: 900px) {
.topbar-user-copy {
display: none;
}
.topbar-user {
padding: 4px;
}
}
@media (max-width: 760px) {
body.sidebar-open {
overflow: hidden;
}
.app-shell {
display: block;
}
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 9000;
width: min(300px, 88vw);
min-width: 0;
height: 100dvh;
transform: translateX(-102%);
box-shadow:
20px 0 60px rgba(7, 12, 30, .25);
transition:
transform .2s ease;
}
body.sidebar-open .sidebar {
transform: translateX(0);
}
.sidebar-nav {
display: flex;
grid-template-columns: none;
flex-direction: column;
}
.sidebar-section {
margin-top: auto;
}
.sidebar-close,
.mobile-nav-toggle {
display: inline-flex;
}
.app-content-column {
width: 100%;
min-height: 100vh;
}
.app-topbar {
min-height: 62px;
padding: 9px 12px;
}
.topbar-page-context span {
display: none;
}
.app-topbar-actions {
gap: 6px;
}
.topbar-chat-link,
.notification-bell {
width: 40px;
height: 40px;
}
.notification-dropdown {
position: fixed;
top: 70px;
right: 10px;
left: 10px;
width: auto;
max-width: none;
}
.main-content {
padding: 18px 13px;
}
}
@media (max-width: 430px) {
.topbar-page-context strong {
max-width: 110px;
font-size: 12px;
}
.topbar-user {
display: none;
}
.app-topbar-actions {
margin-left: auto;
}
}
/* =========================================================
ICEKOM — LAYOUT PREMIUM V2
========================================================= */
:root {
--sidebar-width: 248px;
}
body.app-body {
background:
radial-gradient(
circle at 82% -10%,
rgba(79, 103, 223, .06),
transparent 28%
),
#f5f7fb;
}
.sidebar {
width: var(--sidebar-width);
min-width: var(--sidebar-width);
border-right: 1px solid rgba(255,255,255,.05);
background:
radial-gradient(
circle at 20% 0%,
rgba(77, 105, 217, .24),
transparent 28%
),
linear-gradient(
180deg,
#111936 0%,
#0d132b 48%,
#090e20 100%
);
box-shadow:
10px 0 35px rgba(13, 20, 44, .08);
}
.sidebar-logo {
min-height: 78px;
padding: 0 20px;
border-bottom: 1px solid rgba(255,255,255,.06);
font-size: 20px;
letter-spacing: .04em;
}
.sidebar-logo::after {
content: "CRM";
margin-left: 2px;
padding: 3px 6px;
border: 1px solid rgba(255,255,255,.10);
border-radius: 5px;
color: #8697bd;
font-size: 8px;
font-weight: 800;
letter-spacing: .08em;
}
.sidebar-nav {
gap: 3px;
padding: 13px 12px;
}
.sidebar-menu-label {
margin: 19px 11px 7px;
color: #7180a4;
font-size: 10px;
}
.nav-item {
position: relative;
min-height: 44px;
gap: 11px;
padding: 0 12px;
border: 1px solid transparent;
border-radius: 10px;
color: #aebad4;
font-size: 13px;
font-weight: 550;
}
.nav-item:hover {
border-color: rgba(255,255,255,.05);
background: rgba(255,255,255,.055);
}
.nav-item.active {
border-color: rgba(105, 128, 245, .16);
background:
linear-gradient(
135deg,
rgba(87, 111, 229, .25),
rgba(64, 144, 220, .15)
);
color: #fff;
box-shadow:
inset 3px 0 0 #6a80f2;
}
.nav-item.active::after {
content: "";
position: absolute;
right: 9px;
width: 5px;
height: 5px;
border-radius: 50%;
background: #7fa0ff;
box-shadow:
0 0 10px rgba(127,160,255,.75);
}
.nav-icon {
width: 22px;
min-width: 22px;
color: #8497c2;
font-size: 15px;
}
.nav-item.active .nav-icon {
color: #9eb1ff;
}
.sidebar-user {
margin: 12px;
padding: 12px;
border-color: rgba(255,255,255,.07);
background:
linear-gradient(
135deg,
rgba(255,255,255,.045),
rgba(255,255,255,.02)
);
}
.sidebar-user-avatar {
width: 40px;
height: 40px;
flex-basis: 40px;
box-shadow:
0 5px 16px rgba(63, 98, 214, .22);
}
.sidebar-footer {
padding: 0 12px 16px;
}
/* rôle = accent visuel */
body.role-admin {
--role-accent: #6379e8;
--role-accent-soft: #edf0ff;
}
body.role-commercial {
--role-accent: #27996a;
--role-accent-soft: #eaf8f1;
}
body.role-developer {
--role-accent: #288ec5;
--role-accent-soft: #e9f6fd;
}
/* TOPBAR PREMIUM */
.app-topbar {
min-height: 72px;
padding: 11px 22px;
border-bottom: 1px solid rgba(218, 225, 236, .86);
background: rgba(255,255,255,.89);
backdrop-filter:
blur(16px)
saturate(145%);
box-shadow:
0 4px 18px rgba(28, 42, 69, .025);
}
.topbar-page-context strong {
color: #202b41;
font-size: 15px;
}
.topbar-page-context span {
display: flex;
align-items: center;
gap: 5px;
color: #818c9e;
font-size: 11px;
}
.topbar-role-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--role-accent);
box-shadow:
0 0 0 3px var(--role-accent-soft);
}
.topbar-chat-link,
.notification-bell {
width: 43px;
height: 43px;
border-color: #e0e5ee;
background: #fff;
box-shadow:
0 4px 14px rgba(27,39,64,.05);
}
.topbar-chat-link:hover,
.notification-bell:hover {
border-color: color-mix(
in srgb,
var(--role-accent) 30%,
#e0e5ee
);
background: var(--role-accent-soft);
color: var(--role-accent);
}
.topbar-user {
min-height: 44px;
padding-right: 11px;
border-color: #e0e5ee;
box-shadow:
0 4px 14px rgba(27,39,64,.045);
}
.topbar-user-avatar {
background:
linear-gradient(
135deg,
var(--role-accent),
color-mix(
in srgb,
var(--role-accent) 60%,
#61b8ee
)
);
}
.main-content {
padding:
clamp(20px, 2.1vw, 36px)
clamp(20px, 2.3vw, 40px);
}
/* =========================================================
ADMIN — VUE DÉVELOPPEURS
========================================================= */
.developer-admin-kpis {
display: grid;
grid-template-columns:
repeat(6, minmax(150px, 1fr));
gap: 11px;
margin-bottom: 22px;
}
.developer-admin-kpis > article {
min-height: 112px;
padding: 15px 16px;
border: 1px solid #e1e7ef;
border-radius: 13px;
background: #fff;
box-shadow:
0 5px 17px rgba(31,44,68,.035);
}
.developer-admin-kpis span,
.developer-admin-kpis strong,
.developer-admin-kpis small {
display: block;
}
.developer-admin-kpis span {
color: #6e7b91;
font-size: 12px;
font-weight: 650;
}
.developer-admin-kpis strong {
margin: 8px 0 4px;
color: #29364b;
font-size: 26px;
line-height: 1;
}
.developer-admin-kpis small {
color: #8b96a7;
font-size: 11px;
}
.developer-admin-kpis .primary {
border-color: transparent;
background:
linear-gradient(
140deg,
#15304a,
#286d99
);
}
.developer-admin-kpis .primary span,
.developer-admin-kpis .primary small {
color: rgba(255,255,255,.73);
}
.developer-admin-kpis .primary strong {
color: #fff;
}
.developer-admin-kpis .danger {
border-color: #efd4d8;
background: #fff8f9;
}
.developer-admin-kpis .danger strong {
color: #c5414e;
}
.developer-team-grid {
display: grid;
grid-template-columns:
repeat(3, minmax(270px, 1fr));
gap: 12px;
}
.developer-team-card {
min-width: 0;
padding: 15px;
border: 1px solid #e0e6ef;
border-radius: 13px;
background: #fff;
box-shadow:
0 6px 20px rgba(29, 43, 67, .04);
}
.developer-team-card-head {
display: grid;
grid-template-columns:
42px
minmax(0,1fr)
auto;
gap: 9px;
align-items: center;
margin-bottom: 12px;
}
.developer-team-avatar {
display: inline-flex;
width: 42px;
height: 42px;
align-items: center;
justify-content: center;
border-radius: 11px;
background:
linear-gradient(
135deg,
#e8f5fd,
#edf1ff
);
color: #3478aa;
font-size: 14px;
font-weight: 800;
}
.developer-team-identity {
min-width: 0;
}
.developer-team-identity strong,
.developer-team-identity small {
display: block;
}
.developer-team-identity strong {
overflow: hidden;
color: #334056;
font-size: 13px;
text-overflow: ellipsis;
white-space: nowrap;
}
.developer-team-identity small {
display: flex;
align-items: center;
gap: 5px;
margin-top: 3px;
color: #8994a5;
font-size: 11px;
}
.developer-team-identity small i {
width: 7px;
height: 7px;
border-radius: 50%;
background: #b6beca;
}
.developer-team-identity small i.online {
background: #2cad75;
box-shadow:
0 0 0 3px #e7f8ef;
}
.developer-load-value {
padding: 5px 7px;
border-radius: 7px;
background: #edf4fb;
color: #3f769d;
font-size: 11px;
font-weight: 800;
}
.developer-load-value.high {
background: #fff0f2;
color: #c6414d;
}
.developer-load-track {
height: 7px;
overflow: hidden;
margin-bottom: 12px;
border-radius: 999px;
background: #ebeff4;
}
.developer-load-track span {
display: block;
height: 100%;
border-radius: inherit;
background:
linear-gradient(
90deg,
#3da2d3,
#5573df
);
}
.developer-team-metrics {
display: grid;
grid-template-columns:
repeat(4, minmax(0,1fr));
gap: 6px;
}
.developer-team-metrics > div {
padding: 8px 6px;
border-radius: 8px;
background: #f8fafc;
text-align: center;
}
.developer-team-metrics span,
.developer-team-metrics strong {
display: block;
}
.developer-team-metrics span {
color: #8893a5;
font-size: 10px;
}
.developer-team-metrics strong {
margin-top: 3px;
color: #39465b;
font-size: 15px;
}
.developer-team-progress {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #edf0f4;
}
.developer-team-progress span {
color: #7a869a;
font-size: 11px;
}
.developer-team-progress strong {
color: #397aa6;
font-size: 12px;
}
.developer-team-warnings {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 9px;
}
.developer-team-warnings span {
padding: 4px 6px;
border-radius: 6px;
background: #fff1f2;
color: #bd4651;
font-size: 10px;
font-weight: 650;
}
.developer-team-open {
display: flex;
min-height: 35px;
align-items: center;
justify-content: center;
margin-top: 11px;
border: 1px solid #d8e3ef;
border-radius: 8px;
background: #f8fbfe;
color: #3579a8;
font-size: 11px;
font-weight: 700;
text-decoration: none;
}
.developer-team-open:hover {
border-color: #bad5e6;
background: #edf7fd;
}
.developer-team-empty {
color: #8994a5;
font-size: 13px;
text-align: center;
}
/* plus de place pour 4 onglets admin */
.direction-view-controls {
flex-wrap: wrap;
}
.direction-view-tab {
min-width: 86px;
}
/* Responsive premium */
@media (max-width: 1500px) {
.developer-admin-kpis {
grid-template-columns:
repeat(3, minmax(180px,1fr));
}
.developer-team-grid {
grid-template-columns:
repeat(2, minmax(270px,1fr));
}
}
@media (max-width: 1050px) {
:root {
--sidebar-width: 230px;
}
.developer-team-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.sidebar {
width: min(310px, 90vw);
}
.app-topbar {
min-height: 64px;
padding: 9px 12px;
}
.developer-admin-kpis {
grid-template-columns:
repeat(2, minmax(150px,1fr));
}
.direction-view-controls {
grid-template-columns:
repeat(2, minmax(0,1fr));
}
}
@media (max-width: 520px) {
.developer-admin-kpis {
grid-template-columns: 1fr;
}
.developer-team-metrics {
grid-template-columns:
repeat(2, minmax(0,1fr));
}
.direction-view-controls {
grid-template-columns: 1fr;
}
}
/* =========================================================
ICEKOM — ALIGNEMENT SIDEBAR
Icône + libellé centrés verticalement dans chaque box.
========================================================= */
.sidebar .nav-item {
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
align-items: center;
min-height: 46px;
padding: 0 13px;
line-height: 1.2;
}
.sidebar .nav-item .nav-icon {
display: inline-flex;
width: 24px;
min-width: 24px;
height: 24px;
align-items: center;
justify-content: center;
align-self: center;
line-height: 1;
text-align: center;
}
.sidebar .nav-item > span:not(.nav-icon) {
display: flex;
min-width: 0;
height: 100%;
align-items: center;
align-self: stretch;
line-height: 1.2;
}
.sidebar .nav-item.logout {
grid-template-columns: 24px minmax(0, 1fr);
}
.sidebar .nav-item.active::after {
top: 50%;
transform: translateY(-50%);
}
/* =========================================================
ICEKOM — DEVIS / FACTURES
========================================================= */
.billing-page {
width: 100%;
max-width: 1800px;
margin: 0 auto;
}
.billing-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 20px;
padding: 22px 24px;
border: 1px solid #dfe5ef;
border-radius: 16px;
background:
radial-gradient(
circle at 92% 10%,
rgba(79, 103, 223, .11),
transparent 34%
),
#fff;
}
.billing-hero.compact {
padding: 19px 21px;
}
.billing-eyebrow {
display: block;
margin-bottom: 5px;
color: #5067d5;
font-size: 11px;
font-weight: 800;
letter-spacing: .07em;
text-transform: uppercase;
}
.billing-hero h1 {
margin: 0;
color: #182339;
font-size: clamp(27px, 2vw, 31px);
line-height: 1.15;
}
.billing-hero p {
margin: 7px 0 0;
color: #788397;
font-size: 14px;
}
.billing-hero-actions {
display: flex;
align-items: center;
gap: 8px;
}
.billing-finance-grid {
display: grid;
grid-template-columns:
repeat(6, minmax(150px, 1fr));
gap: 11px;
margin-bottom: 21px;
}
.billing-kpi {
min-height: 112px;
padding: 15px 16px;
border: 1px solid #e1e6ef;
border-radius: 13px;
background: #fff;
}
.billing-kpi > span,
.billing-kpi > strong,
.billing-kpi > small {
display: block;
}
.billing-kpi > span {
color: #6e7a8f;
font-size: 12px;
font-weight: 650;
}
.billing-kpi > strong {
margin: 8px 0 4px;
color: #29354a;
font-size: 25px;
line-height: 1;
}
.billing-kpi > small {
color: #8b95a6;
font-size: 11px;
}
.billing-kpi.primary {
border-color: transparent;
background:
linear-gradient(
140deg,
#1b294b,
#324987
);
}
.billing-kpi.primary > span,
.billing-kpi.primary > small {
color: rgba(255, 255, 255, .72);
}
.billing-kpi.primary > strong {
color: #fff;
}
.billing-kpi.success {
border-color: #d8eee3;
background: #f8fdfb;
}
.billing-kpi.success > strong {
color: #21835b;
}
.billing-kpi.warning {
border-color: #efdfbd;
background: #fffaf1;
}
.billing-kpi.warning > strong {
color: #aa6b15;
}
.billing-panel {
min-width: 0;
padding: 17px;
border: 1px solid #e1e6ef;
border-radius: 14px;
background: #fff;
box-shadow:
0 5px 18px rgba(29, 43, 67, .035);
}
.billing-panel > header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 13px;
}
.billing-panel > header span {
display: block;
color: #768296;
font-size: 10px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.billing-panel > header h3 {
margin: 3px 0 0;
color: #29354a;
font-size: 17px;
}
.billing-panel > header > span {
display: inline-flex;
min-width: 30px;
height: 30px;
align-items: center;
justify-content: center;
border-radius: 8px;
background: #edf1ff;
color: #5067d5;
font-size: 12px;
}
.billing-panel > header a {
color: #5067d5;
font-size: 12px;
font-weight: 700;
text-decoration: none;
}
.billing-section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
margin-bottom: 11px;
}
.billing-section-head span {
display: block;
color: #718097;
font-size: 11px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.billing-section-head h2 {
margin: 3px 0 0;
font-size: 20px;
}
.billing-section-head > small {
max-width: 600px;
color: #8994a5;
font-size: 12px;
text-align: right;
}
.billing-approval-zone {
margin-bottom: 21px;
}
.billing-approval-columns,
.billing-recent-grid,
.document-history-grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 12px;
}
.billing-recent-grid {
margin-top: 18px;
}
.approval-list,
.billing-mini-list,
.document-history {
display: grid;
gap: 6px;
}
.approval-list > a,
.billing-mini-list > a {
display: flex;
min-height: 55px;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 10px;
border: 1px solid #edf0f4;
border-radius: 9px;
background: #fafbfc;
color: inherit;
text-decoration: none;
}
.approval-list > a:hover,
.billing-mini-list > a:hover {
border-color: #dce3ef;
background: #f6f8fd;
}
.approval-list strong,
.approval-list small,
.billing-mini-list strong,
.billing-mini-list small {
display: block;
}
.approval-list strong,
.billing-mini-list strong {
color: #3b475c;
font-size: 13px;
}
.approval-list small,
.billing-mini-list small {
margin-top: 2px;
color: #8b95a5;
font-size: 11px;
}
.approval-list b,
.billing-mini-list b {
color: #354157;
font-size: 13px;
white-space: nowrap;
}
.billing-empty {
padding: 28px 10px;
color: #8994a5;
font-size: 13px;
text-align: center;
}
/* filters / table */
.billing-filters {
display: grid;
grid-template-columns:
minmax(250px, 1fr)
220px
auto;
gap: 8px;
margin-bottom: 12px;
padding: 11px;
border: 1px solid #e2e7ef;
border-radius: 12px;
background: #fff;
}
.billing-filters .input {
margin: 0;
}
.billing-table-wrap {
overflow-x: auto;
border: 1px solid #e1e6ef;
border-radius: 13px;
background: #fff;
}
.billing-table-wrap.flat {
border: 0;
border-radius: 0;
}
.billing-table {
width: 100%;
border-collapse: collapse;
}
.billing-table th {
padding: 11px 12px;
border-bottom: 1px solid #e6eaf1;
background: #fafbfc;
color: #6e7a8f;
font-size: 11px;
font-weight: 750;
text-align: left;
text-transform: uppercase;
white-space: nowrap;
}
.billing-table td {
padding: 12px;
border-bottom: 1px solid #edf0f4;
color: #4b576c;
font-size: 13px;
}
.billing-table tbody tr:last-child td {
border-bottom: 0;
}
.billing-table tbody tr[data-href] {
cursor: pointer;
}
.billing-table tbody tr[data-href]:hover {
background: #f8faff;
}
.billing-table .text-right,
.text-right {
text-align: right;
}
.billing-pagination {
display: flex;
justify-content: center;
gap: 4px;
margin-top: 14px;
}
.billing-pagination a,
.billing-pagination .current {
display: inline-flex;
min-width: 34px;
height: 34px;
align-items: center;
justify-content: center;
border: 1px solid #dfe5ee;
border-radius: 8px;
background: #fff;
color: #566277;
font-size: 12px;
text-decoration: none;
}
.billing-pagination .current {
border-color: #5067d5;
background: #5067d5;
color: #fff;
}
/* status */
.document-status {
display: inline-flex;
min-height: 28px;
align-items: center;
padding: 0 8px;
border-radius: 999px;
background: #eef1f5;
color: #667287;
font-size: 10px;
font-weight: 750;
}
.document-status.large {
min-height: 34px;
padding: 0 10px;
font-size: 11px;
}
.document-status.status-pending_approval {
background: #fff4df;
color: #a76a17;
}
.document-status.status-approved,
.document-status.status-accepted,
.document-status.status-paid {
background: #e9f8f0;
color: #248059;
}
.document-status.status-rejected,
.document-status.status-refused,
.document-status.status-overdue,
.document-status.status-cancelled {
background: #fff0f2;
color: #bf414d;
}
.document-status.status-sent,
.document-status.status-partially_paid {
background: #edf2ff;
color: #4d66cf;
}
/* editor */
.document-form-section {
margin-bottom: 13px;
}
.document-form-grid {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 12px;
}
.document-form-grid.two {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.document-form-grid .input,
.payment-form .input {
margin: 0;
}
.document-help {
margin: 10px 0 0;
color: #8b95a5;
font-size: 11px;
}
.document-lines {
display: grid;
gap: 8px;
}
.document-line {
position: relative;
display: grid;
grid-template-columns:
minmax(260px, 2.4fr)
80px
120px
90px
90px
125px
34px;
gap: 7px;
align-items: end;
padding: 10px;
border: 1px solid #e6eaf1;
border-radius: 10px;
background: #fafbfc;
}
.document-line > div {
min-width: 0;
}
.document-line label {
display: block;
margin-bottom: 5px;
color: #69758a;
font-size: 10px;
font-weight: 700;
}
.document-line textarea,
.document-line input {
width: 100%;
border: 1px solid #dce2ec;
border-radius: 8px;
background: #fff;
font-size: 12px;
}
.document-line textarea {
min-height: 45px;
padding: 8px;
}
.document-line input {
min-height: 42px;
padding: 0 8px;
}
.document-line-total {
padding-bottom: 10px;
text-align: right;
}
.document-line-total strong {
color: #334056;
font-size: 12px;
white-space: nowrap;
}
.document-line-remove {
display: inline-flex;
width: 32px;
height: 32px;
align-items: center;
justify-content: center;
margin-bottom: 5px;
border: 1px solid #edcfd3;
border-radius: 7px;
background: #fff5f6;
color: #c6424e;
font-size: 18px;
cursor: pointer;
}
.document-live-totals {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 12px;
}
.document-live-totals > div {
min-width: 145px;
padding: 10px 12px;
border: 1px solid #e5e9f0;
border-radius: 9px;
background: #fafbfc;
}
.document-live-totals span,
.document-live-totals strong {
display: block;
text-align: right;
}
.document-live-totals span {
color: #7c8799;
font-size: 10px;
}
.document-live-totals strong {
margin-top: 3px;
color: #364257;
font-size: 14px;
}
.document-live-totals .grand-total {
border-color: #d5defb;
background: #f5f7ff;
}
.document-live-totals .grand-total strong {
color: #5067d5;
font-size: 17px;
}
.document-editor-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 15px;
}
/* view */
.document-decision-banner {
margin-bottom: 13px;
padding: 13px 15px;
border: 1px solid #dfe5ee;
border-radius: 11px;
background: #fafbfc;
}
.document-decision-banner strong {
display: block;
font-size: 13px;
}
.document-decision-banner p {
margin: 4px 0 0;
font-size: 12px;
}
.document-decision-banner.pending {
border-color: #f0ddb7;
background: #fffaf0;
color: #986115;
}
.document-decision-banner.approved {
border-color: #d3eadf;
background: #f5fcf8;
color: #257b58;
}
.document-decision-banner.rejected {
border-color: #efd1d6;
background: #fff7f8;
color: #b8404b;
}
.document-view-grid {
display: grid;
grid-template-columns:
minmax(0, 1.4fr)
minmax(320px, .6fr);
gap: 12px;
margin-bottom: 13px;
}
.document-details {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 0;
}
.document-details > div {
padding: 9px;
border-radius: 8px;
background: #fafbfc;
}
.document-details dt {
color: #8994a5;
font-size: 10px;
}
.document-details dd {
margin: 3px 0 0;
color: #3e4a60;
font-size: 12px;
font-weight: 650;
}
.document-action-stack {
display: grid;
gap: 8px;
}
.full {
width: 100%;
}
.btn-success {
display: inline-flex;
min-height: 42px;
align-items: center;
justify-content: center;
padding: 0 15px;
border: 1px solid #25865e;
border-radius: 9px;
background: #25865e;
color: #fff;
font-family: inherit;
font-size: 13px;
font-weight: 650;
text-decoration: none;
cursor: pointer;
}
.btn-success:hover {
background: #1f7451;
}
.document-reject-form {
display: grid;
gap: 7px;
padding-top: 8px;
border-top: 1px solid #edf0f4;
}
.document-reject-form .input {
margin: 0;
}
.document-lines-view {
margin-bottom: 13px;
}
.document-totals-view {
display: grid;
width: min(430px, 100%);
gap: 4px;
margin: 12px 0 0 auto;
}
.document-totals-view > div {
display: flex;
justify-content: space-between;
gap: 20px;
padding: 7px 8px;
color: #69758a;
font-size: 12px;
}
.document-totals-view .grand {
margin-top: 4px;
border-top: 2px solid #5067d5;
color: #273349;
font-size: 15px;
}
.document-history-grid {
margin-bottom: 15px;
}
.document-history-row {
display: grid;
grid-template-columns:
10px
minmax(0, 1fr);
gap: 9px;
padding: 8px 0;
border-bottom: 1px solid #edf0f4;
}
.document-history-row:last-child {
border-bottom: 0;
}
.history-dot {
width: 8px;
height: 8px;
margin-top: 5px;
border-radius: 50%;
background: #9aa4b3;
}
.history-dot.status-approved,
.history-dot.success {
background: #2b9a69;
}
.history-dot.status-rejected,
.history-dot.failed {
background: #cf4652;
}
.history-dot.status-pending {
background: #d6922f;
}
.document-history-row strong,
.document-history-row small {
display: block;
}
.document-history-row strong {
color: #3d4960;
font-size: 12px;
}
.document-history-row small {
margin-top: 2px;
color: #8c96a6;
font-size: 10px;
}
.document-history-row p {
margin: 5px 0 0;
color: #657186;
font-size: 11px;
}
.invoice-view-kpis {
grid-template-columns:
repeat(3, minmax(180px, 1fr));
}
.payment-panel {
margin-bottom: 13px;
}
.payment-form {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr))
auto;
gap: 8px;
align-items: end;
}
/* responsive */
@media (max-width: 1450px) {
.billing-finance-grid {
grid-template-columns:
repeat(3, minmax(170px, 1fr));
}
.document-line {
grid-template-columns:
minmax(240px, 2fr)
repeat(4, 90px)
110px
34px;
}
}
@media (max-width: 1150px) {
.document-form-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.document-view-grid {
grid-template-columns: 1fr;
}
.document-line {
grid-template-columns:
repeat(4, minmax(100px, 1fr));
}
.document-line-description {
grid-column: 1 / -1;
}
.document-line-total {
text-align: left;
}
.payment-form {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.billing-hero,
.billing-section-head {
align-items: flex-start;
flex-direction: column;
}
.billing-hero-actions {
width: 100%;
flex-wrap: wrap;
}
.billing-finance-grid,
.invoice-view-kpis,
.billing-approval-columns,
.billing-recent-grid,
.document-history-grid,
.document-form-grid,
.document-form-grid.two,
.payment-form {
grid-template-columns: 1fr;
}
.billing-section-head > small {
text-align: left;
}
.billing-filters {
grid-template-columns: 1fr;
}
.document-line {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.document-line-description {
grid-column: 1 / -1;
}
.document-line-remove {
position: absolute;
top: 7px;
right: 7px;
}
.document-live-totals {
display: grid;
grid-template-columns: 1fr;
}
.document-live-totals > div {
min-width: 0;
}
.document-details {
grid-template-columns: 1fr;
}
.document-editor-actions {
align-items: stretch;
flex-direction: column-reverse;
}
.document-editor-actions > * {
width: 100%;
}
}
/* =========================================================
BILLING V2 — MICRO SANS TVA / DEVIS -> FACTURE
========================================================= */
.no-vat-inline,
.no-vat-panel {
margin-top: 14px;
padding: 12px 14px;
border: 1px solid #cfe7da;
border-radius: 10px;
background: #f5fbf8;
}
.no-vat-inline strong,
.no-vat-panel strong {
color: #287451;
font-size: 13px;
}
.no-vat-inline span,
.no-vat-panel p {
margin-left: 6px;
color: #668172;
font-size: 12px;
}
.no-vat-panel p {
margin: 5px 0 0;
}
.no-vat-lines .document-line {
grid-template-columns:
minmax(260px, 1.7fr)
80px
130px
105px
130px
38px;
}
.no-vat-total {
justify-content: flex-end;
}
.no-vat-total .grand-total {
min-width: 250px;
}
.direction-kpi-text {
font-size: 18px !important;
line-height: 1.2 !important;
}
.company-settings-page {
max-width: 1350px;
margin: 0 auto;
}
.billing-source-quote {
padding: 12px 14px;
border: 1px solid #dce4f1;
border-radius: 10px;
background: #f8faff;
}
@media (max-width: 1050px) {
.no-vat-lines .document-line {
grid-template-columns:
minmax(220px, 1fr)
75px
120px
100px
120px
38px;
}
}
@media (max-width: 760px) {
.no-vat-lines .document-line {
grid-template-columns: 1fr;
}
.no-vat-inline span {
display: block;
margin: 4px 0 0;
}
}
/* =========================================================
ICEKOM — PAGE STATISTIQUES
========================================================= */
.statistics-page {
width: 100%;
max-width: 1800px;
margin: 0 auto;
}
.statistics-hero {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 22px;
margin-bottom: 20px;
padding: 22px 24px;
border: 1px solid #dfe5ef;
border-radius: 16px;
background:
radial-gradient(
circle at 91% 10%,
color-mix(
in srgb,
var(--role-accent, #6379e8) 11%,
transparent
),
transparent 32%
),
#fff;
}
.statistics-eyebrow {
display: block;
margin-bottom: 5px;
color: var(--role-accent, #586fdc);
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.statistics-hero h1 {
margin: 0;
color: #1d2940;
font-size: 30px;
line-height: 1.15;
}
.statistics-hero p {
margin: 7px 0 0;
color: #7a8699;
font-size: 13px;
}
.statistics-filter {
display: flex;
align-items: flex-end;
justify-content: flex-end;
flex-wrap: wrap;
gap: 8px;
}
.statistics-filter label {
display: grid;
gap: 5px;
}
.statistics-filter label > span {
color: #7a8698;
font-size: 10px;
font-weight: 750;
letter-spacing: .04em;
text-transform: uppercase;
}
.statistics-filter select,
.statistics-filter input {
min-width: 150px;
min-height: 40px;
padding: 0 10px;
border: 1px solid #dce3ed;
border-radius: 8px;
background: #fff;
color: #3e4b61;
font-size: 12px;
}
.statistics-custom-dates {
display: flex;
align-items: flex-end;
gap: 8px;
}
.statistics-custom-dates[hidden] {
display: none;
}
.statistics-kpi-grid {
display: grid;
grid-template-columns: repeat(6, minmax(150px, 1fr));
gap: 11px;
margin-bottom: 18px;
}
.statistics-kpi {
min-height: 118px;
padding: 16px 17px;
border: 1px solid #e0e6ef;
border-radius: 13px;
background: #fff;
box-shadow: 0 5px 18px rgba(29, 43, 68, .035);
}
.statistics-kpi > span,
.statistics-kpi > strong,
.statistics-kpi > small {
display: block;
}
.statistics-kpi > span {
color: #6e7b90;
font-size: 12px;
font-weight: 650;
}
.statistics-kpi > strong {
margin: 8px 0 6px;
color: #2b374c;
font-size: 26px;
line-height: 1;
}
.statistics-kpi > small {
color: #8994a5;
font-size: 11px;
}
.statistics-kpi.primary {
border-color: transparent;
background: linear-gradient(140deg, #1a294b, #344e8f);
}
.statistics-kpi.primary > span,
.statistics-kpi.primary > small {
color: rgba(255,255,255,.73);
}
.statistics-kpi.primary > strong {
color: #fff;
}
.statistics-kpi.success {
border-color: #d7eee2;
background: #f7fcf9;
}
.statistics-kpi.success > strong {
color: #21835b;
}
.statistics-kpi.danger {
border-color: #efd5d9;
background: #fff8f9;
}
.statistics-kpi.danger > strong {
color: #c6414d;
}
.statistics-kpi small.positive {
color: #21835b;
}
.statistics-kpi small.negative {
color: #c6414d;
}
.statistics-kpi small.neutral {
color: #8994a5;
}
.statistics-panel {
min-width: 0;
margin-bottom: 16px;
padding: 18px;
border: 1px solid #e1e7ef;
border-radius: 14px;
background: #fff;
box-shadow: 0 5px 20px rgba(29,43,67,.035);
}
.statistics-panel-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 15px;
margin-bottom: 15px;
}
.statistics-panel-head > div > span {
display: block;
margin-bottom: 3px;
color: #7b8798;
font-size: 10px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.statistics-panel-head h2 {
margin: 0;
color: #27344a;
font-size: 18px;
}
.statistics-grid-main {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(330px, .7fr);
gap: 14px;
}
.statistics-grid-two {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.statistics-chart-panel {
overflow: hidden;
}
.statistics-legend {
display: flex;
align-items: center;
gap: 13px;
}
.statistics-legend span {
display: flex;
align-items: center;
gap: 5px;
color: #778397;
font-size: 11px;
}
.statistics-legend i {
width: 9px;
height: 9px;
border-radius: 3px;
}
.statistics-legend i.billed,
.statistics-bar.billed {
background: #526add;
}
.statistics-legend i.collected,
.statistics-bar.collected {
background: #32a673;
}
.statistics-legend i.projects,
.statistics-bar.projects {
background: #318fc4;
}
.statistics-legend i.tasks,
.statistics-bar.tasks {
background: #586fdf;
}
.statistics-bar-chart {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
gap: 8px;
min-height: 260px;
padding: 16px 4px 0;
border-bottom: 1px solid #e8ecf2;
}
.statistics-bar-group {
display: grid;
grid-template-rows: 220px auto;
min-width: 0;
}
.statistics-bars {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 5px;
height: 220px;
}
.statistics-bar {
display: block;
width: min(20px, 35%);
min-height: 2px;
height: var(--bar-height);
border-radius: 5px 5px 2px 2px;
transition: height .2s ease, opacity .15s ease;
}
.statistics-bar:hover {
opacity: .78;
}
.statistics-bar-group > small {
display: block;
overflow: hidden;
padding-top: 7px;
color: #8994a5;
font-size: 9px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
.statistics-metric-list {
display: grid;
gap: 7px;
}
.statistics-metric-list > div {
display: flex;
min-height: 48px;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 9px 10px;
border-radius: 8px;
background: #fafbfc;
}
.statistics-metric-list span {
color: #6e7a8e;
font-size: 12px;
}
.statistics-metric-list strong {
color: #354157;
font-size: 14px;
}
.statistics-progress-list {
display: grid;
gap: 11px;
}
.statistics-progress-list > div > header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 5px;
}
.statistics-progress-list header span {
color: #657186;
font-size: 12px;
}
.statistics-progress-list header strong {
color: #374359;
font-size: 12px;
}
.statistics-progress-list > div > i {
display: block;
height: 7px;
overflow: hidden;
border-radius: 999px;
background: #edf0f4;
}
.statistics-progress-list > div > i > b {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #546bdd, #52a5e0);
}
.statistics-status-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
gap: 8px;
}
.statistics-status-grid > div {
min-width: 0;
padding: 11px;
border: 1px solid #e8ecf2;
border-radius: 9px;
background:
color-mix(
in srgb,
var(--status-color) 4%,
white
);
}
.statistics-status-grid > div > span,
.statistics-status-grid > div > strong,
.statistics-status-grid > div > small {
display: block;
}
.statistics-status-grid > div > span {
overflow: hidden;
color: #687489;
font-size: 10px;
font-weight: 650;
text-overflow: ellipsis;
white-space: nowrap;
}
.statistics-status-grid > div > span > i {
display: inline-block;
width: 7px;
height: 7px;
margin-right: 5px;
border-radius: 50%;
background: var(--status-color);
}
.statistics-status-grid > div > strong {
margin: 7px 0 3px;
color: #303c51;
font-size: 20px;
}
.statistics-status-grid > div > small {
color: #8994a5;
font-size: 10px;
}
.statistics-ranking {
display: grid;
gap: 5px;
}
.statistics-ranking > a {
display: grid;
grid-template-columns: 32px minmax(0,1fr) auto;
gap: 9px;
align-items: center;
min-height: 51px;
padding: 7px 8px;
border-radius: 8px;
color: inherit;
text-decoration: none;
}
.statistics-ranking > a:hover {
background: #f7f9fd;
}
.statistics-rank {
display: inline-flex;
width: 30px;
height: 30px;
align-items: center;
justify-content: center;
border-radius: 8px;
background: #edf1ff;
color: #5067d5;
font-size: 11px;
font-weight: 800;
}
.statistics-ranking > a > span:nth-child(2) {
min-width: 0;
}
.statistics-ranking strong,
.statistics-ranking small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.statistics-ranking strong {
color: #3a465c;
font-size: 12px;
}
.statistics-ranking small {
margin-top: 2px;
color: #8b95a6;
font-size: 10px;
}
.statistics-ranking b {
color: #2d394f;
font-size: 12px;
}
.statistics-table-wrap {
overflow-x: auto;
}
.statistics-table {
width: 100%;
border-collapse: collapse;
}
.statistics-table th {
padding: 9px 10px;
border-bottom: 1px solid #e6eaf1;
color: #798598;
font-size: 10px;
font-weight: 750;
text-align: left;
text-transform: uppercase;
white-space: nowrap;
}
.statistics-table td {
padding: 10px;
border-bottom: 1px solid #edf0f4;
color: #536076;
font-size: 12px;
white-space: nowrap;
}
.statistics-table tbody tr:last-child td {
border-bottom: 0;
}
.statistics-table td strong {
color: #374359;
}
.statistics-table-link,
.statistics-card-link {
color: #5067d5;
font-size: 11px;
font-weight: 700;
text-decoration: none;
}
.statistics-developer-grid {
display: grid;
grid-template-columns: repeat(3, minmax(230px, 1fr));
gap: 10px;
}
.statistics-developer-grid > article {
padding: 13px;
border: 1px solid #e4e9f0;
border-radius: 10px;
background: #fafbfc;
}
.statistics-developer-grid > article > header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.statistics-developer-grid header strong {
color: #3a465c;
font-size: 12px;
}
.statistics-developer-grid header span {
color: #3b7da7;
font-size: 11px;
font-weight: 800;
}
.statistics-mini-progress {
height: 6px;
overflow: hidden;
margin: 8px 0 10px;
border-radius: 999px;
background: #e8edf2;
}
.statistics-mini-progress i {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #3ca2d2, #576fdf);
}
.statistics-dev-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 5px;
margin-bottom: 9px;
}
.statistics-dev-metrics span {
display: grid;
gap: 2px;
padding: 6px;
border-radius: 7px;
background: #fff;
color: #8792a3;
font-size: 9px;
text-align: center;
}
.statistics-dev-metrics b {
color: #3b475d;
font-size: 13px;
}
.statistics-empty {
padding: 28px 10px;
color: #8b95a6;
font-size: 12px;
text-align: center;
}
.danger-text {
color: #c6414d !important;
}
@media (max-width: 1500px) {
.statistics-kpi-grid {
grid-template-columns: repeat(3, minmax(180px, 1fr));
}
.statistics-developer-grid {
grid-template-columns: repeat(2, minmax(230px, 1fr));
}
}
@media (max-width: 1100px) {
.statistics-hero {
flex-direction: column;
}
.statistics-filter {
width: 100%;
justify-content: flex-start;
}
.statistics-grid-main,
.statistics-grid-two {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.statistics-hero {
padding: 18px;
}
.statistics-filter,
.statistics-custom-dates {
display: grid;
width: 100%;
grid-template-columns: 1fr;
}
.statistics-filter label,
.statistics-filter select,
.statistics-filter input,
.statistics-filter button {
width: 100%;
}
.statistics-kpi-grid,
.statistics-developer-grid {
grid-template-columns: 1fr;
}
.statistics-bar-chart {
min-width: 620px;
}
.statistics-chart-panel {
overflow-x: auto;
}
}
/* =========================================================
ICEKOM — MULTI-RÔLES / ÉQUIPE TECHNIQUE
========================================================= */
body.role-multi {
--role-accent: #526fda;
--role-accent-soft: #edf1ff;
}
.multi-role-badges {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.multi-role-badge {
display: inline-flex;
min-height: 25px;
align-items: center;
padding: 0 8px;
border-radius: 999px;
background: #eef2f8;
color: #536178;
font-size: 10px;
font-weight: 750;
}
.multi-role-badge.role-administrateur {
background: #eef0ff;
color: #5869ce;
}
.multi-role-badge.role-commercial {
background: #eaf8f1;
color: #25855e;
}
.multi-role-badge.role-developpeur {
background: #e9f5fc;
color: #287ca9;
}
.role-selection-grid,
.developer-assignment-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
}
.role-selection-card,
.developer-assignment-card {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 13px;
border: 1px solid #dfe5ee;
border-radius: 10px;
background: #fff;
cursor: pointer;
}
.role-selection-card:has(input:checked),
.developer-assignment-card:has(input:checked) {
border-color: #98a9ed;
background: #f5f7ff;
box-shadow: 0 0 0 3px rgba(86, 108, 220, .06);
}
.role-selection-card input,
.developer-assignment-card input {
width: 17px;
height: 17px;
margin-top: 1px;
accent-color: #566cda;
}
.role-selection-card strong,
.role-selection-card small,
.developer-assignment-card strong,
.developer-assignment-card small {
display: block;
}
.role-selection-card strong,
.developer-assignment-card strong {
color: #39465c;
font-size: 13px;
}
.role-selection-card small,
.developer-assignment-card small {
margin-top: 3px;
color: #8490a2;
font-size: 11px;
line-height: 1.4;
}
.form-help {
margin: 10px 0 0;
color: #8490a2;
font-size: 11px;
}
.developer-assignment-box {
margin-top: 14px;
padding: 14px;
border: 1px solid #e1e6ef;
border-radius: 11px;
background: #fafbfc;
}
.developer-assignment-box > header {
margin-bottom: 10px;
}
.developer-assignment-box > header strong,
.developer-assignment-box > header span {
display: block;
}
.developer-assignment-box > header strong {
color: #354258;
font-size: 13px;
}
.developer-assignment-box > header span {
margin-top: 2px;
color: #8994a5;
font-size: 11px;
}
.role-dashboard-switch {
margin-left: auto;
}
.admin-stat-grid {
display: grid;
grid-template-columns: repeat(5, minmax(130px, 1fr));
gap: 10px;
margin-bottom: 16px;
}
.admin-stat-grid > article {
padding: 13px 14px;
border: 1px solid #e1e6ef;
border-radius: 11px;
background: #fff;
}
.admin-stat-grid span,
.admin-stat-grid strong {
display: block;
}
.admin-stat-grid span {
color: #7d899b;
font-size: 11px;
}
.admin-stat-grid strong {
margin-top: 5px;
color: #344157;
font-size: 22px;
}
.admin-users-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
.admin-users-filters input,
.admin-users-filters select {
min-height: 41px;
padding: 0 10px;
border: 1px solid #dfe5ee;
border-radius: 8px;
background: #fff;
font-size: 12px;
}
.account-status {
display: inline-flex;
min-height: 25px;
align-items: center;
padding: 0 7px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
}
.account-status.active {
background: #eaf8f1;
color: #25855e;
}
.account-status.inactive {
background: #fff0f2;
color: #bf4651;
}
@media (max-width: 1100px) {
.role-selection-grid,
.developer-assignment-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-stat-grid {
grid-template-columns: repeat(3, minmax(130px, 1fr));
}
}
@media (max-width: 700px) {
.role-selection-grid,
.developer-assignment-grid,
.admin-stat-grid {
grid-template-columns: 1fr;
}
.admin-users-filters {
display: grid;
grid-template-columns: 1fr;
}
.admin-users-filters > * {
width: 100%;
}
}
/* =========================================================
ICEKOM — COMMISSIONS COMMERCIALES
========================================================= */
.commissions-page {
width: 100%;
max-width: 1800px;
margin: 0 auto;
}
.commission-hero {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 22px;
margin-bottom: 18px;
padding: 22px 24px;
border: 1px solid #dfe5ef;
border-radius: 16px;
background:
radial-gradient(
circle at 92% 8%,
rgba(72, 101, 205, .10),
transparent 34%
),
#fff;
}
.commission-eyebrow {
display: block;
margin-bottom: 5px;
color: #586ed6;
font-size: 11px;
font-weight: 800;
letter-spacing: .07em;
text-transform: uppercase;
}
.commission-hero h1 {
margin: 0;
color: #202d44;
font-size: 29px;
line-height: 1.15;
}
.commission-hero p {
max-width: 760px;
margin: 7px 0 0;
color: #788598;
font-size: 13px;
line-height: 1.5;
}
.commission-filter {
display: flex;
align-items: flex-end;
justify-content: flex-end;
flex-wrap: wrap;
gap: 8px;
}
.commission-filter label {
display: grid;
gap: 5px;
}
.commission-filter label > span {
color: #7c889a;
font-size: 10px;
font-weight: 750;
letter-spacing: .04em;
text-transform: uppercase;
}
.commission-filter input,
.commission-filter select {
min-width: 145px;
min-height: 40px;
padding: 0 10px;
border: 1px solid #dce3ed;
border-radius: 8px;
background: #fff;
color: #3d4a60;
font-size: 12px;
}
.commission-kpis {
display: grid;
grid-template-columns:
repeat(6, minmax(150px, 1fr));
gap: 10px;
margin-bottom: 16px;
}
.commission-kpis.statement {
grid-template-columns:
repeat(3, minmax(180px, 1fr));
max-width: 850px;
}
.commission-kpis > article {
min-height: 112px;
padding: 15px 16px;
border: 1px solid #e0e6ef;
border-radius: 12px;
background: #fff;
}
.commission-kpis span,
.commission-kpis strong,
.commission-kpis small {
display: block;
}
.commission-kpis span {
color: #6e7b90;
font-size: 11px;
font-weight: 650;
}
.commission-kpis strong {
margin: 8px 0 6px;
color: #2d3a50;
font-size: 24px;
line-height: 1;
}
.commission-kpis small {
color: #8a95a6;
font-size: 10px;
}
.commission-kpis article.accent {
border-color: #dce1fb;
background: #f6f7ff;
}
.commission-kpis article.accent strong {
color: #5267cb;
}
.commission-kpis article.success {
border-color: #d7eee2;
background: #f7fcf9;
}
.commission-kpis article.success strong {
color: #21835b;
}
.commission-kpis article.warning {
border-color: #f0e3c8;
background: #fffaf2;
}
.commission-kpis article.warning strong {
color: #b77c21;
}
.commission-warning {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
padding: 12px 14px;
border: 1px solid #f1dfb8;
border-radius: 10px;
background: #fffaf0;
}
.commission-warning strong {
color: #a86e17;
font-size: 12px;
}
.commission-warning span {
color: #776d5b;
font-size: 11px;
}
.commission-warning.danger {
border-color: #efcfd3;
background: #fff6f7;
}
.commission-warning.danger strong {
color: #bf4651;
}
.commission-panel {
min-width: 0;
margin-bottom: 15px;
padding: 18px;
border: 1px solid #e1e7ef;
border-radius: 14px;
background: #fff;
}
.commission-panel-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
margin-bottom: 14px;
}
.commission-panel-head > div > span {
display: block;
margin-bottom: 3px;
color: #7b8798;
font-size: 10px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.commission-panel-head h2 {
margin: 0;
color: #29364b;
font-size: 18px;
}
.commission-panel-head > small {
color: #8792a3;
font-size: 11px;
}
.commission-table-wrap {
overflow-x: auto;
}
.commission-table {
width: 100%;
border-collapse: collapse;
}
.commission-table th {
padding: 9px 10px;
border-bottom: 1px solid #e5eaf1;
color: #768295;
font-size: 9px;
font-weight: 800;
text-align: left;
text-transform: uppercase;
white-space: nowrap;
}
.commission-table td {
padding: 11px 10px;
border-bottom: 1px solid #edf0f4;
color: #536076;
font-size: 11px;
vertical-align: middle;
white-space: nowrap;
}
.commission-table tbody tr:last-child td {
border-bottom: 0;
}
.commission-table td > strong {
color: #344157;
}
.commission-table td > small {
display: block;
margin-top: 3px;
font-size: 9px;
}
.commission-due {
color: #b77c21 !important;
}
.commission-action {
color: #5268cf;
font-size: 10px;
font-weight: 750;
text-decoration: none;
}
button.commission-action {
padding: 7px 9px;
border: 1px solid #d9dff8;
border-radius: 7px;
background: #f6f7ff;
cursor: pointer;
}
.inline-commission-form {
margin: 0;
}
.commission-muted {
color: #9aa3b1;
font-size: 10px;
}
.commission-empty {
padding: 25px !important;
color: #929cac !important;
text-align: center !important;
}
.commission-grid-two {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 14px;
}
.commission-rate-form {
display: grid;
grid-template-columns:
minmax(180px, 1.3fr)
minmax(110px, .65fr)
minmax(150px, .8fr)
auto;
align-items: end;
gap: 8px;
}
.commission-rate-form .input {
display: grid;
gap: 5px;
}
.commission-rate-form label,
.commission-action-form label {
color: #6f7c90;
font-size: 10px;
font-weight: 700;
}
.commission-rate-form input,
.commission-rate-form select,
.commission-action-form input,
.commission-action-form textarea {
width: 100%;
min-height: 40px;
padding: 8px 10px;
border: 1px solid #dce3ed;
border-radius: 8px;
background: #fff;
font-size: 12px;
}
.commission-help {
margin: 10px 0 0;
color: #8792a3;
font-size: 10px;
line-height: 1.5;
}
.commission-rate-history {
display: grid;
gap: 5px;
}
.commission-rate-history > div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 45px;
padding: 7px 9px;
border-radius: 8px;
background: #fafbfc;
}
.commission-rate-history span,
.commission-rate-history strong,
.commission-rate-history small {
display: block;
}
.commission-rate-history strong {
color: #3c485e;
font-size: 11px;
}
.commission-rate-history small {
margin-top: 2px;
color: #8a95a6;
font-size: 9px;
}
.commission-rate-history b {
color: #5268cf;
font-size: 12px;
}
.commission-status {
display: inline-flex;
min-height: 25px;
align-items: center;
padding: 0 8px;
border-radius: 999px;
background: #eef1f5;
color: #647186;
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
}
.commission-status.status-validated {
background: #eef1ff;
color: #5368cc;
}
.commission-status.status-paid {
background: #eaf8f1;
color: #25855e;
}
.commission-status.status-cancelled {
background: #fff0f2;
color: #bf4651;
}
.commission-header-actions {
display: flex;
align-items: center;
gap: 8px;
}
.commission-detail-list {
display: grid;
gap: 7px;
}
.commission-detail-list > div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 45px;
padding: 8px 9px;
border-radius: 8px;
background: #fafbfc;
}
.commission-detail-list span {
color: #798598;
font-size: 11px;
}
.commission-detail-list strong {
color: #3d495e;
font-size: 11px;
}
.commission-action-form {
display: grid;
gap: 8px;
margin-top: 10px;
}
.commission-full-button {
display: inline-flex;
width: 100%;
align-items: center;
justify-content: center;
}
.danger-zone {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid #f0dfe1;
}
.commission-paid-box {
padding: 14px;
border: 1px solid #d7eee2;
border-radius: 9px;
background: #f5fbf8;
}
.commission-paid-box strong,
.commission-paid-box span {
display: block;
}
.commission-paid-box strong {
color: #25815b;
font-size: 12px;
}
.commission-paid-box span {
margin-top: 4px;
color: #708579;
font-size: 10px;
}
@media (max-width: 1500px) {
.commission-kpis {
grid-template-columns:
repeat(3, minmax(170px, 1fr));
}
}
@media (max-width: 1100px) {
.commission-hero {
flex-direction: column;
}
.commission-filter {
width: 100%;
justify-content: flex-start;
}
.commission-grid-two {
grid-template-columns: 1fr;
}
.commission-rate-form {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.commission-kpis,
.commission-kpis.statement,
.commission-rate-form {
grid-template-columns: 1fr;
}
.commission-filter {
display: grid;
grid-template-columns: 1fr;
}
.commission-filter label,
.commission-filter input,
.commission-filter select,
.commission-filter button {
width: 100%;
}
.commission-header-actions {
align-items: flex-start;
flex-direction: column;
}
}
/* =========================================================
CORRECTION MENU MOBILE ICEKOM
========================================================= */
@media (max-width: 768px) {
.sidebar {
flex-direction: column !important;
align-items: stretch !important;
overflow-x: hidden !important;
overflow-y: auto !important;
}
.sidebar-logo {
width: 100% !important;
flex-shrink: 0;
}
.sidebar-nav {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
flex: none !important;
padding: 10px 14px !important;
}
.sidebar-section {
display: block !important;
width: 100% !important;
margin-top: 16px !important;
padding: 14px 14px 0 !important;
}
.sidebar-footer {
display: block !important;
width: 100% !important;
margin-top: auto !important;
padding: 14px !important;
}
.section-title {
display: block !important;
width: 100% !important;
margin: 0 0 7px !important;
padding: 0 10px !important;
}
.nav-item {
display: flex !important;
align-items: center !important;
width: 100% !important;
min-width: 0 !important;
gap: 12px !important;
padding: 11px 12px !important;
white-space: normal !important;
}
.nav-item .nav-icon {
flex: 0 0 22px !important;
}
.nav-item span:not(.nav-icon) {
min-width: 0 !important;
}
}
/* =========================================================
ICEKOM CHAT — VERSION MOBILE
========================================================= */
.chat-mobile-back {
display: none;
}
@media (max-width: 768px) {
/* Conteneur principal */
.chat-app {
display: block !important;
width: 100% !important;
max-width: none !important;
height: calc(100dvh - 115px) !important;
min-height: 480px !important;
max-height: none !important;
border-radius: 12px !important;
overflow: hidden !important;
}
/* ==========================================
LISTE DES CONVERSATIONS
========================================== */
.chat-sidebar {
display: flex !important;
width: 100% !important;
height: 100% !important;
border-right: 0 !important;
}
.chat-sidebar-head {
min-height: 62px;
padding: 11px 13px;
}
.chat-sidebar-head h1,
.chat-sidebar-head h2 {
font-size: 18px !important;
}
.chat-sidebar-head p {
font-size: 12px !important;
}
.chat-icon-button {
width: 42px;
height: 42px;
flex: 0 0 42px;
font-size: 22px;
touch-action: manipulation;
}
.chat-search {
padding: 10px 12px;
}
.chat-search input {
min-height: 44px;
padding: 0 13px;
font-size: 16px !important;
}
.chat-room-list {
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.chat-room-item {
min-height: 66px;
gap: 11px;
padding: 10px 13px;
touch-action: manipulation;
}
.chat-avatar {
width: 44px;
height: 44px;
flex: 0 0 44px;
font-size: 15px;
}
.chat-room-content strong {
font-size: 14px !important;
}
.chat-room-content small {
font-size: 12px !important;
}
/* ==========================================
CONVERSATION
========================================== */
.chat-main {
display: none !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
}
/*
* Lorsqu'une conversation est ouverte :
* masque la liste et affiche la conversation.
*/
.chat-app.mobile-conversation-open .chat-sidebar {
display: none !important;
}
.chat-app.mobile-conversation-open .chat-main {
display: block !important;
}
.chat-conversation {
height: 100% !important;
min-height: 0 !important;
grid-template-rows:
auto
minmax(0, 1fr)
auto
auto !important;
}
/* ==========================================
EN-TÊTE CONVERSATION
========================================== */
.chat-conversation-head {
min-height: 62px !important;
justify-content: flex-start !important;
gap: 9px;
padding: 8px 10px !important;
}
.chat-conversation-head > div {
min-width: 0;
flex: 1;
}
.chat-conversation-head strong {
overflow: hidden;
font-size: 15px !important;
text-overflow: ellipsis;
white-space: nowrap;
}
.chat-conversation-head small {
overflow: hidden;
font-size: 11px !important;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Bouton retour */
.chat-mobile-back {
display: inline-flex;
width: 42px;
height: 42px;
flex: 0 0 42px;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 10px;
background: #f0f3fb;
color: #4259d1;
font-size: 22px;
font-weight: 700;
cursor: pointer;
touch-action: manipulation;
}
/* ==========================================
MESSAGES
========================================== */
.chat-messages {
padding: 13px 10px 18px !important;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.chat-message {
margin-bottom: 9px;
}
.chat-message-body {
max-width: 86% !important;
}
.chat-bubble {
max-width: 100% !important;
padding: 8px 10px !important;
font-size: 14px !important;
line-height: 1.4 !important;
overflow-wrap: anywhere;
word-break: break-word;
}
.chat-message-author {
margin-bottom: 3px;
font-size: 11px !important;
}
.chat-message-meta {
font-size: 10px !important;
}
.chat-reply-box {
max-width: 100%;
font-size: 12px !important;
}
/* ==========================================
RÉPONSE
========================================== */
.chat-reply-preview {
gap: 8px;
padding: 7px 10px;
}
.chat-reply-preview small {
font-size: 10px !important;
}
.chat-reply-preview strong {
max-width: calc(100vw - 100px);
font-size: 12px !important;
}
/* ==========================================
SAISIE MESSAGE
========================================== */
.chat-compose {
grid-template-columns:
minmax(0, 1fr)
auto !important;
align-items: end;
gap: 7px;
padding:
8px
8px
max(8px, env(safe-area-inset-bottom))
8px !important;
}
.chat-compose textarea {
min-height: 44px !important;
max-height: 120px !important;
padding: 10px 11px !important;
border-radius: 12px !important;
/*
* 16px évite le zoom automatique
* de Safari/Chrome mobile.
*/
font-size: 16px !important;
}
.chat-send-button {
min-width: 72px;
min-height: 44px;
padding: 0 13px;
border-radius: 11px;
touch-action: manipulation;
}
/* ==========================================
MODAL NOUVELLE CONVERSATION
========================================== */
.chat-modal {
align-items: flex-end !important;
padding: 0 !important;
}
.chat-modal-dialog {
width: 100% !important;
max-width: none !important;
max-height: 88dvh !important;
padding:
16px
14px
max(16px, env(safe-area-inset-bottom))
14px !important;
border-radius:
18px
18px
0
0 !important;
}
.chat-new-tabs button {
min-height: 42px;
font-size: 13px;
}
.chat-user-choice {
min-height: 58px;
padding: 10px;
touch-action: manipulation;
}
.chat-member-select {
max-height: 45dvh;
}
}
/* =========================================================
FIX PAGINATION CAKEPHP
========================================================= */
.pagination-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 16px;
}
.pagination,
.pagination > ul {
display: flex !important;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.pagination li,
.pagination > ul > li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.pagination li::marker,
.pagination > ul > li::marker {
content: "" !important;
display: none !important;
}
.pagination li a,
.pagination li span,
.pagination > a,
.pagination > span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 34px;
padding: 0 11px;
border: 1px solid #dfe4ec;
border-radius: 8px;
background: #fff;
color: #59657a;
font-size: 12px;
font-weight: 650;
line-height: 1;
text-decoration: none;
}
.pagination li a:hover,
.pagination > a:hover {
border-color: #cbd4f7;
background: #f3f5ff;
color: #4860d8;
}
.pagination .active a,
.pagination .active span {
border-color: #4961df !important;
background: #4961df !important;
color: #fff !important;
}
/* Ne pas afficher précédent/suivant lorsqu'ils sont inutilisables */
.pagination .disabled {
display: none !important;
}
/* ==========================================================
ICEKOM_INVOICE_PAGINATION_V12_40
Liste factures : suppression des puces CakePHP Paginator
========================================================== */
.iv6-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
margin-top: 15px;
padding: 0;
list-style: none !important;
}
.iv6-pagination > li,
.iv6-pagination li {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.iv6-pagination > li::marker,
.iv6-pagination li::marker {
content: "" !important;
display: none !important;
}
.iv6-pagination > li::before,
.iv6-pagination li::before {
content: none !important;
display: none !important;
}
.iv6-pagination > li > a,
.iv6-pagination > li > span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
min-height: 30px;
margin: 0;
padding: 0 8px;
border: 1px solid #dbe3ea;
border-radius: 7px;
background: #fff;
color: #526476;
text-decoration: none;
font-size: 10px;
line-height: 1;
box-sizing: border-box;
}
.iv6-pagination > li.active {
border: 0 !important;
background: transparent !important;
}
.iv6-pagination > li.active > a,
.iv6-pagination > li.active > span {
border-color: #174d70 !important;
background: #174d70 !important;
color: #fff !important;
}
.iv6-pagination > li.disabled > a,
.iv6-pagination > li.disabled > span {
opacity: .45;
cursor: default;
pointer-events: none;
}
/* ==========================================================
ICEKOM_QUOTES_PAGINATION_V12_62
Devis / détails devis :
suppression des puces noires CakePHP Paginator
========================================================== */
/*
* CakePHP peut générer :
*
*
*
* ou directement des selon le template actif.
*
* On neutralise donc les puces à tous les niveaux.
*/
.pagination,
.pagination ul,
.pagination ol {
list-style: none !important;
}
.pagination ul,
.pagination ol {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
margin: 0 !important;
padding: 0 !important;
}
.pagination > li,
.pagination ul > li,
.pagination ol > li,
.pagination li {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.pagination > li::marker,
.pagination ul > li::marker,
.pagination ol > li::marker,
.pagination li::marker {
content: "" !important;
font-size: 0 !important;
}
.pagination > li::before,
.pagination ul > li::before,
.pagination ol > li::before,
.pagination li::before {
content: none !important;
display: none !important;
}
/*
* Garde une pagination propre et cohérente avec le CRM.
*/
.pagination li > a,
.pagination li > span,
.pagination > a,
.pagination > span {
display: inline-flex;
min-width: 34px;
min-height: 34px;
align-items: center;
justify-content: center;
padding: 0 9px;
border: 1px solid #dce4ef;
border-radius: 8px;
background: #fff;
color: #526176;
font-size: 10px;
line-height: 1;
text-decoration: none;
box-sizing: border-box;
}
.pagination li.active > a,
.pagination li.active > span,
.pagination .active > a,
.pagination .active > span {
border-color: #5269d9 !important;
background: #5269d9 !important;
color: #fff !important;
}
.pagination li.disabled > a,
.pagination li.disabled > span,
.pagination .disabled > a,
.pagination .disabled > span {
opacity: .42;
cursor: default;
pointer-events: none;
}
/*
* Certains thèmes ajoutent une puce via le conteneur lui-même.
*/
.pagination::before,
.pagination::after,
.pagination ul::before,
.pagination ul::after {
list-style: none !important;
}
/*
* Le wrapper reste aligné à droite comme sur la page Devis actuelle.
*/
div.pagination {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
margin-top: 14px;
padding: 0 !important;
}
/* ==========================================================
ICEKOM_QUOTES_PAGINATION_LAST_DOT_V12_63
Cache aussi les éventuels caractères texte parasites
placés directement dans le conteneur de pagination.
========================================================== */
/*
* Le point restant visible n'est manifestement plus un marker ,
* mais un caractère texte/pseudo-élément dans le wrapper.
* On met donc le wrapper à font-size:0 puis on rétablit
* explicitement la taille sur les vrais boutons.
*/
div.pagination,
.pagination {
font-size: 0 !important;
line-height: 0 !important;
}
.pagination::before,
.pagination::after,
.pagination ul::before,
.pagination ul::after,
.pagination ol::before,
.pagination ol::after,
.pagination li::before,
.pagination li::after {
content: none !important;
display: none !important;
}
.pagination ul,
.pagination ol,
.pagination li {
font-size: 0 !important;
line-height: 0 !important;
list-style: none !important;
}
.pagination a,
.pagination span,
.pagination button {
font-size: 10px !important;
line-height: 1 !important;
}
/*
* Assure la disparition totale de tout marker.
*/
.pagination li::marker,
.pagination ul li::marker,
.pagination ol li::marker {
content: "" !important;
font-size: 0 !important;
}
/* ==========================================================
ICEKOM CRM — THEME CLAIR / BLUE ICE
Inspiré de la 3e maquette
À placer TOUT EN BAS de app.css
========================================================== */
:root {
/* Fond général */
--ice-bg: #f3f7fd;
--ice-bg-soft: #f8fbff;
/* Surfaces */
--ice-surface: #ffffff;
--ice-surface-blue: #f3f7ff;
/* Sidebar */
--ice-sidebar: #071d38;
--ice-sidebar-2: #0b2b50;
--ice-sidebar-card: #102f57;
/* Couleur principale */
--ice-primary: #3272f6;
--ice-primary-hover: #2462dd;
--ice-primary-soft: #e9f1ff;
/* Texte */
--ice-text: #102143;
--ice-text-secondary: #637493;
--ice-text-muted: #8b9ab3;
/* Bordures */
--ice-border: #dce5f2;
--ice-border-soft: #e9eff7;
/* Couleurs métiers */
--ice-green: #16a36a;
--ice-green-soft: #eafaf3;
--ice-orange: #e99a16;
--ice-orange-soft: #fff7e8;
--ice-red: #e83e5d;
--ice-red-soft: #fff0f3;
--ice-purple: #7956e8;
--ice-purple-soft: #f3efff;
--ice-cyan: #159cc7;
--ice-cyan-soft: #eaf9fd;
/* Ombres */
--ice-shadow:
0 4px 18px rgba(38, 68, 110, 0.05);
--ice-shadow-hover:
0 8px 24px rgba(38, 68, 110, 0.10);
/* Rayon */
--ice-radius: 14px;
}
/* ==========================================================
PAGE
========================================================== */
html,
body {
background: var(--ice-bg) !important;
color: var(--ice-text);
}
body {
background:
radial-gradient(
circle at 75% 0%,
rgba(76, 139, 245, 0.08),
transparent 32%
),
var(--ice-bg) !important;
}
/* ==========================================================
ZONE PRINCIPALE
========================================================== */
main,
.main,
.main-content,
.content,
.content-wrapper,
.page-content,
.dashboard-content {
background: transparent !important;
}
/* ==========================================================
BARRE DU HAUT
========================================================== */
header,
.topbar,
.top-bar,
.navbar,
.header,
.app-header {
background: rgba(255, 255, 255, 0.94) !important;
border-bottom: 1px solid var(--ice-border-soft) !important;
box-shadow: 0 2px 12px rgba(40, 70, 110, 0.04) !important;
backdrop-filter: blur(14px);
}
/* ==========================================================
SIDEBAR ICEKOM
========================================================== */
.sidebar,
aside.sidebar,
.app-sidebar,
.main-sidebar,
.left-sidebar {
background:
linear-gradient(
180deg,
#0a2a51 0%,
#071d38 55%,
#061a31 100%
) !important;
border-right: 1px solid rgba(108, 167, 255, 0.20) !important;
box-shadow:
6px 0 25px rgba(9, 31, 60, 0.08) !important;
}
/* ==========================================================
MENU SIDEBAR
========================================================== */
.sidebar a,
.sidebar button,
.app-sidebar a,
.app-sidebar button,
.main-sidebar a {
color: #dce9fa;
}
/* entrée normale */
.sidebar .nav-link,
.sidebar .menu-link,
.sidebar .sidebar-link,
.app-sidebar .nav-link {
background: transparent;
border: 1px solid transparent;
border-radius: 10px;
color: #d8e7fa;
transition:
background 0.2s ease,
border-color 0.2s ease,
transform 0.2s ease;
}
/* survol */
.sidebar .nav-link:hover,
.sidebar .menu-link:hover,
.sidebar .sidebar-link:hover,
.app-sidebar .nav-link:hover {
background: rgba(78, 137, 235, 0.13) !important;
border-color: rgba(92, 157, 255, 0.20) !important;
color: #ffffff !important;
}
/* menu actif */
.sidebar .active,
.sidebar .nav-link.active,
.sidebar .menu-link.active,
.sidebar .sidebar-link.active,
.app-sidebar .nav-link.active {
background:
linear-gradient(
135deg,
#2869dc 0%,
#3b82f6 100%
) !important;
border: 1px solid rgba(119, 177, 255, 0.65) !important;
box-shadow:
0 5px 15px rgba(37, 99, 235, 0.25) !important;
color: #ffffff !important;
}
/* ==========================================================
BLOCS PRINCIPAUX
========================================================== */
.card,
.panel,
.box,
.widget,
.dashboard-card,
.section-card,
.content-card {
background: rgba(255, 255, 255, 0.96) !important;
border:
1px solid var(--ice-border) !important;
border-radius:
var(--ice-radius) !important;
box-shadow:
var(--ice-shadow) !important;
transition:
box-shadow 0.2s ease,
transform 0.2s ease,
border-color 0.2s ease;
}
/* hover discret */
.card:hover,
.dashboard-card:hover,
.widget:hover {
border-color: #ccd9eb !important;
box-shadow: var(--ice-shadow-hover) !important;
}
/* ==========================================================
BANDEAU VUE DIRECTION
========================================================== */
.direction-header,
.dashboard-header,
.hero-panel,
.page-hero,
.command-header {
background:
linear-gradient(
120deg,
#ffffff 0%,
#f8fbff 55%,
#edf4ff 100%
) !important;
border: 1px solid #d8e4f4 !important;
border-radius: 16px !important;
box-shadow:
0 5px 22px rgba(48, 81, 125, 0.05) !important;
position: relative;
overflow: hidden;
}
/* effet décoratif très léger */
.direction-header::after,
.dashboard-header::after,
.hero-panel::after,
.page-hero::after {
content: "";
position: absolute;
width: 360px;
height: 180px;
right: 10%;
bottom: -120px;
border-radius: 50%;
background:
rgba(65, 129, 241, 0.06);
pointer-events: none;
}
/* ==========================================================
TITRES
========================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--ice-text);
}
.section-label,
.eyebrow,
.kicker,
.overline {
color: var(--ice-primary) !important;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* ==========================================================
CARTES KPI FINANCIERES
========================================================== */
.metric-card,
.kpi-card,
.stat-card,
.finance-card {
background: #ffffff;
border:
1px solid var(--ice-border);
border-radius: 13px;
box-shadow:
0 3px 14px rgba(39, 71, 115, 0.04);
}
/* CA facturé */
.metric-blue,
.kpi-primary,
.card-primary {
background:
linear-gradient(
135deg,
#2556a4 0%,
#3679ee 100%
) !important;
border-color: #3678e8 !important;
color: #ffffff !important;
box-shadow:
0 7px 20px rgba(44, 103, 210, 0.20) !important;
}
.metric-blue *,
.kpi-primary *,
.card-primary * {
color: inherit;
}
/* Encaissement */
.metric-green,
.kpi-success {
background:
linear-gradient(
135deg,
#f7fffb 0%,
var(--ice-green-soft) 100%
) !important;
border-color:
#bce8d4 !important;
}
/* Reste à encaisser */
.metric-orange,
.kpi-warning {
background:
linear-gradient(
135deg,
#fffdf9 0%,
var(--ice-orange-soft) 100%
) !important;
border-color:
#f2d79e !important;
}
/* Factures retard */
.metric-red,
.kpi-danger {
background:
linear-gradient(
135deg,
#fffafb 0%,
var(--ice-red-soft) 100%
) !important;
border-color:
#f5c9d1 !important;
}
/* Violet */
.metric-purple {
background:
linear-gradient(
135deg,
#fdfcff 0%,
var(--ice-purple-soft) 100%
) !important;
border-color:
#ded2fa !important;
}
/* ==========================================================
CARTES COMMAND CENTER
========================================================== */
.command-card,
.action-card,
.attention-card,
.command-item {
background:
linear-gradient(
180deg,
#ffffff 0%,
#fafcff 100%
) !important;
border:
1px solid #dbe5f2 !important;
border-radius:
11px !important;
box-shadow:
none !important;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
}
.command-card:hover,
.action-card:hover,
.attention-card:hover {
border-color:
#b9cae3 !important;
box-shadow:
0 5px 16px rgba(45, 78, 123, 0.07) !important;
transform:
translateY(-1px);
}
/* ==========================================================
ICÔNES
========================================================== */
.icon-box,
.metric-icon,
.stat-icon,
.command-icon,
.tile-icon {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background:
var(--ice-primary-soft);
color:
var(--ice-primary);
}
/* vert */
.icon-success {
color: var(--ice-green) !important;
background: #daf6e9 !important;
}
/* orange */
.icon-warning {
color: var(--ice-orange) !important;
background: #fff0cd !important;
}
/* rouge */
.icon-danger {
color: var(--ice-red) !important;
background: #ffe1e7 !important;
}
/* violet */
.icon-purple {
color: var(--ice-purple) !important;
background: #ebe4ff !important;
}
/* ==========================================================
TEXTES / CHIFFRES
========================================================== */
.metric-value,
.stat-value,
.kpi-value,
.amount,
.big-number {
color: var(--ice-text);
font-weight: 700;
}
.text-success,
.amount-success {
color: var(--ice-green) !important;
}
.text-warning,
.amount-warning {
color: #c77800 !important;
}
.text-danger,
.amount-danger {
color: var(--ice-red) !important;
}
.text-muted,
.muted,
small {
color: var(--ice-text-secondary);
}
/* ==========================================================
BOUTONS
========================================================== */
.btn-primary,
.button-primary,
button.primary {
background:
linear-gradient(
135deg,
#3272f6 0%,
#2866e5 100%
) !important;
border:
1px solid #2866e5 !important;
color:
#ffffff !important;
border-radius:
9px !important;
box-shadow:
0 4px 12px rgba(50, 114, 246, 0.18) !important;
}
.btn-primary:hover,
.button-primary:hover {
background:
#215bd1 !important;
box-shadow:
0 6px 16px rgba(50, 114, 246, 0.24) !important;
}
/* bouton secondaire */
.btn-secondary,
.button-secondary,
.btn-outline-primary {
background:
#ffffff !important;
border:
1px solid #cedbef !important;
color:
var(--ice-primary) !important;
border-radius:
9px !important;
}
.btn-secondary:hover,
.button-secondary:hover,
.btn-outline-primary:hover {
background:
var(--ice-primary-soft) !important;
}
/* ==========================================================
ONGLETS DIRECTION / ÉQUIPE / ETC
========================================================== */
.tabs,
.nav-tabs,
.role-tabs,
.dashboard-tabs {
background:
rgba(242, 246, 252, 0.90) !important;
border-radius:
10px;
padding:
4px;
}
.nav-tabs .nav-link,
.tabs a,
.role-tabs a {
color:
#586b89 !important;
border:
0 !important;
border-radius:
8px !important;
}
.nav-tabs .nav-link.active,
.tabs a.active,
.role-tabs a.active {
background:
#ffffff !important;
color:
var(--ice-primary) !important;
box-shadow:
0 3px 10px rgba(40, 70, 110, 0.09);
}
/* ==========================================================
BADGES
========================================================== */
.badge {
border-radius:
999px !important;
padding:
4px 8px;
}
.badge-primary {
background:
#e4eeff !important;
color:
#2867dc !important;
}
.badge-success {
background:
#ddf7e9 !important;
color:
#138454 !important;
}
.badge-warning {
background:
#fff0cf !important;
color:
#a96800 !important;
}
.badge-danger {
background:
#ffe2e7 !important;
color:
#d52d4a !important;
}
/* ==========================================================
INPUT / RECHERCHE
========================================================== */
input,
select,
textarea,
.search-input {
background:
#ffffff !important;
border:
1px solid #d9e3ef !important;
color:
var(--ice-text) !important;
border-radius:
9px !important;
}
input:focus,
select:focus,
textarea:focus {
border-color:
#8eb5fb !important;
box-shadow:
0 0 0 3px rgba(50, 114, 246, 0.10) !important;
outline:
none !important;
}
/* ==========================================================
TABLEAUX / DOCUMENTS
========================================================== */
table {
color:
var(--ice-text);
}
table thead th {
background:
#f6f9fd !important;
color:
#536784;
border-bottom:
1px solid var(--ice-border) !important;
}
table tbody td {
border-color:
#edf1f7 !important;
}
table tbody tr:hover {
background:
#f8fbff !important;
}
/* ==========================================================
SCROLLBAR
========================================================== */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background:
#edf3fa;
}
::-webkit-scrollbar-thumb {
background:
#c6d4e7;
border-radius:
10px;
}
::-webkit-scrollbar-thumb:hover {
background:
#aebfd8;
}
/* ==========================================================
RESPONSIVE
========================================================== */
@media (max-width: 768px) {
.card,
.panel,
.dashboard-card,
.metric-card,
.command-card {
border-radius:
11px !important;
}
.direction-header,
.dashboard-header,
.hero-panel {
border-radius:
12px !important;
}
}