/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification\ for details on configuring this project to bundle and minify static web assets. */ body { padding-top: 60px; padding-bottom: 20px; font-size: 0.8em; background-color: #eeecea; /* Stone 3 */ font-family: 'Segoe UI', 'Helvetica Neue', sans-serif; margin: 0; } .form-control { font-size: 0.8em; } .container-fluid { margin: 5px; padding: 0; width: 100% !important; } .h-100 { height: 100% !important; } .h-90 { height: 90% !important; } .h-80 { height: 80% !important; } .h-70 { height: 70% !important; } .h-65 { height: 65% !important; } .h-55 { height: 55% !important; } /* Wrapping element */ /* Set some basic padding to keep content from hitting the edges */ .body-content { padding-left: 0; padding-right: 0; } .highlight-row { background-color: #28a745; } /* Company details tabs*/ .companyTab { width: 100%; border-bottom: solid 1px rgba(222, 226, 230, 1); border-right: solid 1px rgba(222, 226, 230, 1); border-left: solid 1px rgba(222, 226, 230, 1); padding-left: 5px; } .border-3 { border-width: 3px !important; border-color: greenyellow; } .ui-autocomplete { max-height: 400px; overflow-y: auto; /* prevent horizontal scrollbar */ overflow-x: hidden; z-index: 2000; } .col { padding-left: 3px; padding-right: 3px; } .box-content-left { /*position: absolute; display: inline;*/ float: left; padding: 0; vertical-align: top; height: 100%; /*border-left: solid 1px rgba(51, 122, 183, 0.50);*/ /*background-color: rgba(222, 226, 230, 1);*/ width: 75%; } .box-aligned-right { position: absolute; /*display: flex;*/ right: 0%; padding: 0; margin: 0; vertical-align: top; height: 100%; border-left: solid 1px rgba(51, 122, 183, 0.50); background-color: rgba(222, 226, 230, 1); width: 25%; } .form-group { margin-bottom: 2px; } td.details-control { background: url('../images/details_open.png') no-repeat center center; cursor: pointer; } tr.shown td.details-control { background: url('../images/details_close.png') no-repeat center center; } .col-2-UpRight { padding: 0; margin: 0; } /*.btn { color: white; padding: 0; margin: 0; }*/ .datatableCursor tr { cursor: pointer; } /* Carousel */ .carousel-caption p { font-size: 20px; line-height: 1.4; } /* Make .svg files in the carousel display properly in older browsers */ .carousel-inner .item img[src$=".svg"] { width: 100%; } /* QR code generator */ #qrCode { margin: 15px; } /* Hide/rearrange for smaller screens */ @media screen and (max-width: 767px) { /* Hide captions */ .carousel-caption { display: none; } } html { font-size: 14px; } @media (min-width: 768px) { html { font-size: 16px; } } html, body { height: 100%; margin: 0; } body > .vh-100 { /* votre */ display: flex; flex-direction: column; } main.dashboard-main { flex: 1 1 auto; /* prend tout l’espace restant */ overflow: hidden; display: flex; flex-direction: column; } .dashboard-content { flex: 1; /* 90% de l’espace (header+footer 10% env.) */ display: flex; flex-direction: column; } .dashboard-row { overflow: auto; } .row-first { flex: 0 0 50%; /* 50% de l’espace .dashboard-content */ } .row-spacer { flex: 0 0 10%; /* 10% d’espacement */ } .row-second { flex: 0 0 40%; /* 40% restant */ } /* Layout */ /* Navbar styles */ .navbar { background-color: #401F4C !important; /* Branding purple */ padding-top: 8px; padding-bottom: 8px; font-size: 15px; } .navbar .navbar-brand { display: flex; align-items: center; font-size: 16px; font-weight: bold; color: #ffffff !important; } .navbar .navbar-brand img { height: 30px; margin-right: 10px; } /* Nav links */ .navbar-nav .nav-link { color: #eee !important; font-size: 14.5px; margin-right: 15px; } .navbar-nav .nav-link:hover { color: #0dcaf0 !important; text-decoration: underline; } /* Highlight "Hello" text */ .navbar .user-info { color: #fff; font-weight: 600; font-size: 15px; background-color: #6d3d85; padding: 6px 14px; border-radius: 8px; margin-right: 8px; box-shadow: 0 0 4px rgba(255, 255, 255, 0.1); } /* Buttons */ .navbar .btn-outline-secondary { border-color: #eee; color: #eee; font-weight: 500; margin-left: 5px; } .navbar .btn-outline-secondary:hover { background-color: #eee; color: #401F4C; } /* Log off button */ .navbar .btn-logout { border-color: #dc3545; color: #dc3545; font-weight: 600; margin-left: 5px; } .navbar .btn-logout:hover { background-color: #dc3545; color: white; } footer.footer { height: 40px; /* 20px trop bas si tu veux lisible */ background-color: #2a1534; color: #eee; font-size: 14px; font-weight: 500; display: flex; align-items: center; justify-content: center; padding: 0 10px; } .btn-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; } .action-cell-new { height: 100%; vertical-align: middle; } .action-cell-new .btn-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin: auto; } .bg-brand-teal { background-color: #1f607c !important; /* ou le code exact de ton branding teal */ color: white !important; } .bg-brand-stone1 { background-color: #e3ddd4 !important; /* ou le code exact de ton branding teal */ color: #1f607c !important; } /*.text-brand-teal { }*/ .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } html { position: relative; min-height: 100%; } body { margin-bottom: 60px; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } .h-30 { height: 30% !important; } .h-50 { height: 50% !important; } .h-80 { height: 80% !important; } .h-100 { height: 100% !important; } .vh-95 { height: 95vh !important; } .vh-70 { height: 70vh !important; } .vh-60 { height: 60vh !important; } .vh-50 { height: 50vh !important; } .vh-40 { height: 40vh !important; } .vh-30 { height: 30vh !important; } .vh-10 { height: 10vh !important; } .vw-90 { width: 90vw !important; } .padding-t-10 { padding-top: 10px !important; } /* Dark mode styles */ html[data-bs-theme='dark'] { background-color: #121212; color: #e0e0e0; } html[data-bs-theme='dark'] .navbar { background-color: #1f1f1f !important; color: #fff; } html[data-bs-theme='dark'] .navbar a, html[data-bs-theme='dark'] .nav-link, html[data-bs-theme='dark'] .navbar-brand { color: #ffffff !important; } html[data-bs-theme='dark'] .navbar a:hover { color: #0dcaf0 !important; } html[data-bs-theme='dark'] .btn-outline-dark { color: #f8f9fa; border-color: #f8f9fa; } html[data-bs-theme='dark'] .btn-outline-dark:hover { background-color: #f8f9fa; color: #000; } #mainNavbar { height: 56px; /* ajustez si votre navbar est plus haute */ } .dashboard-footer { height: 40px; line-height: 40px; /* pour centrer verticalement le texte */ background: #2b2a27; /* un peu plus foncé que le purple */ color: white; text-align: center; font-size: 0.9rem; } /* Et on empêche le body de scroller */ html, body { height: 100%; margin: 0; overflow: hidden; } /* On positionne le main entre header et footer */ body > main.dashboard-main { flex: 1 1 auto; overflow: hidden; display: flex; justify-content: center; align-items: center; padding: 1rem; } /*.card-branded-container { height: 87vh; width: 98vw; display: flex; flex-direction: column; } .card.card-branded { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; } .card-branded .card-header { background-color: #1f607c;*/ /* IMI Teal */ /*color: #fff; border-bottom: none; font-weight: 700; font-size: x-large; height: 50px; } .card.card-branded .card-body { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; }*/ .card-branded-container { display: flex; flex-direction: column; height: calc(94vh - 60px); /* ajustement précis selon navbar */ overflow: hidden; } .card-branded { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .card-header { background-color: #1f607c; color: #fff; font-weight: 700; font-size: x-large; height: 50px; flex-shrink: 0; } .card-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; background-color: #eeecea; } .hover-effect { transition: color 0.2s ease, text-decoration 0.2s ease; } .hover-effect:hover { color: #0dcaf0 !important; /* une couleur teal claire de ton branding */ text-decoration: underline; cursor: pointer; } /* —— Brand card wrapper —— */ /* Branding commun aux cartes et modals */ .brand-modal .modal-content { border: none; border-radius: .5rem; overflow: visible !important; } .brand-modal .modal-header { background-color: #1f607c; /* IMI Teal */ color: #fff; border-bottom: none; } .brand-modal .modal-footer { border-top: none; } /* Spinner overlay centré */ #global-spinner { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.7); display: none; /* caché par défaut */ justify-content: center; align-items: center; z-index: 9999; /* devant tout le reste */ } #global-spinner .spinner-border { width: 3rem; height: 3rem; } .hightlightRow { background-color: rgba(247, 198, 49, 0.8) !important; } .bg-brand-teal { background-color: #1f607c !important; /* ou le code exact de ton branding teal */ color: white !important; } .bg-brand-stone1 { background-color: #e3ddd4 !important; /* ou le code exact de ton branding stone 1 */ color: #1f607c !important; } /* Pour les navigateurs WebKit (Chrome, Edge, Safari) */ .dataTables_wrapper ::-webkit-scrollbar { width: 10px; height: 10px; background-color: red; /* couleur de fond */ } .dataTables_wrapper ::-webkit-scrollbar-thumb { background-color: red; /* couleur du curseur */ border-radius: 10px; } /* Pour Firefox */ .dataTables_wrapper { scrollbar-color: red; /* thumb background */ scrollbar-width: thin; } /* login */ .login-wrapper { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding-top: 10vh; /* Approx. 35% visual spacing from top */ } .login-card { background-color: #ffffff; border-radius: 1.25rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06); padding: 2.5rem 3rem; width: 100%; max-width: 460px; /*animation: fadeIn 0.6s ease-in-out;*/ } .login-logo { width: 160px; margin-bottom: 1.5rem; } .login-title { color: #2b2a27; /* Jet */ font-weight: 600; font-size: 2rem; letter-spacing: 0.5px; } .login-subtitle { color: #441f54; /* Purple IMI */ font-size: 0.95rem; margin-bottom: 1.8rem; font-weight: 500; } .btn-login { background-color: #441f54; border: none; color: white; width: 100%; font-weight: 600; padding: 0.6rem 0; transition: background-color 0.2s ease, color 0.2s ease; } .btn-login:hover { background-color: #33FF77; color: black; } .btn-outline-secondary.btn-sm { padding: 0.4rem 0.9rem; font-size: 0.875rem; } .btn-teal { background-color: #1f607c; border: none; color: white; font-weight: 600; padding: 0.6rem 0; width: 100%; transition: background-color 0.2s ease; } .btn-teal:hover { background-color: #154356; color: white; } /* fond gris clair pour les écrans anon */ .bg-light-anon { background-color: #eeecea !important; } /* le “card” centré */ .login-card { background-color: #fff; padding: 2rem; border-radius: 1rem; box-shadow: 0 4px 16px rgba(0,0,0,0.1); width: 100%; max-width: 360px; text-align: center; } /* le logo IMI dans le card (pas en haut de page) */ .login-card .login-logo { max-width: 120px; margin-bottom: 1rem; } /* titre principal */ .login-card .login-title { font-size: 1.75rem; margin-bottom: 0.5rem; } /* sous-texte (client name, you are now …) */ .login-card .login-subtitle { font-size: 1rem; color: #4a4a4a; margin-bottom: 1rem; } /* bouton login */ .btn-login { background-color: #441f54; color: #fff; font-weight: 500; padding: 0.75rem; border-radius: 0.5rem; border: none; } .btn-login:hover { background-color: #321642; color: #fff; }